Remove Cypress component tests (#19441)

.github/workflows/js-ci.yml

@@ -182,9 +182,6 @@ jobs:
       - run: npm run cy:check-types --workspace=${{ env.WORKSPACE }}
         working-directory: js
 
-      - run: npm run cy:run-component --workspace=${{ env.WORKSPACE }}
-        working-directory: js
-
   admin-ui-e2e:
     name: Admin UI E2E
     needs:

js/apps/admin-ui/cypress.config.mjs

@@ -22,11 +22,4 @@ export default defineConfig({
     slowTestThreshold: 30000,
     specPattern: "cypress/e2e/**/*.{js,jsx,ts,tsx}",
   },
-
-  component: {
-    devServer: {
-      framework: "react",
-      bundler: "vite",
-    },
-  },
 });

js/apps/admin-ui/cypress/component/ConfirmDialogModal.cy.tsx

@@ -1,30 +0,0 @@
-import { mount } from "cypress/react";
-import { ConfirmDialogModal } from "../../src/components/confirm-dialog/ConfirmDialog";
-
-describe("ConfirmDialogModal", () => {
-  const bodySelector = "#pf-modal-part-2";
-
-  it("should mount", () => {
-    const toggle = cy.spy().as("toggleDialogSpy");
-    const confirm = cy.spy().as("onConfirmSpy");
-
-    mount(
-      <ConfirmDialogModal
-        continueButtonLabel="Yes"
-        cancelButtonLabel="No"
-        titleKey="Hello"
-        open
-        toggleDialog={toggle}
-        onConfirm={confirm}
-      >
-        Some text
-      </ConfirmDialogModal>
-    );
-
-    cy.get(bodySelector).should("have.text", "Some text");
-    cy.findByTestId("confirm").click();
-    cy.get("@onConfirmSpy").should("have.been.called");
-    cy.findAllByTestId("cancel").click();
-    cy.get("@toggleDialogSpy").should("have.been.called");
-  });
-});

js/apps/admin-ui/cypress/component/KeyValueInput.cy.tsx

@@ -1,125 +0,0 @@
-import {
-  ActionGroup,
-  Button,
-  Form,
-  Page,
-  PageSection,
-} from "@patternfly/react-core";
-import { mount } from "cypress/react";
-import { useEffect } from "react";
-import { FormProvider, useForm } from "react-hook-form";
-import { KeyValueType } from "../../src/components/key-value-form/key-value-convert";
-import { KeyValueInput } from "../../src/components/key-value-form/KeyValueInput";
-
-type KeyValueInputTestProps = {
-  submit: (values: any) => void;
-  defaultValues?: KeyValueType[];
-};
-
-const KeyValueInputTest = ({
-  submit,
-  defaultValues,
-}: KeyValueInputTestProps) => {
-  const form = useForm();
-
-  useEffect(() => {
-    form.setValue("name", defaultValues || "");
-  }, [form.setValue]);
-
-  return (
-    <Page>
-      <PageSection variant="light">
-        <FormProvider {...form}>
-          <Form isHorizontal onSubmit={form.handleSubmit(submit)}>
-            <KeyValueInput name="name" />
-            <ActionGroup>
-              <Button data-testid="save" type="submit">
-                Save
-              </Button>
-            </ActionGroup>
-          </Form>
-        </FormProvider>
-      </PageSection>
-    </Page>
-  );
-};
-
-describe("KeyValueInput", () => {
-  it("basic interaction", () => {
-    const submit = cy.spy().as("onSubmit");
-    mount(<KeyValueInputTest submit={submit} />);
-
-    cy.get("input").should("exist");
-    cy.findAllByTestId("name-add-row").should("exist").should("be.disabled");
-
-    cy.findAllByTestId("name[0].key").type("key");
-    cy.findAllByTestId("name[0].value").type("value");
-
-    cy.findAllByTestId("name-add-row").should("be.enabled");
-    cy.findAllByTestId("save").click();
-    cy.get("@onSubmit").should("have.been.calledWith", {
-      name: [{ key: "key", value: "value" }],
-    });
-  });
-
-  it("from existing values", () => {
-    const submit = cy.spy().as("onSubmit");
-    mount(
-      <KeyValueInputTest
-        submit={submit}
-        defaultValues={[{ key: "key1", value: "value1" }]}
-      />
-    );
-
-    cy.findAllByTestId("name[0].key").should("have.value", "key1");
-    cy.findAllByTestId("name[0].value").should("have.value", "value1");
-
-    cy.findAllByTestId("name-add-row").should("be.enabled").click();
-
-    cy.findAllByTestId("name[1].key").type("key2");
-    cy.findAllByTestId("name[1].value").type("value2");
-    cy.findAllByTestId("save").click();
-    cy.get("@onSubmit").should("have.been.calledWith", {
-      name: [
-        { key: "key1", value: "value1" },
-        { key: "key2", value: "value2" },
-      ],
-    });
-  });
-
-  it("leaving it empty", () => {
-    const submit = cy.spy().as("onSubmit");
-    mount(<KeyValueInputTest submit={submit} />);
-
-    cy.get("input").should("exist");
-    cy.findAllByTestId("save").click();
-    cy.get("@onSubmit").should("have.been.calledWith", {
-      name: [{ key: "", value: "" }],
-    });
-  });
-
-  it("deleting values", () => {
-    const submit = cy.spy().as("onSubmit");
-    mount(
-      <KeyValueInputTest
-        submit={submit}
-        defaultValues={[
-          { key: "key1", value: "value1" },
-          { key: "key2", value: "value2" },
-          { key: "key3", value: "value3" },
-          { key: "key4", value: "value4" },
-        ]}
-      />
-    );
-
-    cy.findAllByTestId("name[2].remove").click();
-    cy.findAllByTestId("name[1].remove").click();
-    cy.findAllByTestId("save").click();
-    cy.get("@onSubmit").should("have.been.calledWith", {
-      name: [
-        { key: "key1", value: "value1" },
-        { key: "key4", value: "value4" },
-      ],
-    });
-  });
-});

js/apps/admin-ui/cypress/component/MultiLineInput.cy.tsx

@@ -1,155 +0,0 @@
-import {
-  ActionGroup,
-  Button,
-  Form,
-  FormGroup,
-  Page,
-  PageSection,
-} from "@patternfly/react-core";
-import { mount } from "cypress/react";
-import { useEffect } from "react";
-import { FormProvider, useForm } from "react-hook-form";
-import {
-  MultiLineInput,
-  MultiLineInputProps,
-} from "../../src/components/multi-line-input/MultiLineInput";
-
-type MultiLineInputTestProps = Omit<MultiLineInputProps, "name"> & {
-  submit: (values: any) => void;
-  defaultValues?: string | string[];
-};
-
-describe("MultiLineInput", () => {
-  const MultiLineInputTest = ({
-    submit,
-    defaultValues,
-    ...rest
-  }: MultiLineInputTestProps) => {
-    const form = useForm();
-
-    useEffect(() => {
-      form.setValue("name", defaultValues || "");
-    }, [form.setValue]);
-
-    return (
-      <Page>
-        <PageSection variant="light">
-          <FormProvider {...form}>
-            <Form isHorizontal onSubmit={form.handleSubmit(submit)}>
-              <FormGroup label="Test field" fieldId="name">
-                <MultiLineInput
-                  id="name"
-                  name="name"
-                  aria-label="test"
-                  addButtonLabel="Add"
-                  {...rest}
-                />
-              </FormGroup>
-              <ActionGroup>
-                <Button data-testid="save" type="submit">
-                  Save
-                </Button>
-              </ActionGroup>
-            </Form>
-          </FormProvider>
-        </PageSection>
-      </Page>
-    );
-  };
-
-  it("basic interaction", () => {
-    const submit = cy.spy().as("onSubmit");
-    mount(<MultiLineInputTest submit={submit} />);
-
-    cy.get("input").should("exist");
-    cy.findByTestId("name0").type("value");
-    cy.findAllByTestId("save").click();
-    cy.get("@onSubmit").should("have.been.calledWith", { name: ["value"] });
-  });
-
-  it("add values", () => {
-    const submit = cy.spy().as("onSubmit");
-    mount(<MultiLineInputTest submit={submit} />);
-
-    cy.findByTestId("name0").type("value");
-    cy.findByTestId("addValue").click();
-    cy.findByTestId("name1").type("value1");
-    cy.findByTestId("addValue").click();
-    cy.findByTestId("name2").type("value2");
-    cy.findAllByTestId("save").click();
-    cy.get("@onSubmit").should("have.been.calledWith", {
-      name: ["value", "value1", "value2"],
-    });
-  });
-
-  it("from existing values as string", () => {
-    const submit = cy.spy().as("onSubmit");
-    mount(
-      <MultiLineInputTest
-        submit={submit}
-        defaultValues="one##two##three"
-        stringify
-      />
-    );
-
-    cy.findByTestId("name0").should("have.value", "one");
-    cy.findByTestId("name1").should("have.value", "two");
-    cy.findByTestId("name2").should("have.value", "three");
-    cy.findByTestId("addValue").click();
-    cy.findByTestId("name3").type("four");
-    cy.findAllByTestId("save").click();
-    cy.get("@onSubmit").should("have.been.calledWith", {
-      name: "one##two##three##four",
-    });
-  });
-
-  it("from existing values as string[]", () => {
-    const submit = cy.spy().as("onSubmit");
-    mount(
-      <MultiLineInputTest
-        submit={submit}
-        defaultValues={["one", "two", "three"]}
-      />
-    );
-
-    cy.findByTestId("name0").should("have.value", "one");
-    cy.findByTestId("name1").should("have.value", "two");
-    cy.findByTestId("name2").should("have.value", "three");
-    cy.findByTestId("remove0").click();
-    cy.findAllByTestId("save").click();
-    cy.get("@onSubmit").should("have.been.calledWith", {
-      name: ["two", "three"],
-    });
-  });
-
-  it("remove test", () => {
-    const submit = cy.spy().as("onSubmit");
-    mount(
-      <MultiLineInputTest
-        submit={submit}
-        defaultValues={["one", "two", "three", "four", "five", "six"]}
-      />
-    );
-
-    cy.findByTestId("remove0").click();
-    cy.findByTestId("remove2").click();
-    cy.findByTestId("remove2").click();
-    cy.findAllByTestId("save").click();
-    cy.get("@onSubmit").should("have.been.calledWith", {
-      name: ["two", "three", "six"],
-    });
-  });
-
-  it("add / update test", () => {
-    const submit = cy.spy().as("onSubmit");
-    mount(<MultiLineInputTest submit={submit} defaultValues={["one"]} />);
-
-    cy.findByTestId("name0").type("-one");
-    cy.findByTestId("addValue").click();
-    cy.findByTestId("name1").type("twos");
-    cy.findAllByTestId("save").click();
-    cy.get("@onSubmit").should("have.been.calledWith", {
-      name: ["one-one", "twos"],
-    });
-  });
-});

js/apps/admin-ui/cypress/fixtures/example.json

@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}

js/apps/admin-ui/cypress/support/component-index.html

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>Components App</title>
-  </head>
-  <body>
-    <div data-cy-root></div>
-  </body>
-</html>

js/apps/admin-ui/cypress/support/component.ts

@@ -1,16 +0,0 @@
-// ***********************************************************
-// This example support/component.ts is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-import "@patternfly/react-core/dist/styles/base.css";
-import "./commands";

js/apps/admin-ui/package.json

@@ -8,7 +8,6 @@
     "test": "wireit",
     "cy:open": "cypress open --e2e --browser chrome",
     "cy:run": "cypress run --browser chrome",
-    "cy:run-component": "wireit",
     "cy:check-types": "wireit",
     "cy:ldap-server": "ldap-server-mock --conf=./cypress/fixtures/ldap/server.json --database=./cypress/fixtures/ldap/users.json"
   },
@@ -53,12 +52,6 @@
         "../../libs/keycloak-admin-client:build"
       ]
     },
-    "cy:run-component": {
-      "command": "cypress run --browser chrome --component",
-      "dependencies": [
-        "../../libs/keycloak-admin-client:build"
-      ]
-    },
     "cy:check-types": {
       "command": "tsc --project cypress/tsconfig.json",
       "dependencies": [