bright-components 10.2.6 → 10.2.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/circle.yml +1 -2
- package/deploy.sh +6 -0
- package/dist/components/DayPicker/NewDayPicker/index.js +0 -28
- package/dist/components/DayPicker/index.js +2 -20
- package/dist/components/DayPickerPanel/HeaderDayPickerPanel/index.js +1 -18
- package/dist/components/DayPickerPanel/HeaderMonthPanel/index.js +0 -14
- package/dist/components/DayPickerPanel/HeaderYearPanel/index.js +2 -15
- package/dist/components/DayPickerPanel/Shortcuts/index.js +2 -16
- package/dist/components/DayPickerPanel/index.js +2 -74
- package/dist/components/EmployeeCard/index.js +1 -14
- package/dist/components/EmployeePicker/FilterBar/index.js +1 -28
- package/dist/components/EmployeePicker/Group/index.js +1 -41
- package/dist/components/FilterRadioGroup/index.js +2 -14
- package/dist/components/Form/index.js +4 -47
- package/dist/components/RadioBlock/index.js +10 -41
- package/dist/components/Time/OverlayBase/index.js +2 -25
- package/dist/components/Time/TimePicker/TimeOverlay/index.js +3 -26
- package/dist/components/TimePicker/Time/TimeOverlay/index.js +1 -58
- package/dist/setupTests.js +0 -7
- package/package.json +5 -7
- package/src/components/DayPicker/NewDayPicker/index.js +0 -21
- package/src/components/DayPicker/index.js +1 -16
- package/src/components/DayPicker/test.js +0 -85
- package/src/components/DayPickerPanel/HeaderDayPickerPanel/index.js +2 -22
- package/src/components/DayPickerPanel/HeaderDayPickerPanel/test.js +0 -34
- package/src/components/DayPickerPanel/HeaderMonthPanel/index.js +0 -10
- package/src/components/DayPickerPanel/HeaderMonthPanel/test.js +0 -25
- package/src/components/DayPickerPanel/HeaderYearPanel/index.js +3 -12
- package/src/components/DayPickerPanel/HeaderYearPanel/test.js +0 -17
- package/src/components/DayPickerPanel/Shortcuts/index.js +3 -17
- package/src/components/DayPickerPanel/Shortcuts/test.js +0 -39
- package/src/components/DayPickerPanel/index.js +1 -69
- package/src/components/DayPickerPanel/test.js +0 -177
- package/src/components/EmployeeCard/index.js +1 -15
- package/src/components/EmployeeCard/test.js +0 -20
- package/src/components/EmployeePicker/FilterBar/index.js +2 -26
- package/src/components/EmployeePicker/FilterBar/test.js +0 -29
- package/src/components/EmployeePicker/Group/index.js +1 -42
- package/src/components/EmployeePicker/Group/test.js +0 -21
- package/src/components/FilterRadioGroup/index.js +2 -14
- package/src/components/FilterRadioGroup/test.js +0 -13
- package/src/components/Form/index.js +1 -49
- package/src/components/Form/test.js +0 -73
- package/src/components/Modal/test.js +9 -9
- package/src/components/RadioBlock/index.js +14 -33
- package/src/components/RadioBlock/test.js +35 -155
- package/src/components/ResponsiveTabs/test.js +49 -86
- package/src/components/Time/OverlayBase/index.js +3 -21
- package/src/components/Time/OverlayBase/test.js +0 -50
- package/src/components/Time/TimePicker/TimeOverlay/index.js +4 -30
- package/src/components/Time/TimePicker/TimeOverlay/test.js +0 -24
- package/src/components/TimePicker/DayPart/test.js +1 -1
- package/src/components/TimePicker/Time/TimeOverlay/index.js +2 -50
- package/src/components/TimePicker/Time/TimeOverlay/test.js +1 -220
- package/src/index.js +1 -1
- package/src/setupTests.js +0 -2
- package/dist/components/TimePicker/utils/PickerGA/index.js +0 -24
- package/dist/utils/trackForm/index.js +0 -48
- package/src/components/TimePicker/utils/PickerGA/index.js +0 -6
- package/src/components/TimePicker/utils/PickerGA/test.js +0 -29
- package/src/utils/trackForm/index.js +0 -36
- package/src/utils/trackForm/test.js +0 -110
@@ -1,17 +1,15 @@
|
|
1
|
-
import React from
|
2
|
-
import { render, fireEvent } from
|
3
|
-
import Colors from
|
4
|
-
import { event } from 'react-ga';
|
1
|
+
import React from "react";
|
2
|
+
import { render, fireEvent } from "@testing-library/react";
|
3
|
+
import Colors from "constants/colors";
|
5
4
|
|
6
|
-
import RadioBlock from
|
5
|
+
import RadioBlock from ".";
|
7
6
|
|
8
7
|
const child = <div data-testid="test-child">child</div>;
|
9
8
|
|
10
9
|
const onChange = jest.fn();
|
11
|
-
jest.mock('react-ga');
|
12
10
|
|
13
|
-
describe(
|
14
|
-
it(
|
11
|
+
describe("Radio Block", () => {
|
12
|
+
it("should render styles when unchecked", () => {
|
15
13
|
const { getByTestId } = render(
|
16
14
|
<RadioBlock
|
17
15
|
checked={false}
|
@@ -24,14 +22,14 @@ describe('Radio Block', () => {
|
|
24
22
|
</RadioBlock>
|
25
23
|
);
|
26
24
|
|
27
|
-
expect(getByTestId(
|
28
|
-
|
25
|
+
expect(getByTestId("option")).toHaveStyleRule(
|
26
|
+
"border",
|
29
27
|
`1px solid ${Colors.borderColor}`
|
30
28
|
);
|
31
|
-
expect(getByTestId(
|
29
|
+
expect(getByTestId("option")).toHaveStyleRule("background", "#fff");
|
32
30
|
});
|
33
31
|
|
34
|
-
it(
|
32
|
+
it("should render styles when checked", () => {
|
35
33
|
const { getByTestId } = render(
|
36
34
|
<RadioBlock
|
37
35
|
checked
|
@@ -44,17 +42,17 @@ describe('Radio Block', () => {
|
|
44
42
|
</RadioBlock>
|
45
43
|
);
|
46
44
|
|
47
|
-
expect(getByTestId(
|
48
|
-
|
45
|
+
expect(getByTestId("option")).toHaveStyleRule(
|
46
|
+
"border",
|
49
47
|
`1px solid ${Colors.primaryLight}`
|
50
48
|
);
|
51
|
-
expect(getByTestId(
|
52
|
-
|
49
|
+
expect(getByTestId("option")).toHaveStyleRule(
|
50
|
+
"background",
|
53
51
|
Colors.primaryLighter
|
54
52
|
);
|
55
53
|
});
|
56
54
|
|
57
|
-
it(
|
55
|
+
it("should render the supplied children", () => {
|
58
56
|
const { getByTestId } = render(
|
59
57
|
<RadioBlock
|
60
58
|
checked={false}
|
@@ -66,10 +64,10 @@ describe('Radio Block', () => {
|
|
66
64
|
{child}
|
67
65
|
</RadioBlock>
|
68
66
|
);
|
69
|
-
expect(getByTestId(
|
67
|
+
expect(getByTestId("test-child")).toHaveTextContent("child");
|
70
68
|
});
|
71
69
|
|
72
|
-
it(
|
70
|
+
it("should render a radio input", () => {
|
73
71
|
const { getByRole } = render(
|
74
72
|
<RadioBlock
|
75
73
|
checked={false}
|
@@ -82,12 +80,12 @@ describe('Radio Block', () => {
|
|
82
80
|
</RadioBlock>
|
83
81
|
);
|
84
82
|
|
85
|
-
expect(getByRole(
|
86
|
-
expect(getByRole(
|
87
|
-
expect(getByRole(
|
83
|
+
expect(getByRole("radio")).toBeInTheDocument();
|
84
|
+
expect(getByRole("radio")).toHaveAttribute("name", "nameyname");
|
85
|
+
expect(getByRole("radio")).toHaveAttribute("value", "valerie");
|
88
86
|
});
|
89
87
|
|
90
|
-
it(
|
88
|
+
it("should make option opaque if disabled", () => {
|
91
89
|
const elem = render(
|
92
90
|
<RadioBlock
|
93
91
|
checked={false}
|
@@ -101,129 +99,11 @@ describe('Radio Block', () => {
|
|
101
99
|
</RadioBlock>
|
102
100
|
);
|
103
101
|
|
104
|
-
expect(elem.getByTestId(
|
102
|
+
expect(elem.getByTestId("option")).toHaveStyleRule("opacity", "0.3");
|
105
103
|
});
|
106
104
|
|
107
|
-
describe(
|
108
|
-
it(
|
109
|
-
expect(event).not.toHaveBeenCalled();
|
110
|
-
render(
|
111
|
-
<RadioBlock
|
112
|
-
checked
|
113
|
-
onChange={onChange}
|
114
|
-
name="nameyname"
|
115
|
-
value="valerie"
|
116
|
-
className="class"
|
117
|
-
GA={{
|
118
|
-
category: 'ga-category-mock',
|
119
|
-
action: 'ga-action-mock'
|
120
|
-
}}
|
121
|
-
>
|
122
|
-
{child}
|
123
|
-
</RadioBlock>
|
124
|
-
);
|
125
|
-
expect(event).toHaveBeenCalledWith({
|
126
|
-
action: 'Defaulted to ga-action-mock',
|
127
|
-
category: 'ga-category-mock'
|
128
|
-
});
|
129
|
-
});
|
130
|
-
|
131
|
-
it('should not call default GA event if component is not rendered with checked state', () => {
|
132
|
-
expect(event).not.toHaveBeenCalled();
|
133
|
-
render(
|
134
|
-
<RadioBlock
|
135
|
-
checked={false}
|
136
|
-
onChange={onChange}
|
137
|
-
name="nameyname"
|
138
|
-
value="valerie"
|
139
|
-
className="class"
|
140
|
-
GA={{
|
141
|
-
category: 'ga-category-mock',
|
142
|
-
action: 'ga-action-mock'
|
143
|
-
}}
|
144
|
-
>
|
145
|
-
{child}
|
146
|
-
</RadioBlock>
|
147
|
-
);
|
148
|
-
expect(event).not.toHaveBeenCalled();
|
149
|
-
});
|
150
|
-
|
151
|
-
it('should not call default GA event if component does not have A GA prop', () => {
|
152
|
-
expect(event).not.toHaveBeenCalled();
|
153
|
-
render(
|
154
|
-
<RadioBlock
|
155
|
-
checked
|
156
|
-
onChange={onChange}
|
157
|
-
name="nameyname"
|
158
|
-
value="valerie"
|
159
|
-
className="class"
|
160
|
-
>
|
161
|
-
{child}
|
162
|
-
</RadioBlock>
|
163
|
-
);
|
164
|
-
expect(event).not.toHaveBeenCalled();
|
165
|
-
});
|
166
|
-
});
|
167
|
-
|
168
|
-
describe('GA onChange events', () => {
|
169
|
-
it('should trigger GA event when user click on an unchecked radio', () => {
|
170
|
-
expect(event).not.toHaveBeenCalled();
|
171
|
-
const elem = render(
|
172
|
-
<RadioBlock
|
173
|
-
checked={false}
|
174
|
-
onChange={onChange}
|
175
|
-
name="nameyname"
|
176
|
-
value="valerie"
|
177
|
-
className="class"
|
178
|
-
GA={{
|
179
|
-
category: 'ga-category-mock',
|
180
|
-
action: 'ga-action-mock'
|
181
|
-
}}
|
182
|
-
>
|
183
|
-
{child}
|
184
|
-
</RadioBlock>
|
185
|
-
);
|
186
|
-
|
187
|
-
fireEvent.click(elem.getByRole('radio'), {
|
188
|
-
target: { value: 'valerie' }
|
189
|
-
});
|
190
|
-
|
191
|
-
expect(event).toHaveBeenCalledWith({
|
192
|
-
action: 'Switched to ga-action-mock',
|
193
|
-
category: 'ga-category-mock'
|
194
|
-
});
|
195
|
-
});
|
196
|
-
|
197
|
-
it('should NOT trigger GA event when user clicks on a checked radio button', () => {
|
198
|
-
expect(event).not.toHaveBeenCalled();
|
199
|
-
const elem = render(
|
200
|
-
<RadioBlock
|
201
|
-
checked
|
202
|
-
onChange={onChange}
|
203
|
-
name="nameyname"
|
204
|
-
value="valerie"
|
205
|
-
className="class"
|
206
|
-
GA={{
|
207
|
-
category: 'ga-category-mock',
|
208
|
-
action: 'ga-action-mock'
|
209
|
-
}}
|
210
|
-
>
|
211
|
-
{child}
|
212
|
-
</RadioBlock>
|
213
|
-
);
|
214
|
-
|
215
|
-
event.mockClear(); // to clear the event call that happened on mounting component
|
216
|
-
|
217
|
-
fireEvent.click(elem.getByRole('radio'), {
|
218
|
-
target: { value: 'valerie' }
|
219
|
-
});
|
220
|
-
|
221
|
-
expect(event).not.toHaveBeenCalled();
|
222
|
-
});
|
223
|
-
});
|
224
|
-
|
225
|
-
describe('Disabled options', () => {
|
226
|
-
it('should use not-allowed cursor when disabled', () => {
|
105
|
+
describe("Disabled options", () => {
|
106
|
+
it("should use not-allowed cursor when disabled", () => {
|
227
107
|
const elem = render(
|
228
108
|
<RadioBlock
|
229
109
|
checked={false}
|
@@ -237,17 +117,17 @@ describe('Radio Block', () => {
|
|
237
117
|
</RadioBlock>
|
238
118
|
);
|
239
119
|
|
240
|
-
expect(elem.getByTestId(
|
241
|
-
|
242
|
-
|
120
|
+
expect(elem.getByTestId("option")).toHaveStyleRule(
|
121
|
+
"opacity",
|
122
|
+
"0.3"
|
243
123
|
);
|
244
|
-
expect(elem.getByRole(
|
245
|
-
|
246
|
-
|
124
|
+
expect(elem.getByRole("radio")).toHaveStyleRule(
|
125
|
+
"cursor",
|
126
|
+
"not-allowed"
|
247
127
|
);
|
248
128
|
});
|
249
129
|
|
250
|
-
it(
|
130
|
+
it("should use a pointer cursor when not disabled", () => {
|
251
131
|
const elem = render(
|
252
132
|
<RadioBlock
|
253
133
|
checked={false}
|
@@ -261,10 +141,10 @@ describe('Radio Block', () => {
|
|
261
141
|
</RadioBlock>
|
262
142
|
);
|
263
143
|
|
264
|
-
expect(elem.getByTestId(
|
265
|
-
expect(elem.getByRole(
|
266
|
-
|
267
|
-
|
144
|
+
expect(elem.getByTestId("option")).toHaveStyleRule("opacity", "1");
|
145
|
+
expect(elem.getByRole("radio")).toHaveStyleRule(
|
146
|
+
"cursor",
|
147
|
+
"pointer"
|
268
148
|
);
|
269
149
|
});
|
270
150
|
});
|
@@ -1,13 +1,10 @@
|
|
1
|
-
import React from
|
2
|
-
import { render, fireEvent } from
|
3
|
-
import TabPanel from
|
4
|
-
import
|
5
|
-
import ResponsiveTabs from '.';
|
1
|
+
import React from "react";
|
2
|
+
import { render, fireEvent } from "@testing-library/react";
|
3
|
+
import TabPanel from "components/Tabs/TabPanel";
|
4
|
+
import ResponsiveTabs from ".";
|
6
5
|
|
7
|
-
|
8
|
-
|
9
|
-
describe('<ResponsiveTabs />', () => {
|
10
|
-
it('should handle when defaultIndex is larger than the amount of tabs', () => {
|
6
|
+
describe("<ResponsiveTabs />", () => {
|
7
|
+
it("should handle when defaultIndex is larger than the amount of tabs", () => {
|
11
8
|
const { getByRole, getAllByRole } = render(
|
12
9
|
<ResponsiveTabs defaultIndex={3}>
|
13
10
|
<TabPanel name="One">One</TabPanel>
|
@@ -15,13 +12,13 @@ describe('<ResponsiveTabs />', () => {
|
|
15
12
|
</ResponsiveTabs>
|
16
13
|
);
|
17
14
|
|
18
|
-
expect(getByRole(
|
19
|
-
expect(getAllByRole(
|
15
|
+
expect(getByRole("combobox")).toBeInTheDocument();
|
16
|
+
expect(getAllByRole("option")).toHaveLength(2);
|
20
17
|
|
21
18
|
// doesn't throw an error is good
|
22
19
|
});
|
23
20
|
|
24
|
-
it(
|
21
|
+
it("should render a dropdown for selecting tabs on mobile", () => {
|
25
22
|
const { getByRole, getAllByRole } = render(
|
26
23
|
<ResponsiveTabs>
|
27
24
|
<TabPanel name="One">One</TabPanel>
|
@@ -29,17 +26,13 @@ describe('<ResponsiveTabs />', () => {
|
|
29
26
|
</ResponsiveTabs>
|
30
27
|
);
|
31
28
|
|
32
|
-
expect(getByRole(
|
33
|
-
expect(getAllByRole(
|
29
|
+
expect(getByRole("combobox")).toBeInTheDocument();
|
30
|
+
expect(getAllByRole("option")).toHaveLength(2);
|
34
31
|
});
|
35
32
|
|
36
|
-
it(
|
33
|
+
it("should change tabs when the dropdown is used", () => {
|
37
34
|
const { getByRole, getByTestId } = render(
|
38
|
-
<ResponsiveTabs
|
39
|
-
onSelected={i => {
|
40
|
-
event({ category: 'tabs', action: 'tab change', label: i });
|
41
|
-
}}
|
42
|
-
>
|
35
|
+
<ResponsiveTabs onSelected={i => {}}>
|
43
36
|
<TabPanel name="One" data-testid="tab1">
|
44
37
|
One
|
45
38
|
</TabPanel>
|
@@ -49,29 +42,19 @@ describe('<ResponsiveTabs />', () => {
|
|
49
42
|
</ResponsiveTabs>
|
50
43
|
);
|
51
44
|
|
52
|
-
expect(getByTestId(
|
53
|
-
expect(getByTestId(
|
54
|
-
|
55
|
-
const dropdown = getByRole('combobox');
|
56
|
-
fireEvent.change(dropdown, { target: { value: 'Two' } });
|
45
|
+
expect(getByTestId("tab1")).toBeVisible();
|
46
|
+
expect(getByTestId("tab2")).not.toBeVisible();
|
57
47
|
|
58
|
-
|
59
|
-
|
48
|
+
const dropdown = getByRole("combobox");
|
49
|
+
fireEvent.change(dropdown, { target: { value: "Two" } });
|
60
50
|
|
61
|
-
expect(
|
62
|
-
|
63
|
-
category: 'tabs',
|
64
|
-
label: 1
|
65
|
-
});
|
51
|
+
expect(getByTestId("tab1")).not.toBeVisible();
|
52
|
+
expect(getByTestId("tab2")).toBeVisible();
|
66
53
|
});
|
67
54
|
|
68
|
-
it(
|
55
|
+
it("should change tabs when the tablist is used", () => {
|
69
56
|
const { getAllByRole, getByTestId } = render(
|
70
|
-
<ResponsiveTabs
|
71
|
-
onSelected={i => {
|
72
|
-
event({ category: 'tabs', action: 'tab change', label: i });
|
73
|
-
}}
|
74
|
-
>
|
57
|
+
<ResponsiveTabs onSelected={i => {}}>
|
75
58
|
<TabPanel name="One" data-testid="tab1">
|
76
59
|
One
|
77
60
|
</TabPanel>
|
@@ -81,48 +64,28 @@ describe('<ResponsiveTabs />', () => {
|
|
81
64
|
</ResponsiveTabs>
|
82
65
|
);
|
83
66
|
|
84
|
-
expect(getByTestId(
|
85
|
-
expect(getByTestId(
|
67
|
+
expect(getByTestId("tab1")).toBeVisible();
|
68
|
+
expect(getByTestId("tab2")).not.toBeVisible();
|
86
69
|
|
87
|
-
const { 1: secondTab } = getAllByRole(
|
70
|
+
const { 1: secondTab } = getAllByRole("tab");
|
88
71
|
fireEvent.click(secondTab);
|
89
72
|
|
90
|
-
expect(getByTestId(
|
91
|
-
expect(getByTestId(
|
92
|
-
|
93
|
-
expect(event).toHaveBeenCalledWith({
|
94
|
-
action: 'tab change',
|
95
|
-
category: 'tabs',
|
96
|
-
label: 1
|
97
|
-
});
|
98
|
-
});
|
99
|
-
|
100
|
-
it('not passing in onSelected', () => {
|
101
|
-
const { getByRole } = render(
|
102
|
-
<ResponsiveTabs>
|
103
|
-
<TabPanel name="One">One</TabPanel>
|
104
|
-
</ResponsiveTabs>
|
105
|
-
);
|
106
|
-
|
107
|
-
fireEvent.change(getByRole('combobox'), { target: { value: 'One' } });
|
108
|
-
expect(event).not.toHaveBeenCalled();
|
109
|
-
|
110
|
-
fireEvent.click(getByRole('tab'));
|
111
|
-
expect(event).not.toHaveBeenCalled();
|
73
|
+
expect(getByTestId("tab1")).not.toBeVisible();
|
74
|
+
expect(getByTestId("tab2")).toBeVisible();
|
112
75
|
});
|
113
76
|
|
114
|
-
it(
|
77
|
+
it("should support tab auto width", () => {
|
115
78
|
const { getByRole } = render(
|
116
79
|
<ResponsiveTabs autoTabWidth>
|
117
80
|
<TabPanel name="One">One</TabPanel>
|
118
81
|
</ResponsiveTabs>
|
119
82
|
);
|
120
83
|
|
121
|
-
expect(getByRole(
|
84
|
+
expect(getByRole("tab")).toHaveStyleRule({ flex: "1 1 auto" });
|
122
85
|
});
|
123
86
|
|
124
|
-
describe(
|
125
|
-
it(
|
87
|
+
describe("when tablist inferred from children", () => {
|
88
|
+
it("should render a tablist inferred from children", () => {
|
126
89
|
const { getByRole, getAllByRole } = render(
|
127
90
|
<ResponsiveTabs>
|
128
91
|
<TabPanel name="One">One</TabPanel>
|
@@ -131,11 +94,11 @@ describe('<ResponsiveTabs />', () => {
|
|
131
94
|
</ResponsiveTabs>
|
132
95
|
);
|
133
96
|
|
134
|
-
expect(getByRole(
|
135
|
-
expect(getAllByRole(
|
97
|
+
expect(getByRole("tablist")).toBeInTheDocument();
|
98
|
+
expect(getAllByRole("tab")).toHaveLength(3);
|
136
99
|
});
|
137
100
|
|
138
|
-
it(
|
101
|
+
it("should handle null elements", () => {
|
139
102
|
const { getByRole, getAllByRole } = render(
|
140
103
|
<ResponsiveTabs>
|
141
104
|
<TabPanel name="One">One</TabPanel>
|
@@ -143,11 +106,11 @@ describe('<ResponsiveTabs />', () => {
|
|
143
106
|
</ResponsiveTabs>
|
144
107
|
);
|
145
108
|
|
146
|
-
expect(getByRole(
|
147
|
-
expect(getAllByRole(
|
109
|
+
expect(getByRole("tablist")).toBeInTheDocument();
|
110
|
+
expect(getAllByRole("tab")).toHaveLength(1);
|
148
111
|
});
|
149
112
|
|
150
|
-
it(
|
113
|
+
it("should support counters", () => {
|
151
114
|
const { getByText } = render(
|
152
115
|
<ResponsiveTabs>
|
153
116
|
<TabPanel name="One" counter={999}>
|
@@ -160,14 +123,14 @@ describe('<ResponsiveTabs />', () => {
|
|
160
123
|
</ResponsiveTabs>
|
161
124
|
);
|
162
125
|
|
163
|
-
expect(getByText(
|
164
|
-
expect(getByText(
|
126
|
+
expect(getByText("999")).toBeInTheDocument();
|
127
|
+
expect(getByText("3333")).toBeInTheDocument();
|
165
128
|
});
|
166
129
|
});
|
167
130
|
|
168
|
-
describe(
|
169
|
-
it(
|
170
|
-
const tabs = [{ name:
|
131
|
+
describe("when tab list is passed as a prop", () => {
|
132
|
+
it("should render a tablist", () => {
|
133
|
+
const tabs = [{ name: "One" }, { name: "Two" }, { name: "Three" }];
|
171
134
|
const { getByRole, getAllByRole } = render(
|
172
135
|
<ResponsiveTabs tabs={tabs}>
|
173
136
|
<TabPanel>One</TabPanel>
|
@@ -176,15 +139,15 @@ describe('<ResponsiveTabs />', () => {
|
|
176
139
|
</ResponsiveTabs>
|
177
140
|
);
|
178
141
|
|
179
|
-
expect(getByRole(
|
180
|
-
expect(getAllByRole(
|
142
|
+
expect(getByRole("tablist")).toBeInTheDocument();
|
143
|
+
expect(getAllByRole("tab")).toHaveLength(tabs.length);
|
181
144
|
});
|
182
145
|
|
183
|
-
it(
|
146
|
+
it("should support counters", () => {
|
184
147
|
const tabs = [
|
185
|
-
{ name:
|
186
|
-
{ name:
|
187
|
-
{ name:
|
148
|
+
{ name: "One", counter: 999 },
|
149
|
+
{ name: "Two" },
|
150
|
+
{ name: "Three", counter: 3333 }
|
188
151
|
];
|
189
152
|
|
190
153
|
const { getByText } = render(
|
@@ -195,8 +158,8 @@ describe('<ResponsiveTabs />', () => {
|
|
195
158
|
</ResponsiveTabs>
|
196
159
|
);
|
197
160
|
|
198
|
-
expect(getByText(
|
199
|
-
expect(getByText(
|
161
|
+
expect(getByText("999")).toBeInTheDocument();
|
162
|
+
expect(getByText("3333")).toBeInTheDocument();
|
200
163
|
});
|
201
164
|
});
|
202
165
|
});
|
@@ -1,7 +1,6 @@
|
|
1
1
|
import React, { useCallback, useEffect, forwardRef } from 'react';
|
2
|
-
import { arrayOf, func, number, oneOfType, shape
|
2
|
+
import { arrayOf, func, number, oneOfType, shape } from 'prop-types';
|
3
3
|
import styled from 'styled-components';
|
4
|
-
import { event } from 'react-ga';
|
5
4
|
import Colors from 'constants/colors';
|
6
5
|
import Spacing from 'constants/spacing';
|
7
6
|
import Zindex from 'constants/z-index';
|
@@ -74,7 +73,6 @@ const OverlayBase = forwardRef(
|
|
74
73
|
onHide,
|
75
74
|
hourIncrements,
|
76
75
|
minuteIncrements,
|
77
|
-
GA,
|
78
76
|
onIncrement,
|
79
77
|
onChange,
|
80
78
|
onApply
|
@@ -130,12 +128,6 @@ const OverlayBase = forwardRef(
|
|
130
128
|
type="button"
|
131
129
|
onClick={() => {
|
132
130
|
onHide();
|
133
|
-
if (GA) {
|
134
|
-
event({
|
135
|
-
category: GA.category,
|
136
|
-
action: `${GA.action} (Cancel)`
|
137
|
-
});
|
138
|
-
}
|
139
131
|
}}
|
140
132
|
>
|
141
133
|
Cancel
|
@@ -145,14 +137,6 @@ const OverlayBase = forwardRef(
|
|
145
137
|
onClick={() => {
|
146
138
|
onApply(value);
|
147
139
|
onHide();
|
148
|
-
|
149
|
-
if (GA) {
|
150
|
-
event({
|
151
|
-
category: GA.category,
|
152
|
-
action: `${GA.action} (Apply)`,
|
153
|
-
label: `${hours} hrs ${minutes} mins`
|
154
|
-
});
|
155
|
-
}
|
156
140
|
}}
|
157
141
|
data-e2e="time-apply"
|
158
142
|
>
|
@@ -174,14 +158,12 @@ OverlayBase.propTypes = {
|
|
174
158
|
onHide: func.isRequired,
|
175
159
|
onIncrement: func.isRequired,
|
176
160
|
minuteIncrements: oneOfType([arrayOf(number), number]),
|
177
|
-
hourIncrements: number
|
178
|
-
GA: shape({ category: string, action: string })
|
161
|
+
hourIncrements: number
|
179
162
|
};
|
180
163
|
|
181
164
|
OverlayBase.defaultProps = {
|
182
165
|
minuteIncrements: 1,
|
183
|
-
hourIncrements: 1
|
184
|
-
GA: undefined
|
166
|
+
hourIncrements: 1
|
185
167
|
};
|
186
168
|
|
187
169
|
export default OverlayBase;
|
@@ -1,17 +1,8 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { render, fireEvent } from '@testing-library/react';
|
3
|
-
import { event } from 'react-ga';
|
4
3
|
import OverlayBase from '.';
|
5
4
|
|
6
|
-
jest.mock('react-ga');
|
7
|
-
|
8
5
|
describe('<OverlayBase />', () => {
|
9
|
-
const ga = { category: 'Cat', action: 'Act' };
|
10
|
-
|
11
|
-
beforeEach(() => {
|
12
|
-
event.mockClear();
|
13
|
-
});
|
14
|
-
|
15
6
|
it('should render input boxes', () => {
|
16
7
|
const { queryAllByRole } = render(
|
17
8
|
<OverlayBase
|
@@ -107,26 +98,6 @@ describe('<OverlayBase />', () => {
|
|
107
98
|
expect(onHide).toHaveBeenCalled();
|
108
99
|
});
|
109
100
|
|
110
|
-
it('should log a tracking event when apply is clicked', () => {
|
111
|
-
const { getByText } = render(
|
112
|
-
<OverlayBase
|
113
|
-
value={{ hours: 12, minutes: 45 }}
|
114
|
-
onChange={() => {}}
|
115
|
-
onApply={() => {}}
|
116
|
-
onHide={() => {}}
|
117
|
-
onIncrement={() => {}}
|
118
|
-
GA={ga}
|
119
|
-
/>
|
120
|
-
);
|
121
|
-
|
122
|
-
fireEvent.click(getByText('Apply'));
|
123
|
-
expect(event).toHaveBeenCalledWith({
|
124
|
-
category: ga.category,
|
125
|
-
action: `${ga.action} (Apply)`,
|
126
|
-
label: '12 hrs 45 mins'
|
127
|
-
});
|
128
|
-
});
|
129
|
-
|
130
101
|
it('should hide when cancelled', () => {
|
131
102
|
const onChange = jest.fn();
|
132
103
|
const onHide = jest.fn();
|
@@ -145,25 +116,4 @@ describe('<OverlayBase />', () => {
|
|
145
116
|
expect(onChange).not.toHaveBeenCalled();
|
146
117
|
expect(onHide).toHaveBeenCalled();
|
147
118
|
});
|
148
|
-
|
149
|
-
it('should log a tracking event when cancelled', () => {
|
150
|
-
const onChange = jest.fn();
|
151
|
-
const onHide = jest.fn();
|
152
|
-
const { getByText } = render(
|
153
|
-
<OverlayBase
|
154
|
-
value={{ hours: 12, minutes: 45 }}
|
155
|
-
onChange={onChange}
|
156
|
-
onIncrement={() => {}}
|
157
|
-
onApply={() => {}}
|
158
|
-
onHide={onHide}
|
159
|
-
GA={ga}
|
160
|
-
/>
|
161
|
-
);
|
162
|
-
|
163
|
-
fireEvent.click(getByText('Cancel'));
|
164
|
-
expect(event).toHaveBeenCalledWith({
|
165
|
-
category: ga.category,
|
166
|
-
action: `${ga.action} (Cancel)`
|
167
|
-
});
|
168
|
-
});
|
169
119
|
});
|