fix: widgets-old package lint errors (#23348)
## Description 1. Fixed lint errors. 2. Removed unnecessary tests and scripts to run them. Agreed with @albinAppsmith #### Type of change - Bug fix (non-breaking change which fixes an issue) - Chore (housekeeping or task changes that don't impact user perception) ## Testing > #### How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. > Delete anything that is not relevant - [x] Manual - [x] Jest - [x] Cypress ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Test-plan-implementation#speedbreaker-features-to-consider-for-every-change) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans/_edit#areas-of-interest) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [ ] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed Co-authored-by: Valera Melnikov <melnikov.vv@greendatasoft.ru>
This commit is contained in:
Valera Melnikov
GitHub
parent
86d42952e1
commit
468a84cc5b
|
|
@ -6,16 +6,8 @@
|
|||
"author": "Valera Melnikov <valera@appsmith.com>, Pawan Kumar <pawan@appsmith.com>",
|
||||
"license": "Apache-2.0",
|
||||
"scripts": {
|
||||
"storybook": "start-storybook -p 6006",
|
||||
"build-storybook": "build-storybook",
|
||||
"create-story": "./create_story.sh",
|
||||
"test": "jest",
|
||||
"test:watch": "jest --watch",
|
||||
"test-storybook": "test-storybook",
|
||||
"test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && yarn test-storybook\"",
|
||||
"chromatic": "chromatic --project-token=CHROMATIC_PROJECT_TOKEN",
|
||||
"lint:ci": "eslint --cache .",
|
||||
"prettier:ci": "prettier --check ."
|
||||
"lint": "eslint --cache .",
|
||||
"prettier": "prettier --check ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@svgr/webpack": "5.5.0",
|
||||
|
|
|
|||
|
|
@ -1,46 +0,0 @@
|
|||
import React from "react";
|
||||
import "@testing-library/jest-dom";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import Button, { Size } from "./index";
|
||||
import { create } from "react-test-renderer";
|
||||
|
||||
describe("<Button /> component - render", () => {
|
||||
it("renders the button component with text passed as input", () => {
|
||||
render(<Button size={Size.medium} tag="button" text="Run" />);
|
||||
expect(screen.getByRole("button")).toHaveTextContent("Run");
|
||||
});
|
||||
});
|
||||
|
||||
describe("<Button /> component - loading behaviour", () => {
|
||||
it("calls the onclick handler when not in loading state", () => {
|
||||
const fn = jest.fn();
|
||||
const tree = create(
|
||||
<Button
|
||||
isLoading={false}
|
||||
onClick={fn}
|
||||
size={Size.medium}
|
||||
tag="button"
|
||||
text="Run"
|
||||
/>,
|
||||
);
|
||||
const button = tree.root.findByType("button");
|
||||
button.props.onClick();
|
||||
expect(fn.mock.calls.length).toBe(1);
|
||||
});
|
||||
|
||||
it("does not call the onclick handler when in loading state", () => {
|
||||
const fn = jest.fn();
|
||||
const tree = create(
|
||||
<Button
|
||||
isLoading
|
||||
onClick={fn}
|
||||
size={Size.medium}
|
||||
tag="button"
|
||||
text="Run"
|
||||
/>,
|
||||
);
|
||||
const button = tree.root.findByType("button");
|
||||
button.props.onClick();
|
||||
expect(fn.mock.calls.length).toBe(0);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,293 +0,0 @@
|
|||
import React from "react";
|
||||
import "@testing-library/jest-dom";
|
||||
import {
|
||||
fireEvent,
|
||||
render,
|
||||
screen,
|
||||
waitForElementToBeRemoved,
|
||||
} from "@testing-library/react";
|
||||
import Dropdown from "./index";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
|
||||
const optionsProps: any = {
|
||||
options: [
|
||||
{ label: "Primary", value: "PRIMARY" },
|
||||
{ label: "Secondary", value: "SECONDARY" },
|
||||
{ label: "Tertiary", value: "TERTIARY" },
|
||||
],
|
||||
selected: {
|
||||
label: "Primary",
|
||||
value: "PRIMARY",
|
||||
},
|
||||
showLabelOnly: true,
|
||||
};
|
||||
|
||||
const noOptionsProps = {
|
||||
options: [],
|
||||
};
|
||||
|
||||
const getTestComponent = (
|
||||
handleOnSelect: any = undefined,
|
||||
props = optionsProps,
|
||||
allowDeselection?: boolean,
|
||||
isMultiSelect?: boolean,
|
||||
) => (
|
||||
<div style={{ height: "800px" }}>
|
||||
<Dropdown
|
||||
allowDeselection={allowDeselection}
|
||||
containerClassName="dropdown-container"
|
||||
isMultiSelect={isMultiSelect}
|
||||
onSelect={handleOnSelect}
|
||||
options={props.options}
|
||||
selected={isMultiSelect ? [props.selected] : props.selected}
|
||||
showLabelOnly={props.showLabelOnly}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
describe("<Dropdown /> - Keyboard Navigation", () => {
|
||||
it("Pressing tab should focus the component", () => {
|
||||
render(getTestComponent());
|
||||
userEvent.tab();
|
||||
expect(screen.getByRole("listbox")).toHaveFocus();
|
||||
});
|
||||
|
||||
// Tests various ways to open dropdown
|
||||
it.each(["{Enter}", " ", "{ArrowDown}", "{ArrowUp}"])(
|
||||
"Once focused, pressing '%s' should open dropdown",
|
||||
async (key) => {
|
||||
render(getTestComponent());
|
||||
expect(screen.queryByRole("option")).toBeNull();
|
||||
userEvent.tab();
|
||||
|
||||
userEvent.keyboard(key);
|
||||
expect(screen.queryAllByRole("option")).toHaveLength(3);
|
||||
|
||||
// Escape to close opened dropdown
|
||||
userEvent.keyboard("{Escape}");
|
||||
await waitForElementToBeRemoved(screen.getAllByRole("option"));
|
||||
},
|
||||
);
|
||||
|
||||
it("Pressing tab once dropdown is opened should close dropdown", async () => {
|
||||
render(getTestComponent());
|
||||
userEvent.tab();
|
||||
userEvent.keyboard("{Enter}");
|
||||
expect(screen.getAllByRole("option")).toHaveLength(3);
|
||||
userEvent.tab();
|
||||
await waitForElementToBeRemoved(screen.getAllByRole("option"));
|
||||
});
|
||||
|
||||
it("{ArrowDown} should select next item", () => {
|
||||
render(getTestComponent());
|
||||
userEvent.tab();
|
||||
expect(screen.getByRole("listbox")).toHaveTextContent("Primary");
|
||||
userEvent.keyboard("{Enter}");
|
||||
|
||||
// Make sure first item is selected by default
|
||||
expect(screen.getByRole("option", { selected: true })).toHaveTextContent(
|
||||
"Primary",
|
||||
);
|
||||
expect(screen.getByRole("listbox")).toHaveTextContent("Primary");
|
||||
|
||||
// Press ArrowDown and check results
|
||||
[
|
||||
"Secondary",
|
||||
"Tertiary",
|
||||
// ArrowDown on last item should select first item
|
||||
"Primary",
|
||||
].forEach((text) => {
|
||||
userEvent.keyboard("{ArrowDown}");
|
||||
expect(screen.getByRole("option", { selected: true })).toHaveTextContent(
|
||||
text,
|
||||
);
|
||||
expect(screen.getByRole("listbox")).toHaveTextContent(text);
|
||||
});
|
||||
});
|
||||
|
||||
it("{ArrowUp} should select previous item", () => {
|
||||
render(getTestComponent());
|
||||
userEvent.tab();
|
||||
expect(screen.getByRole("listbox")).toHaveTextContent("Primary");
|
||||
userEvent.keyboard("{Enter}");
|
||||
|
||||
// Make sure first item is selected by default
|
||||
expect(screen.getByRole("option", { selected: true })).toHaveTextContent(
|
||||
"Primary",
|
||||
);
|
||||
|
||||
// Press ArrowUp and check results
|
||||
[
|
||||
// ArrowUp on first item should select last item
|
||||
"Tertiary",
|
||||
"Secondary",
|
||||
"Primary",
|
||||
].forEach((text) => {
|
||||
userEvent.keyboard("{ArrowUp}");
|
||||
expect(screen.getByRole("option", { selected: true })).toHaveTextContent(
|
||||
text,
|
||||
);
|
||||
expect(screen.getByRole("listbox")).toHaveTextContent(text);
|
||||
});
|
||||
});
|
||||
|
||||
it("After selecting an option using arrow, {enter} or ' ' should trigger optionClick", () => {
|
||||
const handleOnSelect = jest.fn();
|
||||
render(getTestComponent(handleOnSelect));
|
||||
userEvent.tab();
|
||||
userEvent.keyboard("{Enter}");
|
||||
userEvent.keyboard("{ArrowDown}");
|
||||
userEvent.keyboard("{Enter}");
|
||||
expect(handleOnSelect).toHaveBeenLastCalledWith(
|
||||
optionsProps.options[1].value,
|
||||
optionsProps.options[1],
|
||||
true,
|
||||
);
|
||||
userEvent.keyboard("{Enter}");
|
||||
userEvent.keyboard("{ArrowDown}");
|
||||
userEvent.keyboard(" ");
|
||||
expect(handleOnSelect).toHaveBeenLastCalledWith(
|
||||
optionsProps.options[2].value,
|
||||
optionsProps.options[2],
|
||||
true,
|
||||
);
|
||||
});
|
||||
|
||||
it("After selecting an option using arrow, {Escape} should not trigger optionClick", () => {
|
||||
const handleOnSelect = jest.fn();
|
||||
render(getTestComponent());
|
||||
userEvent.tab();
|
||||
expect(screen.getByRole("listbox")).toHaveTextContent("Primary");
|
||||
userEvent.keyboard("{Enter}");
|
||||
userEvent.keyboard("{ArrowDown}");
|
||||
expect(screen.getByRole("listbox")).toHaveTextContent("Secondary");
|
||||
userEvent.keyboard("{Escape}");
|
||||
expect(screen.getByRole("listbox")).toHaveTextContent("Primary");
|
||||
expect(handleOnSelect).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe("<Dropdown isMultiSelect /> - Keyboard Navigation", () => {
|
||||
it("After selecting an option using arrow, {Enter} or ' ' should trigger optionClick", () => {
|
||||
const handleOnSelect = jest.fn();
|
||||
render(getTestComponent(handleOnSelect, optionsProps, undefined, true));
|
||||
userEvent.tab();
|
||||
userEvent.keyboard("{Enter}");
|
||||
userEvent.keyboard("{ArrowDown}");
|
||||
userEvent.keyboard("{Enter}");
|
||||
expect(handleOnSelect).toHaveBeenLastCalledWith(
|
||||
optionsProps.options[0].value,
|
||||
optionsProps.options[0],
|
||||
true,
|
||||
);
|
||||
userEvent.keyboard("{ArrowDown}");
|
||||
userEvent.keyboard(" ");
|
||||
expect(handleOnSelect).toHaveBeenLastCalledWith(
|
||||
optionsProps.options[1].value,
|
||||
optionsProps.options[1],
|
||||
true,
|
||||
);
|
||||
userEvent.keyboard("{ArrowDown}");
|
||||
userEvent.keyboard("{ArrowDown}");
|
||||
userEvent.keyboard("{Enter}");
|
||||
expect(handleOnSelect).toHaveBeenLastCalledWith(
|
||||
optionsProps.options[0].value,
|
||||
optionsProps.options[0],
|
||||
true,
|
||||
);
|
||||
userEvent.keyboard("{ArrowUp}");
|
||||
userEvent.keyboard("{Enter}");
|
||||
expect(handleOnSelect).toHaveBeenLastCalledWith(
|
||||
optionsProps.options[2].value,
|
||||
optionsProps.options[2],
|
||||
true,
|
||||
);
|
||||
userEvent.keyboard("{ArrowUp}");
|
||||
userEvent.keyboard(" ");
|
||||
expect(handleOnSelect).toHaveBeenLastCalledWith(
|
||||
optionsProps.options[1].value,
|
||||
optionsProps.options[1],
|
||||
true,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("<Dropdown /> - allowDeselection behaviour", () => {
|
||||
it("Test default allowDeselection behaviour", async () => {
|
||||
const handleOnSelect = jest.fn();
|
||||
render(getTestComponent(handleOnSelect));
|
||||
expect(screen.getByRole("listbox")).toHaveTextContent("Primary");
|
||||
|
||||
const dropdown = screen
|
||||
.getByRole("listbox")
|
||||
.querySelector(".bp3-popover-target");
|
||||
expect(dropdown).not.toBeNull();
|
||||
|
||||
// open dropdown
|
||||
fireEvent.click(dropdown as Element);
|
||||
expect(screen.queryAllByRole("option")).toHaveLength(3);
|
||||
|
||||
// click on Second Item
|
||||
fireEvent.click(screen.queryAllByRole("option")[1]);
|
||||
expect(screen.getByRole("option", { selected: true })).toHaveTextContent(
|
||||
optionsProps.options[1].label,
|
||||
);
|
||||
expect(screen.getByRole("listbox")).toHaveTextContent(
|
||||
optionsProps.options[1].label,
|
||||
);
|
||||
|
||||
// click on Second Item Again
|
||||
fireEvent.click(screen.queryAllByRole("option")[1]);
|
||||
expect(screen.getByRole("option", { selected: true })).toHaveTextContent(
|
||||
optionsProps.options[1].label,
|
||||
);
|
||||
expect(screen.getByRole("listbox")).toHaveTextContent(
|
||||
optionsProps.options[1].label,
|
||||
);
|
||||
expect(screen.getByRole("option", { selected: true })).not.toBeNull();
|
||||
});
|
||||
|
||||
it("Test allowDeselection = true behaviour", async () => {
|
||||
const handleOnSelect = jest.fn();
|
||||
render(getTestComponent(handleOnSelect, optionsProps, true));
|
||||
expect(screen.getByRole("listbox")).toHaveTextContent("Primary");
|
||||
|
||||
const dropdown = screen
|
||||
.getByRole("listbox")
|
||||
.querySelector(".bp3-popover-target");
|
||||
expect(dropdown).not.toBeNull();
|
||||
|
||||
// open dropdown
|
||||
fireEvent.click(dropdown as Element);
|
||||
expect(screen.queryAllByRole("option")).toHaveLength(3);
|
||||
|
||||
// click on Third Item
|
||||
fireEvent.click(screen.queryAllByRole("option")[2]);
|
||||
expect(screen.getByRole("option", { selected: true })).toHaveTextContent(
|
||||
optionsProps.options[2].label,
|
||||
);
|
||||
expect(screen.getByRole("listbox")).toHaveTextContent(
|
||||
optionsProps.options[2].label,
|
||||
);
|
||||
|
||||
// click on Third Item Again, that should unselect everything
|
||||
fireEvent.click(screen.queryAllByRole("option")[2]);
|
||||
expect(screen.queryByRole("option", { selected: true })).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe("<Dropdown /> - when the options is an empty array", () => {
|
||||
it("Hide options renderer when option list is empty", () => {
|
||||
const handleOnSelect = jest.fn();
|
||||
render(getTestComponent(handleOnSelect, noOptionsProps));
|
||||
|
||||
const dropdown = screen
|
||||
.getByRole("listbox")
|
||||
.querySelector(".bp3-popover-target");
|
||||
expect(dropdown).not.toBeNull();
|
||||
|
||||
// open dropdown
|
||||
fireEvent.click(dropdown as Element);
|
||||
expect(screen.queryByTestId("dropdown-options-wrapper")).toBeNull();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
import React from "react";
|
||||
import type { IconCollection } from "./index";
|
||||
import Icon, { IconSize } from "./index";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
|
||||
import MagicLineIcon from "remixicon-react/MagicLineIcon";
|
||||
import KeyIcon from "remixicon-react/Key2LineIcon";
|
||||
|
||||
describe("Enterprise icon", () => {
|
||||
[
|
||||
{
|
||||
name: "enterprise",
|
||||
input: ["enterprise", "magic-line"],
|
||||
actualIcon: <MagicLineIcon />,
|
||||
},
|
||||
{
|
||||
name: "key",
|
||||
input: ["key"],
|
||||
actualIcon: <KeyIcon />,
|
||||
},
|
||||
].forEach(({ actualIcon, input, name }: any) => {
|
||||
input.forEach((iconString: string) => {
|
||||
it(`${name}: ${iconString}`, () => {
|
||||
// render the icons
|
||||
render(
|
||||
<div data-testid="container">
|
||||
<Icon
|
||||
data-testid={"basically-a-span"}
|
||||
fillColor="#4E5D78"
|
||||
name={iconString as (typeof IconCollection)[number]}
|
||||
size={IconSize.XXL}
|
||||
/>
|
||||
{actualIcon}
|
||||
</div>,
|
||||
);
|
||||
const output = screen.queryByTestId("container");
|
||||
const outputChildren = output && output.children;
|
||||
const actual = outputChildren && outputChildren[0];
|
||||
const expected = outputChildren && outputChildren[1];
|
||||
const actualSvg = actual && actual.children && actual.children[0];
|
||||
const actualPath =
|
||||
actualSvg && actualSvg.children && actualSvg.children[0];
|
||||
const expectedSvg = expected;
|
||||
const expectedPath =
|
||||
expected && expected.children && expected.children[0];
|
||||
expect(actualSvg).toEqual(expectedSvg);
|
||||
expect(actualPath).toEqual(expectedPath);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import React from "react";
|
||||
import SegmentHeader from "./index";
|
||||
import { render, screen } from "test/testUtils";
|
||||
|
||||
describe("ListSegmentHeader", () => {
|
||||
it("renders properly with hr element", async () => {
|
||||
render(<SegmentHeader title={"uh title"} />);
|
||||
const header = await screen.queryByTestId("t--styled-segment-header");
|
||||
expect(header).not.toBe(null);
|
||||
const hr = await screen.queryByTestId("t--styled-segment-header-hr");
|
||||
expect(hr).not.toBe(null);
|
||||
expect(header?.innerHTML.includes("uh title")).toBeTruthy();
|
||||
});
|
||||
it("renders properly without hr element", async () => {
|
||||
render(<SegmentHeader hideStyledHr title={"tvo title"} />);
|
||||
const header = await screen.queryByTestId("t--styled-segment-header");
|
||||
expect(header).not.toBe(null);
|
||||
const hr = await screen.queryByTestId("t--styled-segment-header-hr");
|
||||
expect(hr).toBe(null);
|
||||
expect(header?.innerHTML.includes("tvo title")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import type { PropsWithChildren } from "react";
|
||||
import React, { useMemo } from "react";
|
||||
import type { CommonComponentProps } from "../types/common";
|
||||
import type { PopperBoundary } from "@blueprintjs/core/lib/esnext/components/popover/popoverSharedProps";
|
||||
import { PopoverPosition } from "@blueprintjs/core/lib/esnext/components/popover/popoverSharedProps";
|
||||
import { Tooltip } from "@blueprintjs/core/lib/esnext/components/tooltip/tooltip";
|
||||
import type { PopperBoundary } from "@blueprintjs/core/lib/esm/components/popover/popoverSharedProps";
|
||||
import { PopoverPosition } from "@blueprintjs/core/lib/esm/components/popover/popoverSharedProps";
|
||||
import { Tooltip } from "@blueprintjs/core/lib/esm/components/tooltip/tooltip";
|
||||
import type { Modifiers } from "popper.js";
|
||||
import type noop from "lodash/noop";
|
||||
import "./styles.module.css";
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@
|
|||
"author": "Valera Melnikov <valera@appsmith.com>, Pawan Kumar <pawan@appsmith.com>",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"lint:ci": "eslint --cache .",
|
||||
"prettier:ci": "prettier --check .",
|
||||
"test:unit": "jest"
|
||||
"lint": "eslint --cache .",
|
||||
"prettier": "prettier --check .",
|
||||
"test": "jest"
|
||||
},
|
||||
"dependencies": {
|
||||
"@capsizecss/core": "^3.1.0",
|
||||
|
|
|
|||
|
|
@ -6,9 +6,7 @@
|
|||
"license": "MIT",
|
||||
"scripts": {
|
||||
"storybook": "start-storybook -p 6006",
|
||||
"build": "build-storybook",
|
||||
"lint": "echo 'No lint specified'",
|
||||
"prettier": "echo 'No prettier specified'"
|
||||
"build": "build-storybook"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.12",
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user