Skip to content

Commit c13e719

Browse files
pyphiliapyphilia
committed
test: add Font Size Slider and translations
1 parent 658b9d9 commit c13e719

File tree

7 files changed

+203
-9
lines changed

7 files changed

+203
-9
lines changed

‎src/components/Settings.test.js

+5
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Settings } from './Settings';
55
import LanguageSelect from './common/LanguageSelect';
66
import DeveloperSwitch from './common/DeveloperSwitch';
77
import GeolocationControl from './common/GeolocationControl';
8+
import FontSizeSlider from './common/FontSizeSlider';
89
import { USER_MODES } from '../config/constants';
910

1011
const createSettingsProps = () => ({
@@ -66,4 +67,8 @@ describe('<Settings />', () => {
6667
it('renders one <GeolocationControl /> component', () => {
6768
expect(wrapper.find(GeolocationControl)).toHaveLength(1);
6869
});
70+
71+
it('renders one <FontSizeSlider /> component', () => {
72+
expect(wrapper.find(FontSizeSlider)).toHaveLength(1);
73+
});
6974
});

‎src/components/common/FontSizeSlider.js

+9-6
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,16 @@ import {
1717
} from '../../config/constants';
1818
import { FONT_SIZE_SETTING_LABEL_ID } from '../../config/selectors';
1919

20-
const useStyles = makeStyles({
20+
const useStyles = makeStyles(() => ({
2121
root: {
2222
width: 250,
2323
},
2424
input: {
2525
width: 42,
2626
},
27-
});
27+
}));
2828

29-
const FontSizeSlider = ({ fontSize, dispatchSetFontSize }) => {
29+
export const FontSizeSlider = ({ fontSize, dispatchSetFontSize }) => {
3030
const classes = useStyles();
3131
const { t } = useTranslation();
3232

@@ -90,12 +90,15 @@ const FontSizeSlider = ({ fontSize, dispatchSetFontSize }) => {
9090

9191
FontSizeSlider.propTypes = {
9292
dispatchSetFontSize: PropTypes.func.isRequired,
93-
fontSize: PropTypes.string.isRequired,
93+
fontSize: PropTypes.number,
94+
};
95+
96+
FontSizeSlider.defaultProps = {
97+
fontSize: DEFAULT_FONT_SIZE,
9498
};
9599

96100
const mapStateToProps = ({ authentication }) => ({
97-
fontSize:
98-
authentication.getIn(['user', 'settings', 'fontSize']) || DEFAULT_FONT_SIZE,
101+
fontSize: authentication.getIn(['user', 'settings', 'fontSize']),
99102
});
100103

101104
const mapDispatchToProps = {

‎src/components/common/FontSizeSlider.test.js

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import React from 'react';
2+
import { shallow } from 'enzyme';
3+
import Typography from '@material-ui/core/Typography';
4+
import Slider from '@material-ui/core/Slider';
5+
import Input from '@material-ui/core/Input';
6+
import { FontSizeSlider } from './FontSizeSlider';
7+
import { DEFAULT_FONT_SIZE, FONT_SIZE_MIN_VALUE } from '../../config/constants';
8+
9+
const createFontSizeSliderProps = ({ fontSize } = {}) => ({
10+
dispatchSetFontSize: jest.fn(),
11+
fontSize,
12+
});
13+
14+
describe('<FontSizeSlider />', () => {
15+
let wrapper;
16+
17+
describe('default render', () => {
18+
beforeAll(() => {
19+
const props = createFontSizeSliderProps();
20+
// eslint-disable-next-line react/jsx-props-no-spreading
21+
wrapper = shallow(<FontSizeSlider {...props} />);
22+
});
23+
24+
it('renders correctly', () => {
25+
expect(wrapper).toMatchSnapshot();
26+
});
27+
28+
it('renders one <Slider /> and one <Input /> component with default font size', () => {
29+
const text = wrapper.find(Typography);
30+
expect(text).toHaveLength(1);
31+
expect(text.contains('Font Size')).toBeTruthy();
32+
33+
const slider = wrapper.find(Slider);
34+
expect(slider.prop('value')).toBe(DEFAULT_FONT_SIZE);
35+
36+
const input = wrapper.find(Input);
37+
expect(input.prop('value')).toBe(DEFAULT_FONT_SIZE);
38+
});
39+
});
40+
41+
describe('correct font size render', () => {
42+
beforeAll(() => {
43+
const props = createFontSizeSliderProps({
44+
fontSize: FONT_SIZE_MIN_VALUE,
45+
});
46+
// eslint-disable-next-line react/jsx-props-no-spreading
47+
wrapper = shallow(<FontSizeSlider {...props} />);
48+
});
49+
50+
it('renders correctly', () => {
51+
expect(wrapper).toMatchSnapshot();
52+
});
53+
54+
it('renders one <Slider /> and one <Input /> component with given font size', () => {
55+
const text = wrapper.find(Typography);
56+
expect(text).toHaveLength(1);
57+
expect(text.contains('Font Size')).toBeTruthy();
58+
59+
const slider = wrapper.find(Slider);
60+
expect(slider.prop('value')).toBe(FONT_SIZE_MIN_VALUE);
61+
62+
const input = wrapper.find(Input);
63+
expect(input.prop('value')).toBe(FONT_SIZE_MIN_VALUE);
64+
});
65+
});
66+
});

‎src/components/common/__snapshots__/FontSizeSlider.test.js.snap

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`<FontSizeSlider /> correct font size render renders correctly 1`] = `
4+
<div
5+
className="makeStyles-root-1"
6+
>
7+
<WithStyles(ForwardRef(Typography))
8+
gutterBottom={true}
9+
id="fontSizeSettingLabel"
10+
>
11+
Font Size
12+
</WithStyles(ForwardRef(Typography))>
13+
<WithStyles(ForwardRef(Grid))
14+
alignItems="center"
15+
container={true}
16+
spacing={2}
17+
>
18+
<WithStyles(ForwardRef(Grid))
19+
item={true}
20+
>
21+
<Memo(ForwardRef(FormatSizeIcon)) />
22+
</WithStyles(ForwardRef(Grid))>
23+
<WithStyles(ForwardRef(Grid))
24+
item={true}
25+
xs={true}
26+
>
27+
<WithStyles(ForwardRef(Slider))
28+
aria-labelledby="fontSizeSettingLabel"
29+
marks={true}
30+
max={20}
31+
min={10}
32+
onChange={[Function]}
33+
step={2}
34+
value={10}
35+
/>
36+
</WithStyles(ForwardRef(Grid))>
37+
<WithStyles(ForwardRef(Grid))
38+
item={true}
39+
>
40+
<WithStyles(ForwardRef(Input))
41+
className="makeStyles-input-2"
42+
inputProps={
43+
Object {
44+
"aria-labelledby": "fontSizeSettingLabel",
45+
"max": 20,
46+
"min": 10,
47+
"type": "number",
48+
}
49+
}
50+
margin="dense"
51+
onBlur={[Function]}
52+
onChange={[Function]}
53+
value={10}
54+
/>
55+
</WithStyles(ForwardRef(Grid))>
56+
</WithStyles(ForwardRef(Grid))>
57+
</div>
58+
`;
59+
60+
exports[`<FontSizeSlider /> default render renders correctly 1`] = `
61+
<div
62+
className="makeStyles-root-1"
63+
>
64+
<WithStyles(ForwardRef(Typography))
65+
gutterBottom={true}
66+
id="fontSizeSettingLabel"
67+
>
68+
Font Size
69+
</WithStyles(ForwardRef(Typography))>
70+
<WithStyles(ForwardRef(Grid))
71+
alignItems="center"
72+
container={true}
73+
spacing={2}
74+
>
75+
<WithStyles(ForwardRef(Grid))
76+
item={true}
77+
>
78+
<Memo(ForwardRef(FormatSizeIcon)) />
79+
</WithStyles(ForwardRef(Grid))>
80+
<WithStyles(ForwardRef(Grid))
81+
item={true}
82+
xs={true}
83+
>
84+
<WithStyles(ForwardRef(Slider))
85+
aria-labelledby="fontSizeSettingLabel"
86+
marks={true}
87+
max={20}
88+
min={10}
89+
onChange={[Function]}
90+
step={2}
91+
value={14}
92+
/>
93+
</WithStyles(ForwardRef(Grid))>
94+
<WithStyles(ForwardRef(Grid))
95+
item={true}
96+
>
97+
<WithStyles(ForwardRef(Input))
98+
className="makeStyles-input-2"
99+
inputProps={
100+
Object {
101+
"aria-labelledby": "fontSizeSettingLabel",
102+
"max": 20,
103+
"min": 10,
104+
"type": "number",
105+
}
106+
}
107+
margin="dense"
108+
onBlur={[Function]}
109+
onChange={[Function]}
110+
value={14}
111+
/>
112+
</WithStyles(ForwardRef(Grid))>
113+
</WithStyles(ForwardRef(Grid))>
114+
</div>
115+
`;

‎src/components/space/SpaceGrid.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,10 @@ class SpaceGrid extends Component {
2626

2727
static propTypes = {
2828
folder: PropTypes.string,
29-
spaces: PropTypes.oneOfType([List, Set]).isRequired,
29+
spaces: PropTypes.oneOfType([
30+
PropTypes.instanceOf(List),
31+
PropTypes.instanceOf(Set),
32+
]).isRequired,
3033
history: PropTypes.shape({
3134
length: PropTypes.number.isRequired,
3235
push: PropTypes.func.isRequired,

‎src/langs/en.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -215,6 +215,7 @@
215215
"End Tour": "End Tour",
216216
"Add this space to your Favorite Spaces": "Add this space to your Favorite Spaces",
217217
"Synchronization": "Synchronization",
218-
"Cancel Synchronization": "Cancel Synchronization"
218+
"Cancel Synchronization": "Cancel Synchronization",
219+
"Font Size": "Font Size"
219220
}
220221
}

‎src/langs/fr.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -214,6 +214,7 @@
214214
"Close Tour": "Fermer le Tour",
215215
"End Tour": "Finir le Tour",
216216
"Synchronization": "Synchronisation",
217-
"Cancel Synchronization": "Annuler la Synchronisation"
217+
"Cancel Synchronization": "Annuler la Synchronisation",
218+
"Font Size": "Taille du Texte"
218219
}
219220
}

0 commit comments

Comments
 (0)