Skip to content

Commit 82405fa

Browse files
aialokaialok
authored
testing(component-testing) : Add component test (#870)
* Add mock next router utils * feat(testing): Add test for accordian component * feat(testing): Add test for darkmodetoggle component * feat(testing): Add test for code component * feat(testing): add test for faq component * testing(headlines): add test for headlines component * testing(docs-component): add test for docs component * testing(jsonEditor): add test for jsonEditor component * testing(remember-component): add test for remember component * testing(ScrollButton-Component): add test for scroll component
1 parent b11f66f commit 82405fa

19 files changed

+1249
-33
lines changed

‎components/Accordion.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,11 @@ const Accordion: React.FC<AccordionProps> = ({ items }) => {
5151
<div>
5252
{items.map((item, index) => (
5353
<div
54-
key={item.id || index}
54+
key={item.id}
5555
className={`overflow-hidden transition-max-height border-t-2 ${
5656
activeIndex === index ? 'max-h-96' : 'max-h-20'
5757
} ${index === items.length - 1 ? 'border-b-2' : ''}`}
58+
data-test={`accordion-item-${item.id}`}
5859
>
5960
<div className='flex justify-between p-4 pl-2 cursor-pointer'>
6061
<div className='text-[20px]'>
@@ -64,6 +65,7 @@ const Accordion: React.FC<AccordionProps> = ({ items }) => {
6465
e.preventDefault();
6566
handleLinkClick(item.id);
6667
}}
68+
data-test={`accordion-question-${item.id}`}
6769
>
6870
{item.question}
6971
</a>
@@ -73,6 +75,7 @@ const Accordion: React.FC<AccordionProps> = ({ items }) => {
7375
activeIndex === index ? 'rotate-45' : ''
7476
}`}
7577
onClick={() => handleToggle(index)}
78+
data-test={`accordion-toggle-${item.id}`}
7679
>
7780
&#43;
7881
</div>
@@ -81,6 +84,7 @@ const Accordion: React.FC<AccordionProps> = ({ items }) => {
8184
<div
8285
id={`${item.id}`}
8386
className='p-2 text-gray-500 dark:text-slate-200 pb-4'
87+
data-test={`accordion-answer-${item.id}`}
8488
>
8589
{item.answer}
8690
</div>

‎components/Code.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export default function Code({ children }: { children: any }) {
1212
'bg-amber-200': blockContext === BlockContextValue.Information,
1313
'text-white': blockContext === BlockContextValue.CodeBlock,
1414
})}
15+
data-test='code'
1516
>
1617
{children}
1718
</code>

‎components/DarkModeToggle.tsx

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,17 @@ import React from 'react';
55
function ListItem({
66
children,
77
onClick,
8+
'data-test': dataTest,
89
}: {
910
children: React.ReactNode;
1011
onClick: () => void;
12+
'data-test'?: string;
1113
}) {
1214
return (
1315
<div
1416
onClick={onClick}
1517
className='p-2 hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer rounded-md transition duration-150 flex row gap-2 w-full text-sm'
18+
data-test={dataTest}
1619
>
1720
{children}
1821
</div>
@@ -28,7 +31,9 @@ export default function DarkModeToggle() {
2831
}, [resolvedTheme]);
2932

3033
const [showSelect, setShowSelect] = useState(false);
31-
const [activeThemeIcon, setActiveThemeIcon] = useState('');
34+
const [activeThemeIcon, setActiveThemeIcon] = useState(
35+
'/icons/theme-switch.svg',
36+
);
3237
useEffect(() => {
3338
switch (theme) {
3439
case 'system':
@@ -45,6 +50,7 @@ export default function DarkModeToggle() {
4550
<button
4651
onClick={() => setShowSelect(!showSelect)}
4752
className='dark-mode-toggle rounded-md dark:hover:bg-gray-700 p-1.5 hover:bg-gray-100 transition duration-150 '
53+
data-test='dark-mode-toggle'
4854
>
4955
<img
5056
src={activeThemeIcon}
@@ -55,6 +61,7 @@ export default function DarkModeToggle() {
5561
// Invert the icon color based on the theme, theme of the light mode is dark
5662
filter: isDarkMode ? 'invert(1)' : 'invert(0)',
5763
}}
64+
data-test='theme-icon'
5865
/>
5966
</button>
6067
<div
@@ -64,8 +71,12 @@ export default function DarkModeToggle() {
6471
setShowSelect(false);
6572
}}
6673
tabIndex={0}
74+
data-test='theme-dropdown'
6775
>
68-
<ListItem onClick={() => setTheme('system')}>
76+
<ListItem
77+
onClick={() => setTheme('system')}
78+
data-test='select-system-theme'
79+
>
6980
<img
7081
src={'/icons/theme-switch.svg'}
7182
alt='System theme'
@@ -75,7 +86,10 @@ export default function DarkModeToggle() {
7586
/>
7687
System
7788
</ListItem>
78-
<ListItem onClick={() => setTheme('light')}>
89+
<ListItem
90+
onClick={() => setTheme('light')}
91+
data-test='select-light-theme'
92+
>
7993
<img
8094
src={'/icons/sun.svg'}
8195
alt='System theme'
@@ -85,7 +99,10 @@ export default function DarkModeToggle() {
8599
/>
86100
Light
87101
</ListItem>
88-
<ListItem onClick={() => setTheme('dark')}>
102+
<ListItem
103+
onClick={() => setTheme('dark')}
104+
data-test='select-dark-theme'
105+
>
89106
<img
90107
src={'/icons/moon.svg'}
91108
alt='System theme'

‎components/DocsHelp.tsx

Lines changed: 37 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -71,11 +71,19 @@ export function DocsHelp({ markdownFile }: DocsHelpProps) {
7171
};
7272

7373
return (
74-
<section className='mt-10 mb-4 text-gray-600 dark:text-white'>
75-
<h2 className='text-[24px] font-semibold'>Need Help?</h2>
74+
<section
75+
className='mt-10 mb-4 text-gray-600 dark:text-white'
76+
data-test='docs-help'
77+
>
78+
<h2 className='text-[24px] font-semibold' data-test='need-help-heading'>
79+
Need Help?
80+
</h2>
7681
<div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 pt-10 border-t border-gray-600'>
7782
<div>
78-
<h3 className='text-xl font-semibold mb-3'>
83+
<h3
84+
className='text-xl font-semibold mb-3'
85+
data-test='feedback-main-heading'
86+
>
7987
Did you find these docs helpful?
8088
</h3>
8189

@@ -85,6 +93,7 @@ export function DocsHelp({ markdownFile }: DocsHelpProps) {
8593
className='flex flex-col'
8694
onSubmit={createFeedbackHandler}
8795
ref={feedbackFormRef}
96+
data-test='feedback-form'
8897
>
8998
<div className='mb-6'>
9099
<input
@@ -101,6 +110,7 @@ export function DocsHelp({ markdownFile }: DocsHelpProps) {
101110
onClick={() => {
102111
setIsFormOpen(true);
103112
}}
113+
data-test='feedback-survey-yes-button'
104114
>
105115
<svg
106116
className='inline-block select-none overflow-visible'
@@ -129,6 +139,7 @@ export function DocsHelp({ markdownFile }: DocsHelpProps) {
129139
onClick={() => {
130140
setIsFormOpen(true);
131141
}}
142+
data-test='feedback-survey-no-button'
132143
>
133144
<svg
134145
className='inline-block select-none overflow-visible'
@@ -148,7 +159,7 @@ export function DocsHelp({ markdownFile }: DocsHelpProps) {
148159
{isFormOpen && (
149160
<div>
150161
<div className='mb-4'>
151-
<p>
162+
<p data-test='feedback-form-comment'>
152163
<label
153164
className='mb-1 block'
154165
htmlFor='feedback-comment'
@@ -165,6 +176,7 @@ export function DocsHelp({ markdownFile }: DocsHelpProps) {
165176
className='py-2 text-[14px] min-h-[28px] px-[12px] align-middle border border-solid border-[#aaaaaa] rounded-md w-full overflow-hidden'
166177
name='feedback-comment'
167178
id='feedback-comment'
179+
data-test='feedback-form-input'
168180
/>
169181
</div>
170182

@@ -173,6 +185,7 @@ export function DocsHelp({ markdownFile }: DocsHelpProps) {
173185
type='submit'
174186
className={`px-[16px] py-[7px] cursor-pointer border-solid border-[#aaaaaa] border rounded-md ${isSubmitting ? 'cursor-not-allowed opacity-50' : 'hover:bg-gray-200 dark:hover:bg-gray-600'}`}
175187
disabled={isSubmitting}
188+
data-test='feedback-submit-button'
176189
>
177190
<svg
178191
className='inline-block select-none align-text-bottom mr-1'
@@ -196,6 +209,7 @@ export function DocsHelp({ markdownFile }: DocsHelpProps) {
196209
className={`px-[16px] py-[7px] cursor-pointer border-solid border-[#aaaaaa] border rounded-md ${isSubmitting ? 'cursor-not-allowed opacity-50' : 'hover:bg-gray-200 dark:hover:bg-gray-600'}`}
197210
disabled={isSubmitting}
198211
onClick={createGitHubIssueHandler}
212+
data-test='create-github-issue-button'
199213
>
200214
<svg
201215
className='inline-block select-none align-text-bottom mr-1'
@@ -220,7 +234,7 @@ export function DocsHelp({ markdownFile }: DocsHelpProps) {
220234

221235
{feedbackStatus === 'feedback' && (
222236
<div className='my-6 text-[14px]'>
223-
<p>
237+
<p data-test='feedback-form-success-message'>
224238
Thanks for the feedback! Feel free to join the&nbsp;
225239
<a
226240
target='_blank'
@@ -246,7 +260,7 @@ export function DocsHelp({ markdownFile }: DocsHelpProps) {
246260

247261
{feedbackStatus === 'github_issue' && (
248262
<div className='my-6 text-[14px]'>
249-
<p>
263+
<p data-test='feedback-form-github-success-message'>
250264
Thanks for creating an issue! Let's continue the discussion
251265
there!
252266
</p>
@@ -255,18 +269,21 @@ export function DocsHelp({ markdownFile }: DocsHelpProps) {
255269

256270
{error && (
257271
<div className='my-6 text-[14px]'>
258-
<p>{error}</p>
272+
<p data-test='feedback-form-error-message'>{error}</p>
259273
</div>
260274
)}
261275
</div>
262276

263277
<div>
264-
<h3 className='text-xl font-semibold mb-3'>
278+
<h3
279+
className='text-xl font-semibold mb-3'
280+
data-test='contribute-docs-heading'
281+
>
265282
Help us make our docs great!
266283
</h3>
267284

268285
<div className='my-6 text-[14px]'>
269-
<p>
286+
<p data-test='contribute-docs-description'>
270287
At JSON Schema, we value docs contributions as much as every other
271288
type of contribution!
272289
</p>
@@ -277,6 +294,7 @@ export function DocsHelp({ markdownFile }: DocsHelpProps) {
277294
rel='noreferrer'
278295
className='px-[16px] py-[8px] cursor-pointer border-solid border-[#aaaaaa] border rounded-md hover:bg-gray-200 dark:hover:bg-gray-600'
279296
href={`https://github.com/json-schema-org/website/blob/main/pages${markdownFile ? (markdownFile === '_indexPage' ? extractPathWithoutFragment(router.asPath) + '/_index.md' : extractPathWithoutFragment(router.asPath) + '.md') : `/${path}/index.page.tsx`}`}
297+
data-test='edit-on-github-link'
280298
>
281299
<svg
282300
className='inline-block select-none align-text-bottom mr-1'
@@ -298,6 +316,7 @@ export function DocsHelp({ markdownFile }: DocsHelpProps) {
298316
rel='noreferrer'
299317
className='underline'
300318
href='https://github.com/json-schema-org/website/blob/main/CONTRIBUTING.md'
319+
data-test='learn-to-contribute-link'
301320
>
302321
<svg
303322
className='inline-block select-none align-text-bottom mr-1'
@@ -319,10 +338,15 @@ export function DocsHelp({ markdownFile }: DocsHelpProps) {
319338
</div>
320339

321340
<div>
322-
<h3 className='text-xl font-semibold mb-3'>Still Need Help?</h3>
341+
<h3
342+
className='text-xl font-semibold mb-3'
343+
data-test='additional-help-heading'
344+
>
345+
Still Need Help?
346+
</h3>
323347

324348
<div className='my-6 text-[14px]'>
325-
<p>
349+
<p data-test='additional-help-description'>
326350
Learning JSON Schema is often confusing, but don't worry, we are
327351
here to help!.
328352
</p>
@@ -333,6 +357,7 @@ export function DocsHelp({ markdownFile }: DocsHelpProps) {
333357
rel='noreferrer'
334358
className='underline'
335359
href='https://github.com/orgs/json-schema-org/discussions/new?category=q-a'
360+
data-test='ask-on-github-link'
336361
>
337362
<svg
338363
className='inline-block select-none align-text-bottom mr-1'
@@ -354,6 +379,7 @@ export function DocsHelp({ markdownFile }: DocsHelpProps) {
354379
rel='noreferrer'
355380
className='underline'
356381
href='https://json-schema.org/slack'
382+
data-test='ask-on-slack-link'
357383
>
358384
<svg
359385
className='inline-block select-none align-text-bottom mr-1'

‎components/Headlines.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ const Headline = ({
7070
propAttributes?.className,
7171
),
7272
onClick: handleHeadingClick,
73+
'data-test': 'headline',
7374
};
7475
const childredWithoutFragment = filterFragment(children);
7576
return (

0 commit comments

Comments
 (0)