From 403062e8da8014cfd241a61815936b0d22458bc0 Mon Sep 17 00:00:00 2001 From: Chris L Date: Thu, 6 Jan 2022 22:54:41 +0100 Subject: [PATCH] Refactored Labeled Selects to MUI Selects, improved test cases #164 --- src/Components/AppSettings/index.jsx | 5 +- .../FirmwareSelector/__tests__/index.test.jsx | 166 ++++++++-------- src/Components/FirmwareSelector/index.jsx | 183 ++++++++++-------- src/Components/FirmwareSelector/style.scss | 17 +- src/Components/Input/LabeledSelect/index.jsx | 37 ++-- src/Components/Input/Select/index.jsx | 2 +- .../MainContent/__tests__/index.test.jsx | 20 +- .../MelodyEditor/__tests__/index.test.jsx | 37 ++-- src/Components/MelodyEditor/index.jsx | 48 +++-- src/Components/MelodyEditor/style.scss | 7 - src/translations/de/common.json | 4 +- src/translations/en/common.json | 4 +- src/translations/es/common.json | 4 +- src/translations/zh-CN/common.json | 4 +- src/translations/zh-TW/common.json | 4 +- 15 files changed, 280 insertions(+), 262 deletions(-) diff --git a/src/Components/AppSettings/index.jsx b/src/Components/AppSettings/index.jsx index d20e736a7..5e4c6b0ba 100644 --- a/src/Components/AppSettings/index.jsx +++ b/src/Components/AppSettings/index.jsx @@ -4,6 +4,7 @@ import React from 'react'; import Divider from '@mui/material/Divider'; import FormControl from '@mui/material/FormControl'; +import Stack from '@mui/material/Stack'; import Checkbox from '../Input/Checkbox'; import Overlay from '../Overlay'; @@ -61,7 +62,9 @@ function AppSettings({ component="fieldset" variant="standard" > - {settingElements} + + {settingElements} + diff --git a/src/Components/FirmwareSelector/__tests__/index.test.jsx b/src/Components/FirmwareSelector/__tests__/index.test.jsx index 6a1d76cb0..c831d1b04 100644 --- a/src/Components/FirmwareSelector/__tests__/index.test.jsx +++ b/src/Components/FirmwareSelector/__tests__/index.test.jsx @@ -39,18 +39,16 @@ describe('FirmwareSelector', () => { /> ); - expect(screen.getByText(/forceFlashText/i)).toBeInTheDocument(); - expect(screen.getByText(/forceFlashHint/i)).toBeInTheDocument(); - expect(screen.getByText(/migrateFlashText/i)).toBeInTheDocument(); - expect(screen.getByText(/migrateFlashHint/i)).toBeInTheDocument(); - expect(screen.getByText(/forceFlashText/i)).toBeInTheDocument(); + expect(screen.getByText('forceFlashText')).toBeInTheDocument(); + expect(screen.getByText('migrateFlashText')).toBeInTheDocument(); + expect(screen.getByText('forceFlashText')).toBeInTheDocument(); - expect(screen.getByText("escButtonSelect")).toBeInTheDocument(); - expect(screen.getByText(/escButtonSelectLocally/i)).toBeInTheDocument(); - expect(screen.getByText(/buttonCancel/i)).toBeInTheDocument(); + expect(screen.getByText('escButtonSelect')).toBeInTheDocument(); + expect(screen.getByText('escButtonSelectLocally')).toBeInTheDocument(); + expect(screen.getByText('buttonCancel')).toBeInTheDocument(); - expect(screen.getByText(/selectFirmware/i)).toBeInTheDocument(); - expect(screen.getByText(/selectTarget/i)).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'selectFirmware selectFirmware' })).toBeInTheDocument(); + expect(screen.getByText('selectTarget')).toBeInTheDocument(); }); it('should allow changing firmware options for BLHeli_S', async() => { @@ -89,9 +87,7 @@ describe('FirmwareSelector', () => { ); expect(screen.getByText(/forceFlashText/i)).toBeInTheDocument(); - expect(screen.getByText(/forceFlashHint/i)).toBeInTheDocument(); expect(screen.getByText(/migrateFlashText/i)).toBeInTheDocument(); - expect(screen.getByText(/migrateFlashHint/i)).toBeInTheDocument(); expect(screen.getByText(/forceFlashText/i)).toBeInTheDocument(); expect(screen.getByText("escButtonSelect")).toBeInTheDocument(); @@ -101,59 +97,29 @@ describe('FirmwareSelector', () => { expect(screen.getByText(/selectFirmware/i)).toBeInTheDocument(); expect(screen.getByText(/selectTarget/i)).toBeInTheDocument(); - fireEvent.change(screen.getByRole(/combobox/i, { name: 'Firmware' }), { - target: { - value: 'BLHeli_S', - name: 'Firmware', - }, - }); - - fireEvent.change(screen.getByRole(/combobox/i, { name: 'ESC' }), { - target: { - value: '#S_H_50#', - name: 'ESC', - }, - }); - - fireEvent.change(screen.getByRole(/combobox/i, { name: 'Version' }), { - target: { - value: '16.7 [Official]', - name: 'Version', - }, - }); - - const checkboxes = screen.getAllByRole(/checkbox/i); - for(let i = 0; i < checkboxes.length; i += 1) { - userEvent.click(checkboxes[i]); - } + // Firmware selection + fireEvent.mouseDown(screen.getByRole('button', { name: 'selectFirmware BLHeli_S' })); + + let element = screen.getByRole('option', { name: 'Bluejay' }); + userEvent.click(element); + + // Layout selection + fireEvent.mouseDown(screen.getByRole('button', { name: 'selectEsc S-H-90' })); + + element = screen.getByRole('option', { 'name': 'S-H-50' }); + userEvent.click(element); + + // Version selection + fireEvent.mouseDown(screen.getByRole('button', { name: 'selectVersion selectVersion' })); + + element = screen.getByRole('option', { 'name': '0.15 (Test)' }); + userEvent.click(element); + + // PWM selection + fireEvent.mouseDown(screen.getByRole('button', { name: 'selectPwmFrequency selectPwmFrequency' })); - fireEvent.change(screen.getByRole(/combobox/i, { name: 'Firmware' }), { - target: { - value: 'Bluejay', - name: 'Firmware', - }, - }); - - fireEvent.change(screen.getByRole(/combobox/i, { name: 'ESC' }), { - target: { - value: '#S_H_50#', - name: 'ESC', - }, - }); - - fireEvent.change(screen.getByRole(/combobox/i, { name: 'Version' }), { - target: { - value: 'https://github.com/mathiasvr/bluejay/releases/download/v0.10/{0}_v0.10.hex', - name: 'Version', - }, - }); - - fireEvent.change(screen.getByRole(/combobox/i, { name: 'PWM Frequency' }), { - target: { - value: '96', - name: 'PWM Frequency', - }, - }); + element = screen.getByRole('option', { 'name': '96' }); + userEvent.click(element); userEvent.click(screen.getByText('escButtonSelect')); expect(onSubmit).toHaveBeenCalled(); @@ -202,26 +168,72 @@ describe('FirmwareSelector', () => { ); expect(screen.getByText(/forceFlashText/i)).toBeInTheDocument(); - expect(screen.getByText(/forceFlashHint/i)).toBeInTheDocument(); expect(screen.getByText(/migrateFlashText/i)).toBeInTheDocument(); - expect(screen.getByText(/migrateFlashHint/i)).toBeInTheDocument(); expect(screen.getByText(/forceFlashText/i)).toBeInTheDocument(); - expect(screen.getByText("escButtonSelect")).toBeInTheDocument(); - expect(screen.getByText(/escButtonSelectLocally/i)).toBeInTheDocument(); - expect(screen.getByText(/buttonCancel/i)).toBeInTheDocument(); + expect(screen.getByText('escButtonSelect')).toBeInTheDocument(); + expect(screen.getByText('escButtonSelectLocally')).toBeInTheDocument(); + expect(screen.getByText('buttonCancel')).toBeInTheDocument(); - expect(screen.getByText(/selectFirmware/i)).toBeInTheDocument(); - expect(screen.getByText(/selectTarget/i)).toBeInTheDocument(); + expect(screen.getByText('selectFirmware')).toBeInTheDocument(); + expect(screen.getByText('selectTarget')).toBeInTheDocument(); - fireEvent.change(screen.getByRole(/combobox/i, { name: 'Version' }), { - target: { - value: 'https://github.com/AlkaMotors/AM32-MultiRotor-ESC-firmware/releases/download/v1.65/{0}_1.65.hex', - name: 'Version', - }, - }); + fireEvent.mouseDown(screen.getByRole('button', { 'name': 'selectVersion selectVersion' })); + + const element = screen.getByRole('option', { 'name': '1.78' }); + userEvent.click(element); userEvent.click(screen.getByText('escButtonSelect')); expect(onSubmit).toHaveBeenCalled(); }); + + it('should show warning when forcing target', async() => { + const configs = { + versions: {}, + escs: {}, + pwm: {}, + }; + + const onSubmit = jest.fn(); + const onLocalSubmit = jest.fn(); + const onCancel = jest.fn(); + + render( + + ); + + fireEvent.click(screen.getByRole('checkbox', { name: 'forceFlashText' })); + + expect(screen.getByText(/forceFlashHint/i)).toBeInTheDocument(); + }); + + it('should show warning when forcing migration', async() => { + const configs = { + versions: {}, + escs: {}, + pwm: {}, + }; + + const onSubmit = jest.fn(); + const onLocalSubmit = jest.fn(); + const onCancel = jest.fn(); + + render( + + ); + + fireEvent.click(screen.getByRole('checkbox', { name: 'migrateFlashText' })); + + expect(screen.getByText(/migrateFlashHint/i)).toBeInTheDocument(); + }); }); diff --git a/src/Components/FirmwareSelector/index.jsx b/src/Components/FirmwareSelector/index.jsx index 90755b780..171749e83 100644 --- a/src/Components/FirmwareSelector/index.jsx +++ b/src/Components/FirmwareSelector/index.jsx @@ -4,6 +4,11 @@ import React, { useState, useEffect, useRef, } from 'react'; +import Grid from '@mui/material/Grid'; +import Stack from '@mui/material/Stack'; + +import Checkbox from '../Input/Checkbox'; + import { isValidLayout, getSupportedSources, @@ -162,13 +167,12 @@ function FirmwareSelector({ } function handleVersionChange(e) { - const selected = e.target.options.selectedIndex; - const selecteOption = e.target.options[selected]; + const selected = e.target.value; setSelection({ ...selection, url: e.target.value, - version: selecteOption ? selecteOption.text : 'N/A', + version: selected ? selected : 'N/A', }); } @@ -209,45 +213,27 @@ function FirmwareSelector({ return (
-
- -
- -
- -
+ +

- - - {selection.firmware && - <> - - - {/* - {type === blheliTypes.SILABS || type === blheliTypes.ATMEL && - } - */} - + + - - {options.frequencies.length > 0 && - } - } + + + {selection.firmware && + <> + + + + + {/* + {type === blheliTypes.SILABS || type === blheliTypes.ATMEL && + } + */} + + + + + + {options.frequencies.length > 0 && + + + } + } + + +