cisco-sbg-ui / atomic-react

https://atomic-react.security.cisco.com
2 stars 5 forks source link

test: add support for cypress component testing #1208

Closed brennarvo closed 2 years ago

brennarvo commented 2 years ago

Please check if the PR fulfills these requirements

What kind of change does this PR introduce? Enables unit testing coverage for Atomic React components and migrates ESLint to the integrated Next.js ESLint configuration.

What is the current behavior? To test a component in Atomic React, in needs to exist in the documentation website to serve as an integration test with Cypress. While this is sufficient for most test cases, it can be problematic when trying to get coverage on edge-case scenarios that wouldn't likely be written in the official documentation.

A contrived example is a link component that cannot be styled red:

const PleaseNoRedLink = (props) => {
  const { color, ...restProps } = props;

  if (color === "red") {
    color = "blue";
  }

  return <a style={{ color }} {...restProps} />
}

If we wanted to get test coverage on this, we would currently have to render PleaseNoRedLink in the docs playground with color="red", i.e., <PleaseNoRedLink color="red" />.

What is the new behavior (if this is a feature change)? This PR will allow a developer to add a PleaseNoRedLink.ct.js (ct is short for component test) file to test this scenario instead of having to possibly add bloat to documentation for testing purposes:

// PleaseNoRedLink.ct.js
import {mount} from "@cypress/react";
import AApp from "../../AApp";
import PleaseNoRedLink from "../PleaseNoRedLink";

it("should default to blue when red is passed", () => {
  mount(
    <AApp>
        <PleaseNoRedLink color="red">
          Informational Alert
        </PleaseNoRedLink>
    </AApp>
  );
  cy.get("a").should("have.css", "color", "blue");
});

Does this PR introduce a breaking change?

No

Other information:

vercel[bot] commented 2 years ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
atomic-react ✅ Ready (Inspect) Visit Preview May 9, 2022 at 4:44PM (UTC)