@coveord/plasma-mantine 49.2.2 → 49.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.js +9 -4
- package/.turbo/turbo-build.log +3 -3
- package/.turbo/turbo-test.log +35 -31
- package/{src/components/code-editor/__mocks__ → __mocks__}/@monaco-editor/react.tsx +6 -8
- package/{src/components/code-editor/__mocks__ → __mocks__}/monaco-editor.ts +0 -0
- package/dist/.tsbuildinfo +1 -1
- package/dist/cjs/__tests__/Utils.js.map +1 -1
- package/dist/cjs/__tests__/VitestSetup.js +35 -0
- package/dist/cjs/__tests__/VitestSetup.js.map +1 -0
- package/dist/cjs/components/table/Th.js +8 -11
- package/dist/cjs/components/table/Th.js.map +1 -1
- package/dist/definitions/__tests__/Utils.d.ts +1 -1
- package/dist/definitions/__tests__/Utils.d.ts.map +1 -1
- package/dist/definitions/__tests__/VitestSetup.d.ts +2 -0
- package/dist/definitions/__tests__/VitestSetup.d.ts.map +1 -0
- package/dist/definitions/components/table/Th.d.ts.map +1 -1
- package/dist/esm/__tests__/Utils.js +1 -1
- package/dist/esm/__tests__/Utils.js.map +1 -1
- package/dist/esm/__tests__/VitestSetup.js +30 -0
- package/dist/esm/__tests__/VitestSetup.js.map +1 -0
- package/dist/esm/components/table/Th.js +9 -12
- package/dist/esm/components/table/Th.js.map +1 -1
- package/package.json +7 -6
- package/src/__tests__/Utils.tsx +1 -1
- package/src/__tests__/VitestSetup.ts +27 -0
- package/src/components/code-editor/__tests__/CodeEditor.spec.tsx +7 -5
- package/src/components/collection/__tests__/Collection.spec.tsx +2 -2
- package/src/components/date-range-picker/__tests__/DateRangePickerInlineCalendar.spec.tsx +17 -17
- package/src/components/date-range-picker/__tests__/DateRangePickerPopoverCalendar.spec.tsx +11 -7
- package/src/components/date-range-picker/__tests__/DateRangePickerPresetSelect.spec.tsx +1 -1
- package/src/components/inline-confirm/__tests__/InlineConfirm.spec.tsx +6 -6
- package/src/components/modal/__tests__/Modal.spec.tsx +3 -3
- package/src/components/modal-wizard/__tests__/ModalWizard.spec.tsx +8 -8
- package/src/components/prompt/__tests__/Prompt.spec.tsx +2 -2
- package/src/components/table/Th.tsx +9 -7
- package/src/components/table/__tests__/Table.spec.tsx +1 -1
- package/src/components/table/__tests__/TableActions.spec.tsx +1 -1
- package/src/components/table/__tests__/TableDateRangePicker.spec.tsx +11 -8
- package/src/components/table/__tests__/TableFilter.spec.tsx +4 -4
- package/src/components/table/__tests__/TablePagination.spec.tsx +2 -2
- package/src/components/table/__tests__/TablePerPage.spec.tsx +3 -3
- package/src/components/table/__tests__/TablePredicate.spec.tsx +2 -2
- package/src/components/table/__tests__/Th.spec.tsx +6 -15
- package/src/hooks/__tests__/useControlledList.spec.tsx +1 -1
- package/tsconfig.build.json +2 -1
- package/tsconfig.json +3 -2
- package/vitest.config.ts +24 -0
- package/dist/cjs/__tests__/GlobalSetup.js +0 -17
- package/dist/cjs/__tests__/GlobalSetup.js.map +0 -1
- package/dist/cjs/__tests__/Setup.js +0 -6
- package/dist/cjs/__tests__/Setup.js.map +0 -1
- package/dist/cjs/__tests__/SetupAfterEnv.js +0 -19
- package/dist/cjs/__tests__/SetupAfterEnv.js.map +0 -1
- package/dist/cjs/components/code-editor/__mocks__/@monaco-editor/react.js +0 -45
- package/dist/cjs/components/code-editor/__mocks__/@monaco-editor/react.js.map +0 -1
- package/dist/cjs/components/code-editor/__mocks__/monaco-editor.js +0 -24
- package/dist/cjs/components/code-editor/__mocks__/monaco-editor.js.map +0 -1
- package/dist/definitions/__tests__/GlobalSetup.d.ts +0 -3
- package/dist/definitions/__tests__/GlobalSetup.d.ts.map +0 -1
- package/dist/definitions/__tests__/Setup.d.ts +0 -5
- package/dist/definitions/__tests__/Setup.d.ts.map +0 -1
- package/dist/definitions/__tests__/SetupAfterEnv.d.ts +0 -7
- package/dist/definitions/__tests__/SetupAfterEnv.d.ts.map +0 -1
- package/dist/definitions/components/code-editor/__mocks__/@monaco-editor/react.d.ts +0 -10
- package/dist/definitions/components/code-editor/__mocks__/@monaco-editor/react.d.ts.map +0 -1
- package/dist/definitions/components/code-editor/__mocks__/monaco-editor.d.ts +0 -8
- package/dist/definitions/components/code-editor/__mocks__/monaco-editor.d.ts.map +0 -1
- package/dist/esm/__tests__/GlobalSetup.js +0 -7
- package/dist/esm/__tests__/GlobalSetup.js.map +0 -1
- package/dist/esm/__tests__/Setup.js +0 -5
- package/dist/esm/__tests__/Setup.js.map +0 -1
- package/dist/esm/__tests__/SetupAfterEnv.js +0 -15
- package/dist/esm/__tests__/SetupAfterEnv.js.map +0 -1
- package/dist/esm/components/code-editor/__mocks__/@monaco-editor/react.js +0 -24
- package/dist/esm/components/code-editor/__mocks__/@monaco-editor/react.js.map +0 -1
- package/dist/esm/components/code-editor/__mocks__/monaco-editor.js +0 -14
- package/dist/esm/components/code-editor/__mocks__/monaco-editor.js.map +0 -1
- package/jest.config.js +0 -26
- package/src/__tests__/GlobalSetup.ts +0 -5
- package/src/__tests__/Setup.ts +0 -4
- package/src/__tests__/SetupAfterEnv.ts +0 -16
|
@@ -12,7 +12,7 @@ describe('InlineConfirm', () => {
|
|
|
12
12
|
|
|
13
13
|
it('calls the onClick prop when clicking on a button', async () => {
|
|
14
14
|
const user = userEvent.setup({delay: null});
|
|
15
|
-
const onClickSpy =
|
|
15
|
+
const onClickSpy = vi.fn();
|
|
16
16
|
render(
|
|
17
17
|
<InlineConfirm>
|
|
18
18
|
<InlineConfirm.Button id="delete" onClick={onClickSpy}>
|
|
@@ -28,7 +28,7 @@ describe('InlineConfirm', () => {
|
|
|
28
28
|
|
|
29
29
|
it('calls the onClick prop when clicking on the menu item', async () => {
|
|
30
30
|
const user = userEvent.setup({delay: null});
|
|
31
|
-
const onClickSpy =
|
|
31
|
+
const onClickSpy = vi.fn();
|
|
32
32
|
render(
|
|
33
33
|
<InlineConfirm>
|
|
34
34
|
<Menu>
|
|
@@ -55,7 +55,7 @@ describe('InlineConfirm', () => {
|
|
|
55
55
|
render(
|
|
56
56
|
<InlineConfirm>
|
|
57
57
|
<InlineConfirm.Button id="my-button-id">Remove</InlineConfirm.Button>
|
|
58
|
-
<InlineConfirm.Prompt id="my-button-id" label="Are you sure?" onConfirm={
|
|
58
|
+
<InlineConfirm.Prompt id="my-button-id" label="Are you sure?" onConfirm={vi.fn()} />
|
|
59
59
|
</InlineConfirm>
|
|
60
60
|
);
|
|
61
61
|
expect(screen.queryByText('Are you sure?')).not.toBeInTheDocument();
|
|
@@ -69,7 +69,7 @@ describe('InlineConfirm', () => {
|
|
|
69
69
|
|
|
70
70
|
it('hides the prompt when the user cancel and call onConfirm when the user confirms', async () => {
|
|
71
71
|
const user = userEvent.setup({delay: null});
|
|
72
|
-
const confirmSpy =
|
|
72
|
+
const confirmSpy = vi.fn();
|
|
73
73
|
render(
|
|
74
74
|
<InlineConfirm>
|
|
75
75
|
<InlineConfirm.Button id="my-button-id">Remove</InlineConfirm.Button>
|
|
@@ -103,10 +103,10 @@ describe('InlineConfirm', () => {
|
|
|
103
103
|
render(
|
|
104
104
|
<InlineConfirm>
|
|
105
105
|
<InlineConfirm.Button id="remove">Remove</InlineConfirm.Button>
|
|
106
|
-
<InlineConfirm.Prompt id="remove" label="Delete X?" onConfirm={
|
|
106
|
+
<InlineConfirm.Prompt id="remove" label="Delete X?" onConfirm={vi.fn()} />
|
|
107
107
|
|
|
108
108
|
<InlineConfirm.Button id="print">Print</InlineConfirm.Button>
|
|
109
|
-
<InlineConfirm.Prompt id="print" label="Print?" onConfirm={
|
|
109
|
+
<InlineConfirm.Prompt id="print" label="Print?" onConfirm={vi.fn()} />
|
|
110
110
|
</InlineConfirm>
|
|
111
111
|
);
|
|
112
112
|
|
|
@@ -6,7 +6,7 @@ import {Modal} from '../Modal';
|
|
|
6
6
|
describe('Modal', () => {
|
|
7
7
|
it('renders title, desctiption, close button, and child', () => {
|
|
8
8
|
render(
|
|
9
|
-
<Modal opened onClose={
|
|
9
|
+
<Modal opened onClose={vi.fn()} title="title" description="modal description">
|
|
10
10
|
<Container>Children</Container>
|
|
11
11
|
</Modal>
|
|
12
12
|
);
|
|
@@ -22,7 +22,7 @@ describe('Modal', () => {
|
|
|
22
22
|
render(
|
|
23
23
|
<Modal
|
|
24
24
|
opened
|
|
25
|
-
onClose={
|
|
25
|
+
onClose={vi.fn()}
|
|
26
26
|
title={
|
|
27
27
|
<div>
|
|
28
28
|
<QuestionSize32Px />
|
|
@@ -38,7 +38,7 @@ describe('Modal', () => {
|
|
|
38
38
|
});
|
|
39
39
|
|
|
40
40
|
it('trigger onClose function when click on the close button', () => {
|
|
41
|
-
const onClose =
|
|
41
|
+
const onClose = vi.fn();
|
|
42
42
|
render(
|
|
43
43
|
<Modal opened onClose={onClose} title="title">
|
|
44
44
|
<Container>Children</Container>
|
|
@@ -169,7 +169,7 @@ describe('ModalWizard', () => {
|
|
|
169
169
|
];
|
|
170
170
|
|
|
171
171
|
const isDirty = () => false;
|
|
172
|
-
const onClose =
|
|
172
|
+
const onClose = vi.fn();
|
|
173
173
|
|
|
174
174
|
render(
|
|
175
175
|
<ModalWizard isDirty={isDirty} onClose={onClose} closeButtonLabel="closebuttonlabel" opened={true}>
|
|
@@ -205,7 +205,7 @@ describe('ModalWizard', () => {
|
|
|
205
205
|
];
|
|
206
206
|
|
|
207
207
|
const isDirty = () => false;
|
|
208
|
-
const onClose =
|
|
208
|
+
const onClose = vi.fn();
|
|
209
209
|
|
|
210
210
|
render(
|
|
211
211
|
<ModalWizard isDirty={isDirty} onClose={onClose} opened={true}>
|
|
@@ -241,8 +241,8 @@ describe('ModalWizard', () => {
|
|
|
241
241
|
];
|
|
242
242
|
|
|
243
243
|
const isDirty = () => false;
|
|
244
|
-
const onClose =
|
|
245
|
-
const onFinish =
|
|
244
|
+
const onClose = vi.fn();
|
|
245
|
+
const onFinish = vi.fn();
|
|
246
246
|
|
|
247
247
|
render(
|
|
248
248
|
<ModalWizard isDirty={isDirty} onClose={onClose} onFinish={onFinish} opened={true}>
|
|
@@ -278,8 +278,8 @@ describe('ModalWizard', () => {
|
|
|
278
278
|
];
|
|
279
279
|
|
|
280
280
|
const isDirty = () => true;
|
|
281
|
-
const onClose =
|
|
282
|
-
const handleDirtyState =
|
|
281
|
+
const onClose = vi.fn();
|
|
282
|
+
const handleDirtyState = vi.fn();
|
|
283
283
|
|
|
284
284
|
render(
|
|
285
285
|
<ModalWizard
|
|
@@ -323,8 +323,8 @@ describe('ModalWizard', () => {
|
|
|
323
323
|
];
|
|
324
324
|
|
|
325
325
|
const isDirty = () => true;
|
|
326
|
-
const onClose =
|
|
327
|
-
const handleDirtyState =
|
|
326
|
+
const onClose = vi.fn();
|
|
327
|
+
const handleDirtyState = vi.fn();
|
|
328
328
|
|
|
329
329
|
render(
|
|
330
330
|
<ModalWizard
|
|
@@ -4,7 +4,7 @@ import {Prompt} from '../Prompt';
|
|
|
4
4
|
describe('Prompt', () => {
|
|
5
5
|
it('displays the title, body and close button', () => {
|
|
6
6
|
render(
|
|
7
|
-
<Prompt variant="default" opened onClose={
|
|
7
|
+
<Prompt variant="default" opened onClose={vi.fn()} title="title modal">
|
|
8
8
|
content modal
|
|
9
9
|
<Prompt.Footer>footer content</Prompt.Footer>
|
|
10
10
|
</Prompt>
|
|
@@ -16,7 +16,7 @@ describe('Prompt', () => {
|
|
|
16
16
|
});
|
|
17
17
|
|
|
18
18
|
it('calls onClose when clicking on the close button', () => {
|
|
19
|
-
const onClose =
|
|
19
|
+
const onClose = vi.fn();
|
|
20
20
|
render(
|
|
21
21
|
<Prompt variant="default" opened onClose={onClose} title="title modal">
|
|
22
22
|
content modal
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@coveord/plasma-react-icons';
|
|
2
2
|
import {Center, createStyles, Group, Text, UnstyledButton} from '@mantine/core';
|
|
3
3
|
import {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';
|
|
4
4
|
|
|
@@ -26,13 +26,15 @@ interface ThProps<T> {
|
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
const SortingIcons = {
|
|
29
|
-
asc:
|
|
30
|
-
desc:
|
|
29
|
+
asc: ArrowUpSize16Px,
|
|
30
|
+
desc: ArrowDownSize16Px,
|
|
31
|
+
none: DoubleArrowHeadVSize16Px,
|
|
31
32
|
};
|
|
32
33
|
|
|
33
34
|
const SortingLabels = {
|
|
34
35
|
asc: 'ascending',
|
|
35
36
|
desc: 'descending',
|
|
37
|
+
none: 'none',
|
|
36
38
|
} as const;
|
|
37
39
|
|
|
38
40
|
export const Th = <T,>({header}: ThProps<T>) => {
|
|
@@ -55,15 +57,15 @@ export const Th = <T,>({header}: ThProps<T>) => {
|
|
|
55
57
|
}
|
|
56
58
|
|
|
57
59
|
const onSort = header.column.getToggleSortingHandler();
|
|
58
|
-
const sortingOrder = header.column.getIsSorted();
|
|
59
|
-
const Icon = SortingIcons[sortingOrder
|
|
60
|
+
const sortingOrder = header.column.getIsSorted() || 'none';
|
|
61
|
+
const Icon = SortingIcons[sortingOrder];
|
|
60
62
|
|
|
61
63
|
return (
|
|
62
|
-
<th className={classes.th} style={{width}} aria-sort={
|
|
64
|
+
<th className={classes.th} style={{width}} aria-sort={SortingLabels[sortingOrder]}>
|
|
63
65
|
<UnstyledButton onClick={onSort} className={classes.control}>
|
|
64
66
|
<Group position="apart" noWrap>
|
|
65
67
|
<Text size="xs">{flexRender(header.column.columnDef.header, header.getContext())}</Text>
|
|
66
|
-
<Center
|
|
68
|
+
<Center>
|
|
67
69
|
<Icon height={14} />
|
|
68
70
|
</Center>
|
|
69
71
|
</Group>
|
|
@@ -169,7 +169,7 @@ describe('Table', () => {
|
|
|
169
169
|
|
|
170
170
|
it('calls an action when user double clicks on a row', async () => {
|
|
171
171
|
const user = userEvent.setup();
|
|
172
|
-
const doubleClickSpy =
|
|
172
|
+
const doubleClickSpy = vi.fn();
|
|
173
173
|
render(
|
|
174
174
|
<Table<RowData>
|
|
175
175
|
data={[{firstName: 'Mario'}, {firstName: 'Luigi'}]}
|
|
@@ -38,7 +38,7 @@ describe('Table.Actions', () => {
|
|
|
38
38
|
describe('when multi row selection is enabled', () => {
|
|
39
39
|
it('passes down an array of selected rows', async () => {
|
|
40
40
|
const user = userEvent.setup({delay: null});
|
|
41
|
-
const renderSpy =
|
|
41
|
+
const renderSpy = vi.fn().mockImplementation(() => <div />);
|
|
42
42
|
render(
|
|
43
43
|
<Table<RowData>
|
|
44
44
|
data={[{name: 'fruit'}, {name: 'vegetable'}, {name: 'bread'}]}
|
|
@@ -11,20 +11,23 @@ const columns: Array<ColumnDef<RowData>> = [columnHelper.accessor('name', {enabl
|
|
|
11
11
|
// Since we're mocking the date and the animations are timer based we're mocking useReduceMotion to disable all the animations
|
|
12
12
|
// I tried wrapping the components in <MantineProvider theme={{components: {Transition: {defaultProps: {duration: 0}}}}}>
|
|
13
13
|
// but the animation was still happening. :(
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
vi.mock('@mantine/hooks', async () => {
|
|
15
|
+
const actual = await vi.importActual('@mantine/hooks');
|
|
16
|
+
return {
|
|
17
|
+
...actual,
|
|
18
|
+
useReduceMotion: () => true,
|
|
19
|
+
};
|
|
20
|
+
});
|
|
18
21
|
|
|
19
22
|
describe('Table.DateRangePicker', () => {
|
|
20
|
-
|
|
23
|
+
// vi.setTimeout(15000);
|
|
21
24
|
|
|
22
25
|
beforeEach(() => {
|
|
23
|
-
|
|
26
|
+
vi.useFakeTimers().setSystemTime(new Date(2022, 0, 15));
|
|
24
27
|
});
|
|
25
28
|
|
|
26
29
|
afterEach(() => {
|
|
27
|
-
|
|
30
|
+
vi.useRealTimers();
|
|
28
31
|
});
|
|
29
32
|
|
|
30
33
|
it('displays the intial dates', async () => {
|
|
@@ -47,7 +50,7 @@ describe('Table.DateRangePicker', () => {
|
|
|
47
50
|
|
|
48
51
|
it('displays the selected date range in the table', async () => {
|
|
49
52
|
const user = userEvent.setup({delay: null});
|
|
50
|
-
const onChange =
|
|
53
|
+
const onChange = vi.fn();
|
|
51
54
|
render(
|
|
52
55
|
<Table
|
|
53
56
|
data={[{name: 'fruit'}, {name: 'vegetable'}]}
|
|
@@ -10,7 +10,7 @@ const columns: Array<ColumnDef<RowData>> = [columnHelper.accessor('name', {enabl
|
|
|
10
10
|
|
|
11
11
|
describe('Table.Filter', () => {
|
|
12
12
|
it('displays the placeholder', () => {
|
|
13
|
-
const onChange =
|
|
13
|
+
const onChange = vi.fn();
|
|
14
14
|
render(
|
|
15
15
|
<Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} onChange={onChange}>
|
|
16
16
|
<Table.Header>
|
|
@@ -24,7 +24,7 @@ describe('Table.Filter', () => {
|
|
|
24
24
|
|
|
25
25
|
it('calls onChange when typing something in the filter', async () => {
|
|
26
26
|
const user = userEvent.setup({delay: null});
|
|
27
|
-
const onChange =
|
|
27
|
+
const onChange = vi.fn();
|
|
28
28
|
render(
|
|
29
29
|
<Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} onChange={onChange}>
|
|
30
30
|
<Table.Header>
|
|
@@ -40,7 +40,7 @@ describe('Table.Filter', () => {
|
|
|
40
40
|
|
|
41
41
|
it('goes back to the first page when changing the filter', async () => {
|
|
42
42
|
const user = userEvent.setup({delay: null});
|
|
43
|
-
const onChange =
|
|
43
|
+
const onChange = vi.fn();
|
|
44
44
|
render(
|
|
45
45
|
<Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} onChange={onChange}>
|
|
46
46
|
<Table.Header>
|
|
@@ -63,7 +63,7 @@ describe('Table.Filter', () => {
|
|
|
63
63
|
describe('when multi row selection is enabled', () => {
|
|
64
64
|
it('does not unselect rows that get filtered out', async () => {
|
|
65
65
|
const user = userEvent.setup({delay: null});
|
|
66
|
-
const onChange =
|
|
66
|
+
const onChange = vi.fn();
|
|
67
67
|
render(
|
|
68
68
|
<Table
|
|
69
69
|
data={[{name: 'fruit'}, {name: 'vegetable'}]}
|
|
@@ -12,7 +12,7 @@ describe('Table.Pagination', () => {
|
|
|
12
12
|
beforeEach(() => {
|
|
13
13
|
if (!HTMLElement.prototype.scrollIntoView) {
|
|
14
14
|
HTMLElement.prototype.scrollIntoView = () => {
|
|
15
|
-
|
|
15
|
+
vi.fn();
|
|
16
16
|
};
|
|
17
17
|
}
|
|
18
18
|
});
|
|
@@ -37,7 +37,7 @@ describe('Table.Pagination', () => {
|
|
|
37
37
|
|
|
38
38
|
it('calls onChange when clicking on a page number', async () => {
|
|
39
39
|
const user = userEvent.setup();
|
|
40
|
-
const onChange =
|
|
40
|
+
const onChange = vi.fn();
|
|
41
41
|
render(
|
|
42
42
|
<Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} onChange={onChange}>
|
|
43
43
|
<Table.Footer>
|
|
@@ -43,7 +43,7 @@ describe('Table.PerPage', () => {
|
|
|
43
43
|
});
|
|
44
44
|
|
|
45
45
|
it('calls onMount with the initial value', () => {
|
|
46
|
-
const onMount =
|
|
46
|
+
const onMount = vi.fn();
|
|
47
47
|
render(
|
|
48
48
|
<Table
|
|
49
49
|
data={[{name: 'fruit'}, {name: 'vegetable'}]}
|
|
@@ -64,7 +64,7 @@ describe('Table.PerPage', () => {
|
|
|
64
64
|
|
|
65
65
|
it('calls onChange when changing the number of items per page', async () => {
|
|
66
66
|
const user = userEvent.setup({delay: null});
|
|
67
|
-
const onChange =
|
|
67
|
+
const onChange = vi.fn();
|
|
68
68
|
render(
|
|
69
69
|
<Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} onChange={onChange}>
|
|
70
70
|
<Table.Footer>
|
|
@@ -82,7 +82,7 @@ describe('Table.PerPage', () => {
|
|
|
82
82
|
|
|
83
83
|
it('resets page index when changing the number of items per page', async () => {
|
|
84
84
|
const user = userEvent.setup({delay: null});
|
|
85
|
-
const onChange =
|
|
85
|
+
const onChange = vi.fn();
|
|
86
86
|
render(
|
|
87
87
|
<Table
|
|
88
88
|
data={[{name: 'fruit'}, {name: 'vegetable'}]}
|
|
@@ -38,7 +38,7 @@ describe('Table.Predicate', () => {
|
|
|
38
38
|
});
|
|
39
39
|
|
|
40
40
|
it('calls onMount with the initial value', async () => {
|
|
41
|
-
const onMount =
|
|
41
|
+
const onMount = vi.fn();
|
|
42
42
|
render(
|
|
43
43
|
<Table
|
|
44
44
|
data={[{name: 'fruit'}, {name: 'vegetable'}]}
|
|
@@ -70,7 +70,7 @@ describe('Table.Predicate', () => {
|
|
|
70
70
|
|
|
71
71
|
it('calls onChange when changing the predicate', async () => {
|
|
72
72
|
const user = userEvent.setup({delay: null});
|
|
73
|
-
const onChange =
|
|
73
|
+
const onChange = vi.fn();
|
|
74
74
|
render(
|
|
75
75
|
<Table
|
|
76
76
|
data={[{name: 'fruit'}, {name: 'vegetable'}]}
|
|
@@ -22,15 +22,11 @@ describe('Th', () => {
|
|
|
22
22
|
];
|
|
23
23
|
render(<Table data={data} columns={columns} />);
|
|
24
24
|
|
|
25
|
-
// icons are loadable, wait for them to load
|
|
26
|
-
await screen.findByRole('img', {name: 'arrowHeadDown'});
|
|
27
|
-
await screen.findByRole('img', {name: 'arrowHeadUp'});
|
|
28
|
-
|
|
29
25
|
const headers = screen.getAllByRole('button');
|
|
30
26
|
expect(headers.length).toBe(2);
|
|
31
27
|
|
|
32
|
-
expect(headers[0]).toHaveAccessibleName(
|
|
33
|
-
expect(headers[1]).toHaveAccessibleName(
|
|
28
|
+
expect(headers[0]).toHaveAccessibleName(/name doubleArrowHead/i);
|
|
29
|
+
expect(headers[1]).toHaveAccessibleName(/type doubleArrowHead/i);
|
|
34
30
|
});
|
|
35
31
|
|
|
36
32
|
it('changes the sort icon when clicking on a table header', async () => {
|
|
@@ -38,25 +34,20 @@ describe('Th', () => {
|
|
|
38
34
|
{name: 'apple', type: 'fruit', colors: ['red', 'green']},
|
|
39
35
|
{name: 'potato', type: 'vegetable', colors: ['brown', 'blue', 'yellow']},
|
|
40
36
|
];
|
|
41
|
-
const onChange =
|
|
37
|
+
const onChange = vi.fn();
|
|
42
38
|
render(<Table data={data} columns={columns} onChange={onChange} />);
|
|
43
39
|
|
|
44
|
-
|
|
45
|
-
await screen.findAllByRole('img', {name: 'arrowHeadDown'});
|
|
46
|
-
await screen.findAllByRole('img', {name: 'arrowHeadUp'});
|
|
47
|
-
|
|
48
|
-
userEvent.click(screen.getByRole('button', {name: /name arrowheaddown/i}));
|
|
40
|
+
userEvent.click(screen.getByRole('button', {name: /name doubleArrowHead/i}));
|
|
49
41
|
await waitFor(() => {
|
|
50
42
|
expect(onChange).toHaveBeenCalledWith(expect.objectContaining({sorting: [{id: 'name', desc: false}]}));
|
|
51
43
|
});
|
|
52
44
|
|
|
53
|
-
userEvent.click(screen.getByRole('button', {name:
|
|
45
|
+
userEvent.click(screen.getByRole('button', {name: /name arrowUp/i}));
|
|
54
46
|
await waitFor(() => {
|
|
55
47
|
expect(onChange).toHaveBeenCalledWith(expect.objectContaining({sorting: [{id: 'name', desc: true}]}));
|
|
56
48
|
});
|
|
57
49
|
|
|
58
|
-
|
|
59
|
-
userEvent.click(screen.getByRole('button', {name: 'name arrowHeadUp'}));
|
|
50
|
+
userEvent.click(screen.getByRole('button', {name: /name arrowDown/i}));
|
|
60
51
|
await waitFor(() => {
|
|
61
52
|
expect(onChange).toHaveBeenCalledWith(expect.objectContaining({sorting: [{id: 'name', desc: false}]}));
|
|
62
53
|
});
|
package/tsconfig.build.json
CHANGED
package/tsconfig.json
CHANGED
package/vitest.config.ts
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import {resolve} from 'path';
|
|
2
|
+
import {defineConfig} from 'vitest/config';
|
|
3
|
+
|
|
4
|
+
export default defineConfig({
|
|
5
|
+
resolve: {
|
|
6
|
+
alias: [
|
|
7
|
+
{
|
|
8
|
+
find: '@test-utils',
|
|
9
|
+
replacement: resolve(__dirname, './src/__tests__/Utils.tsx'),
|
|
10
|
+
},
|
|
11
|
+
],
|
|
12
|
+
},
|
|
13
|
+
test: {
|
|
14
|
+
globals: true,
|
|
15
|
+
environment: 'jsdom',
|
|
16
|
+
setupFiles: './src/__tests__/VitestSetup.ts',
|
|
17
|
+
alias: [
|
|
18
|
+
{
|
|
19
|
+
find: /^monaco-editor$/,
|
|
20
|
+
replacement: 'monaco-editor/esm/vs/editor/editor.main.js',
|
|
21
|
+
},
|
|
22
|
+
],
|
|
23
|
+
},
|
|
24
|
+
});
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
// This file is executed once, before everything else.
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
Object.defineProperty(exports, "default", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: function() {
|
|
9
|
-
return _default;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
var _default = function() {
|
|
13
|
-
// @ts-ignore
|
|
14
|
-
process.env.TZ = "UTC";
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
//# sourceMappingURL=GlobalSetup.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/__tests__/GlobalSetup.ts"],"sourcesContent":["// This file is executed once, before everything else.\nexport default () => {\n // @ts-ignore\n process.env.TZ = 'UTC';\n};\n"],"names":["process","env","TZ"],"mappings":"AAAA,sDAAsD;;;;;+BACtD;;;eAAA;;;IAAA,WAAe,WAAM;IACjB,aAAa;IACbA,QAAQC,GAAG,CAACC,EAAE,GAAG;AACrB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/__tests__/Setup.ts"],"sourcesContent":["/**\n * This file is executed once per test file.\n * It is executed before executing SetupAfterEnv and before the test code itself.\n */\n"],"names":[],"mappings":"AAAA;;;CAGC"}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* This file is executed once per test file.
|
|
3
|
-
* It is executed after executing Setup and Jest is initialised, but before the test code itself.
|
|
4
|
-
*/ "use strict";
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
require("@testing-library/jest-dom");
|
|
9
|
-
require("@testing-library/jest-dom/extend-expect");
|
|
10
|
-
Element.prototype.scrollTo = jest.fn();
|
|
11
|
-
window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(function() {
|
|
12
|
-
return {
|
|
13
|
-
disconnect: jest.fn(),
|
|
14
|
-
observe: jest.fn(),
|
|
15
|
-
unobserve: jest.fn()
|
|
16
|
-
};
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
//# sourceMappingURL=SetupAfterEnv.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/__tests__/SetupAfterEnv.ts"],"sourcesContent":["/**\n * This file is executed once per test file.\n * It is executed after executing Setup and Jest is initialised, but before the test code itself.\n */\n\nimport '@testing-library/jest-dom';\nimport '@testing-library/jest-dom/extend-expect';\n\nElement.prototype.scrollTo = jest.fn();\nwindow.ResizeObserver =\n window.ResizeObserver ||\n jest.fn().mockImplementation(() => ({\n disconnect: jest.fn(),\n observe: jest.fn(),\n unobserve: jest.fn(),\n }));\n"],"names":["Element","prototype","scrollTo","jest","fn","window","ResizeObserver","mockImplementation","disconnect","observe","unobserve"],"mappings":"AAAA;;;CAGC;;;;QAEM;QACA;AAEPA,QAAQC,SAAS,CAACC,QAAQ,GAAGC,KAAKC,EAAE;AACpCC,OAAOC,cAAc,GACjBD,OAAOC,cAAc,IACrBH,KAAKC,EAAE,GAAGG,kBAAkB,CAAC;WAAO;QAChCC,YAAYL,KAAKC,EAAE;QACnBK,SAASN,KAAKC,EAAE;QAChBM,WAAWP,KAAKC,EAAE;IACtB"}
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
function _export(target, all) {
|
|
6
|
-
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: all[name]
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
_export(exports, {
|
|
12
|
-
default: function() {
|
|
13
|
-
return _default;
|
|
14
|
-
},
|
|
15
|
-
loader: function() {
|
|
16
|
-
return loader;
|
|
17
|
-
},
|
|
18
|
-
useMonaco: function() {
|
|
19
|
-
return useMonaco;
|
|
20
|
-
}
|
|
21
|
-
});
|
|
22
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
23
|
-
var _react = require("react");
|
|
24
|
-
var editor = {
|
|
25
|
-
onDidFocusEditorText: jest.fn(),
|
|
26
|
-
onDidBlurEditorText: jest.fn()
|
|
27
|
-
};
|
|
28
|
-
var monaco = jest.fn();
|
|
29
|
-
var MockedEditor = function(props) {
|
|
30
|
-
(0, _react.useEffect)(function() {
|
|
31
|
-
props.onMount(editor, monaco);
|
|
32
|
-
}, []);
|
|
33
|
-
return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
|
|
34
|
-
"data-testid": "monaco-editor"
|
|
35
|
-
});
|
|
36
|
-
};
|
|
37
|
-
var _default = MockedEditor;
|
|
38
|
-
var loader = {
|
|
39
|
-
config: jest.fn()
|
|
40
|
-
};
|
|
41
|
-
var useMonaco = function() {
|
|
42
|
-
return jest.fn();
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
//# sourceMappingURL=react.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/components/code-editor/__mocks__/@monaco-editor/react.tsx"],"sourcesContent":["import {EditorProps} from '@monaco-editor/react';\nimport {FunctionComponent, useEffect} from 'react';\n\nconst editor: any = {\n onDidFocusEditorText: jest.fn(),\n onDidBlurEditorText: jest.fn(),\n};\n\nconst monaco: any = jest.fn();\n\nconst MockedEditor: FunctionComponent<EditorProps> = (props) => {\n useEffect(() => {\n props.onMount(editor, monaco);\n }, []);\n return <div data-testid=\"monaco-editor\" />;\n};\n\nexport default MockedEditor;\n\nexport const loader = {\n config: jest.fn(),\n};\n\nexport const useMonaco = () => jest.fn();\n"],"names":["loader","useMonaco","editor","onDidFocusEditorText","jest","fn","onDidBlurEditorText","monaco","MockedEditor","props","useEffect","onMount","div","data-testid","config"],"mappings":";;;;;;;;;;;IAiBA,OAA4B;eAA5B;;IAEaA,MAAM;eAANA;;IAIAC,SAAS;eAATA;;;;qBAtB8B;AAE3C,IAAMC,SAAc;IAChBC,sBAAsBC,KAAKC,EAAE;IAC7BC,qBAAqBF,KAAKC,EAAE;AAChC;AAEA,IAAME,SAAcH,KAAKC,EAAE;AAE3B,IAAMG,eAA+C,SAACC,OAAU;IAC5DC,IAAAA,gBAAS,EAAC,WAAM;QACZD,MAAME,OAAO,CAACT,QAAQK;IAC1B,GAAG,EAAE;IACL,qBAAO,qBAACK;QAAIC,eAAY;;AAC5B;IAEA,WAAeL;AAER,IAAMR,SAAS;IAClBc,QAAQV,KAAKC,EAAE;AACnB;AAEO,IAAMJ,YAAY;WAAMG,KAAKC,EAAE"}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "monaco", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: function() {
|
|
8
|
-
return monaco;
|
|
9
|
-
}
|
|
10
|
-
});
|
|
11
|
-
var editor = {
|
|
12
|
-
create: function() {
|
|
13
|
-
return {
|
|
14
|
-
dispose: function() {
|
|
15
|
-
return null;
|
|
16
|
-
}
|
|
17
|
-
};
|
|
18
|
-
}
|
|
19
|
-
};
|
|
20
|
-
var monaco = {
|
|
21
|
-
editor: editor
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
//# sourceMappingURL=monaco-editor.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/code-editor/__mocks__/monaco-editor.ts"],"sourcesContent":["const editor = {\n create: () => ({\n dispose: (): void => null,\n }),\n};\n\nexport const monaco = {\n editor,\n};\n"],"names":["monaco","editor","create","dispose"],"mappings":";;;;+BAMaA;;;eAAAA;;;AANb,IAAMC,SAAS;IACXC,QAAQ;eAAO;YACXC,SAAS;uBAAY,IAAI;;QAC7B;;AACJ;AAEO,IAAMH,SAAS;IAClBC,QAAAA;AACJ"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalSetup.d.ts","sourceRoot":"","sources":["../../../src/__tests__/GlobalSetup.ts"],"names":[],"mappings":";AACA,wBAGE"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Setup.d.ts","sourceRoot":"","sources":["../../../src/__tests__/Setup.ts"],"names":[],"mappings":"AAAA;;;GAGG"}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* This file is executed once per test file.
|
|
3
|
-
* It is executed after executing Setup and Jest is initialised, but before the test code itself.
|
|
4
|
-
*/
|
|
5
|
-
import '@testing-library/jest-dom';
|
|
6
|
-
import '@testing-library/jest-dom/extend-expect';
|
|
7
|
-
//# sourceMappingURL=SetupAfterEnv.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SetupAfterEnv.d.ts","sourceRoot":"","sources":["../../../src/__tests__/SetupAfterEnv.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,2BAA2B,CAAC;AACnC,OAAO,yCAAyC,CAAC"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/// <reference types="jest" />
|
|
2
|
-
import { EditorProps } from '@monaco-editor/react';
|
|
3
|
-
import { FunctionComponent } from 'react';
|
|
4
|
-
declare const MockedEditor: FunctionComponent<EditorProps>;
|
|
5
|
-
export default MockedEditor;
|
|
6
|
-
export declare const loader: {
|
|
7
|
-
config: jest.Mock<any, any>;
|
|
8
|
-
};
|
|
9
|
-
export declare const useMonaco: () => jest.Mock<any, any>;
|
|
10
|
-
//# sourceMappingURL=react.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../../../../src/components/code-editor/__mocks__/@monaco-editor/react.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAC,iBAAiB,EAAY,MAAM,OAAO,CAAC;AASnD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,WAAW,CAKhD,CAAC;AAEF,eAAe,YAAY,CAAC;AAE5B,eAAO,MAAM,MAAM;;CAElB,CAAC;AAEF,eAAO,MAAM,SAAS,2BAAkB,CAAC"}
|