@evoke-platform/ui-components 1.2.0 → 1.2.1-testing.1
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/dist/published/components/core/Autocomplete/Autocomplete.test.d.ts +1 -1
- package/dist/published/components/core/Autocomplete/Autocomplete.test.js +2 -2
- package/dist/published/components/core/TextField/TextField.test.d.ts +5 -1
- package/dist/published/components/core/TextField/TextField.test.js +6 -4
- package/dist/published/components/custom/FormField/AddressFieldComponent/AddressFieldComponent.test.d.ts +1 -1
- package/dist/published/components/custom/FormField/AddressFieldComponent/AddressFieldComponent.test.js +6 -6
- package/dist/published/components/custom/FormField/AddressFieldComponent/addressFieldComponent.js +2 -2
- package/dist/published/components/custom/FormField/BooleanSelect/BooleanSelect.test.d.ts +1 -1
- package/dist/published/components/custom/FormField/BooleanSelect/BooleanSelect.test.js +3 -3
- package/dist/published/components/custom/FormField/DatePickerSelect/DatePickerSelect.test.d.ts +1 -1
- package/dist/published/components/custom/FormField/DatePickerSelect/DatePickerSelect.test.js +10 -19
- package/dist/published/components/custom/FormField/DateTimePickerSelect/DateTimePickerSelect.test.d.ts +1 -1
- package/dist/published/components/custom/FormField/DateTimePickerSelect/DateTimePickerSelect.test.js +10 -19
- package/dist/published/components/custom/FormField/FormField.d.ts +2 -1
- package/dist/published/components/custom/FormField/InputFieldComponent/InputFieldComponent.js +2 -2
- package/dist/published/components/custom/FormField/InputFieldComponent/InputFieldComponent.test.d.ts +5 -1
- package/dist/published/components/custom/FormField/InputFieldComponent/InputFieldComponent.test.js +11 -9
- package/dist/published/components/custom/FormField/Select/Select.test.d.ts +5 -1
- package/dist/published/components/custom/FormField/Select/Select.test.js +11 -9
- package/dist/published/components/custom/Menubar/Menubar.test.js +2 -1
- package/package.json +10 -17
@@ -1 +1 @@
|
|
1
|
-
|
1
|
+
export {};
|
@@ -1,11 +1,11 @@
|
|
1
|
-
import '@testing-library/jest-dom/extend-expect';
|
2
1
|
import { render, screen } from '@testing-library/react';
|
3
2
|
import React from 'react';
|
3
|
+
import { it } from 'vitest';
|
4
4
|
import TextField from '../TextField';
|
5
5
|
import Autocomplete from './Autocomplete';
|
6
6
|
const renderInput = (params) => React.createElement(TextField, { ...params });
|
7
7
|
const options = [];
|
8
|
-
|
8
|
+
it('renders with label outside outline', () => {
|
9
9
|
render(React.createElement(Autocomplete, { id: "testinput", labelPlacement: "outside-top", label: "Title", renderInput: renderInput, options: options }));
|
10
10
|
screen.getByRole('combobox', { name: 'Title' });
|
11
11
|
});
|
@@ -1,18 +1,20 @@
|
|
1
|
-
import '@testing-library/jest-dom/
|
1
|
+
import * as matchers from '@testing-library/jest-dom/matchers';
|
2
2
|
import { render, screen } from '@testing-library/react';
|
3
3
|
import React from 'react';
|
4
|
+
import { expect, it } from 'vitest';
|
4
5
|
import TextField from './index';
|
5
|
-
|
6
|
+
expect.extend(matchers);
|
7
|
+
it('render TextField and check for data-testid === label-outside when labelPlacement === outside-top && variant === outlined', () => {
|
6
8
|
render(React.createElement(TextField, { id: "testinput", labelPlacement: "outside-top", variant: "outlined", label: "Title" }));
|
7
9
|
const textField = screen.getByRole('textbox', { name: 'Title' });
|
8
10
|
expect(textField).toHaveAttribute('data-testid', 'label-outside');
|
9
11
|
});
|
10
|
-
|
12
|
+
it('render TextField and check for data-testid === label-inside when labelPlacement === outside-top && variant !== outlined using data-testid', () => {
|
11
13
|
render(React.createElement(TextField, { id: "testinput", labelPlacement: "outside-top", label: "Title2" }));
|
12
14
|
const textField = screen.getByRole('textbox', { name: 'Title2' });
|
13
15
|
expect(textField).toHaveAttribute('data-testid', 'label-inside');
|
14
16
|
});
|
15
|
-
|
17
|
+
it('render TextField and check for data-testid === label-inside when labelPlacement === undefined', () => {
|
16
18
|
render(React.createElement(TextField, { id: "testinput", label: "Title3" }));
|
17
19
|
const textField = screen.getByRole('textbox', { name: 'Title3' });
|
18
20
|
expect(textField).toHaveAttribute('data-testid', 'label-inside');
|
@@ -1 +1 @@
|
|
1
|
-
|
1
|
+
export {};
|
@@ -1,7 +1,7 @@
|
|
1
|
-
import '@testing-library/jest-dom/extend-expect';
|
2
1
|
import { render, screen } from '@testing-library/react';
|
3
2
|
import { userEvent } from '@testing-library/user-event';
|
4
3
|
import React from 'react';
|
4
|
+
import { expect, it, vi } from 'vitest';
|
5
5
|
import AddressFieldComponent from './addressFieldComponent';
|
6
6
|
// Right now an object property is required for this to function, but eventually this should go
|
7
7
|
// away.
|
@@ -10,7 +10,7 @@ const addressProperty = {
|
|
10
10
|
name: 'Line 1',
|
11
11
|
type: 'text',
|
12
12
|
};
|
13
|
-
|
13
|
+
it('displays matching addresses', async () => {
|
14
14
|
const user = userEvent.setup();
|
15
15
|
const queryAddresses = async (search) => [
|
16
16
|
{
|
@@ -38,18 +38,18 @@ test('displays matching addresses', async () => {
|
|
38
38
|
await screen.findByRole('menuitem', { name: /1234 Main Street/ });
|
39
39
|
await screen.findByRole('menuitem', { name: /12345 Main Avenue/ });
|
40
40
|
});
|
41
|
-
|
41
|
+
it('returns manually typed address', async () => {
|
42
42
|
const user = userEvent.setup();
|
43
|
-
const onChangeMock =
|
43
|
+
const onChangeMock = vi.fn((name, value, property, unused) => { });
|
44
44
|
render(React.createElement(AddressFieldComponent, { id: "addressSearch", property: addressProperty, onChange: onChangeMock }));
|
45
45
|
const addressField = screen.getByRole('searchbox');
|
46
46
|
await user.type(addressField, '1234 Main St');
|
47
47
|
expect(onChangeMock).toBeCalledTimes(12);
|
48
48
|
expect(onChangeMock).lastCalledWith('addressLine1', '1234 Main St', addressProperty, undefined);
|
49
49
|
});
|
50
|
-
|
50
|
+
it('returns selected search result', async () => {
|
51
51
|
const user = userEvent.setup();
|
52
|
-
const onChangeMock =
|
52
|
+
const onChangeMock = vi.fn((name, value, property, unused) => { });
|
53
53
|
const queryAddresses = async (search) => [
|
54
54
|
{
|
55
55
|
address: {
|
package/dist/published/components/custom/FormField/AddressFieldComponent/addressFieldComponent.js
CHANGED
@@ -48,7 +48,7 @@ const AddressFieldComponent = (props) => {
|
|
48
48
|
!mask ? (React.createElement(TextField, { id: id, inputRef: textFieldRef, onChange: !readOnly ? handleChange : undefined, error: error, errorMessage: errorMessage, value: value, fullWidth: true, onBlur: onBlur, size: size ?? 'medium', placeholder: placeholder, InputProps: {
|
49
49
|
type: 'search',
|
50
50
|
autoComplete: 'off',
|
51
|
-
}, required: required, readOnly: readOnly, multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, disabled: false, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, () => (React.createElement(TextField, { id: id, inputRef: textFieldRef, sx: readOnly
|
51
|
+
}, required: required, readOnly: readOnly, multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, disabled: false, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (inputProps) => (React.createElement(TextField, { id: id, inputRef: textFieldRef, sx: readOnly
|
52
52
|
? {
|
53
53
|
'& .MuiOutlinedInput-notchedOutline': {
|
54
54
|
border: 'none',
|
@@ -58,7 +58,7 @@ const AddressFieldComponent = (props) => {
|
|
58
58
|
backgroundColor: '#f4f6f8',
|
59
59
|
},
|
60
60
|
}
|
61
|
-
: undefined, required: required, error: error, errorMessage: errorMessage, InputProps: { readOnly: readOnly }, fullWidth: true, size: size ?? 'medium', type: 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ?
|
61
|
+
: undefined, required: required, error: error, errorMessage: errorMessage, InputProps: { ...inputProps, readOnly: readOnly }, fullWidth: true, size: size ?? 'medium', type: 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? rows ?? 3 : undefined, value: value, ...(additionalProps ?? {}) })))),
|
62
62
|
!readOnly && (React.createElement(Popover, { id: popoverId, open: open, anchorEl: anchorEl, onClose: handleClose, disableAutoFocus: true, marginThreshold: undefined, anchorOrigin: {
|
63
63
|
vertical: 'bottom',
|
64
64
|
horizontal: 'left',
|
@@ -1 +1 @@
|
|
1
|
-
|
1
|
+
export {};
|
@@ -1,7 +1,7 @@
|
|
1
|
-
import '@testing-library/jest-dom/extend-expect';
|
2
1
|
import { render, screen } from '@testing-library/react';
|
3
2
|
import { userEvent } from '@testing-library/user-event';
|
4
3
|
import React from 'react';
|
4
|
+
import { expect, it } from 'vitest';
|
5
5
|
import BooleanSelect from './BooleanSelect';
|
6
6
|
// Right now an object property is required for this to function, but eventually this should go
|
7
7
|
// away.
|
@@ -10,9 +10,9 @@ const booleanProperty = {
|
|
10
10
|
name: 'Question',
|
11
11
|
type: 'boolean',
|
12
12
|
};
|
13
|
-
|
13
|
+
it('returns selected option', async () => {
|
14
14
|
const user = userEvent.setup();
|
15
|
-
const onChangeMock =
|
15
|
+
const onChangeMock = vi.fn((name, value, property) => { });
|
16
16
|
render(React.createElement(BooleanSelect, { id: "chooseYesOrNo", property: booleanProperty, onChange: onChangeMock }));
|
17
17
|
const inputField = screen.getByRole('combobox');
|
18
18
|
await user.click(inputField);
|
package/dist/published/components/custom/FormField/DatePickerSelect/DatePickerSelect.test.d.ts
CHANGED
@@ -1 +1 @@
|
|
1
|
-
|
1
|
+
export {};
|
package/dist/published/components/custom/FormField/DatePickerSelect/DatePickerSelect.test.js
CHANGED
@@ -1,8 +1,8 @@
|
|
1
1
|
import { LocalDate, Month } from '@js-joda/core';
|
2
|
-
import '@testing-library/jest-dom/extend-expect';
|
3
2
|
import { render, screen, within } from '@testing-library/react';
|
4
3
|
import { userEvent } from '@testing-library/user-event';
|
5
4
|
import React from 'react';
|
5
|
+
import { expect, it, vi } from 'vitest';
|
6
6
|
import { InvalidDate } from '../../../../util';
|
7
7
|
import DatePickerSelect from './DatePickerSelect';
|
8
8
|
// Right now an object property is required for this to function, but eventually this should go
|
@@ -14,28 +14,19 @@ const dateProperty = {
|
|
14
14
|
};
|
15
15
|
beforeAll(() => {
|
16
16
|
// Set specific date for a repeatable test.
|
17
|
-
|
17
|
+
vi.useFakeTimers({
|
18
18
|
now: new Date('2024-02-11'),
|
19
19
|
// Only want to set current time, don't override timer functions as that will
|
20
20
|
// confuse @testing-library.
|
21
|
-
|
22
|
-
'setImmediate',
|
23
|
-
'clearImmediate',
|
24
|
-
'setTimeout',
|
25
|
-
'clearTimeout',
|
26
|
-
'setInterval',
|
27
|
-
'clearInterval',
|
28
|
-
'nextTick',
|
29
|
-
'queueMicrotask',
|
30
|
-
],
|
21
|
+
toFake: ['Date'],
|
31
22
|
});
|
32
23
|
});
|
33
24
|
afterAll(() => {
|
34
|
-
|
25
|
+
vi.useRealTimers();
|
35
26
|
});
|
36
|
-
|
27
|
+
it('returns selected date', async () => {
|
37
28
|
const user = userEvent.setup();
|
38
|
-
const onChangeMock =
|
29
|
+
const onChangeMock = vi.fn((name, value, property) => { });
|
39
30
|
render(React.createElement(DatePickerSelect, { id: "pickDate", property: dateProperty, onChange: onChangeMock }));
|
40
31
|
const calendarIcon = screen.getByRole('button', { name: /Choose date/i });
|
41
32
|
await user.click(calendarIcon);
|
@@ -44,18 +35,18 @@ test('returns selected date', async () => {
|
|
44
35
|
await user.click(feb29);
|
45
36
|
expect(onChangeMock).toBeCalledWith('testDate', LocalDate.of(2024, Month.FEBRUARY, 29), dateProperty);
|
46
37
|
}, 10000);
|
47
|
-
|
38
|
+
it('returns manually entered date', async () => {
|
48
39
|
const user = userEvent.setup();
|
49
|
-
const onChangeMock =
|
40
|
+
const onChangeMock = vi.fn((name, value, property) => { });
|
50
41
|
render(React.createElement(DatePickerSelect, { id: "pickDate", property: dateProperty, onChange: onChangeMock }));
|
51
42
|
const input = screen.getByRole('textbox');
|
52
43
|
await user.type(input, '03/27/2024');
|
53
44
|
expect(onChangeMock).toBeCalledTimes(8); // component ignores '/', i.e. input could also have been '03272024'
|
54
45
|
expect(onChangeMock).lastCalledWith('testDate', LocalDate.of(2024, Month.MARCH, 27), dateProperty);
|
55
46
|
});
|
56
|
-
|
47
|
+
it('returns incomplete dates', async () => {
|
57
48
|
const user = userEvent.setup();
|
58
|
-
const onChangeMock =
|
49
|
+
const onChangeMock = vi.fn((name, value, property) => { });
|
59
50
|
render(React.createElement(DatePickerSelect, { id: "pickDate", property: dateProperty, onChange: onChangeMock }));
|
60
51
|
const input = screen.getByRole('textbox');
|
61
52
|
await user.type(input, '08/20');
|
@@ -1 +1 @@
|
|
1
|
-
|
1
|
+
export {};
|
package/dist/published/components/custom/FormField/DateTimePickerSelect/DateTimePickerSelect.test.js
CHANGED
@@ -1,8 +1,8 @@
|
|
1
1
|
import { LocalDateTime, Month } from '@js-joda/core';
|
2
|
-
import '@testing-library/jest-dom/extend-expect';
|
3
2
|
import { render, screen, within } from '@testing-library/react';
|
4
3
|
import { PointerEventsCheckLevel, userEvent } from '@testing-library/user-event';
|
5
4
|
import React from 'react';
|
5
|
+
import { afterAll, beforeAll, expect, it, vi } from 'vitest';
|
6
6
|
import { InvalidDate } from '../../../../util';
|
7
7
|
import DateTimePickerSelect from './DateTimePickerSelect';
|
8
8
|
// Right now an object property is required for this to function, but eventually this should go
|
@@ -14,28 +14,19 @@ const dateTimeProperty = {
|
|
14
14
|
};
|
15
15
|
beforeAll(() => {
|
16
16
|
// Set specific date for a repeatable test.
|
17
|
-
|
17
|
+
vi.useFakeTimers({
|
18
18
|
now: new Date('2024-02-11T05:25:25'),
|
19
19
|
// Only want to set current time, don't override timer functions as that will
|
20
20
|
// confuse @testing-library.
|
21
|
-
|
22
|
-
'setImmediate',
|
23
|
-
'clearImmediate',
|
24
|
-
'setTimeout',
|
25
|
-
'clearTimeout',
|
26
|
-
'setInterval',
|
27
|
-
'clearInterval',
|
28
|
-
'nextTick',
|
29
|
-
'queueMicrotask',
|
30
|
-
],
|
21
|
+
toFake: ['Date'],
|
31
22
|
});
|
32
23
|
});
|
33
24
|
afterAll(() => {
|
34
|
-
|
25
|
+
vi.useRealTimers();
|
35
26
|
});
|
36
|
-
|
27
|
+
it('returns selected date time', async () => {
|
37
28
|
const user = userEvent.setup({ pointerEventsCheck: PointerEventsCheckLevel.Never });
|
38
|
-
const onChangeMock =
|
29
|
+
const onChangeMock = vi.fn((name, value, property) => { });
|
39
30
|
render(React.createElement(DateTimePickerSelect, { id: "pickDateTime", property: dateTimeProperty, onChange: onChangeMock }));
|
40
31
|
const calendarIcon = screen.getByRole('button', { name: /Choose date/i });
|
41
32
|
await user.click(calendarIcon);
|
@@ -48,9 +39,9 @@ test('returns selected date time', async () => {
|
|
48
39
|
// All it can do is check the date picker part works.
|
49
40
|
expect(onChangeMock).toBeCalledWith('testDateTime', LocalDateTime.of(2024, Month.FEBRUARY, 29, 0, 0, 0), dateTimeProperty);
|
50
41
|
}, 10000);
|
51
|
-
|
42
|
+
it('returns manually entered date time', async () => {
|
52
43
|
const user = userEvent.setup();
|
53
|
-
const onChangeMock =
|
44
|
+
const onChangeMock = vi.fn((name, value, property) => { });
|
54
45
|
render(React.createElement(DateTimePickerSelect, { id: "pickDateTime", property: dateTimeProperty, onChange: onChangeMock }));
|
55
46
|
const input = screen.getByRole('textbox');
|
56
47
|
await user.type(input, '03/27/2024 09:25 AM');
|
@@ -60,9 +51,9 @@ test('returns manually entered date time', async () => {
|
|
60
51
|
expect(onChangeMock).toBeCalledTimes(13);
|
61
52
|
expect(onChangeMock).lastCalledWith('testDateTime', LocalDateTime.of(2024, Month.MARCH, 27, 9, 25), dateTimeProperty);
|
62
53
|
});
|
63
|
-
|
54
|
+
it('returns incomplete date times', async () => {
|
64
55
|
const user = userEvent.setup();
|
65
|
-
const onChangeMock =
|
56
|
+
const onChangeMock = vi.fn((name, value, property) => { });
|
66
57
|
render(React.createElement(DateTimePickerSelect, { id: "pickDateTime", property: dateTimeProperty, onChange: onChangeMock }));
|
67
58
|
const input = screen.getByRole('textbox');
|
68
59
|
await user.type(input, '08/20');
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import { SelectOption } from '@evoke-platform/context';
|
1
2
|
import React, { FocusEventHandler, ReactNode } from 'react';
|
2
3
|
import { ObjectProperty } from '../../../types';
|
3
4
|
import { AutocompleteOption } from '../../core';
|
@@ -14,7 +15,7 @@ export type FormFieldProps = {
|
|
14
15
|
readOnly?: boolean;
|
15
16
|
min?: number;
|
16
17
|
max?: number;
|
17
|
-
selectOptions?: Array<string>;
|
18
|
+
selectOptions?: SelectOption[] | Array<string>;
|
18
19
|
locale?: string;
|
19
20
|
size?: 'small' | 'medium';
|
20
21
|
placeholder?: string;
|
package/dist/published/components/custom/FormField/InputFieldComponent/InputFieldComponent.js
CHANGED
@@ -62,7 +62,7 @@ const InputFieldComponent = (props) => {
|
|
62
62
|
backgroundColor: '#f4f6f8',
|
63
63
|
},
|
64
64
|
}),
|
65
|
-
}, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: { ...InputProps, readOnly: readOnly }, required: required, fullWidth: true, onBlur: onBlur, placeholder: placeholder, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, disabled: false, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, () => (React.createElement(TextField, { id: id, sx: readOnly
|
65
|
+
}, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: { ...InputProps, readOnly: readOnly }, required: required, fullWidth: true, onBlur: onBlur, placeholder: placeholder, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, disabled: false, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (inputProps) => (React.createElement(TextField, { id: id, sx: readOnly
|
66
66
|
? {
|
67
67
|
'& .MuiOutlinedInput-notchedOutline': {
|
68
68
|
border: 'none',
|
@@ -72,6 +72,6 @@ const InputFieldComponent = (props) => {
|
|
72
72
|
backgroundColor: '#f4f6f8',
|
73
73
|
},
|
74
74
|
}
|
75
|
-
: undefined, required: required, error: error, errorMessage: errorMessage, InputProps: { ...InputProps, readOnly: readOnly }, fullWidth: true, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) }))));
|
75
|
+
: undefined, required: required, error: error, errorMessage: errorMessage, InputProps: { ...inputProps, ...InputProps, readOnly: readOnly }, fullWidth: true, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) }))));
|
76
76
|
};
|
77
77
|
export default InputFieldComponent;
|
package/dist/published/components/custom/FormField/InputFieldComponent/InputFieldComponent.test.js
CHANGED
@@ -1,8 +1,10 @@
|
|
1
|
-
import '@testing-library/jest-dom/
|
1
|
+
import * as matchers from '@testing-library/jest-dom/matchers';
|
2
2
|
import { render, screen } from '@testing-library/react';
|
3
3
|
import { userEvent } from '@testing-library/user-event';
|
4
4
|
import React from 'react';
|
5
|
+
import { describe, expect, it, vi } from 'vitest';
|
5
6
|
import InputField from './InputFieldComponent';
|
7
|
+
expect.extend(matchers);
|
6
8
|
describe('Free-text input', () => {
|
7
9
|
// Right now an object property is required for this to function, but eventually this should go
|
8
10
|
// away.
|
@@ -11,9 +13,9 @@ describe('Free-text input', () => {
|
|
11
13
|
name: 'Input Field',
|
12
14
|
type: 'string',
|
13
15
|
};
|
14
|
-
|
16
|
+
it('returns entered value', async () => {
|
15
17
|
const user = userEvent.setup();
|
16
|
-
const onChangeMock =
|
18
|
+
const onChangeMock = vi.fn((name, value, property) => { });
|
17
19
|
render(React.createElement(InputField, { id: "testInput", property: textProperty, onChange: onChangeMock }));
|
18
20
|
const input = screen.getByRole('textbox');
|
19
21
|
await user.type(input, 'test value');
|
@@ -30,9 +32,9 @@ describe('Autocomplete', () => {
|
|
30
32
|
type: 'string',
|
31
33
|
enum: ['option 1', 'option 2'],
|
32
34
|
};
|
33
|
-
|
35
|
+
it('returns selected value', async () => {
|
34
36
|
const user = userEvent.setup();
|
35
|
-
const onChangeMock =
|
37
|
+
const onChangeMock = vi.fn((name, value, property) => { });
|
36
38
|
render(React.createElement(InputField, { id: "testInput", property: enumProperty, onChange: onChangeMock }));
|
37
39
|
const input = screen.getByRole('combobox');
|
38
40
|
await user.click(input);
|
@@ -40,18 +42,18 @@ describe('Autocomplete', () => {
|
|
40
42
|
await user.click(option2);
|
41
43
|
expect(onChangeMock).toBeCalledWith('enumField', 'option 2', enumProperty);
|
42
44
|
});
|
43
|
-
|
45
|
+
it('does not include blank default value in options', async () => {
|
44
46
|
const user = userEvent.setup();
|
45
|
-
const onChangeMock =
|
47
|
+
const onChangeMock = vi.fn((name, value, property) => { });
|
46
48
|
render(React.createElement(InputField, { id: "testInput", property: enumProperty, onChange: onChangeMock, defaultValue: null }));
|
47
49
|
const input = screen.getByRole('combobox');
|
48
50
|
await user.click(input);
|
49
51
|
const blankOption = screen.queryByRole('option', { name: '' });
|
50
52
|
expect(blankOption).not.toBeInTheDocument();
|
51
53
|
});
|
52
|
-
|
54
|
+
it('includes default value in options', async () => {
|
53
55
|
const user = userEvent.setup();
|
54
|
-
const onChangeMock =
|
56
|
+
const onChangeMock = vi.fn((name, value, property) => { });
|
55
57
|
render(React.createElement(InputField, { id: "testInput", property: enumProperty, onChange: onChangeMock, defaultValue: 'Default' }));
|
56
58
|
const input = screen.getByRole('combobox');
|
57
59
|
await user.click(input);
|
@@ -1,8 +1,10 @@
|
|
1
|
-
import '@testing-library/jest-dom/
|
1
|
+
import * as matchers from '@testing-library/jest-dom/matchers';
|
2
2
|
import { render, screen } from '@testing-library/react';
|
3
3
|
import { userEvent } from '@testing-library/user-event';
|
4
4
|
import React from 'react';
|
5
|
+
import { describe, expect, it, vi } from 'vitest';
|
5
6
|
import Select from './Select';
|
7
|
+
expect.extend(matchers);
|
6
8
|
describe('Single select', () => {
|
7
9
|
// Right now an object property is required for this to function, but eventually this should go
|
8
10
|
// away.
|
@@ -11,9 +13,9 @@ describe('Single select', () => {
|
|
11
13
|
name: 'Select Options',
|
12
14
|
type: 'choices',
|
13
15
|
};
|
14
|
-
|
16
|
+
it('returns selected option', async () => {
|
15
17
|
const user = userEvent.setup();
|
16
|
-
const onChangeMock =
|
18
|
+
const onChangeMock = vi.fn((name, value, property) => { });
|
17
19
|
const options = ['option 1', 'option 2', 'option 3'];
|
18
20
|
render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, onChange: onChangeMock }));
|
19
21
|
const input = screen.getByRole('combobox');
|
@@ -22,7 +24,7 @@ describe('Single select', () => {
|
|
22
24
|
await user.click(option2);
|
23
25
|
expect(onChangeMock).toBeCalledWith('selectOptions', expect.objectContaining({ label: 'option 2', value: 'option 2' }), choiceProperty);
|
24
26
|
});
|
25
|
-
|
27
|
+
it('displays matching options', async () => {
|
26
28
|
const user = userEvent.setup();
|
27
29
|
const options = ['option 1', 'option 2', 'something different'];
|
28
30
|
render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, onChange: () => { } }));
|
@@ -38,7 +40,7 @@ describe('Single select', () => {
|
|
38
40
|
{ sortBy: 'DESC', expectedValues: ['option 3', 'option 2', 'option 1'] },
|
39
41
|
])('shows options in $sortBy order as dropdown display', async ({ sortBy, expectedValues }) => {
|
40
42
|
const options = ['option 2', 'option 1', 'option 3'];
|
41
|
-
render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'dropdown', sortBy: sortBy, onChange:
|
43
|
+
render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'dropdown', sortBy: sortBy, onChange: vi.fn() }));
|
42
44
|
const user = userEvent.setup();
|
43
45
|
const input = screen.getByRole('combobox');
|
44
46
|
await user.click(input);
|
@@ -55,9 +57,9 @@ describe('Multi select', () => {
|
|
55
57
|
name: 'Select Multiple',
|
56
58
|
type: 'array',
|
57
59
|
};
|
58
|
-
|
60
|
+
it('returns selected options', async () => {
|
59
61
|
const user = userEvent.setup();
|
60
|
-
const onChangeMock =
|
62
|
+
const onChangeMock = vi.fn((name, value, property) => { });
|
61
63
|
const options = ['option 1', 'option 2', 'option 3'];
|
62
64
|
render(React.createElement(Select, { id: "testSelect", property: multiChoiceProperty, selectOptions: options, onChange: onChangeMock }));
|
63
65
|
const input = screen.getByRole('combobox');
|
@@ -79,7 +81,7 @@ describe('Radio Single select', () => {
|
|
79
81
|
};
|
80
82
|
test('returns selected radio option', async () => {
|
81
83
|
const user = userEvent.setup();
|
82
|
-
const onChangeMock =
|
84
|
+
const onChangeMock = vi.fn((name, value, property) => { });
|
83
85
|
const options = ['option 1', 'option 2', 'option 3'];
|
84
86
|
render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'radioButton', sortBy: 'ASC', onChange: onChangeMock }));
|
85
87
|
const option2 = await screen.findByRole('radio', { name: 'option 2' });
|
@@ -92,7 +94,7 @@ describe('Radio Single select', () => {
|
|
92
94
|
{ sortBy: 'DESC', expectedValues: ['option 3', 'option 2', 'option 1'] },
|
93
95
|
])('shows options in $sortBy order as radio display', async ({ sortBy, expectedValues }) => {
|
94
96
|
const options = ['option 2', 'option 1', 'option 3'];
|
95
|
-
render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'radioButton', sortBy: sortBy, onChange:
|
97
|
+
render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'radioButton', sortBy: sortBy, onChange: vi.fn() }));
|
96
98
|
const radioButtons = screen.getAllByRole('radio');
|
97
99
|
const radioValues = radioButtons.map((radioButton) => radioButton.value);
|
98
100
|
expect(radioValues).toEqual(expectedValues);
|
@@ -1,8 +1,9 @@
|
|
1
1
|
import { render, screen } from '@testing-library/react';
|
2
2
|
import React from 'react';
|
3
|
+
import { expect, it } from 'vitest';
|
3
4
|
import { Link } from '../../core';
|
4
5
|
import Menubar from './index';
|
5
|
-
|
6
|
+
it('render Menubar component without crashing', () => {
|
6
7
|
const navItems = (React.createElement(React.Fragment, null,
|
7
8
|
React.createElement(Link, { href: "#" }, "Object1"),
|
8
9
|
React.createElement(Link, { href: "#" }, "Object2"),
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@evoke-platform/ui-components",
|
3
|
-
"version": "1.2.
|
3
|
+
"version": "1.2.1-testing.1",
|
4
4
|
"description": "",
|
5
5
|
"main": "dist/published/index.js",
|
6
6
|
"module": "dist/published/index.js",
|
@@ -15,7 +15,8 @@
|
|
15
15
|
"./icons": "./dist/published/icons/index.js"
|
16
16
|
},
|
17
17
|
"scripts": {
|
18
|
-
"test": "
|
18
|
+
"test": "vitest",
|
19
|
+
"test:ui": "vitest --ui",
|
19
20
|
"copy-styles": "copyfiles -u 1 src/styles/*.css dist/published/",
|
20
21
|
"build": "rm -rf ./dist && tsc && npm run copy-styles",
|
21
22
|
"build:cjs": "tsc --module CommonJS --outDir dist/cjs",
|
@@ -47,21 +48,22 @@
|
|
47
48
|
"@storybook/manager-webpack5": "^6.5.8",
|
48
49
|
"@storybook/react": "^6.5.8",
|
49
50
|
"@storybook/testing-library": "^0.0.11",
|
50
|
-
"@testing-library/jest-dom": "^
|
51
|
-
"@testing-library/react": "^
|
51
|
+
"@testing-library/jest-dom": "^6.4.2",
|
52
|
+
"@testing-library/react": "^14.2.2",
|
52
53
|
"@testing-library/user-event": "^14.5.2",
|
53
54
|
"@types/dot-object": "^2.1.6",
|
54
55
|
"@types/flat": "^5.0.5",
|
55
56
|
"@types/jest": "^28.1.4",
|
56
57
|
"@types/luxon": "^3.4.2",
|
57
58
|
"@types/nanoid-dictionary": "^4.2.3",
|
58
|
-
"@types/node": "^
|
59
|
+
"@types/node": "^18.0.0",
|
59
60
|
"@types/react": "^18.0.17",
|
60
61
|
"@types/react-dom": "^18.0.5",
|
61
|
-
"@types/react-input-mask": "^3.0.
|
62
|
+
"@types/react-input-mask": "^3.0.6",
|
62
63
|
"@typescript-eslint/eslint-plugin": "^5.52.0",
|
63
64
|
"@typescript-eslint/parser": "^5.35.1",
|
64
65
|
"@typescript-eslint/typescript-estree": "^5.35.1",
|
66
|
+
"@vitest/ui": "^1.6.0",
|
65
67
|
"babel-jest": "^28.1.2",
|
66
68
|
"babel-loader": "^8.2.5",
|
67
69
|
"copyfiles": "^2.4.1",
|
@@ -73,14 +75,13 @@
|
|
73
75
|
"eslint-plugin-testing-library": "^6.2.0",
|
74
76
|
"husky": "^8.0.3",
|
75
77
|
"is-ci": "^3.0.1",
|
76
|
-
"jest": "^28.1.2",
|
77
|
-
"jest-environment-jsdom": "^28.1.2",
|
78
78
|
"lint-staged": "^13.0.1",
|
79
79
|
"prettier": "^3.0.0",
|
80
80
|
"react": "^18.1.0",
|
81
81
|
"react-dom": "^18.1.0",
|
82
82
|
"rimraf": "^3.0.2",
|
83
83
|
"typescript": "^4.7.3",
|
84
|
+
"vitest": "^1.5.3",
|
84
85
|
"webpack": "^5.74.0"
|
85
86
|
},
|
86
87
|
"peerDependencies": {
|
@@ -122,7 +123,7 @@
|
|
122
123
|
"pluralize": "^8.0.0",
|
123
124
|
"pretty-bytes": "^6.1.1",
|
124
125
|
"react-dropzone": "^14.2.2",
|
125
|
-
"react-input-mask": "
|
126
|
+
"react-input-mask": "^2.0.4",
|
126
127
|
"react-number-format": "^4.9.3",
|
127
128
|
"react-querybuilder": "^6.0.2",
|
128
129
|
"rtf.js": "^3.0.9",
|
@@ -134,13 +135,5 @@
|
|
134
135
|
"*.{js,jsx,ts,tsx,json,css,md}": [
|
135
136
|
"npm run lint:fix"
|
136
137
|
]
|
137
|
-
},
|
138
|
-
"jest": {
|
139
|
-
"verbose": true,
|
140
|
-
"testEnvironment": "jsdom",
|
141
|
-
"testPathIgnorePatterns": [
|
142
|
-
"/node_modules/",
|
143
|
-
"<rootDir>/dist/"
|
144
|
-
]
|
145
138
|
}
|
146
139
|
}
|