Skip to content

Commit cc668ff

Browse files
veroglezveroglez
committed
feat(@clayui/language-picker): LPD-45714 Add tests
1 parent 3cc0966 commit cc668ff

File tree

2 files changed

+298
-0
lines changed

2 files changed

+298
-0
lines changed

‎packages/clay-language-picker/src/__tests__/__snapshots__/index.tsx.snap

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`ClayLanguagePicker renders 1`] = `
4+
<div>
5+
<button
6+
aria-activedescendant=""
7+
aria-expanded="false"
8+
aria-haspopup="listbox"
9+
aria-label="Select a language, current language: en-US."
10+
class="form-control-select btn btn-secondary"
11+
role="combobox"
12+
tabindex="0"
13+
type="button"
14+
>
15+
<span
16+
class="inline-item-before"
17+
>
18+
<svg
19+
class="lexicon-icon lexicon-icon-en-us"
20+
role="presentation"
21+
>
22+
<use
23+
href="/path/to/svg#en-us"
24+
/>
25+
</svg>
26+
</span>
27+
</button>
28+
</div>
29+
`;
30+
31+
exports[`ClayLanguagePicker renders a class name for the trigger 1`] = `
32+
<div>
33+
<button
34+
aria-activedescendant=""
35+
aria-expanded="false"
36+
aria-haspopup="listbox"
37+
aria-label="Select a language, current language: en-US."
38+
class="trigger-class form-control-select btn btn-secondary"
39+
role="combobox"
40+
tabindex="0"
41+
type="button"
42+
>
43+
<span
44+
class="inline-item-before"
45+
>
46+
<svg
47+
class="lexicon-icon lexicon-icon-en-us"
48+
role="presentation"
49+
>
50+
<use
51+
href="/path/to/svg#en-us"
52+
/>
53+
</svg>
54+
</span>
55+
</button>
56+
</div>
57+
`;
58+
59+
exports[`ClayLanguagePicker renders a small picker 1`] = `
60+
<div>
61+
<button
62+
aria-activedescendant=""
63+
aria-expanded="false"
64+
aria-haspopup="listbox"
65+
aria-label="Select a language, current language: en-US."
66+
class="form-control-select btn btn-sm btn-secondary"
67+
role="combobox"
68+
tabindex="0"
69+
type="button"
70+
>
71+
<span
72+
class="inline-item-before"
73+
>
74+
<svg
75+
class="lexicon-icon lexicon-icon-en-us"
76+
role="presentation"
77+
>
78+
<use
79+
href="/path/to/svg#en-us"
80+
/>
81+
</svg>
82+
</span>
83+
</button>
84+
</div>
85+
`;
86+
87+
exports[`ClayLanguagePicker renders the picker with id 1`] = `
88+
<div>
89+
<button
90+
aria-activedescendant=""
91+
aria-expanded="false"
92+
aria-haspopup="listbox"
93+
aria-label="Select a language, current language: en-US."
94+
class="form-control-select btn btn-secondary"
95+
id="pickerId"
96+
role="combobox"
97+
tabindex="0"
98+
type="button"
99+
>
100+
<span
101+
class="inline-item-before"
102+
>
103+
<svg
104+
class="lexicon-icon lexicon-icon-en-us"
105+
role="presentation"
106+
>
107+
<use
108+
href="/path/to/svg#en-us"
109+
/>
110+
</svg>
111+
</span>
112+
</button>
113+
</div>
114+
`;
115+
116+
exports[`ClayLanguagePicker renders with custom labels 1`] = `
117+
<div>
118+
<button
119+
aria-activedescendant=""
120+
aria-expanded="false"
121+
aria-haspopup="listbox"
122+
aria-label="Trigger Label"
123+
class="form-control-select btn btn-secondary"
124+
role="combobox"
125+
tabindex="0"
126+
type="button"
127+
>
128+
<span
129+
class="inline-item-before"
130+
>
131+
<svg
132+
class="lexicon-icon lexicon-icon-en-us"
133+
role="presentation"
134+
>
135+
<use
136+
href="/path/to/svg#en-us"
137+
/>
138+
</svg>
139+
</span>
140+
</button>
141+
</div>
142+
`;

‎packages/clay-language-picker/src/__tests__/index.tsx

+156
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
/**
2+
* SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
3+
* SPDX-License-Identifier: BSD-3-Clause
4+
*/
5+
6+
/**
7+
* © 2019 Liferay, Inc. <https://liferay.com>
8+
*
9+
* SPDX-License-Identifier: BSD-3-Clause
10+
*/
11+
12+
import ClayLanguagePicker from '..';
13+
import {cleanup, fireEvent, render, screen} from '@testing-library/react';
14+
import React from 'react';
15+
16+
const locales = [
17+
{
18+
displayName: 'English (United States)',
19+
id: 'en_US',
20+
label: 'en-US',
21+
symbol: 'en-us',
22+
},
23+
{
24+
displayName: 'Spanish (Spain)',
25+
id: 'es_ES',
26+
label: 'es-ES',
27+
symbol: 'es-es',
28+
},
29+
{
30+
displayName: 'French (France)',
31+
id: 'fr_FR',
32+
label: 'fr-FR',
33+
symbol: 'fr-fr',
34+
},
35+
{
36+
displayName: 'Dutch (Netherlands)',
37+
id: 'nl_NL',
38+
label: 'nl-NL',
39+
symbol: 'nl-nl',
40+
},
41+
];
42+
43+
const onSelectedLocaleChange = jest.fn(() => null);
44+
45+
describe('ClayLanguagePicker', () => {
46+
afterEach(cleanup);
47+
48+
it('renders', () => {
49+
const {container} = render(
50+
<ClayLanguagePicker
51+
locales={locales}
52+
onSelectedLocaleChange={onSelectedLocaleChange}
53+
selectedLocale={locales[0]!}
54+
spritemap="/path/to/svg"
55+
/>
56+
);
57+
58+
expect(container).toMatchSnapshot();
59+
});
60+
61+
it('renders a class name for the trigger', () => {
62+
const {container} = render(
63+
<ClayLanguagePicker
64+
classNamesTrigger="trigger-class"
65+
locales={locales}
66+
onSelectedLocaleChange={onSelectedLocaleChange}
67+
selectedLocale={locales[0]!}
68+
spritemap="/path/to/svg"
69+
/>
70+
);
71+
72+
expect(container).toMatchSnapshot();
73+
});
74+
75+
it('renders the picker with id', () => {
76+
const {container} = render(
77+
<ClayLanguagePicker
78+
id="pickerId"
79+
locales={locales}
80+
onSelectedLocaleChange={onSelectedLocaleChange}
81+
selectedLocale={locales[0]!}
82+
spritemap="/path/to/svg"
83+
/>
84+
);
85+
86+
expect(container).toMatchSnapshot();
87+
});
88+
89+
it('renders with custom labels', () => {
90+
const {container} = render(
91+
<ClayLanguagePicker
92+
labels={{
93+
default: 'Default Label',
94+
translated: 'Translated Label',
95+
trigger: 'Trigger Label',
96+
untranslated: 'Untranslated Label',
97+
}}
98+
locales={locales}
99+
onSelectedLocaleChange={onSelectedLocaleChange}
100+
selectedLocale={locales[0]!}
101+
spritemap="/path/to/svg"
102+
/>
103+
);
104+
105+
expect(container).toMatchSnapshot();
106+
});
107+
108+
it('renders a small picker', () => {
109+
const {container} = render(
110+
<ClayLanguagePicker
111+
locales={locales}
112+
onSelectedLocaleChange={onSelectedLocaleChange}
113+
selectedLocale={locales[0]!}
114+
small
115+
spritemap="/path/to/svg"
116+
/>
117+
);
118+
119+
expect(container).toMatchSnapshot();
120+
});
121+
122+
it('calls onSelectedLocaleChange when a language is selected', () => {
123+
render(
124+
<ClayLanguagePicker
125+
locales={locales}
126+
onSelectedLocaleChange={onSelectedLocaleChange}
127+
selectedLocale={locales[0]!}
128+
spritemap="/path/to/svg"
129+
/>
130+
);
131+
132+
fireEvent.click(screen.getByRole('combobox'));
133+
134+
fireEvent.click(screen.getByText('es-ES'));
135+
136+
expect(onSelectedLocaleChange).toHaveBeenCalled();
137+
});
138+
139+
it('calls onActiveChange when the trigger clicked', () => {
140+
const onActiveChange = jest.fn(() => null);
141+
142+
render(
143+
<ClayLanguagePicker
144+
locales={locales}
145+
onActiveChange={onActiveChange}
146+
onSelectedLocaleChange={onSelectedLocaleChange}
147+
selectedLocale={locales[0]!}
148+
spritemap="/path/to/svg"
149+
/>
150+
);
151+
152+
fireEvent.click(screen.getByRole('combobox'));
153+
154+
expect(onActiveChange).toHaveBeenCalled();
155+
});
156+
});

0 commit comments

Comments
 (0)