From 1fc011ee1c17d02c385099ad6b267745ba1cb510 Mon Sep 17 00:00:00 2001 From: Jessie Keck <jessie.keck@gmail.com> Date: Wed, 6 Feb 2019 13:13:05 -0800 Subject: [PATCH] Use MUI's Typography component and withStyles HOC to make the SideBarInfoPanel themeable. --- .../components/WindowSideBarInfoPanel.test.js | 25 ++++++++++++++++--- .../src/components/WindowSideBarPanel.test.js | 4 +-- src/components/WindowSideBarInfoPanel.js | 23 ++++++++++++++--- 3 files changed, 42 insertions(+), 10 deletions(-) diff --git a/__tests__/src/components/WindowSideBarInfoPanel.test.js b/__tests__/src/components/WindowSideBarInfoPanel.test.js index e74a3e799..5180d0f50 100644 --- a/__tests__/src/components/WindowSideBarInfoPanel.test.js +++ b/__tests__/src/components/WindowSideBarInfoPanel.test.js @@ -1,5 +1,6 @@ import React from 'react'; import { shallow } from 'enzyme'; +import Typography from '@material-ui/core/Typography'; import createStore from '../../../src/state/createStore'; import * as actions from '../../../src/state/actions'; import WindowSideBarInfoPanel from '../../../src/components/WindowSideBarInfoPanel'; @@ -13,12 +14,28 @@ describe('WindowSideBarInfoPanel', () => { beforeEach(() => { store.dispatch(actions.receiveManifest('foo', fixture)); manifest = store.getState().manifests.foo; - wrapper = shallow(<WindowSideBarInfoPanel manifest={manifest} />); + wrapper = shallow( + <WindowSideBarInfoPanel manifest={manifest} />, + ).dive(); }); it('renders without an error', () => { - expect(wrapper.find('h2').text()).toBe('About this item'); - expect(wrapper.find('h3').text()).toBe('Bodleian Library Human Freaks 2 (33)'); - expect(wrapper.find('.mirador-window-sidebar-info-panel div').text()).toBe('[Handbill of Mr. Becket, [1787] ]'); + expect( + wrapper.find('WithStyles(Typography)[variant="h2"]').first().matchesElement( + <Typography>About this item</Typography>, + ), + ).toBe(true); + + expect( + wrapper.find('WithStyles(Typography)[variant="h3"]').first().matchesElement( + <Typography>Bodleian Library Human Freaks 2 (33)</Typography>, + ), + ).toBe(true); + + expect( + wrapper.find('WithStyles(Typography)[variant="body2"]').first().matchesElement( + <Typography>[Handbill of Mr. Becket, [1787] ]</Typography>, + ), + ).toBe(true); }); }); diff --git a/__tests__/src/components/WindowSideBarPanel.test.js b/__tests__/src/components/WindowSideBarPanel.test.js index 1478f900e..d262ecd0f 100644 --- a/__tests__/src/components/WindowSideBarPanel.test.js +++ b/__tests__/src/components/WindowSideBarPanel.test.js @@ -21,7 +21,7 @@ describe('WindowSideBarPanel', () => { }); it('renders the WindowSideBarInfoPanel', () => { - expect(wrapper.find('WindowSideBarInfoPanel').length).toBe(1); + expect(wrapper.find('WithStyles(WindowSideBarInfoPanel)').length).toBe(1); }); }); @@ -31,7 +31,7 @@ describe('WindowSideBarPanel', () => { }); it('does not render any panel component', () => { - expect(wrapper.find('WindowSideBarInfoPanel').length).toBe(0); + expect(wrapper.find('WithStyes(WindowSideBarInfoPanel)').length).toBe(0); }); }); }); diff --git a/src/components/WindowSideBarInfoPanel.js b/src/components/WindowSideBarInfoPanel.js index 83de8502b..80904da99 100644 --- a/src/components/WindowSideBarInfoPanel.js +++ b/src/components/WindowSideBarInfoPanel.js @@ -1,11 +1,13 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import Typography from '@material-ui/core/Typography'; +import { withStyles } from '@material-ui/core/styles'; import ns from '../config/css-ns'; /** * WindowSideBarInfoPanel */ -export default class WindowSideBarInfoPanel extends Component { +class WindowSideBarInfoPanel extends Component { /** * manifestLabel - get the label from the manifesto manifestation * @return String @@ -37,21 +39,34 @@ export default class WindowSideBarInfoPanel extends Component { * @return */ render() { + const { classes } = this.props; return ( <div className={ns('window-sidebar-info-panel')}> - <h2>About this item</h2> - <h3>{this.manifestLabel()}</h3> - <div>{this.manifestDescription()}</div> + <Typography variant="h2" className={classes.windowSideBarH2}>About this item</Typography> + <Typography variant="h3" className={classes.windowSideBarH3}>{this.manifestLabel()}</Typography> + <Typography variant="body2">{this.manifestDescription()}</Typography> </div> ); } } WindowSideBarInfoPanel.propTypes = { + classes: PropTypes.object, // eslint-disable-line react/forbid-prop-types manifest: PropTypes.object, // eslint-disable-line react/forbid-prop-types }; WindowSideBarInfoPanel.defaultProps = { + classes: {}, manifest: {}, }; + +/** + * @private + */ +const styles = theme => ({ + windowSideBarH2: theme.typography.h5, + windowSideBarH3: theme.typography.h6, +}); + +export default withStyles(styles)(WindowSideBarInfoPanel); -- GitLab