Skip to content

Commit 2506d6e

Browse files
gcornutgcornut
committed
chore(theme): add prop and context theme tesing to all component
1 parent 5b86aee commit 2506d6e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+696
-234
lines changed

‎packages/lumx-react/src/components/autocomplete/Autocomplete.test.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22

33
import { Dropdown, List, ListItem, Size, TextField } from '@lumx/react';
4-
import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
4+
import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
55
import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
66
import { render } from '@testing-library/react';
77
import userEvent from '@testing-library/user-event';
@@ -14,7 +14,7 @@ const CLASSNAME = Autocomplete.className as string;
1414
/**
1515
* Mounts the component and returns common DOM elements / data needed in multiple tests further down.
1616
*/
17-
const setup = (props: Partial<AutocompleteProps> = {}) => {
17+
const setup = (props: Partial<AutocompleteProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
1818
render(
1919
<Autocomplete {...(props as any)}>
2020
<List>
@@ -25,6 +25,7 @@ const setup = (props: Partial<AutocompleteProps> = {}) => {
2525
))}
2626
</List>
2727
</Autocomplete>,
28+
{ wrapper },
2829
);
2930
const autocomplete = getByClassName(document.body, CLASSNAME);
3031
const textField = getByClassName(autocomplete, TextField.className as string);
@@ -90,5 +91,11 @@ describe(`<${Autocomplete.displayName}>`, () => {
9091
forwardClassName: 'autocomplete',
9192
forwardAttributes: 'autocomplete',
9293
forwardRef: 'autocomplete',
94+
applyTheme: {
95+
affects: [{ element: 'textField' }],
96+
viaProp: true,
97+
viaContext: true,
98+
defaultTheme: 'light',
99+
},
93100
});
94101
});

‎packages/lumx-react/src/components/autocomplete/AutocompleteMultiple.test.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22

33
import { Dropdown, List, ListItem, Size, TextField } from '@lumx/react';
4-
import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
4+
import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
55
import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
66
import { render } from '@testing-library/react';
77

@@ -13,7 +13,7 @@ const CLASSNAME = AutocompleteMultiple.className as string;
1313
/**
1414
* Mounts the component and returns common DOM elements / data needed in multiple tests further down.
1515
*/
16-
const setup = (props: Partial<AutocompleteMultipleProps> = {}) => {
16+
const setup = (props: Partial<AutocompleteMultipleProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
1717
render(
1818
<AutocompleteMultiple {...(props as any)}>
1919
<List>
@@ -24,6 +24,7 @@ const setup = (props: Partial<AutocompleteMultipleProps> = {}) => {
2424
))}
2525
</List>
2626
</AutocompleteMultiple>,
27+
{ wrapper },
2728
);
2829
const autocompleteMultiple = getByClassName(document.body, CLASSNAME);
2930
const textField = getByClassName(autocompleteMultiple, TextField.className as string);
@@ -52,5 +53,11 @@ describe(`<${AutocompleteMultiple.displayName}>`, () => {
5253
forwardClassName: 'autocompleteMultiple',
5354
forwardRef: 'autocompleteMultiple',
5455
forwardAttributes: 'autocompleteMultiple',
56+
applyTheme: {
57+
affects: [{ element: 'textField' }],
58+
viaProp: true,
59+
viaContext: true,
60+
defaultTheme: 'light',
61+
},
5562
});
5663
});

‎packages/lumx-react/src/components/avatar/Avatar.test.tsx

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,34 @@
11
import React from 'react';
22

3-
import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
3+
import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
44
import { render } from '@testing-library/react';
55
import { queryByClassName } from '@lumx/react/testing/utils/queries';
66
import { Avatar, AvatarProps } from './Avatar';
77

88
const CLASSNAME = Avatar.className as string;
99

10-
const setup = (propsOverride: Partial<AvatarProps> = {}) => {
10+
const setup = (propsOverride: Partial<AvatarProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
1111
const props: AvatarProps = {
1212
image: 'path/to/avatar/image.png',
1313
alt: 'Image',
1414
...propsOverride,
1515
};
16-
render(<Avatar {...props} />);
16+
render(<Avatar {...props} />, { wrapper });
1717
const avatar = queryByClassName(document.body, CLASSNAME);
1818
return { avatar, props };
1919
};
2020

2121
describe(`<${Avatar.displayName}>`, () => {
2222
// Common tests suite.
23-
commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'avatar', forwardAttributes: 'avatar' });
23+
commonTestsSuiteRTL(setup, {
24+
baseClassName: CLASSNAME,
25+
forwardClassName: 'avatar',
26+
forwardAttributes: 'avatar',
27+
applyTheme: {
28+
affects: [{ element: 'avatar' }],
29+
viaProp: true,
30+
viaContext: true,
31+
defaultTheme: 'light',
32+
},
33+
});
2434
});

‎packages/lumx-react/src/components/button/Button.test.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22

33
import { mdiCheck, mdiPlus } from '@lumx/icons';
4-
import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
4+
import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
55
import { render, screen, within } from '@testing-library/react';
66
import { getByClassName, queryAllByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
77
import { Emphasis, Icon } from '@lumx/react';
@@ -15,9 +15,9 @@ type SetupProps = Partial<ButtonProps>;
1515
/**
1616
* Mounts the component and returns common DOM elements / data needed in multiple tests further down.
1717
*/
18-
const setup = (propsOverride: SetupProps = {}) => {
18+
const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions = {}) => {
1919
const props: any = { ...propsOverride };
20-
render(<Button {...props} />);
20+
render(<Button {...props} />, { wrapper });
2121
const button = getByClassName(document.body, CLASSNAME);
2222
const buttonWrapper = queryByClassName(document.body, 'lumx-button-wrapper');
2323
const icons = queryAllByClassName(button, Icon.className as string);
@@ -71,5 +71,11 @@ describe(`<${Button.displayName}>`, () => {
7171
forwardClassName: 'button',
7272
forwardAttributes: 'button',
7373
forwardRef: 'button',
74+
applyTheme: {
75+
affects: [{ element: 'button' }],
76+
viaProp: true,
77+
viaContext: true,
78+
defaultTheme: 'light',
79+
},
7480
});
7581
});

‎packages/lumx-react/src/components/button/IconButton.test.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22

3-
import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
3+
import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
44
import { Button } from '@lumx/react';
55
import { render, screen } from '@testing-library/react';
66
import { getByClassName, queryByClassName, queryByTagName } from '@lumx/react/testing/utils/queries';
@@ -14,9 +14,9 @@ type SetupProps = Partial<IconButtonProps>;
1414
/**
1515
* Mounts the component and returns common DOM elements / data needed in multiple tests further down.
1616
*/
17-
const setup = (propsOverride: SetupProps = {}) => {
17+
const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions = {}) => {
1818
const props: any = { ...propsOverride };
19-
render(<IconButton {...props} />);
19+
render(<IconButton {...props} />, { wrapper });
2020
const iconButton = getByClassName(document.body, CLASSNAME);
2121
const icon = queryByClassName(iconButton, 'lumx-icon');
2222
const img = queryByTagName(iconButton, 'IMG');
@@ -58,5 +58,11 @@ describe(`<${IconButton.displayName}>`, () => {
5858
forwardClassName: 'iconButton',
5959
forwardAttributes: 'iconButton',
6060
forwardRef: 'iconButton',
61+
applyTheme: {
62+
affects: [{ element: 'iconButton' }],
63+
viaProp: true,
64+
viaContext: true,
65+
defaultTheme: 'light',
66+
},
6167
});
6268
});

‎packages/lumx-react/src/components/checkbox/Checkbox.test.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22

3-
import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
3+
import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
44

55
import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
66
import { render } from '@testing-library/react';
@@ -14,9 +14,9 @@ type SetupProps = Partial<CheckboxProps>;
1414
/**
1515
* Mounts the component and returns common DOM elements / data needed in multiple tests further down.
1616
*/
17-
const setup = (propsOverride: SetupProps = {}) => {
17+
const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions = {}) => {
1818
const props: any = { id: 'fixedId', ...propsOverride };
19-
render(<Checkbox {...props} />);
19+
render(<Checkbox {...props} />, { wrapper });
2020

2121
const checkbox = getByClassName(document.body, CLASSNAME);
2222
const helper = queryByClassName(checkbox, `${CLASSNAME}__helper`);
@@ -117,5 +117,11 @@ describe(`<${Checkbox.displayName}>`, () => {
117117
baseClassName: CLASSNAME,
118118
forwardClassName: 'checkbox',
119119
forwardAttributes: 'checkbox',
120+
applyTheme: {
121+
affects: [{ element: 'checkbox' }],
122+
viaProp: true,
123+
viaContext: true,
124+
defaultTheme: 'light',
125+
},
120126
});
121127
});

‎packages/lumx-react/src/components/chip/Chip.test.tsx

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22

33
import { Theme } from '@lumx/react';
4-
import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
4+
import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
55
import { fireEvent, render, screen } from '@testing-library/react';
66
import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
77
import userEvent from '@testing-library/user-event';
@@ -12,12 +12,12 @@ const CLASSNAME = Chip.className as string;
1212
/**
1313
* Mounts the component and returns common DOM elements / data needed in multiple tests further down.
1414
*/
15-
const setup = (propOverrides: Partial<ChipProps> = {}) => {
15+
const setup = (propOverrides: Partial<ChipProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
1616
const props = {
1717
...propOverrides,
1818
};
1919

20-
render(<Chip {...props} />);
20+
render(<Chip {...props} />, { wrapper });
2121
const chip = getByClassName(document.body, CLASSNAME);
2222
const before = queryByClassName(chip, `${CLASSNAME}__before`);
2323
const after = queryByClassName(chip, `${CLASSNAME}__after`);
@@ -185,5 +185,15 @@ describe('<Chip />', () => {
185185
});
186186
});
187187

188-
commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'chip', forwardAttributes: 'chip' });
188+
commonTestsSuiteRTL(setup, {
189+
baseClassName: CLASSNAME,
190+
forwardClassName: 'chip',
191+
forwardAttributes: 'chip',
192+
applyTheme: {
193+
affects: [{ element: 'chip', classModifier: 'color', inverted: true }],
194+
viaProp: true,
195+
viaContext: true,
196+
defaultTheme: 'light',
197+
},
198+
});
189199
});

‎packages/lumx-react/src/components/comment-block/CommentBlock.test.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React from 'react';
2-
import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
2+
import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
33

44
import { render } from '@testing-library/react';
55
import { queryByClassName } from '@lumx/react/testing/utils/queries';
66
import { CommentBlock, CommentBlockProps } from './CommentBlock';
77

88
const CLASSNAME = CommentBlock.className as string;
99

10-
const setup = (props: Partial<CommentBlockProps> = {}) => {
11-
render(<CommentBlock {...(props as any)} />);
10+
const setup = (props: Partial<CommentBlockProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
11+
render(<CommentBlock {...(props as any)} />, { wrapper });
1212
const commentBlock = queryByClassName(document.body, CLASSNAME);
1313
return { props, commentBlock };
1414
};
@@ -19,5 +19,11 @@ describe(`<${CommentBlock.displayName}>`, () => {
1919
baseClassName: CLASSNAME,
2020
forwardClassName: 'commentBlock',
2121
forwardAttributes: 'commentBlock',
22+
applyTheme: {
23+
affects: [{ element: 'commentBlock' }],
24+
viaProp: true,
25+
viaContext: true,
26+
defaultTheme: 'light',
27+
},
2228
});
2329
});

‎packages/lumx-react/src/components/date-picker/DatePickerField.test.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22

3-
import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
3+
import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
44
import { render, screen } from '@testing-library/react';
55
import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
66
import { TextField } from '@lumx/react';
@@ -15,7 +15,7 @@ jest.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
1515
getYearDisplayName: () => 'année',
1616
}));
1717

18-
const setup = (propsOverride: Partial<DatePickerFieldProps> = {}) => {
18+
const setup = (propsOverride: Partial<DatePickerFieldProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
1919
const props: DatePickerFieldProps = {
2020
label: 'DatePickerField',
2121
locale: 'fr',
@@ -25,7 +25,7 @@ const setup = (propsOverride: Partial<DatePickerFieldProps> = {}) => {
2525
previousButtonProps: { label: 'Previous month' },
2626
...propsOverride,
2727
};
28-
render(<DatePickerField {...props} />);
28+
render(<DatePickerField {...props} />, { wrapper });
2929
const textField = getByClassName(document.body, TextField.className as string);
3030
const inputNative = getByTagName(textField, 'input');
3131
const getDatePicker = () => queryByClassName(document.body, CLASSNAME);
@@ -62,5 +62,11 @@ describe(`<${DatePickerField.displayName}>`, () => {
6262
forwardRef: 'textField',
6363
forwardAttributes: 'inputNative',
6464
forwardClassName: 'textField',
65+
applyTheme: {
66+
affects: [{ element: 'textField' }],
67+
viaProp: true,
68+
viaContext: true,
69+
defaultTheme: 'light',
70+
},
6571
});
6672
});

‎packages/lumx-react/src/components/dialog/Dialog.test.tsx

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,26 @@ import React from 'react';
33
import { Dialog, DialogProps } from '@lumx/react/components/dialog/Dialog';
44
import { queryByClassName } from '@lumx/react/testing/utils/queries';
55
import { render, screen } from '@testing-library/react';
6-
import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
6+
import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
77
import userEvent from '@testing-library/user-event';
8+
import { ThemeSentinel } from '@lumx/react/testing/utils/ThemeSentinel';
89

910
const CLASSNAME = Dialog.className as string;
1011

1112
/**
1213
* Mounts the component and returns common DOM elements / data needed in multiple tests further down.
1314
*/
14-
const setup = (props: Partial<DialogProps> = {}) => {
15-
render(<Dialog isOpen {...props} />);
15+
const setup = (props: Partial<DialogProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
16+
render(
17+
<Dialog isOpen {...props}>
18+
{props.children || <ThemeSentinel />}
19+
</Dialog>,
20+
{ wrapper },
21+
);
1622
const dialog = queryByClassName(document.body, CLASSNAME);
1723
const container = dialog && queryByClassName(dialog, `${CLASSNAME}__container`);
18-
return { props, dialog, container };
24+
const themeSentinel = screen.queryByTestId(ThemeSentinel.testId);
25+
return { props, dialog, container, themeSentinel };
1926
};
2027

2128
describe(`<${Dialog.displayName}>`, () => {
@@ -66,5 +73,11 @@ describe(`<${Dialog.displayName}>`, () => {
6673
forwardAttributes: 'dialog',
6774
forwardRef: 'dialog',
6875
forwardClassName: 'dialog',
76+
applyTheme: {
77+
// Theme should not affect the children components
78+
affects: [{ not: { element: 'themeSentinel' } }],
79+
viaProp: true,
80+
viaContext: true,
81+
},
6982
});
7083
});

0 commit comments

Comments
 (0)