From 468a84cc5b6c4e37f754c11d6c5afa41cee1f600 Mon Sep 17 00:00:00 2001
From: Valera Melnikov <valera@appsmith.com>
Date: Mon, 15 May 2023 17:23:24 +0300
Subject: [PATCH] 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>
---
 .../design-system/widgets-old/package.json    |  12 +-
 .../widgets-old/src/Button/Button.test.tsx    |  46 ---
 .../src/Dropdown/Dropdown.test.tsx            | 293 ------------------
 .../widgets-old/src/Icon/Icon.test.tsx        |  51 ---
 .../ListSegmentHeader.test.tsx                |  22 --
 .../widgets-old/src/Tooltip/index.tsx         |   6 +-
 .../design-system/widgets/package.json        |   6 +-
 app/client/packages/storybook/package.json    |   4 +-
 8 files changed, 9 insertions(+), 431 deletions(-)
 delete mode 100644 app/client/packages/design-system/widgets-old/src/Button/Button.test.tsx
 delete mode 100644 app/client/packages/design-system/widgets-old/src/Dropdown/Dropdown.test.tsx
 delete mode 100644 app/client/packages/design-system/widgets-old/src/Icon/Icon.test.tsx
 delete mode 100644 app/client/packages/design-system/widgets-old/src/ListSegmentHeader/ListSegmentHeader.test.tsx

diff --git a/app/client/packages/design-system/widgets-old/package.json b/app/client/packages/design-system/widgets-old/package.json
index 0708a2954a..b044092976 100644
--- a/app/client/packages/design-system/widgets-old/package.json
+++ b/app/client/packages/design-system/widgets-old/package.json
@@ -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",
diff --git a/app/client/packages/design-system/widgets-old/src/Button/Button.test.tsx b/app/client/packages/design-system/widgets-old/src/Button/Button.test.tsx
deleted file mode 100644
index db0dd79888..0000000000
--- a/app/client/packages/design-system/widgets-old/src/Button/Button.test.tsx
+++ /dev/null
@@ -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);
-  });
-});
diff --git a/app/client/packages/design-system/widgets-old/src/Dropdown/Dropdown.test.tsx b/app/client/packages/design-system/widgets-old/src/Dropdown/Dropdown.test.tsx
deleted file mode 100644
index f122a186b3..0000000000
--- a/app/client/packages/design-system/widgets-old/src/Dropdown/Dropdown.test.tsx
+++ /dev/null
@@ -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();
-  });
-});
diff --git a/app/client/packages/design-system/widgets-old/src/Icon/Icon.test.tsx b/app/client/packages/design-system/widgets-old/src/Icon/Icon.test.tsx
deleted file mode 100644
index eb02259818..0000000000
--- a/app/client/packages/design-system/widgets-old/src/Icon/Icon.test.tsx
+++ /dev/null
@@ -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);
-      });
-    });
-  });
-});
diff --git a/app/client/packages/design-system/widgets-old/src/ListSegmentHeader/ListSegmentHeader.test.tsx b/app/client/packages/design-system/widgets-old/src/ListSegmentHeader/ListSegmentHeader.test.tsx
deleted file mode 100644
index 349d3350fc..0000000000
--- a/app/client/packages/design-system/widgets-old/src/ListSegmentHeader/ListSegmentHeader.test.tsx
+++ /dev/null
@@ -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();
-  });
-});
diff --git a/app/client/packages/design-system/widgets-old/src/Tooltip/index.tsx b/app/client/packages/design-system/widgets-old/src/Tooltip/index.tsx
index 9add107d2b..d5af97850b 100644
--- a/app/client/packages/design-system/widgets-old/src/Tooltip/index.tsx
+++ b/app/client/packages/design-system/widgets-old/src/Tooltip/index.tsx
@@ -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";
diff --git a/app/client/packages/design-system/widgets/package.json b/app/client/packages/design-system/widgets/package.json
index ce8dea0427..07c402a398 100644
--- a/app/client/packages/design-system/widgets/package.json
+++ b/app/client/packages/design-system/widgets/package.json
@@ -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",
diff --git a/app/client/packages/storybook/package.json b/app/client/packages/storybook/package.json
index 9df3cf6f42..4003d2a2b6 100644
--- a/app/client/packages/storybook/package.json
+++ b/app/client/packages/storybook/package.json
@@ -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",