Skip to content

Commit cb07b02

Browse files
shortcutsshortcuts
committed
Differentiate regular and detached DOM
1 parent 6920d42 commit cb07b02

1 file changed

Lines changed: 125 additions & 89 deletions

File tree

‎packages/autocomplete-js/src/__tests__/translations.test.ts‎

Lines changed: 125 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { fireEvent, waitFor } from '@testing-library/dom';
1+
import { waitFor } from '@testing-library/dom';
22

33
import { autocomplete } from '../autocomplete';
44

@@ -7,105 +7,141 @@ describe('translations', () => {
77
document.body.innerHTML = '';
88
});
99

10-
const originalMatchMedia = window.matchMedia;
11-
12-
beforeAll(() => {
13-
Object.defineProperty(window, 'matchMedia', {
14-
writable: true,
15-
value: jest.fn((query) => ({
16-
matches: true,
17-
media: query,
18-
onchange: null,
19-
addListener: jest.fn(),
20-
removeListener: jest.fn(),
21-
addEventListener: jest.fn(),
22-
removeEventListener: jest.fn(),
23-
dispatchEvent: jest.fn(),
24-
})),
10+
describe('regular DOM', () => {
11+
test('provides default translations', () => {
12+
const container = document.createElement('div');
13+
document.body.appendChild(container);
14+
15+
autocomplete<{ label: string }>({
16+
container,
17+
});
18+
19+
expect(
20+
document.querySelector<HTMLButtonElement>('.aa-ClearButton')
21+
).toHaveAttribute('title', 'Clear');
22+
expect(
23+
document.querySelector<HTMLButtonElement>('.aa-SubmitButton')
24+
).toHaveAttribute('title', 'Submit');
2525
});
26-
});
2726

28-
afterAll(() => {
29-
Object.defineProperty(window, 'matchMedia', {
30-
writable: true,
31-
value: originalMatchMedia,
27+
test('allows custom translations', () => {
28+
const container = document.createElement('div');
29+
document.body.appendChild(container);
30+
31+
autocomplete<{ label: string }>({
32+
container,
33+
translations: {
34+
clearButtonTitle: 'Effacer',
35+
submitButtonTitle: 'Envoyer',
36+
},
37+
});
38+
39+
expect(
40+
document.querySelector<HTMLButtonElement>('.aa-ClearButton')
41+
).toHaveAttribute('title', 'Effacer');
42+
expect(
43+
document.querySelector<HTMLButtonElement>('.aa-SubmitButton')
44+
).toHaveAttribute('title', 'Envoyer');
3245
});
3346
});
3447

35-
test('provides default translations', async () => {
36-
const container = document.createElement('div');
37-
document.body.appendChild(container);
38-
39-
const { destroy } = autocomplete<{ label: string }>({
40-
container,
41-
detachedMediaQuery: '',
48+
describe('detached DOM', () => {
49+
const originalMatchMedia = window.matchMedia;
50+
51+
beforeAll(() => {
52+
Object.defineProperty(window, 'matchMedia', {
53+
writable: true,
54+
value: jest.fn((query) => ({
55+
matches: true,
56+
media: query,
57+
onchange: null,
58+
addListener: jest.fn(),
59+
removeListener: jest.fn(),
60+
addEventListener: jest.fn(),
61+
removeEventListener: jest.fn(),
62+
dispatchEvent: jest.fn(),
63+
})),
64+
});
4265
});
4366

44-
const searchButton = container.querySelector<HTMLButtonElement>(
45-
'.aa-DetachedSearchButton'
46-
);
47-
48-
searchButton.click();
49-
50-
await waitFor(() => {
51-
const input = document.querySelector<HTMLInputElement>('.aa-Input');
52-
53-
expect(document.querySelector('.aa-DetachedOverlay')).toBeInTheDocument();
54-
55-
fireEvent.input(input, { target: { value: 'a' } });
67+
afterAll(() => {
68+
Object.defineProperty(window, 'matchMedia', {
69+
writable: true,
70+
value: originalMatchMedia,
71+
});
5672
});
5773

58-
expect(
59-
document.querySelector<HTMLButtonElement>('.aa-DetachedCancelButton')
60-
).toHaveTextContent('Cancel');
61-
expect(
62-
document.querySelector<HTMLButtonElement>('.aa-ClearButton')
63-
).toHaveAttribute('title', 'Clear');
64-
expect(
65-
document.querySelector<HTMLButtonElement>('.aa-SubmitButton')
66-
).toHaveAttribute('title', 'Submit');
67-
68-
destroy();
69-
});
70-
71-
test('allows custom translations', async () => {
72-
const container = document.createElement('div');
73-
document.body.appendChild(container);
74-
75-
const { destroy } = autocomplete({
76-
container,
77-
detachedMediaQuery: '',
78-
translations: {
79-
clearButtonTitle: 'Effacer',
80-
detachedCancelButtonText: 'Annuler',
81-
submitButtonTitle: 'Envoyer',
82-
},
74+
test('provides default translations', async () => {
75+
const container = document.createElement('div');
76+
document.body.appendChild(container);
77+
78+
const { destroy } = autocomplete<{ label: string }>({
79+
container,
80+
detachedMediaQuery: '',
81+
});
82+
83+
const searchButton = container.querySelector<HTMLButtonElement>(
84+
'.aa-DetachedSearchButton'
85+
);
86+
87+
searchButton.click();
88+
89+
await waitFor(() => {
90+
expect(
91+
document.querySelector('.aa-DetachedOverlay')
92+
).toBeInTheDocument();
93+
});
94+
95+
expect(
96+
document.querySelector<HTMLButtonElement>('.aa-ClearButton')
97+
).toHaveAttribute('title', 'Clear');
98+
expect(
99+
document.querySelector<HTMLButtonElement>('.aa-SubmitButton')
100+
).toHaveAttribute('title', 'Submit');
101+
expect(
102+
document.querySelector<HTMLButtonElement>('.aa-DetachedCancelButton')
103+
).toHaveTextContent('Cancel');
104+
105+
destroy();
83106
});
84107

85-
const searchButton = container.querySelector<HTMLButtonElement>(
86-
'.aa-DetachedSearchButton'
87-
);
88-
89-
searchButton.click();
90-
91-
await waitFor(() => {
92-
const input = document.querySelector<HTMLInputElement>('.aa-Input');
93-
94-
expect(document.querySelector('.aa-DetachedOverlay')).toBeInTheDocument();
95-
96-
fireEvent.input(input, { target: { value: 'a' } });
108+
test('allows custom translations', async () => {
109+
const container = document.createElement('div');
110+
document.body.appendChild(container);
111+
112+
const { destroy } = autocomplete({
113+
container,
114+
detachedMediaQuery: '',
115+
translations: {
116+
clearButtonTitle: 'Effacer',
117+
detachedCancelButtonText: 'Annuler',
118+
submitButtonTitle: 'Envoyer',
119+
},
120+
});
121+
122+
const searchButton = container.querySelector<HTMLButtonElement>(
123+
'.aa-DetachedSearchButton'
124+
);
125+
126+
searchButton.click();
127+
128+
await waitFor(() => {
129+
expect(
130+
document.querySelector('.aa-DetachedOverlay')
131+
).toBeInTheDocument();
132+
});
133+
134+
expect(
135+
document.querySelector<HTMLButtonElement>('.aa-ClearButton')
136+
).toHaveAttribute('title', 'Effacer');
137+
expect(
138+
document.querySelector<HTMLButtonElement>('.aa-SubmitButton')
139+
).toHaveAttribute('title', 'Envoyer');
140+
expect(
141+
document.querySelector<HTMLButtonElement>('.aa-DetachedCancelButton')
142+
).toHaveTextContent('Annuler');
143+
144+
destroy();
97145
});
98-
99-
expect(
100-
document.querySelector<HTMLButtonElement>('.aa-ClearButton')
101-
).toHaveAttribute('title', 'Effacer');
102-
expect(
103-
document.querySelector<HTMLButtonElement>('.aa-SubmitButton')
104-
).toHaveAttribute('title', 'Envoyer');
105-
expect(
106-
document.querySelector<HTMLButtonElement>('.aa-DetachedCancelButton')
107-
).toHaveTextContent('Annuler');
108-
109-
destroy();
110146
});
111147
});

0 commit comments

Comments
 (0)