diff --git a/__tests__/src/components/WorkspaceFullScreenButton.test.js b/__tests__/src/components/WorkspaceFullScreenButton.test.js index 15b78886551d6aea044fa5203c2c5ee0d5a8b83a..da4ec79f31b9e197bebcfa5ee7d192b5ffd387a1 100644 --- a/__tests__/src/components/WorkspaceFullScreenButton.test.js +++ b/__tests__/src/components/WorkspaceFullScreenButton.test.js @@ -2,24 +2,66 @@ import React from 'react'; import { shallow } from 'enzyme'; import { WorkspaceFullScreenButton } from '../../../src/components/WorkspaceFullScreenButton'; +/** */ +function createWrapper(props) { + return shallow( + <WorkspaceFullScreenButton + classes={{}} + setWorkspaceFullscreen={() => {}} + isFullscreenEnabled={false} + {...props} + />, + ); +} + describe('WorkspaceFullScreenButton', () => { let wrapper; - let setWorkspaceFullscreen; - beforeEach(() => { - setWorkspaceFullscreen = jest.fn(); - wrapper = shallow( - <WorkspaceFullScreenButton - classes={{}} - setWorkspaceFullscreen={setWorkspaceFullscreen} - />, - ); - }); it('renders without an error', () => { + wrapper = createWrapper(); + expect(wrapper.find('WithStyles(IconButton)').length).toBe(1); }); - it('when clicked, sets the fullscreen state', () => { - wrapper.find('WithStyles(IconButton)').simulate('click'); - expect(setWorkspaceFullscreen).toHaveBeenCalledWith(true); + + describe('when not in fullscreen', () => { + let setWorkspaceFullscreen; + beforeAll(() => { + setWorkspaceFullscreen = jest.fn(); + wrapper = createWrapper({ setWorkspaceFullscreen }); + }); + + it('has the FullscreenIcon', () => { + expect(wrapper.find('pure(FullscreenSharpIcon)').length).toBe(1); + }); + + it('has the proper aria-label i18n key', () => { + expect(wrapper.find('WithStyles(IconButton)[aria-label="fullScreen"]').length).toBe(1); + }); + + it('triggers the setWorkspaceFullscreen prop with the appropriate boolean', () => { + wrapper.find('WithStyles(IconButton)').simulate('click'); + expect(setWorkspaceFullscreen).toHaveBeenCalledWith(true); + }); + }); + + describe('when in fullscreen', () => { + let setWorkspaceFullscreen; + beforeAll(() => { + setWorkspaceFullscreen = jest.fn(); + wrapper = createWrapper({ setWorkspaceFullscreen, isFullscreenEnabled: true }); + }); + + it('has the FullscreenExitIcon', () => { + expect(wrapper.find('pure(FullscreenExitSharpIcon)').length).toBe(1); + }); + + it('has the proper aria-label', () => { + expect(wrapper.find('WithStyles(IconButton)[aria-label="exitFullScreen"]').length).toBe(1); + }); + + it('triggers the setWorkspaceFullscreen prop with the appropriate boolean', () => { + wrapper.find('WithStyles(IconButton)').simulate('click'); + expect(setWorkspaceFullscreen).toHaveBeenCalledWith(false); + }); }); }); diff --git a/locales/en/translation.json b/locales/en/translation.json index a7d13c7ddd8cd8c9c9b7909167a047b92e83c5cc..6cb851d9a3f9f32c3f38c2d7e31fd2b5379deeb7 100644 --- a/locales/en/translation.json +++ b/locales/en/translation.json @@ -19,6 +19,7 @@ "dismiss": "Dismiss", "downloadExport": "Download/Export", "downloadExportWorkspace": "Download/export workspace", + "exitFullScreen": "Exit full screen", "fetchManifest": "Add", "fullScreen": "Full Screen", "hideZoomControls": "Hide zoom controls", diff --git a/src/components/App.js b/src/components/App.js index 32b67a3822f480322afaaf7e256b988faca1354f..f9fcc674ab4ed7dceefda0599b1e724ee4d74bb4 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -57,26 +57,26 @@ export class App extends Component { }); return ( - <div className={classNames(classes.background, ns('viewer'))}> - <I18nextProvider i18n={this.i18n}> - <MuiThemeProvider theme={createMuiTheme(theme)}> - <Fullscreen - enabled={isFullscreenEnabled} - onChange={setWorkspaceFullscreen} - > + <Fullscreen + enabled={isFullscreenEnabled} + onChange={setWorkspaceFullscreen} + > + <div className={classNames(classes.background, ns('viewer'))}> + <I18nextProvider i18n={this.i18n}> + <MuiThemeProvider theme={createMuiTheme(theme)}> { isWorkspaceAddVisible ? <WorkspaceAdd /> : <Workspace /> } - </Fullscreen> - { - isWorkspaceControlPanelVisible - && <WorkspaceControlPanel /> - } - </MuiThemeProvider> - </I18nextProvider> - </div> + { + isWorkspaceControlPanelVisible + && <WorkspaceControlPanel /> + } + </MuiThemeProvider> + </I18nextProvider> + </div> + </Fullscreen> ); } } diff --git a/src/components/WorkspaceFullScreenButton.js b/src/components/WorkspaceFullScreenButton.js index 38e28bb0f184bf07149a8f7aa289cf8f5971cbba..215d05d7482e0d367f7c2ea99249753a87cf0c89 100644 --- a/src/components/WorkspaceFullScreenButton.js +++ b/src/components/WorkspaceFullScreenButton.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import IconButton from '@material-ui/core/IconButton'; import FullscreenIcon from '@material-ui/icons/FullscreenSharp'; +import FullscreenExitIcon from '@material-ui/icons/FullscreenExitSharp'; import PropTypes from 'prop-types'; /** @@ -11,21 +12,33 @@ export class WorkspaceFullScreenButton extends Component { * @return */ render() { - const { classes, setWorkspaceFullscreen, t } = this.props; + const { + classes, isFullscreenEnabled, setWorkspaceFullscreen, t, + } = this.props; return ( - <IconButton className={classes.ctrlBtn} aria-label={t('fullScreen')} onClick={() => setWorkspaceFullscreen(true)}> - <FullscreenIcon /> + <IconButton + className={classes.ctrlBtn} + aria-label={isFullscreenEnabled ? t('exitFullScreen') : t('fullScreen')} + onClick={() => setWorkspaceFullscreen(!isFullscreenEnabled)} + > + { + isFullscreenEnabled + ? <FullscreenExitIcon /> + : <FullscreenIcon /> + } </IconButton> ); } } WorkspaceFullScreenButton.propTypes = { + isFullscreenEnabled: PropTypes.bool, setWorkspaceFullscreen: PropTypes.func.isRequired, classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types t: PropTypes.func, }; WorkspaceFullScreenButton.defaultProps = { + isFullscreenEnabled: false, t: key => key, }; diff --git a/src/containers/WorkspaceFullScreenButton.js b/src/containers/WorkspaceFullScreenButton.js index 9537b62aacb660d24fc9f5c52f7b690ba65b879a..9301b3b9925a5791857980fa60070fb15e6fd11f 100644 --- a/src/containers/WorkspaceFullScreenButton.js +++ b/src/containers/WorkspaceFullScreenButton.js @@ -7,6 +7,15 @@ import * as actions from '../state/actions'; import { WorkspaceFullScreenButton } from '../components/WorkspaceFullScreenButton'; +/** + * mapStateToProps - to hook up connect + * @memberof WorkspaceFullScreenButton + * @private + */ +const mapStateToProps = state => ({ + isFullscreenEnabled: state.workspace.isFullscreenEnabled, +}); + /** * mapDispatchToProps - used to hook up connect to action creators * @memberof ManifestListItem @@ -28,7 +37,7 @@ const styles = theme => ({ const enhance = compose( withTranslation(), withStyles(styles), - connect(null, mapDispatchToProps), + connect(mapStateToProps, mapDispatchToProps), miradorWithPlugins, );