Skip to content

Commit 47f78df

Browse files
wojtekmajwojtekmaj
committed
Refactor unit tests not to use querySelector unless absolutely necessary
1 parent 377a7ee commit 47f78df

File tree

8 files changed

+398
-420
lines changed

8 files changed

+398
-420
lines changed

‎packages/react-date-picker/src/DateInput.spec.tsx‎

Lines changed: 125 additions & 144 deletions
Large diffs are not rendered by default.

‎packages/react-date-picker/src/DateInput/DayInput.spec.tsx‎

Lines changed: 37 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { describe, expect, it } from 'vitest';
2+
import { page } from 'vitest/browser';
23
import { render } from 'vitest-browser-react';
34
import { createRef } from 'react';
45

@@ -13,17 +14,17 @@ describe('DayInput', () => {
1314
} satisfies React.ComponentProps<typeof DayInput>;
1415

1516
it('renders an input', async () => {
16-
const { container } = await render(<DayInput {...defaultProps} />);
17+
await render(<DayInput {...defaultProps} />);
1718

18-
const input = container.querySelector('input');
19+
const input = page.getByRole('spinbutton');
1920

2021
expect(input).toBeInTheDocument();
2122
});
2223

2324
it('renders "0" given showLeadingZeros if day is <10', async () => {
2425
const { container } = await render(<DayInput {...defaultProps} showLeadingZeros value="9" />);
2526

26-
const input = container.querySelector('input');
27+
const input = page.getByRole('spinbutton');
2728

2829
expect(container).toHaveTextContent('0');
2930
expect(input).toHaveClass(`${defaultProps.className}__input--hasLeadingZero`);
@@ -32,7 +33,7 @@ describe('DayInput', () => {
3233
it('does not render "0" given showLeadingZeros if day is <10 with leading zero already', async () => {
3334
const { container } = await render(<DayInput {...defaultProps} showLeadingZeros value="09" />);
3435

35-
const input = container.querySelector('input');
36+
const input = page.getByRole('spinbutton');
3637

3738
expect(container).not.toHaveTextContent('0');
3839
expect(input).not.toHaveClass(`${defaultProps.className}__input--hasLeadingZero`);
@@ -41,7 +42,7 @@ describe('DayInput', () => {
4142
it('does not render "0" given showLeadingZeros if day is >=10', async () => {
4243
const { container } = await render(<DayInput {...defaultProps} showLeadingZeros value="10" />);
4344

44-
const input = container.querySelector('input');
45+
const input = page.getByRole('spinbutton');
4546

4647
expect(container).not.toHaveTextContent('0');
4748
expect(input).not.toHaveClass(`${defaultProps.className}__input--hasLeadingZero`);
@@ -50,7 +51,7 @@ describe('DayInput', () => {
5051
it('does not render "0" if not given showLeadingZeros', async () => {
5152
const { container } = await render(<DayInput {...defaultProps} value="9" />);
5253

53-
const input = container.querySelector('input');
54+
const input = page.getByRole('spinbutton');
5455

5556
expect(container).not.toHaveTextContent('0');
5657
expect(input).not.toHaveClass(`${defaultProps.className}__input--hasLeadingZero`);
@@ -59,37 +60,37 @@ describe('DayInput', () => {
5960
it('applies given aria-label properly', async () => {
6061
const dayAriaLabel = 'Day';
6162

62-
const { container } = await render(<DayInput {...defaultProps} ariaLabel={dayAriaLabel} />);
63+
await render(<DayInput {...defaultProps} ariaLabel={dayAriaLabel} />);
6364

64-
const input = container.querySelector('input');
65+
const input = page.getByRole('spinbutton');
6566

6667
expect(input).toHaveAttribute('aria-label', dayAriaLabel);
6768
});
6869

6970
it('applies given placeholder properly', async () => {
7071
const dayPlaceholder = 'dd';
7172

72-
const { container } = await render(<DayInput {...defaultProps} placeholder={dayPlaceholder} />);
73+
await render(<DayInput {...defaultProps} placeholder={dayPlaceholder} />);
7374

74-
const input = container.querySelector('input');
75+
const input = page.getByRole('spinbutton');
7576

7677
expect(input).toHaveAttribute('placeholder', dayPlaceholder);
7778
});
7879

7980
it('has proper name defined', async () => {
80-
const { container } = await render(<DayInput {...defaultProps} />);
81+
await render(<DayInput {...defaultProps} />);
8182

82-
const input = container.querySelector('input');
83+
const input = page.getByRole('spinbutton');
8384

8485
expect(input).toHaveAttribute('name', 'day');
8586
});
8687

8788
it('has proper className defined', async () => {
8889
const className = 'react-date-picker';
8990

90-
const { container } = await render(<DayInput {...defaultProps} className={className} />);
91+
await render(<DayInput {...defaultProps} className={className} />);
9192

92-
const input = container.querySelector('input');
93+
const input = page.getByRole('spinbutton');
9394

9495
expect(input).toHaveClass('react-date-picker__input');
9596
expect(input).toHaveClass('react-date-picker__day');
@@ -98,41 +99,41 @@ describe('DayInput', () => {
9899
it('displays given value properly', async () => {
99100
const value = '11';
100101

101-
const { container } = await render(<DayInput {...defaultProps} value={value} />);
102+
await render(<DayInput {...defaultProps} value={value} />);
102103

103-
const input = container.querySelector('input');
104+
const input = page.getByRole('spinbutton');
104105

105106
expect(input).toHaveValue(Number(value));
106107
});
107108

108109
it('does not disable input by default', async () => {
109-
const { container } = await render(<DayInput {...defaultProps} />);
110+
await render(<DayInput {...defaultProps} />);
110111

111-
const input = container.querySelector('input');
112+
const input = page.getByRole('spinbutton');
112113

113114
expect(input).not.toBeDisabled();
114115
});
115116

116117
it('disables input given disabled flag', async () => {
117-
const { container } = await render(<DayInput {...defaultProps} disabled />);
118+
await render(<DayInput {...defaultProps} disabled />);
118119

119-
const input = container.querySelector('input');
120+
const input = page.getByRole('spinbutton');
120121

121122
expect(input).toBeDisabled();
122123
});
123124

124125
it('is not required input by default', async () => {
125-
const { container } = await render(<DayInput {...defaultProps} />);
126+
await render(<DayInput {...defaultProps} />);
126127

127-
const input = container.querySelector('input');
128+
const input = page.getByRole('spinbutton');
128129

129130
expect(input).not.toBeRequired();
130131
});
131132

132133
it('required input given required flag', async () => {
133-
const { container } = await render(<DayInput {...defaultProps} required />);
134+
await render(<DayInput {...defaultProps} required />);
134135

135-
const input = container.querySelector('input');
136+
const input = page.getByRole('spinbutton');
136137

137138
expect(input).toBeRequired();
138139
});
@@ -146,61 +147,61 @@ describe('DayInput', () => {
146147
});
147148

148149
it('has min = "1" by default', async () => {
149-
const { container } = await render(<DayInput {...defaultProps} />);
150+
await render(<DayInput {...defaultProps} />);
150151

151-
const input = container.querySelector('input');
152+
const input = page.getByRole('spinbutton');
152153

153154
expect(input).toHaveAttribute('min', '1');
154155
});
155156

156157
it('has min = "1" given minDate in a past month', async () => {
157-
const { container } = await render(
158+
await render(
158159
<DayInput {...defaultProps} minDate={new Date(2017, 11, 15)} month="1" year="2018" />,
159160
);
160161

161-
const input = container.querySelector('input');
162+
const input = page.getByRole('spinbutton');
162163

163164
expect(input).toHaveAttribute('min', '1');
164165
});
165166

166167
it('has min = (day in minDate) given minDate in a current month', async () => {
167-
const { container } = await render(
168+
await render(
168169
<DayInput {...defaultProps} minDate={new Date(2018, 0, 15)} month="1" year="2018" />,
169170
);
170171

171-
const input = container.querySelector('input');
172+
const input = page.getByRole('spinbutton');
172173

173174
expect(input).toHaveAttribute('min', '15');
174175
});
175176

176177
it('has max = (number of days in current month) by default', async () => {
177178
const numberOfDaysInJanuary2018 = new Date(2018, 1, 0).getDate();
178179

179-
const { container } = await render(<DayInput {...defaultProps} month="1" year="2018" />);
180+
await render(<DayInput {...defaultProps} month="1" year="2018" />);
180181

181-
const input = container.querySelector('input');
182+
const input = page.getByRole('spinbutton');
182183

183184
expect(input).toHaveAttribute('max', `${numberOfDaysInJanuary2018}`);
184185
});
185186

186187
it('has max = (number of days in current month) given maxDate in a future month', async () => {
187188
const numberOfDaysInJanuary2018 = new Date(2018, 1, 0).getDate();
188189

189-
const { container } = await render(
190+
await render(
190191
<DayInput {...defaultProps} maxDate={new Date(2018, 1, 15)} month="1" year="2018" />,
191192
);
192193

193-
const input = container.querySelector('input');
194+
const input = page.getByRole('spinbutton');
194195

195196
expect(input).toHaveAttribute('max', `${numberOfDaysInJanuary2018}`);
196197
});
197198

198199
it('has max = (day in maxDate) given maxDate in a current month', async () => {
199-
const { container } = await render(
200+
await render(
200201
<DayInput {...defaultProps} maxDate={new Date(2018, 0, 15)} month="1" year="2018" />,
201202
);
202203

203-
const input = container.querySelector('input');
204+
const input = page.getByRole('spinbutton');
204205

205206
expect(input).toHaveAttribute('max', '15');
206207
});

0 commit comments

Comments
 (0)