gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: tests (#710)

Browse Source
This commit is contained in:
Daniel Lautzenheiser
2023-04-18 23:05:15 -04:00
committed by GitHub
parent ad694ef56d
commit 6be11c749e
8 changed files with 107 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/core/src/widgets/select/SelectControl.tsx
View File

@ -112,6 +112,11 @@ const SelectControl: FC<WidgetControlProps<string | number | (string | number)[]
return `${internalValue}`;
}, [isMultiple, internalValue]);
const [open, setOpen] = useState(false);
const handleOpenChange = useCallback((open: boolean) => {
setOpen(open);
}, []);
return (
<Field
inputRef={ref}
@ -122,6 +127,7 @@ const SelectControl: FC<WidgetControlProps<string | number | (string | number)[]
forSingleList={forSingleList}
cursor="pointer"
disabled={disabled}
disableClick={open}
>
<Select
label={
@ -146,6 +152,7 @@ const SelectControl: FC<WidgetControlProps<string | number | (string | number)[]
required={field.required}
disabled={disabled}
onChange={handleChange}
onOpenChange={handleOpenChange}
/>
</Field>
);

84
packages/core/src/widgets/select/__tests__/SelectControl.spec.ts
View File

@ -2,8 +2,8 @@
* @jest-environment jsdom
*/
import '@testing-library/jest-dom';
import { act } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { act, waitFor } from '@testing-library/react';
import { mockSelectField } from '@staticcms/test/data/fields.mock';
import { createWidgetControlHarness } from '@staticcms/test/harnesses/widget.harness';
@ -82,6 +82,7 @@ describe(SelectControl.name, () => {
it('should call onChange when text input changes', async () => {
const {
getByTestId,
queryByTestId,
props: { onChange },
} = renderControl();
@ -94,6 +95,11 @@ describe(SelectControl.name, () => {
const option1 = 'select-option-Option 1';
const option2 = 'select-option-Option 2';
await waitFor(() => {
expect(queryByTestId(option1)).toBeInTheDocument();
expect(queryByTestId(option2)).toBeInTheDocument();
});
expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not selected
expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not selected
@ -180,6 +186,7 @@ describe(SelectControl.name, () => {
it('should call onChange when text input changes', async () => {
const {
getByTestId,
queryByTestId,
props: { onChange },
} = renderControl({ field: mockNumberSelectField });
@ -192,6 +199,11 @@ describe(SelectControl.name, () => {
const option1 = 'select-option-1';
const option2 = 'select-option-2';
await waitFor(() => {
expect(queryByTestId(option1)).toBeInTheDocument();
expect(queryByTestId(option2)).toBeInTheDocument();
});
expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not selected
expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not selected
@ -263,11 +275,11 @@ describe(SelectControl.name, () => {
it('should call onChange when text input changes', async () => {
const {
getByTestId,
queryByTestId,
props: { onChange },
} = renderControl({ field: mockMixedSelectField });
const input = getByTestId('select-input');
await act(async () => {
await userEvent.click(input);
});
@ -275,6 +287,11 @@ describe(SelectControl.name, () => {
const option1 = 'select-option-1';
const option2 = 'select-option-Option 2';
await waitFor(() => {
expect(queryByTestId(option1)).toBeInTheDocument();
expect(queryByTestId(option2)).toBeInTheDocument();
});
expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not selected
expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not selected
@ -359,11 +376,11 @@ describe(SelectControl.name, () => {
it('should call onChange when text input changes', async () => {
const {
getByTestId,
queryByTestId,
props: { onChange },
} = renderControl({ field: mockStringSelectField });
const input = getByTestId('select-input');
await act(async () => {
await userEvent.click(input);
});
@ -371,6 +388,11 @@ describe(SelectControl.name, () => {
const option1 = 'select-option-option 1';
const option2 = 'select-option-option 2';
await waitFor(() => {
expect(queryByTestId(option1)).toBeInTheDocument();
expect(queryByTestId(option2)).toBeInTheDocument();
});
expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not selected
expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not selected
@ -455,11 +477,11 @@ describe(SelectControl.name, () => {
it('should call onChange when text input changes', async () => {
const {
getByTestId,
queryByTestId,
props: { onChange },
} = renderControl({ field: mockNumberSelectField });
const input = getByTestId('select-input');
await act(async () => {
await userEvent.click(input);
});
@ -467,6 +489,11 @@ describe(SelectControl.name, () => {
const option1 = 'select-option-1';
const option2 = 'select-option-2';
await waitFor(() => {
expect(queryByTestId(option1)).toBeInTheDocument();
expect(queryByTestId(option2)).toBeInTheDocument();
});
expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not selected
expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not selected
@ -551,11 +578,11 @@ describe(SelectControl.name, () => {
it('should call onChange when text input changes', async () => {
const {
getByTestId,
queryByTestId,
props: { onChange },
} = renderControl({ field: mockMixedSelectField });
const input = getByTestId('select-input');
await act(async () => {
await userEvent.click(input);
});
@ -563,6 +590,11 @@ describe(SelectControl.name, () => {
const option1 = 'select-option-1';
const option2 = 'select-option-option 2';
await waitFor(() => {
expect(queryByTestId(option1)).toBeInTheDocument();
expect(queryByTestId(option2)).toBeInTheDocument();
});
expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not selected
expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not selected
@ -635,11 +667,11 @@ describe(SelectControl.name, () => {
it('should call onChange when text input changes', async () => {
const {
getByTestId,
queryByTestId,
props: { onChange },
} = renderControl({ field: mockMultiStringSelectField });
const input = getByTestId('select-input');
await act(async () => {
await userEvent.click(input);
});
@ -647,6 +679,11 @@ describe(SelectControl.name, () => {
const option1 = 'select-option-Option 1';
const option2 = 'select-option-Option 2';
await waitFor(() => {
expect(queryByTestId(option1)).toBeInTheDocument();
expect(queryByTestId(option2)).toBeInTheDocument();
});
expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not Selected
expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not Selected
@ -733,11 +770,11 @@ describe(SelectControl.name, () => {
it('should call onChange when text input changes', async () => {
const {
getByTestId,
queryByTestId,
props: { onChange },
} = renderControl({ field: mockMultiNumberSelectField });
const input = getByTestId('select-input');
await act(async () => {
await userEvent.click(input);
});
@ -745,6 +782,11 @@ describe(SelectControl.name, () => {
const option1 = 'select-option-1';
const option2 = 'select-option-2';
await waitFor(() => {
expect(queryByTestId(option1)).toBeInTheDocument();
expect(queryByTestId(option2)).toBeInTheDocument();
});
expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not Selected
expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not Selected
@ -831,11 +873,11 @@ describe(SelectControl.name, () => {
it('should call onChange when text input changes', async () => {
const {
getByTestId,
queryByTestId,
props: { onChange },
} = renderControl({ field: mockMultiMixedSelectField });
const input = getByTestId('select-input');
await act(async () => {
await userEvent.click(input);
});
@ -843,6 +885,11 @@ describe(SelectControl.name, () => {
const option1 = 'select-option-1';
const option2 = 'select-option-Option 2';
await waitFor(() => {
expect(queryByTestId(option1)).toBeInTheDocument();
expect(queryByTestId(option2)).toBeInTheDocument();
});
expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not Selected
expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not Selected
@ -933,11 +980,11 @@ describe(SelectControl.name, () => {
it('should call onChange when text input changes', async () => {
const {
getByTestId,
queryByTestId,
props: { onChange },
} = renderControl({ field: mockMultiStringSelectField });
const input = getByTestId('select-input');
await act(async () => {
await userEvent.click(input);
});
@ -945,6 +992,11 @@ describe(SelectControl.name, () => {
const option1 = 'select-option-option 1';
const option2 = 'select-option-option 2';
await waitFor(() => {
expect(queryByTestId(option1)).toBeInTheDocument();
expect(queryByTestId(option2)).toBeInTheDocument();
});
expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not Selected
expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not Selected
@ -1035,11 +1087,11 @@ describe(SelectControl.name, () => {
it('should call onChange when text input changes', async () => {
const {
getByTestId,
queryByTestId,
props: { onChange },
} = renderControl({ field: mockMultiNumberSelectField });
const input = getByTestId('select-input');
await act(async () => {
await userEvent.click(input);
});
@ -1047,6 +1099,11 @@ describe(SelectControl.name, () => {
const option1 = 'select-option-1';
const option2 = 'select-option-2';
await waitFor(() => {
expect(queryByTestId(option1)).toBeInTheDocument();
expect(queryByTestId(option2)).toBeInTheDocument();
});
expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not Selected
expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not Selected
@ -1137,11 +1194,11 @@ describe(SelectControl.name, () => {
it('should call onChange when text input changes', async () => {
const {
getByTestId,
queryByTestId,
props: { onChange },
} = renderControl({ field: mockMultiNumberSelectField });
const input = getByTestId('select-input');
await act(async () => {
await userEvent.click(input);
});
@ -1149,6 +1206,11 @@ describe(SelectControl.name, () => {
const option1 = 'select-option-1';
const option2 = 'select-option-option 2';
await waitFor(() => {
expect(queryByTestId(option1)).toBeInTheDocument();
expect(queryByTestId(option2)).toBeInTheDocument();
});
expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not Selected
expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not Selected