Skip to content

Commit a600330

Browse files
laraharrowlaraharrow
authored
test(DataTable): improve test coverage (#1899)
1 parent 9ba8779 commit a600330

File tree

15 files changed

+911
-1859
lines changed

15 files changed

+911
-1859
lines changed

‎packages/components/snapshots/DataTable/Use Sort Manager-snap.png‎

16.9 KB
Loading

‎packages/components/snapshots/FieldText/Icon Before-snap.png‎

-6 Bytes
Loading

‎packages/components/snapshots/FieldTextArea/Error-snap.png‎

1 Byte
Loading

‎packages/components/snapshots/Fieldset/Fields Hide Label-snap.png‎

-2 Bytes
Loading

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

Lines changed: 236 additions & 124 deletions
Large diffs are not rendered by default.

‎packages/components/src/DataTable/Filters/ColumnSelector.test.tsx‎

Lines changed: 84 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,36 +26,111 @@
2626

2727
import React from 'react'
2828
import { renderWithTheme } from '@looker/components-test-utils'
29-
import { fireEvent } from '@testing-library/react'
29+
import { fireEvent, screen } from '@testing-library/react'
3030
import { columns } from '../../__mocks__/DataTable/columns'
3131
import { ColumnSelector } from './ColumnSelector'
3232

3333
describe('ColumnSelector', () => {
3434
test('render', () => {
35-
const { getByText } = renderWithTheme(
35+
renderWithTheme(
3636
<ColumnSelector
3737
columns={columns}
3838
columnsVisible={[]}
3939
onColumnVisibilityChange={jest.fn()}
4040
/>
4141
)
4242

43-
expect(getByText('Select columns to display')).toBeInTheDocument()
43+
expect(screen.getByText('Select columns to display')).toBeInTheDocument()
4444
})
4545

46-
test('onClick displays popover of column options', () => {
47-
const { getByText } = renderWithTheme(
46+
test('open, select column, apply', () => {
47+
const onChange = jest.fn()
48+
renderWithTheme(
4849
<ColumnSelector
4950
columns={columns}
5051
columnsVisible={[]}
51-
onColumnVisibilityChange={jest.fn()}
52+
onColumnVisibilityChange={onChange}
53+
/>
54+
)
55+
56+
fireEvent.click(screen.getByText('Select columns to display'))
57+
expect(screen.getByText('Inventory')).toBeInTheDocument()
58+
59+
fireEvent.click(screen.getByLabelText('Inventory'))
60+
61+
fireEvent.click(screen.getByText('Apply'))
62+
63+
expect(onChange).toBeCalledWith(['inventory'])
64+
65+
// Close popover to silence act() warning
66+
fireEvent.click(document)
67+
})
68+
69+
test('cancel', () => {
70+
const onChange = jest.fn()
71+
renderWithTheme(
72+
<ColumnSelector
73+
columns={columns}
74+
columnsVisible={[]}
75+
onColumnVisibilityChange={onChange}
76+
/>
77+
)
78+
79+
fireEvent.click(screen.getByText('Select columns to display'))
80+
expect(screen.getByText('Inventory')).toBeInTheDocument()
81+
fireEvent.click(screen.getByLabelText('Inventory'))
82+
fireEvent.click(screen.getByText('Cancel'))
83+
expect(onChange).toBeCalledTimes(0)
84+
85+
// Close popover to silence act() warning
86+
fireEvent.click(document)
87+
})
88+
89+
test('Select All', () => {
90+
const onChange = jest.fn()
91+
renderWithTheme(
92+
<ColumnSelector
93+
columns={columns}
94+
columnsVisible={[]}
95+
onColumnVisibilityChange={onChange}
5296
/>
5397
)
54-
const columnButton = getByText('Select columns to display')
5598

56-
fireEvent.click(columnButton)
99+
fireEvent.click(screen.getByText('Select columns to display'))
100+
fireEvent.click(screen.getByText('Select All'))
101+
fireEvent.click(screen.getByText('Apply'))
102+
expect(onChange).toBeCalledWith([
103+
'name',
104+
'status',
105+
'inventory',
106+
'color',
107+
'description',
108+
'origin',
109+
'calories',
110+
'fat',
111+
'protein',
112+
'calcium',
113+
])
114+
115+
// Close popover to silence act() warning
116+
fireEvent.click(document)
117+
})
118+
119+
test('Select None', () => {
120+
const onChange = jest.fn()
121+
renderWithTheme(
122+
<ColumnSelector
123+
columns={columns}
124+
columnsVisible={[]}
125+
onColumnVisibilityChange={onChange}
126+
/>
127+
)
57128

58-
expect(getByText('Inventory')).toBeInTheDocument()
129+
fireEvent.click(screen.getByText('Select columns to display'))
130+
fireEvent.click(screen.getByText('Select All'))
131+
fireEvent.click(screen.getByText('Select None'))
132+
fireEvent.click(screen.getByText('Apply'))
133+
expect(onChange).toBeCalledWith([])
59134

60135
// Close popover to silence act() warning
61136
fireEvent.click(document)

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

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
/*
2+
3+
MIT License
4+
5+
Copyright (c) 2020 Looker Data Sciences, Inc.
6+
7+
Permission is hereby granted, free of charge, to any person obtaining a copy
8+
of this software and associated documentation files (the "Software"), to deal
9+
in the Software without restriction, including without limitation the rights
10+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11+
copies of the Software, and to permit persons to whom the Software is
12+
furnished to do so, subject to the following conditions:
13+
14+
The above copyright notice and this permission notice shall be included in all
15+
copies or substantial portions of the Software.
16+
17+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23+
SOFTWARE.
24+
25+
*/
26+
27+
import React from 'react'
28+
import { renderWithTheme } from '@looker/components-test-utils'
29+
import { screen } from '@testing-library/react'
30+
import { Table } from './Table'
31+
32+
describe('DataTable/Table', () => {
33+
test('loading', () => {
34+
renderWithTheme(
35+
<Table caption="" columnsVisible={[]} columns={[]} state="loading">
36+
Stuff
37+
</Table>
38+
)
39+
expect(screen.getByTestId('loading-spinner')).toBeInTheDocument()
40+
})
41+
42+
test('noResultsDisplay', () => {
43+
renderWithTheme(
44+
<Table
45+
caption=""
46+
columnsVisible={[]}
47+
columns={[]}
48+
state="noResults"
49+
noResultsDisplay="Nope, nothing to see here"
50+
>
51+
Stuff
52+
</Table>
53+
)
54+
expect(screen.getByText('Nope, nothing to see here')).toBeInTheDocument()
55+
})
56+
57+
test('noResultsDisplay non-string', () => {
58+
renderWithTheme(
59+
<Table
60+
caption=""
61+
columnsVisible={[]}
62+
columns={[]}
63+
state="noResults"
64+
noResultsDisplay={<p>Nope, nothing to see here</p>}
65+
>
66+
Stuff
67+
</Table>
68+
)
69+
expect(screen.getByText('Nope, nothing to see here')).toBeInTheDocument()
70+
})
71+
})

‎packages/components/src/DataTable/stories/DataTable.story.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,4 @@ export * from './Interaction'
3232
export * from './Percentage'
3333
export * from './Responsive'
3434
export * from './State'
35+
export * from './useSortManager'

‎packages/components/src/DataTable/stories/useSortManager.tsx‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
/*
2+
3+
MIT License
4+
5+
Copyright (c) 2020 Looker Data Sciences, Inc.
6+
7+
Permission is hereby granted, free of charge, to any person obtaining a copy
8+
of this software and associated documentation files (the "Software"), to deal
9+
in the Software without restriction, including without limitation the rights
10+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11+
copies of the Software, and to permit persons to whom the Software is
12+
furnished to do so, subject to the following conditions:
13+
14+
The above copyright notice and this permission notice shall be included in all
15+
copies or substantial portions of the Software.
16+
17+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23+
SOFTWARE.
24+
25+
*/
26+
27+
import { Story } from '@storybook/react/types-6-0'
28+
import React from 'react'
29+
import { DataTableAction } from '../Item'
30+
import { useDataTableSortManager } from '../utils'
31+
import { DataTableColumns } from '../Column'
32+
import { Link } from '../../Link'
33+
34+
const actionsUseDataTableSortManager = () => (
35+
<>
36+
<DataTableAction onClick={() => alert(`Ordered!!`)}>Order</DataTableAction>
37+
<DataTableAction onClick={() => alert('Mmmm...')}>
38+
Make Grilled Cheese
39+
</DataTableAction>
40+
<DataTableAction onClick={() => alert('Delete')}>Delete</DataTableAction>
41+
</>
42+
)
43+
44+
const columnsUseDataTableSortManager: DataTableColumns = [
45+
{
46+
hide: true,
47+
id: 'calories',
48+
title: 'Calories',
49+
type: 'number',
50+
},
51+
{
52+
canSort: true,
53+
id: 'id',
54+
title: 'ID',
55+
type: 'number',
56+
},
57+
{
58+
canSort: true,
59+
id: 'name',
60+
title: 'Name',
61+
type: 'string',
62+
},
63+
{
64+
canSort: true,
65+
id: 'type',
66+
title: 'Type',
67+
type: 'string',
68+
},
69+
]
70+
71+
const dataUseDataTableSortManager = [
72+
{
73+
calories: 101,
74+
id: 1,
75+
name: 'Cheddar',
76+
type: 'hard, artisan, processed',
77+
},
78+
{
79+
calories: 102,
80+
id: 2,
81+
name: 'Brie',
82+
type: 'soft, processed',
83+
},
84+
{
85+
calories: 103,
86+
id: 3,
87+
name: (
88+
<a href="https://components.looker.com/" target="_blank" rel="noreferrer">
89+
Gouda
90+
</a>
91+
),
92+
type: 'semi-hard, artisan, brined',
93+
},
94+
{
95+
calories: 104,
96+
id: 4,
97+
name: (
98+
<Link
99+
href="https://components.looker.com/"
100+
target="_blank"
101+
rel="noreferrer"
102+
>
103+
American
104+
</Link>
105+
),
106+
type: 'semi-soft, processed',
107+
},
108+
]
109+
110+
const Template: Story<{}> = () =>
111+
useDataTableSortManager(
112+
'Caption...',
113+
dataUseDataTableSortManager,
114+
columnsUseDataTableSortManager,
115+
actionsUseDataTableSortManager
116+
)
117+
118+
export const useSortManager = Template.bind({})

‎packages/components/src/DataTable/utils/useDataTable.test.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
/*
2+
3+
MIT License
4+
5+
Copyright (c) 2020 Looker Data Sciences, Inc.
6+
7+
Permission is hereby granted, free of charge, to any person obtaining a copy
8+
of this software and associated documentation files (the "Software"), to deal
9+
in the Software without restriction, including without limitation the rights
10+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11+
copies of the Software, and to permit persons to whom the Software is
12+
furnished to do so, subject to the following conditions:
13+
14+
The above copyright notice and this permission notice shall be included in all
15+
copies or substantial portions of the Software.
16+
17+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23+
SOFTWARE.
24+
25+
*/
26+
27+
import React from 'react'
28+
import { renderWithTheme } from '@looker/components-test-utils'
29+
import { screen } from '@testing-library/react'
30+
import { DataTableColumns } from '../Column'
31+
import { useDataTable } from './useDataTable'
32+
33+
describe('useSelectManager', () => {
34+
const data = [
35+
{
36+
id: 1,
37+
name: 'Gorgonzola',
38+
},
39+
{
40+
id: 2,
41+
name: 'Cheddar',
42+
},
43+
{
44+
id: 3,
45+
name: `Blue`,
46+
},
47+
]
48+
49+
const columns: DataTableColumns = [
50+
{
51+
id: 'id',
52+
title: 'ID',
53+
type: 'number',
54+
},
55+
{
56+
id: 'name',
57+
title: 'Name',
58+
type: 'string',
59+
},
60+
]
61+
62+
test('returns a DataTable', () => {
63+
const Test = () => useDataTable(data, columns, 'Cheeses example')
64+
renderWithTheme(<Test />)
65+
expect(screen.getByText('ID')).toBeInTheDocument()
66+
expect(screen.getByText('Name')).toBeInTheDocument()
67+
expect(screen.getByText('Gorgonzola')).toBeInTheDocument()
68+
expect(screen.getByText('Cheddar')).toBeInTheDocument()
69+
expect(screen.getByText('Blue')).toBeInTheDocument()
70+
})
71+
})

0 commit comments

Comments
 (0)