Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: add testing library eslint rules (#31028)

Browse Source 
Added recommended rules for testing library

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added `data-testid` attributes across various components for improved
test identification.

- **Tests**
- Enhanced test cases with asynchronous handling (`async`/`await`) for
more reliable user interaction simulations.
- Transitioned to using `getByTestId` instead of `queryByTestId` for
better assertion reliability in tests.
- Added `await` before the `userEvent.click(el)` statement in the
ChartWidget test file.
- Updated the destructured variable names from `queryByTestId` to
`getByTestId` in the DividerWidget test file for improved clarity.
- Added an import for `screen` from "@testing-library/react" and updated
element querying in the TabsWidget test file.

- **Chores**
- Updated ESLint configurations to include testing-library plugins and
rules, improving code quality and consistency in test files.
- Removed unnecessary `cleanup` function calls after tests, following
best practices for test cleanup.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Valera Melnikov 2024-02-12 18:59:10 +03:00 committed by GitHub
parent fa0eda6229
commit d7cd02a45d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
37 changed files with 273 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/client/.eslintrc.base.json
View File

@ -16,12 +16,14 @@
"react-hooks",
"sort-destructure-keys",
"cypress",
"testing-library",
"jest"
],
"extends": [
"plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
"plugin:@typescript-eslint/recommended",
"plugin:cypress/recommended",
"plugin:testing-library/react",
// Note: Please keep this as the last config to make sure that this (and by extension our .prettierrc file) overrides all configuration above it
// https://www.npmjs.com/package/eslint-plugin-prettier#recommended-configuration
"plugin:prettier/recommended"
@ -35,6 +37,13 @@
"project": "./tsconfig.json"
},
"rules": {
"testing-library/consistent-data-testid": [
"warn",
{
"testIdPattern": "^t--[a-zA-Z0-9_.-]*$",
"testIdAttribute": ["data-testid"]
}
],
"@typescript-eslint/consistent-type-definitions": "error",
"@typescript-eslint/prefer-nullish-coalescing": "error",
"@typescript-eslint/promise-function-async": "error",

6
app/client/.eslintrc.js
View File

@ -13,6 +13,12 @@ const baseNoRestrictedImports =
const eslintConfig = {
extends: ["./.eslintrc.base.json"],
rules: {
"testing-library/no-container": "off",
"testing-library/no-node-access": "off",
"testing-library/no-debugging-utils": "off",
"testing-library/prefer-screen-queries": "off",
"testing-library/render-result-naming-convention": "off",
"testing-library/no-unnecessary-act": "off",
"@typescript-eslint/prefer-nullish-coalescing": "off",
"@typescript-eslint/strict-boolean-expressions": "off",
"@typescript-eslint/no-explicit-any": "off",

1
app/client/package.json
View File

@ -329,6 +329,7 @@
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-sort-destructure-keys": "^1.5.0",
"eslint-plugin-storybook": "^0.6.15",
"eslint-plugin-testing-library": "^6.2.0",
"esm": "^3.2.25",
"factory.ts": "^0.5.1",
"husky": "^8.0.0",

1
app/client/packages/design-system/widgets-old/src/Dropdown/index.tsx
View File

@ -858,6 +858,7 @@ export function RenderDropdownOptions(props: DropdownOptionsProps) {
<DropdownWrapper
className="ads-dropdown-options-wrapper"
data-cy="dropdown-options-wrapper"
// eslint-disable-next-line testing-library/consistent-data-testid
data-testid="dropdown-options-wrapper"
isOpen={props.isOpen}
width={optionWidth}

8
app/client/packages/design-system/widgets/src/components/Button/tests/Button.test.tsx
View File

@ -33,18 +33,16 @@ describe("@design-system/widgets/Button", () => {
render(<Button isLoading />);
expect(screen.getByRole("button")).toHaveAttribute("data-loading");
// eslint-disable-next-line testing-library/no-node-access
const icon = screen.getByRole("button").querySelector("[data-icon]");
expect(icon).toBeInTheDocument();
});
it("renders icon when passed", () => {
const { container } = render(<Button icon="star" />);
render(<Button icon="star" />);
// Note: using testid=t--fallack-icon as the icon is rendered lazily and the fallback component
// has a testid
const icon = container.querySelector(
"button [data-testid='t--fallback-icon']",
) as HTMLElement;
const icon = screen.getByTestId("t--fallback-icon");
expect(icon).toBeInTheDocument();
});

6
app/client/packages/design-system/widgets/src/components/Checkbox/tests/Checkbox.test.tsx
View File

@ -27,7 +27,7 @@ describe("@design-system/widgets/Checkbox", () => {
expect(screen.getByText("Click me")).toBeInTheDocument();
});
it("should render uncontrolled checkbox", () => {
it("should render uncontrolled checkbox", async () => {
render(
<Checkbox defaultSelected onChange={onChangeSpy}>
Checkbox
@ -36,7 +36,7 @@ describe("@design-system/widgets/Checkbox", () => {
const checkbox = screen.getByRole("checkbox");
expect(checkbox).toBeChecked();
userEvent.click(checkbox);
await userEvent.click(checkbox);
expect(onChangeSpy).toHaveBeenCalled();
expect(screen.getByRole("checkbox")).not.toBeChecked();
});
@ -64,6 +64,7 @@ describe("@design-system/widgets/Checkbox", () => {
it("should render indeterminate checkbox", () => {
const { container } = render(<Checkbox isIndeterminate>Checkbox</Checkbox>);
// eslint-disable-next-line testing-library/no-container,testing-library/no-node-access
const label = container.querySelector("label") as HTMLElement;
const checkbox = screen.getByRole("checkbox") as HTMLInputElement;
@ -74,6 +75,7 @@ describe("@design-system/widgets/Checkbox", () => {
it("should be able to render custom icon", () => {
const { container } = render(<Checkbox icon={EmotionHappyLineIcon} />);
// eslint-disable-next-line testing-library/no-container,testing-library/no-node-access
const icon = container.querySelector("label [data-icon]") as HTMLElement;
expect(icon).toBeInTheDocument();
});

18
app/client/packages/design-system/widgets/src/components/CheckboxGroup/tests/CheckboxGroup.test.tsx
View File

@ -7,7 +7,7 @@ import { CheckboxGroup } from "../";
import { Checkbox } from "../../Checkbox";
describe("@design-system/widgets/CheckboxGroup", () => {
it("should render the checkbox group", () => {
it("should render the checkbox group", async () => {
const { container } = render(
<CheckboxGroup label="Checkbox Group">
<Checkbox value="value-1">Value 1</Checkbox>
@ -18,6 +18,7 @@ describe("@design-system/widgets/CheckboxGroup", () => {
expect(screen.getByText("Value 1")).toBeInTheDocument();
expect(screen.getByText("Value 2")).toBeInTheDocument();
// eslint-disable-next-line testing-library/no-container,testing-library/no-node-access
const label = container.querySelector("label") as HTMLElement;
expect(label).toHaveTextContent("Checkbox Group");
@ -32,22 +33,25 @@ describe("@design-system/widgets/CheckboxGroup", () => {
expect(checkboxes[0]).not.toBeChecked();
expect(checkboxes[1]).not.toBeChecked();
userEvent.click(checkboxes[0]);
await userEvent.click(checkboxes[0]);
expect(checkboxes[0]).toBeChecked();
userEvent.click(checkboxes[1]);
await userEvent.click(checkboxes[1]);
expect(checkboxes[1]).toBeChecked();
});
it("should support custom props", () => {
render(
<CheckboxGroup data-testid="checkbox-group" label="Checkbox Group Label">
<CheckboxGroup
data-testid="t--checkbox-group"
label="Checkbox Group Label"
>
<Checkbox value="value-1">Value 1</Checkbox>
<Checkbox value="value-2">Value 2</Checkbox>
</CheckboxGroup>,
);
const checkboxGroup = screen.getByTestId("checkbox-group");
const checkboxGroup = screen.getByTestId("t--checkbox-group");
expect(checkboxGroup).toBeInTheDocument();
});
@ -67,7 +71,7 @@ describe("@design-system/widgets/CheckboxGroup", () => {
expect(checkboxes[1]).toBeChecked();
});
it("should be able to fire onChange event", () => {
it("should be able to fire onChange event", async () => {
const onChangeSpy = jest.fn();
render(
@ -78,7 +82,7 @@ describe("@design-system/widgets/CheckboxGroup", () => {
);
const checkboxes = screen.getAllByRole("checkbox");
userEvent.click(checkboxes[0]);
await userEvent.click(checkboxes[0]);
expect(onChangeSpy).toHaveBeenCalled();
});

15
app/client/packages/design-system/widgets/src/components/RadioGroup/tests/RadioGroup.test.tsx
View File

@ -7,7 +7,7 @@ import { RadioGroup } from "../";
import { Radio } from "../../Radio";
describe("@design-system/widgets/RadioGroup", () => {
it("should render the Radio group", () => {
it("should render the Radio group", async () => {
const { container } = render(
<RadioGroup label="Radio Group">
<Radio value="value-1">Value 1</Radio>
@ -18,6 +18,7 @@ describe("@design-system/widgets/RadioGroup", () => {
expect(screen.getByText("Value 1")).toBeInTheDocument();
expect(screen.getByText("Value 2")).toBeInTheDocument();
// eslint-disable-next-line testing-library/no-container,testing-library/no-node-access
const label = container.querySelector("label") as HTMLElement;
expect(label).toHaveTextContent("Radio Group");
@ -32,24 +33,24 @@ describe("@design-system/widgets/RadioGroup", () => {
expect(options[0]).not.toBeChecked();
expect(options[1]).not.toBeChecked();
userEvent.click(options[0]);
await userEvent.click(options[0]);
expect(options[0]).toBeChecked();
userEvent.click(options[1]);
await userEvent.click(options[1]);
expect(options[0]).not.toBeChecked();
expect(options[1]).toBeChecked();
});
it("should support custom props", () => {
render(
<RadioGroup data-testid="radio-group" label="Radio Group Label">
<RadioGroup data-testid="t--radio-group" label="Radio Group Label">
<Radio value="value-1">Value 1</Radio>
<Radio value="value-2">Value 2</Radio>
<Radio value="value-3">Value 3</Radio>
</RadioGroup>,
);
const radioGroup = screen.getByTestId("radio-group");
const radioGroup = screen.getByTestId("t--radio-group");
expect(radioGroup).toBeInTheDocument();
});
@ -66,7 +67,7 @@ describe("@design-system/widgets/RadioGroup", () => {
expect(options[1]).not.toBeChecked();
});
it("should be able to fire onChange event", () => {
it("should be able to fire onChange event", async () => {
const onChangeSpy = jest.fn();
render(
@ -77,7 +78,7 @@ describe("@design-system/widgets/RadioGroup", () => {
);
const options = screen.getAllByRole("radio");
userEvent.click(options[0]);
await userEvent.click(options[0]);
expect(onChangeSpy).toHaveBeenCalled();
});

5
app/client/packages/design-system/widgets/src/components/Text/tests/Text.test.tsx
View File

@ -12,9 +12,10 @@ describe("@design-system/widgets/Text", () => {
});
it("should support custom props", () => {
const { container } = render(<Text data-testid="text">My Text</Text>);
const { container } = render(<Text data-testid="t--text">My Text</Text>);
// eslint-disable-next-line testing-library/no-container,testing-library/no-node-access
const text = container.querySelector("div") as HTMLElement;
expect(text).toHaveAttribute("data-testid", "text");
expect(text).toHaveAttribute("data-testid", "t--text");
});
});

3
app/client/packages/dsl/.eslintrc.json
View File

@ -4,6 +4,7 @@
"rules": {
"@typescript-eslint/strict-boolean-expressions": "off",
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/prefer-nullish-coalescing": "off"
"@typescript-eslint/prefer-nullish-coalescing": "off",
"testing-library/no-debugging-utils": "off"
}
}

3
app/client/packages/rts/.eslintrc.json
View File

@ -4,6 +4,7 @@
"rules": {
"@typescript-eslint/prefer-nullish-coalescing": "off",
"@typescript-eslint/strict-boolean-expressions": "off",
"@typescript-eslint/no-explicit-any": "off"
"@typescript-eslint/no-explicit-any": "off",
"testing-library/no-debugging-utils": "off"
}
}

2
app/client/src/components/editorComponents/AutoResizeTextArea.test.tsx
View File

@ -8,6 +8,7 @@ describe("<AutoResizeTextArea />", () => {
describe("when autoResize is true", () => {
it("it should render a proxy textarea", async () => {
const tree = renderer.create(<AutoResizeTextArea autoResize />);
// eslint-disable-next-line testing-library/await-async-queries
expect(tree.root.findAllByType("textarea").length).toBe(2);
});
});
@ -15,6 +16,7 @@ describe("<AutoResizeTextArea />", () => {
describe("when autoResize is false", () => {
it("it should not render a proxy textarea if autoResize is false", async () => {
const tree = renderer.create(<AutoResizeTextArea autoResize={false} />);
// eslint-disable-next-line testing-library/await-async-queries
expect(tree.root.findAllByType("textarea").length).toBe(1);
});
});

2
app/client/src/components/editorComponents/CodeEditor/CodeEditor.test.tsx
View File

@ -39,6 +39,7 @@ describe("CodeEditor", () => {
);
const testInstance = testRenderer.root;
expect(
// eslint-disable-next-line testing-library/await-async-queries
testInstance.findByType(EvaluatedValuePopup).props.hideEvaluatedValue,
).toBe(false);
});
@ -67,6 +68,7 @@ describe("CodeEditor", () => {
);
const testInstance = testRenderer.root;
expect(
// eslint-disable-next-line testing-library/await-async-queries
testInstance.findByType(EvaluatedValuePopup).props.hideEvaluatedValue,
).toBe(true);
});

4
app/client/src/components/editorComponents/CodeEditor/index.test.tsx
View File

@ -38,9 +38,9 @@ describe("<CodeEditor /> - Keyboard navigation", () => {
</Provider>
);
it("Pressing tab should focus the component", () => {
it("Pressing tab should focus the component", async () => {
render(getTestComponent());
userEvent.tab();
await userEvent.tab();
expect(screen.getByTestId("code-editor-target")).toHaveFocus();
});
});

10
app/client/src/components/editorComponents/EditorContextProvider.test.tsx
View File

@ -56,7 +56,10 @@ describe("EditorContextProvider", () => {
);
const testInstance = testRenderer.root;
const result = (
Object.keys(testInstance.findByType(TestChild).props.editorContext) || []
Object.keys(
// eslint-disable-next-line testing-library/await-async-queries
testInstance.findByType(TestChild).props.editorContext,
) || []
).sort();
expect(result).toEqual(expectedMethods);
@ -92,7 +95,10 @@ describe("EditorContextProvider", () => {
);
const testInstance = testRenderer.root;
const result = (
Object.keys(testInstance.findByType(TestChild).props.editorContext) || []
Object.keys(
// eslint-disable-next-line testing-library/await-async-queries
testInstance.findByType(TestChild).props.editorContext,
) || []
).sort();
expect(result).toEqual(expectedMethods);

8
app/client/src/components/formControls/DynamicInputTextControl.test.tsx
View File

@ -4,7 +4,7 @@ import DynamicInputTextControl from "./DynamicInputTextControl";
import { reduxForm } from "redux-form";
import { mockCodemirrorRender } from "test/__mocks__/CodeMirrorEditorMock";
import userEvent from "@testing-library/user-event";
import { waitFor } from "@testing-library/dom";
import { waitFor } from "@testing-library/react";
function TestForm(props: any) {
return <div>{props.children}</div>;
@ -17,6 +17,7 @@ const ReduxFormDecorator = reduxForm({
describe("DynamicInputTextControl", () => {
beforeEach(() => {
// eslint-disable-next-line testing-library/no-render-in-lifecycle
mockCodemirrorRender();
});
it("renders correctly", () => {
@ -38,10 +39,13 @@ describe("DynamicInputTextControl", () => {
{},
);
// eslint-disable-next-line testing-library/await-async-utils
waitFor(async () => {
const input = screen.getAllByText("My test value")[0];
userEvent.type(input, "New text");
// eslint-disable-next-line testing-library/no-wait-for-side-effects
await userEvent.type(input, "New text");
await expect(screen.getAllByText("New text")).toHaveLength(2);
// eslint-disable-next-line testing-library/await-async-queries
await expect(screen.findByText("My test value")).toBeNull();
});
});

112
app/client/src/components/propertyControls/ColorPickerComponentV2.test.tsx
View File

@ -82,67 +82,67 @@ describe("<ColorPicker />", () => {
});
describe("<ColorPicker /> - Keyboard Navigation", () => {
it("Pressing tab should focus the component", () => {
it("Pressing tab should focus the component", async () => {
render(getTestComponent());
userEvent.tab();
await userEvent.tab();
expect(screen.getByRole("textbox")).toHaveFocus();
});
it("Pressing {Enter} should open the colorpicker", () => {
it("Pressing {Enter} should open the colorpicker", async () => {
render(getTestComponent());
userEvent.tab();
await userEvent.tab();
expect(screen.queryByTestId("color-picker")).toBeNull();
userEvent.keyboard("{Enter}");
expect(screen.queryByTestId("color-picker")).toBeInTheDocument();
await userEvent.keyboard("{Enter}");
expect(screen.getByTestId("color-picker")).toBeInTheDocument();
});
it("Pressing {Escape} should close the colorpicker", async () => {
render(getTestComponent());
userEvent.tab();
await userEvent.tab();
expect(screen.queryByTestId("color-picker")).toBeNull();
userEvent.keyboard("{Enter}");
expect(screen.queryByTestId("color-picker")).toBeInTheDocument();
userEvent.keyboard("{Escape}");
await userEvent.keyboard("{Enter}");
expect(screen.getByTestId("color-picker")).toBeInTheDocument();
await userEvent.keyboard("{Escape}");
await waitForElementToBeRemoved(screen.queryByTestId("color-picker"));
});
it("Pressing {Tab} should shift sections in the colorpicker", () => {
it("Pressing {Tab} should shift sections in the colorpicker", async () => {
render(getTestComponent());
userEvent.tab();
userEvent.keyboard("{Enter}");
await userEvent.tab();
await userEvent.keyboard("{Enter}");
userEvent.tab();
userEvent.tab();
await userEvent.tab();
await userEvent.tab();
expect(
document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[0],
).toHaveFocus();
userEvent.tab();
await userEvent.tab();
expect(
document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
).toHaveFocus();
// Back to first color
userEvent.tab();
await userEvent.tab();
expect(
document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[0],
).toHaveFocus();
});
it("Pressing {ArrowRight} should shift focus to color to the right", () => {
it("Pressing {ArrowRight} should shift focus to color to the right", async () => {
render(getTestComponent());
userEvent.tab();
userEvent.keyboard("{Enter}");
await userEvent.tab();
await userEvent.keyboard("{Enter}");
userEvent.tab();
userEvent.tab();
userEvent.tab();
await userEvent.tab();
await userEvent.tab();
await userEvent.tab();
expect(
document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
).toHaveFocus();
userEvent.keyboard("{ArrowRight}");
await userEvent.keyboard("{ArrowRight}");
expect(
document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
@ -150,76 +150,76 @@ describe("<ColorPicker /> - Keyboard Navigation", () => {
).toHaveFocus();
});
it("Pressing {ArrowLeft} should shift focus to color to the left", () => {
it("Pressing {ArrowLeft} should shift focus to color to the left", async () => {
render(getTestComponent());
userEvent.tab();
userEvent.keyboard("{Enter}");
await userEvent.tab();
await userEvent.keyboard("{Enter}");
userEvent.tab();
userEvent.tab();
userEvent.tab();
await userEvent.tab();
await userEvent.tab();
await userEvent.tab();
expect(
document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
).toHaveFocus();
userEvent.keyboard("{ArrowRight}");
userEvent.keyboard("{ArrowRight}");
await userEvent.keyboard("{ArrowRight}");
await userEvent.keyboard("{ArrowRight}");
expect(
document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
.parentElement?.childNodes[2],
).toHaveFocus();
userEvent.keyboard("{ArrowLeft}");
await userEvent.keyboard("{ArrowLeft}");
expect(
document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
.parentElement?.childNodes[1],
).toHaveFocus();
});
it("Pressing {ArrowDown} should shift focus to color to the bottom", () => {
it("Pressing {ArrowDown} should shift focus to color to the bottom", async () => {
render(getTestComponent());
userEvent.tab();
userEvent.keyboard("{Enter}");
await userEvent.tab();
await userEvent.keyboard("{Enter}");
userEvent.tab();
userEvent.tab();
userEvent.tab();
await userEvent.tab();
await userEvent.tab();
await userEvent.tab();
expect(
document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
).toHaveFocus();
userEvent.keyboard("{ArrowDown}");
await userEvent.keyboard("{ArrowDown}");
expect(
document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
.parentElement?.childNodes[10],
).toHaveFocus();
});
it("Pressing {ArrowUp} should shift focus to color to the top", () => {
it("Pressing {ArrowUp} should shift focus to color to the top", async () => {
render(getTestComponent());
userEvent.tab();
userEvent.keyboard("{Enter}");
await userEvent.tab();
await userEvent.keyboard("{Enter}");
userEvent.tab();
userEvent.tab();
userEvent.tab();
await userEvent.tab();
await userEvent.tab();
await userEvent.tab();
expect(
document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
).toHaveFocus();
userEvent.keyboard("{ArrowRight}");
userEvent.keyboard("{ArrowDown}");
userEvent.keyboard("{ArrowDown}");
await userEvent.keyboard("{ArrowRight}");
await userEvent.keyboard("{ArrowDown}");
await userEvent.keyboard("{ArrowDown}");
expect(
document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
.parentElement?.childNodes[21],
).toHaveFocus();
userEvent.keyboard("{ArrowUp}");
await userEvent.keyboard("{ArrowUp}");
expect(
document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
.parentElement?.childNodes[11],
@ -229,12 +229,12 @@ describe("<ColorPicker /> - Keyboard Navigation", () => {
it("Pressing {Enter} should select the color in focus", async () => {
const onColorChange = jest.fn();
render(getTestComponent(onColorChange));
userEvent.tab();
userEvent.keyboard("{Enter}");
userEvent.tab();
userEvent.tab();
userEvent.keyboard("{ArrowRight}");
userEvent.keyboard("{Enter}");
await userEvent.tab();
await userEvent.keyboard("{Enter}");
await userEvent.tab();
await userEvent.tab();
await userEvent.keyboard("{ArrowRight}");
await userEvent.keyboard("{Enter}");
expect(onColorChange).toBeCalled();
await waitForElementToBeRemoved(screen.queryByTestId("color-picker"));
});

154
app/client/src/components/propertyControls/IconSelectControl.test.tsx
View File

@ -46,9 +46,9 @@ describe("<IconSelectControl /> - Keyboard navigation", () => {
/>
);
it("Pressing tab should focus the component", () => {
it("Pressing tab should focus the component", async () => {
render(getTestComponent());
userEvent.tab();
await userEvent.tab();
expect(screen.getByRole("button")).toHaveFocus();
});
@ -56,53 +56,53 @@ describe("<IconSelectControl /> - Keyboard navigation", () => {
"Pressing '%s' should open the icon selector",
async (key) => {
render(getTestComponent());
userEvent.tab();
await userEvent.tab();
expect(screen.queryByRole("list")).toBeNull();
userEvent.keyboard(key);
expect(screen.queryByRole("list")).toBeInTheDocument();
await userEvent.keyboard(key);
expect(screen.getByRole("list")).toBeInTheDocument();
// Makes sure search bar is having focus
await waitFor(() => {
expect(screen.queryByRole("textbox")).toHaveFocus();
expect(screen.getByRole("textbox")).toHaveFocus();
}, waitForParamsForSearchFocus);
},
);
it("Pressing '{Escape}' should close the icon selector", async () => {
render(getTestComponent());
userEvent.tab();
await userEvent.tab();
expect(screen.queryByRole("list")).toBeNull();
userEvent.keyboard("{Enter}");
expect(screen.queryByRole("list")).toBeInTheDocument();
userEvent.keyboard("{Escape}");
await waitForElementToBeRemoved(screen.getAllByRole("list"));
await userEvent.keyboard("{Enter}");
expect(screen.getByRole("list")).toBeInTheDocument();
await userEvent.keyboard("{Escape}");
await waitForElementToBeRemoved(screen.queryByRole("list"));
});
it("Pressing '{ArrowDown}' while search is in focus should remove the focus", async () => {
render(getTestComponent());
userEvent.tab();
userEvent.keyboard("{Enter}");
expect(screen.queryByRole("list")).toBeInTheDocument();
await userEvent.tab();
await userEvent.keyboard("{Enter}");
expect(screen.getByRole("list")).toBeInTheDocument();
await waitFor(() => {
expect(screen.queryByRole("textbox")).toHaveFocus();
expect(screen.getByRole("textbox")).toHaveFocus();
}, waitForParamsForSearchFocus);
userEvent.keyboard("{ArrowDown}");
expect(screen.queryByRole("textbox")).not.toHaveFocus();
await userEvent.keyboard("{ArrowDown}");
expect(screen.getByRole("textbox")).not.toHaveFocus();
});
it("Pressing '{Shift} + {ArrowUp}' while search is not in focus should focus search box", async () => {
render(getTestComponent());
userEvent.tab();
userEvent.keyboard("{Enter}");
expect(screen.queryByRole("list")).toBeInTheDocument();
await userEvent.tab();
await userEvent.keyboard("{Enter}");
expect(screen.getByRole("list")).toBeInTheDocument();
await waitFor(() => {
expect(screen.queryByRole("textbox")).toHaveFocus();
expect(screen.getByRole("textbox")).toHaveFocus();
}, waitForParamsForSearchFocus);
userEvent.keyboard("{ArrowDown}");
expect(screen.queryByRole("textbox")).not.toHaveFocus();
userEvent.keyboard("{Shift}{ArrowUp}");
await userEvent.keyboard("{ArrowDown}");
expect(screen.getByRole("textbox")).not.toHaveFocus();
await userEvent.keyboard("{Shift}{ArrowUp}");
await waitFor(() => {
expect(screen.queryByRole("textbox")).toHaveFocus();
expect(screen.getByRole("textbox")).toHaveFocus();
}, waitForParamsForSearchFocus);
});
@ -115,18 +115,18 @@ describe("<IconSelectControl /> - Keyboard navigation", () => {
*/
it("Pressing '{ArrowDown}' should navigate the icon selection downwards", async () => {
render(getTestComponent());
userEvent.tab();
userEvent.keyboard("{Enter}");
await userEvent.tab();
await userEvent.keyboard("{Enter}");
await waitFor(() => {
expect(screen.queryByRole("textbox")).toHaveFocus();
expect(screen.getByRole("textbox")).toHaveFocus();
}, waitForParamsForSearchFocus);
expect(
document.querySelector("a.bp3-active")?.children[0].classList,
).toMatchSnapshot();
// used to shift the focus from search
userEvent.keyboard("{ArrowDown}");
await userEvent.keyboard("{ArrowDown}");
userEvent.keyboard("{ArrowDown}");
await userEvent.keyboard("{ArrowDown}");
expect(
document.querySelector("a.bp3-active")?.children[0].classList,
).toMatchSnapshot();
@ -134,25 +134,25 @@ describe("<IconSelectControl /> - Keyboard navigation", () => {
it("Pressing '{ArrowUp}' should navigate the icon selection upwards", async () => {
render(getTestComponent());
userEvent.tab();
userEvent.keyboard("{Enter}");
await userEvent.tab();
await userEvent.keyboard("{Enter}");
await waitFor(() => {
expect(screen.queryByRole("textbox")).toHaveFocus();
expect(screen.getByRole("textbox")).toHaveFocus();
}, waitForParamsForSearchFocus);
expect(
document.querySelector("a.bp3-active")?.children[0].classList,
).toMatchSnapshot();
// used to shift the focus from search
userEvent.keyboard("{ArrowDown}");
await userEvent.keyboard("{ArrowDown}");
userEvent.keyboard("{ArrowDown}");
userEvent.keyboard("{ArrowDown}");
userEvent.keyboard("{ArrowDown}");
await userEvent.keyboard("{ArrowDown}");
await userEvent.keyboard("{ArrowDown}");
await userEvent.keyboard("{ArrowDown}");
expect(
document.querySelector("a.bp3-active")?.children[0].classList,
).toMatchSnapshot();
userEvent.keyboard("{ArrowUp}");
await userEvent.keyboard("{ArrowUp}");
expect(
document.querySelector("a.bp3-active")?.children[0].classList,
).toMatchSnapshot();
@ -160,18 +160,18 @@ describe("<IconSelectControl /> - Keyboard navigation", () => {
it("Pressing '{ArrowRight}' should navigate the icon selection towards right", async () => {
render(getTestComponent());
userEvent.tab();
userEvent.keyboard("{Enter}");
await userEvent.tab();
await userEvent.keyboard("{Enter}");
await waitFor(() => {
expect(screen.queryByRole("textbox")).toHaveFocus();
expect(screen.getByRole("textbox")).toHaveFocus();
}, waitForParamsForSearchFocus);
expect(
document.querySelector("a.bp3-active")?.children[0].classList,
).toMatchSnapshot();
// used to shift the focus from search
userEvent.keyboard("{ArrowDown}");
await userEvent.keyboard("{ArrowDown}");
userEvent.keyboard("{ArrowRight}");
await userEvent.keyboard("{ArrowRight}");
expect(
document.querySelector("a.bp3-active")?.children[0].classList,
).toMatchSnapshot();
@ -179,25 +179,25 @@ describe("<IconSelectControl /> - Keyboard navigation", () => {
it("Pressing '{ArrowLeft}' should navigate the icon selection towards left", async () => {
render(getTestComponent());
userEvent.tab();
userEvent.keyboard("{Enter}");
await userEvent.tab();
await userEvent.keyboard("{Enter}");
await waitFor(() => {
expect(screen.queryByRole("textbox")).toHaveFocus();
expect(screen.getByRole("textbox")).toHaveFocus();
}, waitForParamsForSearchFocus);
expect(
document.querySelector("a.bp3-active")?.children[0].classList,
).toMatchSnapshot();
// used to shift the focus from search
userEvent.keyboard("{ArrowDown}");
await userEvent.keyboard("{ArrowDown}");
userEvent.keyboard("{ArrowRight}");
userEvent.keyboard("{ArrowRight}");
userEvent.keyboard("{ArrowRight}");
await userEvent.keyboard("{ArrowRight}");
await userEvent.keyboard("{ArrowRight}");
await userEvent.keyboard("{ArrowRight}");
expect(
document.querySelector("a.bp3-active")?.children[0].classList,
).toMatchSnapshot();
userEvent.keyboard("{ArrowLeft}");
await userEvent.keyboard("{ArrowLeft}");
expect(
document.querySelector("a.bp3-active")?.children[0].classList,
).toMatchSnapshot();
@ -206,41 +206,39 @@ describe("<IconSelectControl /> - Keyboard navigation", () => {
it("Pressing '{Enter}' or ' ' should select the icon", async () => {
const handleOnSelect = jest.fn();
render(getTestComponent(handleOnSelect));
userEvent.tab();
expect(screen.queryByRole("button")?.textContent).toEqual(
"(none)caret-down",
);
userEvent.keyboard("{Enter}");
await userEvent.tab();
expect(screen.getByRole("button")?.textContent).toEqual("(none)caret-down");
await userEvent.keyboard("{Enter}");
await waitFor(() => {
expect(screen.queryByRole("textbox")).toHaveFocus();
expect(screen.getByRole("textbox")).toHaveFocus();
}, waitForParamsForSearchFocus);
expect(
document.querySelector("a.bp3-active")?.children[0].classList,
).toMatchSnapshot();
// used to shift the focus from search
userEvent.keyboard("{ArrowDown}");
await userEvent.keyboard("{ArrowDown}");
userEvent.keyboard("{ArrowDown}");
userEvent.keyboard("{ArrowRight}");
await userEvent.keyboard("{ArrowDown}");
await userEvent.keyboard("{ArrowRight}");
expect(
document.querySelector("a.bp3-active")?.children[0].classList,
).toMatchSnapshot();
userEvent.keyboard(" ");
await userEvent.keyboard(" ");
expect(handleOnSelect).toHaveBeenCalledTimes(1);
expect(handleOnSelect.mock.calls[0]).toMatchSnapshot();
await waitForElementToBeRemoved(screen.getByRole("list"));
await waitForElementToBeRemoved(screen.queryByRole("list"));
userEvent.keyboard("{Enter}");
expect(screen.queryByRole("list")).toBeInTheDocument();
await userEvent.keyboard("{Enter}");
expect(screen.getByRole("list")).toBeInTheDocument();
await waitFor(() => {
expect(screen.queryByRole("textbox")).toHaveFocus();
expect(screen.getByRole("textbox")).toHaveFocus();
}, waitForParamsForSearchFocus);
expect(
document.querySelector("a.bp3-active")?.children[0].classList,
).toMatchSnapshot();
userEvent.keyboard("{ArrowDown}");
userEvent.keyboard("{ArrowRight}");
userEvent.keyboard(" ");
await userEvent.keyboard("{ArrowDown}");
await userEvent.keyboard("{ArrowRight}");
await userEvent.keyboard(" ");
expect(handleOnSelect).toHaveBeenCalledTimes(2);
expect(handleOnSelect.mock.calls[1]).toMatchSnapshot();
});
@ -269,13 +267,11 @@ describe("<IconSelectControl /> - (none) icon", () => {
it("Should display (none) icon when hideNoneIcon property is false/undefined", async () => {
render(getTestComponent());
userEvent.tab();
expect(screen.queryByRole("button")?.textContent).toEqual(
"(none)caret-down",
);
userEvent.keyboard("{Enter}");
await userEvent.tab();
expect(screen.getByRole("button")?.textContent).toEqual("(none)caret-down");
await userEvent.keyboard("{Enter}");
await waitFor(() => {
expect(screen.queryByRole("textbox")).toHaveFocus();
expect(screen.getByRole("textbox")).toHaveFocus();
}, waitForParamsForSearchFocus);
expect(
document.querySelector("a.bp3-active")?.children[0].classList,
@ -287,13 +283,11 @@ describe("<IconSelectControl /> - (none) icon", () => {
it("Should not display (none) icon when hideNoneIcon property is true", async () => {
render(getTestComponent(true));
userEvent.tab();
expect(screen.queryByRole("button")?.textContent).toEqual(
"(none)caret-down",
);
userEvent.keyboard("{Enter}");
await userEvent.tab();
expect(screen.getByRole("button")?.textContent).toEqual("(none)caret-down");
await userEvent.keyboard("{Enter}");
await waitFor(() => {
expect(screen.queryByRole("textbox")).toHaveFocus();
expect(screen.getByRole("textbox")).toHaveFocus();
}, waitForParamsForSearchFocus);
expect(
document.querySelector("a.bp3-active")?.children[0].classList,

1
app/client/src/layoutSystems/common/dropTarget/DragLayerComponent.test.tsx
View File

@ -40,6 +40,7 @@ describe("DragLayerComponent", () => {
);
const testInstance = testRenderer.root;
// eslint-disable-next-line testing-library/await-async-queries
expect(testInstance.findByType(DragLayerComponent).props.noPad).toBe(true);
});
});

2
app/client/src/pages/AdminSettings/FormGroup/Accordion.test.tsx
View File

@ -83,6 +83,6 @@ describe("Accordion", () => {
expect(document.querySelector("[name='expand-more']")).toBeDefined();
document.querySelector("hr")?.click();
expect(document.querySelector("[name='expand-less']")).toBeDefined();
expect(screen.queryByTestId("admin-settings-group-wrapper")).toBeDefined();
expect(screen.getByTestId("admin-settings-group-wrapper")).toBeDefined();
});
});

4
app/client/src/pages/AppViewer/PrimaryCTA.test.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import { render, screen, cleanup } from "@testing-library/react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import { Provider } from "react-redux";
import { ThemeProvider } from "styled-components";
@ -155,8 +155,6 @@ export const fetchApplicationMockResponse = {
};
describe("App viewer fork button", () => {
afterEach(cleanup);
it("Fork modal trigger should not be displayed until user details are fetched", () => {
render(
<Provider store={getStore()}>

7
app/client/src/pages/Editor/Explorer/Libraries/__tests__/Installer.test.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import { render, screen, fireEvent, cleanup } from "@testing-library/react";
import { render, screen, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import { Provider } from "react-redux";
import store from "store";
@ -48,7 +48,6 @@ describe("Contains all UI tests for JS libraries", () => {
type: ReduxActionTypes.TOGGLE_INSTALLER,
payload: true,
});
afterEach(cleanup);
it("Headers should exist", () => {
render(
@ -80,7 +79,7 @@ describe("Contains all UI tests for JS libraries", () => {
expect(screen.getByTestId("install-library-btn")).toBeEnabled();
expect(screen.queryByText("Please enter a valid URL")).toBeNull();
fireEvent.change(input, { target: { value: "23" } });
expect(screen.queryByText("Please enter a valid URL")).toBeDefined();
expect(screen.getByText("Please enter a valid URL")).toBeDefined();
expect(screen.getByTestId("install-library-btn")).toBeDisabled();
});
@ -113,6 +112,7 @@ describe("Contains all UI tests for JS libraries", () => {
fireEvent.click(installButton);
expect(
// eslint-disable-next-line testing-library/prefer-presence-queries
screen.queryByText(
`Installing library for ${fetchApplicationMockResponse.data.application.name}`,
),
@ -136,6 +136,7 @@ describe("Contains all UI tests for JS libraries", () => {
});
expect(
// eslint-disable-next-line testing-library/prefer-presence-queries
screen.queryByText(
`Installing library for ${fetchApplicationMockResponse.data.application.name}`,
),

4
app/client/src/pages/Editor/GlobalHotKeys/GlobalHotKeys.test.tsx
View File

@ -268,7 +268,7 @@ describe("Cut/Copy/Paste hotkey", () => {
</MockPageDSL>,
{ initialState: store.getState(), sagasToRun: sagasToRunForTests },
);
const artBoard: any = await component.queryByTestId("t--canvas-artboard");
const artBoard: any = component.queryByTestId("t--canvas-artboard");
// deselect all other widgets
fireEvent.click(artBoard);
act(() => {
@ -358,7 +358,7 @@ describe("Cut/Copy/Paste hotkey", () => {
</GlobalHotKeys>
</MockPageDSL>,
);
const artBoard: any = await component.queryByTestId("t--canvas-artboard");
const artBoard: any = component.queryByTestId("t--canvas-artboard");
// deselect all other widgets
fireEvent.click(artBoard);
act(() => {

2
app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx
View File

@ -23,7 +23,7 @@ const FileTabs = (props: Props) => {
const currentEntity = identifyEntityFromPath(location.pathname);
return (
<Flex data-test-id="editor-tabs" flex="1" gap="spaces-2" height="100%">
<Flex data-testid="editor-tabs" flex="1" gap="spaces-2" height="100%">
{tabs.map((tab: EntityItem) => (
<StyledTab
className={clsx(

24
app/client/src/pages/Editor/MainContainerWidthToggles.test.tsx
View File

@ -9,9 +9,9 @@ import { lightTheme } from "selectors/themeSelectors";
import store from "store";
import { MainContainerWidthToggles } from "./MainContainerWidthToggles";
function navigateWithArrowKeys(key: string, noOfPresses: number) {
async function navigateWithArrowKeys(key: string, noOfPresses: number) {
for (let i = 0; i < noOfPresses; i++) {
userEvent.keyboard(key);
await userEvent.keyboard(key);
}
}
@ -24,9 +24,9 @@ describe("<MainContainerWidthToggles />", () => {
</ThemeProvider>
);
it("Pressing tab should focus on the first component", () => {
it("Pressing tab should focus on the first component", async () => {
const { container } = render(getTestComponent());
userEvent.tab();
await userEvent.tab();
// Should focus on the first component
const tab = container.getElementsByClassName(
@ -35,21 +35,21 @@ describe("<MainContainerWidthToggles />", () => {
expect(tab).toHaveFocus();
});
it("{ArrowRight} should focus the next item", () => {
it("{ArrowRight} should focus the next item", async () => {
const { container } = render(getTestComponent());
const tabs = container.getElementsByClassName(
"ads-v2-segmented-control__segments-container",
);
userEvent.tab();
await userEvent.tab();
navigateWithArrowKeys("{ArrowRight}", 1);
await navigateWithArrowKeys("{ArrowRight}", 1);
expect(tabs[1]).toHaveFocus();
// Focus back on the first element
userEvent.keyboard("{ArrowLeft}");
await userEvent.keyboard("{ArrowLeft}");
// Arrow Right after the last item should focus the first item again
navigateWithArrowKeys("{ArrowRight}", tabs.length);
await navigateWithArrowKeys("{ArrowRight}", tabs.length);
expect(tabs[0]).toHaveFocus();
});
@ -59,13 +59,13 @@ describe("<MainContainerWidthToggles />", () => {
"ads-v2-segmented-control__segments-container",
);
userEvent.tab();
await userEvent.tab();
// Arrow Left on the First item should focus on the last item
navigateWithArrowKeys("{ArrowLeft}", 1);
await navigateWithArrowKeys("{ArrowLeft}", 1);
expect(tabs[tabs.length - 1]).toHaveFocus();
navigateWithArrowKeys("{ArrowLeft}", tabs.length - 1);
await navigateWithArrowKeys("{ArrowLeft}", tabs.length - 1);
expect(tabs[0]).toHaveFocus();
});

26
app/client/src/pages/Editor/gitSync/GitSettingsModal/index.test.tsx
View File

@ -64,11 +64,11 @@ const renderComponent = (store: MockStoreEnhanced<unknown, any>) => {
describe("Git Settings Modal", () => {
it("is rendered properly", () => {
const store = mockStore(createInitialState());
const { queryByTestId } = renderComponent(store);
expect(queryByTestId("t--git-settings-modal")).toBeTruthy();
expect(queryByTestId(`t--tab-${GitSettingsTab.GENERAL}`)).toBeTruthy();
expect(queryByTestId(`t--tab-${GitSettingsTab.BRANCH}`)).toBeTruthy();
expect(queryByTestId(`t--tab-${GitSettingsTab.CD}`)).toBeTruthy();
const { getByTestId } = renderComponent(store);
expect(getByTestId("t--git-settings-modal")).toBeTruthy();
expect(getByTestId(`t--tab-${GitSettingsTab.GENERAL}`)).toBeTruthy();
expect(getByTestId(`t--tab-${GitSettingsTab.BRANCH}`)).toBeTruthy();
expect(getByTestId(`t--tab-${GitSettingsTab.CD}`)).toBeTruthy();
});
it("is not rendering branch tab when neither of the features are enabled", () => {
@ -81,11 +81,11 @@ describe("Git Settings Modal", () => {
return newState;
});
const store = mockStore(initialState);
const { queryByTestId } = renderComponent(store);
expect(queryByTestId("t--git-settings-modal")).toBeTruthy();
expect(queryByTestId(`t--tab-${GitSettingsTab.GENERAL}`)).toBeTruthy();
const { getByTestId, queryByTestId } = renderComponent(store);
expect(getByTestId("t--git-settings-modal")).toBeTruthy();
expect(getByTestId(`t--tab-${GitSettingsTab.GENERAL}`)).toBeTruthy();
expect(queryByTestId(`t--tab-${GitSettingsTab.BRANCH}`)).not.toBeTruthy();
expect(queryByTestId(`t--tab-${GitSettingsTab.CD}`)).toBeTruthy();
expect(getByTestId(`t--tab-${GitSettingsTab.CD}`)).toBeTruthy();
});
it("is not rendering CD when feature flag is not enabled", () => {
@ -98,10 +98,10 @@ describe("Git Settings Modal", () => {
return newState;
});
const store = mockStore(initialState);
const { queryByTestId } = renderComponent(store);
expect(queryByTestId("t--git-settings-modal")).toBeTruthy();
expect(queryByTestId(`t--tab-${GitSettingsTab.GENERAL}`)).toBeTruthy();
expect(queryByTestId(`t--tab-${GitSettingsTab.BRANCH}`)).toBeTruthy();
const { getByTestId, queryByTestId } = renderComponent(store);
expect(getByTestId("t--git-settings-modal")).toBeTruthy();
expect(getByTestId(`t--tab-${GitSettingsTab.GENERAL}`)).toBeTruthy();
expect(getByTestId(`t--tab-${GitSettingsTab.BRANCH}`)).toBeTruthy();
expect(queryByTestId(`t--tab-${GitSettingsTab.CD}`)).not.toBeTruthy();
});
});

2
app/client/src/pages/Editor/gitSync/QuickGitActions/BranchButton.test.tsx
View File

@ -5,7 +5,7 @@ import React from "react";
describe("BranchButton", () => {
it("renders properly", async () => {
render(<BranchButton />);
const currentBranch = await screen.queryByTestId(
const currentBranch = screen.queryByTestId(
"t--branch-button-currentBranch",
);
expect(currentBranch?.innerHTML).toContain("*");

10
app/client/src/pages/Editor/gitSync/Tabs/__tests__/ConnectionSuccess.test.tsx
View File

@ -39,18 +39,16 @@ jest.mock("react-redux", () => {
describe("Connection Success Modal", () => {
it("is rendered properly", () => {
const store = mockStore(initialState);
const { queryByTestId } = render(
const { getByTestId } = render(
<Provider store={store}>
<ConnectionSuccess />
</Provider>,
);
expect(queryByTestId("t--git-success-modal-body")).toBeTruthy();
expect(getByTestId("t--git-success-modal-body")).toBeTruthy();
expect(
queryByTestId("t--git-success-modal-start-using-git-cta"),
).toBeTruthy();
expect(
queryByTestId("t--git-success-modal-open-settings-cta"),
getByTestId("t--git-success-modal-start-using-git-cta"),
).toBeTruthy();
expect(getByTestId("t--git-success-modal-open-settings-cta")).toBeTruthy();
});
it("go to settings cta button is working", () => {

2
app/client/src/pages/Editor/gitSync/components/BetaTag.test.tsx
View File

@ -6,7 +6,7 @@ import "jest-styled-components";
describe("BetaTag", () => {
it("renders properly", async () => {
render(<BetaTag />);
const actual = await screen.queryByTestId("t--beta-tag");
const actual = screen.queryByTestId("t--beta-tag");
// renders
expect(actual).not.toBeNull();

6
app/client/src/pages/Editor/gitSync/components/ConflictInfo.test.tsx
View File

@ -13,15 +13,15 @@ describe("ConflictInfo", () => {
// check for existence
[
await screen.queryByTestId("t--conflict-info-container"),
await screen.queryByTestId("t--conflict-info-error-warning"),
screen.queryByTestId("t--conflict-info-container"),
screen.queryByTestId("t--conflict-info-error-warning"),
].every((query) => {
expect(query).not.toBeNull();
return true;
});
//check for text
const container = await screen.getByTestId("t--conflict-info-container");
const container = screen.getByTestId("t--conflict-info-container");
const html = container.innerHTML.toString();
expect(html.includes("Learn more")).toBeTruthy();
expect(html.includes("Open repository")).toBeTruthy();

2
app/client/src/pages/Editor/gitSync/components/DefaultTag.test.tsx
View File

@ -6,7 +6,7 @@ import "jest-styled-components";
describe("DefaultTag", () => {
it("renders properly", async () => {
render(<DefaultTag />);
const actual = await screen.queryByTestId("t--default-tag");
const actual = screen.queryByTestId("t--default-tag");
// renders
expect(actual).not.toBeNull();

4
app/client/src/pages/Editor/gitSync/components/RemoteBranchList.test.tsx
View File

@ -7,7 +7,7 @@ describe("RemoteBranchList", function () {
it("renders nothing when param:remoteBranches is an empty array", async () => {
render(RemoteBranchList([], () => undefined));
const renderedList = await screen.queryByTestId(
const renderedList = screen.queryByTestId(
"t--git-remote-branch-list-container",
);
expect(renderedList?.innerHTML).toBeFalsy();
@ -24,7 +24,7 @@ describe("RemoteBranchList", function () {
expect(renderedList?.children.length).toEqual(2);
// contains styled segment header
const header = await screen.queryByTestId("t--branch-list-header-local");
const header = screen.queryByTestId("t--branch-list-header-local");
expect(header).not.toBeNull();
expect(header?.innerHTML.includes("Remote branches")).toBeTruthy();
});

8
app/client/src/pages/setup/SetupForm.test.tsx
View File

@ -9,17 +9,17 @@ function renderComponent() {
}
describe("SetupForm", () => {
it("If the form is in invalid state pressing enter should not submit the form", () => {
it("If the form is in invalid state pressing enter should not submit the form", async () => {
renderComponent();
const verifyPassword = screen.getByTestId("verifyPassword");
const formPage = screen.getByTestId("formPage");
expect(verifyPassword).toHaveAttribute("name");
userEvent.keyboard("{enter}");
await userEvent.keyboard("{enter}");
// This attribute is removed in onsubmit
expect(verifyPassword).toHaveAttribute("name");
expect(formPage).toHaveClass("block");
});
it("If the form is in valid state pressing enter should nagivate to next page", () => {
it("If the form is in valid state pressing enter should nagivate to next page", async () => {
renderComponent();
const formPage = screen.getByTestId("formPage");
expect(formPage).toHaveClass("block");
@ -33,7 +33,7 @@ describe("SetupForm", () => {
fireEvent.change(password, { target: { value: "Test@123" } });
const verifyPassword = screen.getByTestId("verifyPassword");
fireEvent.change(verifyPassword, { target: { value: "Test@123" } });
userEvent.keyboard("{enter}");
await userEvent.keyboard("{enter}");
expect(formPage).toHaveClass("hidden");
});
});

2
app/client/src/widgets/ChartWidget/component/index.test.tsx
View File

@ -234,7 +234,7 @@ describe("Chart Widget", () => {
expect(mockCallback.mock.calls.length).toEqual(0);
const el = await screen.findByText("1000");
userEvent.click(el);
await userEvent.click(el);
expect(mockCallback.mock.calls.length).toEqual(1);
});
});

8
app/client/src/widgets/DividerWidget/widget/index.test.tsx
View File

@ -86,14 +86,14 @@ describe("<DividerWidget />", () => {
}
test("should render Divider widget horizontal by default", async () => {
const { queryByTestId } = renderDividerWidget();
const { getByTestId } = renderDividerWidget();
expect(queryByTestId("dividerHorizontal")).toBeTruthy();
expect(getByTestId("dividerHorizontal")).toBeTruthy();
});
test("should render Divider vertical", async () => {
const { queryByTestId } = renderDividerWidget({ orientation: "vertical" });
const { getByTestId } = renderDividerWidget({ orientation: "vertical" });
expect(queryByTestId("dividerVertical")).toBeTruthy();
expect(getByTestId("dividerVertical")).toBeTruthy();
});
});

7
app/client/src/widgets/TabsWidget/widget/index.test.tsx
View File

@ -3,6 +3,7 @@ import {
widgetCanvasFactory,
} from "test/factories/WidgetFactoryUtils";
import { render, fireEvent } from "test/testUtils";
import { screen } from "@testing-library/react";
import * as widgetRenderUtils from "utils/widgetRenderUtils";
import * as dataTreeSelectors from "selectors/dataTreeSelectors";
import * as editorSelectors from "selectors/editorSelectors";
@ -30,13 +31,13 @@ describe("Tabs widget functional cases", () => {
const dsl: any = widgetCanvasFactory.build({
children,
});
const component = render(
render(
<MockPageDSL dsl={dsl}>
<Canvas canvasWidth={dsl.rightColumn} widgetsStructure={dsl} />
</MockPageDSL>,
);
const tab1 = component.queryByText("Tab 1");
const tab2 = component.queryByText("Tab 2");
const tab1 = screen.queryByText("Tab 1");
const tab2 = screen.queryByText("Tab 2");
expect(tab1).toBeDefined();
expect(tab2).toBeDefined();
});

14
app/client/yarn.lock
View File

@ -12022,7 +12022,7 @@ __metadata:
languageName: node
linkType: hard
"@typescript-eslint/utils@npm:^5.10.0, @typescript-eslint/utils@npm:^5.13.0, @typescript-eslint/utils@npm:^5.45.0":
"@typescript-eslint/utils@npm:^5.10.0, @typescript-eslint/utils@npm:^5.13.0, @typescript-eslint/utils@npm:^5.45.0, @typescript-eslint/utils@npm:^5.58.0":
version: 5.62.0
resolution: "@typescript-eslint/utils@npm:5.62.0"
dependencies:
@ -13219,6 +13219,7 @@ __metadata:
eslint-plugin-react-hooks: ^4.6.0
eslint-plugin-sort-destructure-keys: ^1.5.0
eslint-plugin-storybook: ^0.6.15
eslint-plugin-testing-library: ^6.2.0
esm: ^3.2.25
factory.ts: ^0.5.1
fast-deep-equal: ^3.1.3
@ -18713,6 +18714,17 @@ __metadata:
languageName: node
linkType: hard
"eslint-plugin-testing-library@npm:^6.2.0":
version: 6.2.0
resolution: "eslint-plugin-testing-library@npm:6.2.0"
dependencies:
"@typescript-eslint/utils": ^5.58.0
peerDependencies:
eslint: ^7.5.0 || ^8.0.0
checksum: 7af7e0a1eee44c6ba65ce2ae99f8e46ce709a319f4cce778bb0af2dda5828d78f3a81e8989c7b691a8b9b9fef102b56136209aac700038b9e64794600b0d12db
languageName: node
linkType: hard
"eslint-scope@npm:5.1.1, eslint-scope@npm:^5.1.1":
version: 5.1.1
resolution: "eslint-scope@npm:5.1.1"