Please check if the PR fulfills these requirements
[ ] The commit message follows semantic commit message guidelines
[ ] The changes are documented in component docs and changelog
[ ] The ESLint plugin has been updated if a new component is added
[ ] Test have been added or modified, if appropriate
[ ] Has been verified locally
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");
});
the nyc merge command is used to combine coverage reports to upload to codecov, but an alternative might be to run and upload the e2e and component tests individually and leverage codecov's merge feature
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:
If we wanted to get test coverage on this, we would currently have to render
PleaseNoRedLink
in the docs playground withcolor="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:Does this PR introduce a breaking change?
No
Other information:
nyc merge
command is used to combine coverage reports to upload to codecov, but an alternative might be to run and upload the e2e and component tests individually and leverage codecov's merge feature