1
- import { render , shallow } from "enzyme" ;
1
+ import "@testing-library/jest-dom" ;
2
+ import { render } from "@testing-library/react" ;
3
+ import userEvent from "@testing-library/user-event" ;
2
4
import { createElement } from "react" ;
3
- import { GridColumn } from "../../typings/GridColumn" ;
5
+ import { GridColumn , ColumnId } from "../../typings/GridColumn" ;
4
6
import { ColumnResizer } from "../ColumnResizer" ;
5
7
import { Header , HeaderProps } from "../Header" ;
6
8
7
9
describe ( "Header" , ( ) => {
8
10
it ( "renders the structure correctly" , ( ) => {
9
11
const component = render ( < Header { ...mockHeaderProps ( ) } /> ) ;
10
12
11
- expect ( component ) . toMatchSnapshot ( ) ;
13
+ expect ( component . asFragment ( ) ) . toMatchSnapshot ( ) ;
12
14
} ) ;
13
15
14
16
it ( "renders the structure correctly when sortable" , ( ) => {
15
17
const props = mockHeaderProps ( ) ;
16
18
props . column . canSort = true ;
17
19
props . sortable = true ;
18
-
19
20
const component = render ( < Header { ...props } /> ) ;
20
21
21
- expect ( component ) . toMatchSnapshot ( ) ;
22
+ expect ( component . asFragment ( ) ) . toMatchSnapshot ( ) ;
22
23
} ) ;
23
24
24
25
it ( "renders the structure correctly when resizable" , ( ) => {
25
26
const props = mockHeaderProps ( ) ;
26
27
props . column . canResize = true ;
27
28
props . resizable = true ;
28
-
29
29
const component = render ( < Header { ...props } /> ) ;
30
30
31
- expect ( component ) . toMatchSnapshot ( ) ;
31
+ expect ( component . asFragment ( ) ) . toMatchSnapshot ( ) ;
32
32
} ) ;
33
33
34
34
it ( "renders the structure correctly when draggable" , ( ) => {
35
35
const props = mockHeaderProps ( ) ;
36
36
props . column . canDrag = true ;
37
37
props . draggable = true ;
38
-
39
38
const component = render ( < Header { ...props } /> ) ;
40
39
41
- expect ( component ) . toMatchSnapshot ( ) ;
40
+ expect ( component . asFragment ( ) ) . toMatchSnapshot ( ) ;
42
41
} ) ;
43
42
44
43
it ( "renders the structure correctly when filterable with no custom filter" , ( ) => {
45
44
const props = mockHeaderProps ( ) ;
46
45
props . filterable = true ;
47
-
48
46
const component = render ( < Header { ...props } /> ) ;
49
47
50
- expect ( component ) . toMatchSnapshot ( ) ;
48
+ expect ( component . asFragment ( ) ) . toMatchSnapshot ( ) ;
51
49
} ) ;
52
50
53
51
it ( "renders the structure correctly when filterable with custom filter" , ( ) => {
54
52
const props = mockHeaderProps ( ) ;
55
- const filterWidget = (
53
+ props . filterable = true ;
54
+ props . filterWidget = (
56
55
< div >
57
56
< label > Date picker filter</ label >
58
57
< input type = "date" />
59
58
</ div >
60
59
) ;
61
- props . filterable = true ;
62
-
63
- const component = render ( < Header { ...props } filterWidget = { filterWidget } /> ) ;
60
+ const component = render ( < Header { ...props } /> ) ;
64
61
65
- expect ( component ) . toMatchSnapshot ( ) ;
62
+ expect ( component . asFragment ( ) ) . toMatchSnapshot ( ) ;
66
63
} ) ;
67
64
68
- it ( "calls setSortBy store function with correct parameters when sortable" , ( ) => {
65
+ it ( "calls setSortBy store function with correct parameters when sortable" , async ( ) => {
66
+ const user = userEvent . setup ( ) ;
69
67
const mockedFunction = jest . fn ( ) ;
70
- const column = {
71
- columnId : "0" ,
68
+ const props = mockHeaderProps ( ) ;
69
+ props . sortable = true ;
70
+ props . column = {
71
+ ...props . column ,
72
+ columnId : "0" as ColumnId ,
72
73
columnNumber : 0 ,
73
74
header : "My sortable column" ,
74
75
canSort : true ,
75
76
sortDir : undefined ,
76
77
toggleSort : mockedFunction
77
78
} as any ;
79
+ const component = render ( < Header { ...props } /> ) ;
80
+ const button = component . getByRole ( "button" ) ;
78
81
79
- const component = shallow ( < Header { ...mockHeaderProps ( ) } column = { column } sortable /> ) ;
80
-
81
- const clickableRegion = component . find ( ".column-header" ) ;
82
-
83
- expect ( clickableRegion ) . toHaveLength ( 1 ) ;
84
-
85
- clickableRegion . simulate ( "click" ) ;
82
+ expect ( button ) . toBeInTheDocument ( ) ;
83
+ await user . click ( button ) ;
86
84
expect ( mockedFunction ) . toHaveBeenCalled ( ) ;
87
85
} ) ;
88
86
@@ -92,7 +90,7 @@ describe("Header", () => {
92
90
93
91
const component = render ( < Header { ...props } className = "my-custom-class" /> ) ;
94
92
95
- expect ( component ) . toMatchSnapshot ( ) ;
93
+ expect ( component . asFragment ( ) ) . toMatchSnapshot ( ) ;
96
94
} ) ;
97
95
98
96
it ( "renders the structure correctly when is hidden and preview" , ( ) => {
@@ -103,7 +101,7 @@ describe("Header", () => {
103
101
104
102
const component = render ( < Header { ...props } /> ) ;
105
103
106
- expect ( component ) . toMatchSnapshot ( ) ;
104
+ expect ( component . asFragment ( ) ) . toMatchSnapshot ( ) ;
107
105
} ) ;
108
106
109
107
it ( "renders the structure correctly when value is empty" , ( ) => {
@@ -112,19 +110,35 @@ describe("Header", () => {
112
110
113
111
const component = render ( < Header { ...props } /> ) ;
114
112
115
- expect ( component ) . toMatchSnapshot ( ) ;
113
+ expect ( component . asFragment ( ) ) . toMatchSnapshot ( ) ;
116
114
} ) ;
117
115
} ) ;
118
116
119
117
function mockHeaderProps ( ) : HeaderProps {
120
118
return {
121
119
gridId : "dg1" ,
122
120
column : {
123
- columnId : "dg1-column0" ,
121
+ columnId : "dg1-column0" as ColumnId ,
124
122
columnIndex : 0 ,
125
123
header : "Test" ,
126
124
sortDir : undefined ,
127
- toggleSort : ( ) => undefined
125
+ toggleSort : ( ) => undefined ,
126
+ setHeaderElementRef : jest . fn ( ) ,
127
+ alignment : "left" ,
128
+ canDrag : false ,
129
+ columnClass : ( ) => undefined ,
130
+ initiallyHidden : false ,
131
+ renderCellContent : ( ) => createElement ( "div" ) ,
132
+ isAvailable : true ,
133
+ wrapText : false ,
134
+ canHide : false ,
135
+ isHidden : false ,
136
+ toggleHidden : ( ) => undefined ,
137
+ canSort : false ,
138
+ canResize : false ,
139
+ size : undefined ,
140
+ setSize : ( ) => undefined ,
141
+ getCssWidth : ( ) => "100px"
128
142
} as GridColumn ,
129
143
draggable : false ,
130
144
dropTarget : undefined ,
0 commit comments