Skip to content

Commit f712201

Browse files
author
Luke Bowerman
authored
test: Refactor usage of toMatchSnapshot with assertSnapshot (#2051)
1 parent c5652ca commit f712201

File tree

23 files changed

+234
-398
lines changed

23 files changed

+234
-398
lines changed

‎packages/components/src/Card/Card.test.tsx‎

Lines changed: 10 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -26,28 +26,17 @@
2626

2727
import 'jest-styled-components'
2828
import React from 'react'
29-
import { createWithTheme } from '@looker/components-test-utils'
29+
import { assertSnapshot } from '@looker/components-test-utils'
3030
import { Card } from './Card'
3131
import { CardMedia } from './CardMedia'
3232

33-
test('A Card', () => {
34-
const component = createWithTheme(<Card>🥑</Card>)
35-
const tree = component.toJSON()
36-
expect(tree).toMatchSnapshot()
37-
})
38-
39-
test('A raised Card', () => {
40-
const component = createWithTheme(<Card raised>🥑</Card>)
41-
const tree = component.toJSON()
42-
expect(tree).toMatchSnapshot()
43-
})
44-
45-
test('A raised Card with a CardMedia block', () => {
46-
const component = createWithTheme(
47-
<Card raised>
48-
<CardMedia image="http://placekitten.com/200/300" />
49-
</Card>
50-
)
51-
const tree = component.toJSON()
52-
expect(tree).toMatchSnapshot()
33+
describe('Card', () => {
34+
test('default', () => assertSnapshot(<Card>🥑</Card>))
35+
test('raised', () => assertSnapshot(<Card raised>🥑</Card>))
36+
test('raised + CardMedia', () =>
37+
assertSnapshot(
38+
<Card raised>
39+
<CardMedia image="http://placekitten.com/200/300" />
40+
</Card>
41+
))
5342
})

‎packages/components/src/Card/__snapshots__/Card.test.tsx.snap‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`A Card 1`] = `
3+
exports[`Card default 1`] = `
44
.c0 {
55
font-family: Roboto,'Noto Sans','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI',Helvetica,Arial,sans-serif;
66
border: 1px solid;
@@ -32,7 +32,7 @@ exports[`A Card 1`] = `
3232
</div>
3333
`;
3434

35-
exports[`A raised Card 1`] = `
35+
exports[`Card raised + CardMedia 1`] = `
3636
.c0 {
3737
font-family: Roboto,'Noto Sans','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI',Helvetica,Arial,sans-serif;
3838
border: 1px solid;
@@ -62,14 +62,25 @@ exports[`A raised Card 1`] = `
6262
box-shadow: 0 2px 12px rgba(0,0,0,0.11),0 1px 4px rgba(0,0,0,0.04);
6363
}
6464
65+
.c1 {
66+
background-image: url(http://placekitten.com/200/300);
67+
background-repeat: no-repeat;
68+
background-size: cover;
69+
height: 0;
70+
overflow: hidden;
71+
padding-top: 56%;
72+
}
73+
6574
<div
6675
className="c0"
6776
>
68-
🥑
77+
<div
78+
className="c1"
79+
/>
6980
</div>
7081
`;
7182
72-
exports[`A raised Card with a CardMedia block 1`] = `
83+
exports[`Card raised 1`] = `
7384
.c0 {
7485
font-family: Roboto,'Noto Sans','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI',Helvetica,Arial,sans-serif;
7586
border: 1px solid;
@@ -99,20 +110,9 @@ exports[`A raised Card with a CardMedia block 1`] = `
99110
box-shadow: 0 2px 12px rgba(0,0,0,0.11),0 1px 4px rgba(0,0,0,0.04);
100111
}
101112
102-
.c1 {
103-
background-image: url(http://placekitten.com/200/300);
104-
background-repeat: no-repeat;
105-
background-size: cover;
106-
height: 0;
107-
overflow: hidden;
108-
padding-top: 56%;
109-
}
110-
111113
<div
112114
className="c0"
113115
>
114-
<div
115-
className="c1"
116-
/>
116+
🥑
117117
</div>
118118
`;

‎packages/components/src/Form/Inputs/Slider/Slider.test.tsx‎

Lines changed: 60 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -26,82 +26,78 @@
2626

2727
import React from 'react'
2828
import { fireEvent } from '@testing-library/react'
29-
import {
30-
// mountWithTheme,
31-
// assertSnapshot,
32-
renderWithTheme,
33-
} from '@looker/components-test-utils'
29+
import { renderWithTheme } from '@looker/components-test-utils'
3430

3531
import { Slider } from './Slider'
3632

37-
test('Enforces that input value can never go above `max` prop value', () => {
38-
const props = {
39-
max: 1,
40-
value: 2,
41-
}
42-
const { getByTestId } = renderWithTheme(<Slider {...props} />)
43-
const input = getByTestId('slider-input') as HTMLInputElement
44-
expect(parseInt(input.value)).toEqual(props.max)
45-
})
46-
47-
test('Enforces that input value can never go below `min` prop value', () => {
48-
const props = {
49-
min: 5,
50-
value: 1,
51-
}
52-
53-
const { getByTestId } = renderWithTheme(<Slider {...props} />)
54-
const input = getByTestId('slider-input') as HTMLInputElement
55-
expect(parseInt(input.value)).toEqual(props.min)
56-
})
57-
58-
test('Slider with name and id', () => {
59-
const props = {
60-
id: 'Slip',
61-
name: 'Slide',
62-
}
63-
const { getByTestId } = renderWithTheme(<Slider {...props} />)
64-
const input = getByTestId('slider-input')
65-
expect(input).toHaveAttribute('id', props.id)
66-
expect(input).toHaveAttribute('name', props.name)
67-
})
33+
describe('Slider', () => {
34+
test('Enforces that input value can never go above `max` prop value', () => {
35+
const props = {
36+
max: 1,
37+
value: 2,
38+
}
39+
const { getByTestId } = renderWithTheme(<Slider {...props} />)
40+
const input = getByTestId('slider-input') as HTMLInputElement
41+
expect(parseInt(input.value)).toEqual(props.max)
42+
})
6843

69-
test('Slider input can be disabled', () => {
70-
const { getByTestId } = renderWithTheme(<Slider disabled />)
71-
const input = getByTestId('slider-input') as HTMLInputElement
72-
expect(input).toBeDisabled()
73-
})
44+
test('Enforces that input value can never go below `min` prop value', () => {
45+
const props = {
46+
min: 5,
47+
value: 1,
48+
}
7449

75-
test('Accessibility: Slider with aria-labelledby and <label>', () => {
76-
const { getByLabelText, getByTestId } = renderWithTheme(
77-
<>
78-
<label id="some-id">Slider Label</label>
79-
<Slider aria-labelledby="some-id" />
80-
</>
81-
)
50+
const { getByTestId } = renderWithTheme(<Slider {...props} />)
51+
const input = getByTestId('slider-input') as HTMLInputElement
52+
expect(parseInt(input.value)).toEqual(props.min)
53+
})
8254

83-
expect(getByLabelText('Slider Label')).toEqual(getByTestId('slider-input'))
84-
})
55+
test('Slider with name and id', () => {
56+
const props = {
57+
id: 'Slip',
58+
name: 'Slide',
59+
}
60+
const { getByTestId } = renderWithTheme(<Slider {...props} />)
61+
const input = getByTestId('slider-input')
62+
expect(input).toHaveAttribute('id', props.id)
63+
expect(input).toHaveAttribute('name', props.name)
64+
})
8565

86-
test('Slider passes change event to optional onChange handler', () => {
87-
const handleChange = jest.fn()
88-
const { getByTestId } = renderWithTheme(
89-
<Slider min={0} max={10} onChange={handleChange} />
90-
)
66+
test('Slider input can be disabled', () => {
67+
const { getByTestId } = renderWithTheme(<Slider disabled />)
68+
const input = getByTestId('slider-input') as HTMLInputElement
69+
expect(input).toBeDisabled()
70+
})
9171

92-
expect(handleChange).toHaveBeenCalledTimes(0)
72+
test('Accessibility: Slider with aria-labelledby and <label>', () => {
73+
const { getByLabelText, getByTestId } = renderWithTheme(
74+
<>
75+
<label id="some-id">Slider Label</label>
76+
<Slider aria-labelledby="some-id" />
77+
</>
78+
)
9379

94-
fireEvent.change(getByTestId('slider-input'), {
95-
target: { value: 10 },
80+
expect(getByLabelText('Slider Label')).toEqual(getByTestId('slider-input'))
9681
})
9782

98-
expect(handleChange).toHaveBeenCalledTimes(1)
99-
})
83+
test('Slider passes change event to optional onChange handler', () => {
84+
const handleChange = jest.fn()
85+
const { getByTestId } = renderWithTheme(
86+
<Slider min={0} max={10} onChange={handleChange} />
87+
)
88+
89+
expect(handleChange).toHaveBeenCalledTimes(0)
10090

101-
test('renders focus styles on keypress', () => {
102-
const { getByTestId } = renderWithTheme(<Slider />)
91+
fireEvent.change(getByTestId('slider-input'), {
92+
target: { value: 10 },
93+
})
10394

104-
fireEvent.keyUp(getByTestId('container'), { key: 'Tab', keyCode: 9 })
95+
expect(handleChange).toHaveBeenCalledTimes(1)
96+
})
10597

106-
expect(getByTestId('slider-input')).toMatchSnapshot()
98+
test('renders focus styles on keypress', () => {
99+
const { getByTestId } = renderWithTheme(<Slider />)
100+
fireEvent.keyUp(getByTestId('container'), { key: 'Tab', keyCode: 9 })
101+
expect(getByTestId('slider-input')).toMatchSnapshot()
102+
})
107103
})

‎packages/components/src/Form/Inputs/Slider/__snapshots__/Slider.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`renders focus styles on keypress 1`] = `
3+
exports[`Slider renders focus styles on keypress 1`] = `
44
.c0 {
55
background: transparent;
66
display: block;

‎packages/components/src/Form/Inputs/ToggleSwitch/ToggleSwitch.test.tsx‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -30,28 +30,30 @@ import { mountWithTheme, assertSnapshot } from '@looker/components-test-utils'
3030

3131
import { ToggleSwitch } from './ToggleSwitch'
3232

33-
test('ToggleSwitch default', () => {
34-
assertSnapshot(<ToggleSwitch />)
35-
})
33+
describe('ToggleSwitch', () => {
34+
test('default', () => {
35+
assertSnapshot(<ToggleSwitch />)
36+
})
3637

37-
test('ToggleSwitch on set to true', () => {
38-
assertSnapshot(<ToggleSwitch on={true} />)
39-
})
38+
test('on set to true', () => {
39+
assertSnapshot(<ToggleSwitch on={true} />)
40+
})
4041

41-
test('ToggleSwitch on set to false', () => {
42-
assertSnapshot(<ToggleSwitch on={false} />)
43-
})
42+
test('on set to false', () => {
43+
assertSnapshot(<ToggleSwitch on={false} />)
44+
})
4445

45-
test('ToggleSwitch that is disabled', () => {
46-
assertSnapshot(<ToggleSwitch on={true} disabled />)
47-
})
46+
test('that is disabled', () => {
47+
assertSnapshot(<ToggleSwitch on={true} disabled />)
48+
})
4849

49-
test('Should trigger onChange handler', () => {
50-
let counter = 0
51-
const handleChange = () => counter++
50+
test('Should trigger onChange handler', () => {
51+
let counter = 0
52+
const handleChange = () => counter++
5253

53-
const wrapper = mountWithTheme(<ToggleSwitch onChange={handleChange} />)
54+
const wrapper = mountWithTheme(<ToggleSwitch onChange={handleChange} />)
5455

55-
wrapper.find('input').simulate('change', { target: { value: '' } })
56-
expect(counter).toEqual(1)
56+
wrapper.find('input').simulate('change', { target: { value: '' } })
57+
expect(counter).toEqual(1)
58+
})
5759
})

‎packages/components/src/Form/ValidationMessage/ValidationMessage.test.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,8 @@
2525
*/
2626

2727
import React from 'react'
28-
import { createWithTheme } from '@looker/components-test-utils'
28+
import { assertSnapshot } from '@looker/components-test-utils'
2929
import { ValidationMessage } from './ValidationMessage'
3030

31-
test('An error message', () => {
32-
const component = createWithTheme(
33-
<ValidationMessage type="error" message="Error!" />
34-
)
35-
const tree = component.toJSON()
36-
expect(tree).toMatchSnapshot()
37-
})
31+
test('An error message', () =>
32+
assertSnapshot(<ValidationMessage type="error" message="Error!" />))

‎packages/components/src/Link/Link.test.tsx‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,20 +26,12 @@
2626

2727
import 'jest-styled-components'
2828
import React from 'react'
29-
import { createWithTheme, renderWithTheme } from '@looker/components-test-utils'
29+
import { renderWithTheme } from '@looker/components-test-utils'
3030
import { theme } from '@looker/design-tokens'
3131
import { screen } from '@testing-library/react'
3232
import { Link } from './Link'
3333

3434
describe('Link', () => {
35-
test('Snapshot', () => {
36-
const component = createWithTheme(
37-
<Link href="https://looker.com">Avocado</Link>
38-
)
39-
const tree = component.toJSON()
40-
expect(tree).toMatchSnapshot()
41-
})
42-
4335
test('Underline', () => {
4436
renderWithTheme(<Link underline>My link</Link>)
4537
const link = screen.getByText('My link')

‎packages/components/src/Link/__snapshots__/Link.test.tsx.snap‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎packages/components/src/Table/Table.test.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,7 @@
2626

2727
import 'jest-styled-components'
2828
import React from 'react'
29-
import { createWithTheme } from '@looker/components-test-utils'
29+
import { assertSnapshot } from '@looker/components-test-utils'
3030
import { Table } from './Table'
3131

32-
test('A Table should render', () => {
33-
const component = createWithTheme(<Table />)
34-
const tree = component.toJSON()
35-
expect(tree).toMatchSnapshot()
36-
})
32+
test('A Table should render', () => assertSnapshot(<Table />))

0 commit comments

Comments
 (0)