Created UserInterface test

This commit is contained in:
Alejandro Celaya 2021-02-16 19:31:16 +01:00 committed by Alejandro Celaya
parent 9dbf790cc8
commit 7f6c71e8d7
3 changed files with 49 additions and 2 deletions

View file

@ -20,7 +20,7 @@ export const UserInterface: FC<UserInterfaceProps> = ({ settings: { ui }, setUiS
changeThemeInMarkup(theme); changeThemeInMarkup(theme);
}} }}
> >
Use dark theme Use dark theme.
</ToggleSwitch> </ToggleSwitch>
</SimpleCard> </SimpleCard>
); );

View file

@ -25,7 +25,7 @@ describe('<ShortUrlCreation />', () => {
[{ validateUrls: true }, true ], [{ validateUrls: true }, true ],
[{ validateUrls: false }, false ], [{ validateUrls: false }, false ],
[ undefined, false ], [ undefined, false ],
])('switch is toggled if option is tru', (shortUrlCreation, expectedChecked) => { ])('switch is toggled if option is true', (shortUrlCreation, expectedChecked) => {
const wrapper = createWrapper(shortUrlCreation); const wrapper = createWrapper(shortUrlCreation);
const toggle = wrapper.find(ToggleSwitch); const toggle = wrapper.find(ToggleSwitch);

View file

@ -0,0 +1,47 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { Mock } from 'ts-mockery';
import { Settings, UiSettings } from '../../src/settings/reducers/settings';
import { UserInterface } from '../../src/settings/UserInterface';
import ToggleSwitch from '../../src/utils/ToggleSwitch';
import { Theme } from '../../src/utils/theme';
describe('<UserInterface />', () => {
let wrapper: ShallowWrapper;
const setUiSettings = jest.fn();
const createWrapper = (ui?: UiSettings) => {
wrapper = shallow(
<UserInterface
settings={Mock.of<Settings>({ ui })}
setUiSettings={setUiSettings}
/>,
);
return wrapper;
};
afterEach(() => wrapper?.unmount());
afterEach(jest.clearAllMocks);
it.each([
[{ theme: 'dark' as Theme }, true ],
[{ theme: 'light' as Theme }, false ],
[ undefined, false ],
])('switch is toggled if theme is dark', (ui, expectedChecked) => {
const wrapper = createWrapper(ui);
const toggle = wrapper.find(ToggleSwitch);
expect(toggle.prop('checked')).toEqual(expectedChecked);
});
it.each([
[ true, 'dark' ],
[ false, 'light' ],
])('invokes setUiSettings when toggle value changes', (checked, theme) => {
const wrapper = createWrapper();
const toggle = wrapper.find(ToggleSwitch);
expect(setUiSettings).not.toHaveBeenCalled();
toggle.simulate('change', checked);
expect(setUiSettings).toHaveBeenCalledWith({ theme });
});
});