-
Notifications
You must be signed in to change notification settings - Fork 255
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
…2338) * #2287: replace selection list by simple list for change theme dialog * #2287: rework workspace type selection dialog * closes dialog after selecting a theme, changes cursor * #2287: beautify ChangeThemeDialog * #2287: adds hoc for material-ui list, that provides keyboard navigation * #2287: removes obsolete attributes * #2287: removes test, that is already tested in ListKeyboardNavigation
- Loading branch information
Showing
14 changed files
with
465 additions
and
64 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import React from 'react'; | ||
| import { shallow } from 'enzyme'; | ||
| import { ChangeThemeDialog } from '../../../src/components/ChangeThemeDialog'; | ||
|
|
||
| /** | ||
| * Helper function to create a shallow wrapper around ErrorDialog | ||
| */ | ||
| function createWrapper(props) { | ||
| return shallow( | ||
| <ChangeThemeDialog | ||
| classes={{ darkColor: '#000000', lightColor: '#ffffff' }} | ||
| handleClose={() => {}} | ||
| updateConfig={() => {}} | ||
| t={t => (t)} | ||
| theme="light" | ||
| {...props} | ||
| />, | ||
| ); | ||
| } | ||
|
|
||
| describe('ChangeThemeDialog', () => { | ||
| let wrapper; | ||
|
|
||
| it('renders propertly', () => { | ||
| wrapper = createWrapper(); | ||
|
|
||
| expect(wrapper.find('WithStyles(Dialog)').length).toBe(1); | ||
| }); | ||
|
|
||
| it('shows up theme selection properly', () => { | ||
| wrapper = createWrapper(); | ||
|
|
||
| expect(wrapper.find('WithStyles(ListItemText)').length).toBe(2); | ||
| expect(wrapper.find('WithStyles(ListItemText)').first().render().text()).toBe('light'); | ||
| expect(wrapper.find('WithStyles(ListItemText)').last().render().text()).toBe('dark'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import React from 'react'; | ||
| import { shallow } from 'enzyme'; | ||
| import { List, ListItem } from '@material-ui/core'; | ||
| import { ListKeyboardNavigation } from '../../../src/lib/ListKeyboardNavigation'; | ||
|
|
||
| const onChangeMock = jest.fn(); | ||
| const mockEvent = { preventDefault: () => {} }; | ||
| const onClickMock = jest.fn(); | ||
| /** | ||
| * Helper function to create a shallow wrapper around LanguageSettings | ||
| */ | ||
| function createWrapper(props, childProps) { | ||
| return shallow( | ||
| <ListKeyboardNavigation | ||
| onChange={onChangeMock} | ||
| selected="listItem01" | ||
| {...props} | ||
| > | ||
| <ListItem value="listItem01" {...childProps} /> | ||
| <ListItem value="listItem02" {...childProps} /> | ||
| <ListItem value="listItem03" {...childProps} /> | ||
| </ListKeyboardNavigation>, | ||
| ); | ||
| } | ||
|
|
||
| describe('ListKeyboardNavigation', () => { | ||
| it('renders properly', () => { | ||
| const wrapper = createWrapper(); | ||
| expect(wrapper.matchesElement( | ||
| <List />, | ||
| )); | ||
| expect(wrapper.find('WithStyles(ListItem)').length).toBe(3); | ||
| }); | ||
|
|
||
| it('the second item is selected, when passing its value as `selected`', () => { | ||
| const wrapper = createWrapper({ selected: 'listItem02' }); | ||
| expect(wrapper.find('WithStyles(ListItem)[value="listItem02"]').first().prop('selected')).toBe(true); | ||
| }); | ||
|
|
||
| it('pressing ArrowDown selects the next list item', () => { | ||
| const wrapper = createWrapper({ selected: 'listItem02' }); | ||
| wrapper.simulate('keyDown', { key: 'ArrowDown', ...mockEvent }); | ||
| expect(wrapper.find('WithStyles(ListItem)').last().prop('selected')).toBe(true); | ||
| }); | ||
|
|
||
| it('pressing ArrowDown selects the first list item, when the last one is selected', () => { | ||
| const wrapper = createWrapper({ selected: 'listItem03' }); | ||
| wrapper.simulate('keyDown', { key: 'ArrowDown', ...mockEvent }); | ||
| expect(wrapper.find('WithStyles(ListItem)').first().prop('selected')).toBe(true); | ||
| }); | ||
|
|
||
| it('pressing ArrowUp selects the previous list item', () => { | ||
| const wrapper = createWrapper({ selected: 'listItem02' }); | ||
| wrapper.simulate('keyDown', { key: 'ArrowUp', ...mockEvent }); | ||
| expect(wrapper.find('WithStyles(ListItem)').first().prop('selected')).toBe(true); | ||
| }); | ||
|
|
||
| it('pressing ArrowUp selects the last list item, when the first one is selected', () => { | ||
| const wrapper = createWrapper({ selected: 'listItem01' }); | ||
| wrapper.simulate('keyDown', { key: 'ArrowUp', ...mockEvent }); | ||
| expect(wrapper.find('WithStyles(ListItem)').last().prop('selected')).toBe(true); | ||
| }); | ||
|
|
||
| it('onChange handler is called when enter key is pressed', () => { | ||
| const wrapper = createWrapper(); | ||
| wrapper.find('WithStyles(List)').first().simulate('keyDown', { key: 'Enter', ...mockEvent }); | ||
| expect(onChangeMock).toBeCalledWith('listItem01'); | ||
| }); | ||
|
|
||
| it('onChange handler is called when clicking a list item', () => { | ||
| const wrapper = createWrapper(); | ||
| wrapper.find('WithStyles(ListItem)').first().simulate('click'); | ||
| expect(onChangeMock).toBeCalledWith('listItem01'); | ||
| }); | ||
|
|
||
| it('onClickHandler of list items is called besides onChange', () => { | ||
| const wrapper = createWrapper(undefined, { onClick: onClickMock }); | ||
| wrapper.find('WithStyles(ListItem)').first().simulate('click'); | ||
| expect(onClickMock).toBeCalledTimes(1); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| import React, { Component } from 'react'; | ||
| import { | ||
| Dialog, | ||
| DialogTitle, | ||
| ListItem, | ||
| ListItemIcon, | ||
| ListItemText, | ||
| Typography, | ||
| DialogContent, | ||
| } from '@material-ui/core'; | ||
| import PaletteIcon from '@material-ui/icons/PaletteSharp'; | ||
| import PropTypes from 'prop-types'; | ||
| import { ListKeyboardNavigation } from '../lib/ListKeyboardNavigation'; | ||
|
|
||
| /** | ||
| * a simple dialog providing the possibility to switch the theme | ||
| */ | ||
| export class ChangeThemeDialog extends Component { | ||
| /** | ||
| */ | ||
| constructor(props) { | ||
| super(props); | ||
| this.handleThemeChange = this.handleThemeChange.bind(this); | ||
| } | ||
|
|
||
| /** | ||
| * Propagate theme palette type selection into the global state | ||
| */ | ||
| handleThemeChange(theme) { | ||
| const { updateConfig, handleClose } = this.props; | ||
|
|
||
| updateConfig({ | ||
| theme: { | ||
| palette: { | ||
| type: theme, | ||
| }, | ||
| }, | ||
| }); | ||
| handleClose(); | ||
| } | ||
|
|
||
| /** */ | ||
| render() { | ||
| const { | ||
| classes, | ||
| handleClose, | ||
| open, | ||
| t, | ||
| theme, | ||
| } = this.props; | ||
| return ( | ||
| <Dialog | ||
| onClose={handleClose} | ||
| open={open} | ||
| > | ||
| <DialogTitle id="change-the-dialog-title" disableTypography> | ||
| <Typography variant="h2"> | ||
| {t('changeTheme')} | ||
| </Typography> | ||
| </DialogTitle> | ||
| <DialogContent className={classes.dialogContent}> | ||
| <ListKeyboardNavigation selected={theme} onChange={this.handleThemeChange}> | ||
| <ListItem className={classes.listitem} value="light"> | ||
| <ListItemIcon> | ||
| <PaletteIcon className={classes.lightColor} /> | ||
| </ListItemIcon> | ||
| <ListItemText>{t('light')}</ListItemText> | ||
| </ListItem> | ||
| <ListItem className={classes.listitem} value="dark"> | ||
| <ListItemIcon> | ||
| <PaletteIcon className={classes.darkColor} /> | ||
| </ListItemIcon> | ||
| <ListItemText>{t('dark')}</ListItemText> | ||
| </ListItem> | ||
| </ListKeyboardNavigation> | ||
| </DialogContent> | ||
| </Dialog> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| ChangeThemeDialog.propTypes = { | ||
| classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types | ||
| handleClose: PropTypes.func.isRequired, | ||
| open: PropTypes.bool, | ||
| t: PropTypes.func.isRequired, | ||
| theme: PropTypes.string.isRequired, | ||
| updateConfig: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| ChangeThemeDialog.defaultProps = { | ||
| open: false, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.