Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: test setup + accordion tests #712

Merged
merged 4 commits into from
Nov 29, 2023
Merged

chore: test setup + accordion tests #712

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
af5df53
chore: add @testing-library/jest-dom
ahuth Nov 29, 2023
ea2ceed
chore: remove eslint-plugin-jest-playwright
ahuth Nov 29, 2023
637b85f
chore: make the Accordion tests more comprehensive
ahuth Nov 29, 2023
c2fc647
chore: remove the unused jest-canvas-mock
ahuth Nov 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ module.exports = {
"plugin:jsx-a11y/recommended",
"airbnb-typescript",
"plugin:sonarjs/recommended",
"plugin:jest-playwright/recommended",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As far as I can tell, there aren't any playwright tests.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we adding any today?

Copy link
Contributor Author

@ahuth ahuth Nov 29, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not mentioned in the spreadsheet.

Also, Playwright itself isn't in this repo. This is just an eslint plugin. Easy enough for someone to add if they do add Playwright later

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That sounds good! With Chromatics, maybe there's no immediate need to use Playwright. But if we do, we can add back later 👍

"plugin:storybook/recommended",
"plugin:prettier/recommended",
"plugin:react-hooks/recommended",
Expand Down
2 changes: 1 addition & 1 deletion jest.common.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
module.exports = {
moduleDirectories: ["node_modules", "<rootDir>"],
preset: "ts-jest",
setupFiles: ["jest-canvas-mock", "../../intersectionObserverMock.js"],
setupFilesAfterEnv: ["./jest.setup.ts"],
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed the unused jest-canvas-mock dep.

Also moved the intersectionObserver mock and the testing-library/jest-dom setup into a setup file (which makes the typescript integration easier).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh great idea thanks for doing this!

testEnvironment: "jsdom",
transform: {
"^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"@svgr/rollup": "^8.0.1",
"@svgr/webpack": "^8.0.1",
"@testing-library/dom": "^9.2.0",
"@testing-library/jest-dom": "^6.1.4",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^14.4.3",
"@types/babel__core": "^7.20.1",
Expand Down Expand Up @@ -71,7 +72,6 @@
"eslint-plugin-flowtype": "^8.0.3",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-jest": "^27.2.1",
"eslint-plugin-jest-playwright": "^0.9.0",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.32.2",
Expand Down
2 changes: 2 additions & 0 deletions packages/components/jest.setup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
import "@testing-library/jest-dom";
import "../../intersectionObserverMock";
42 changes: 27 additions & 15 deletions packages/components/src/core/Accordion/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,41 @@
import { generateSnapshots } from "@chanzuckerberg/story-utils";
import { composeStory } from "@storybook/react";
import { fireEvent, render, screen } from "@testing-library/react";
import * as snapshotTestStoryFile from "./index.stories";
import Meta, { Test as TestStory } from "./index.stories";
import { composeStories } from "@storybook/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import * as stories from "./index.stories";

// Returns a component that already contain all decorators from story level, meta level and global level.
const Test = composeStory(TestStory, Meta);
const { Test } = composeStories(stories);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we already have an import of the whole stories file, we can remove an import by using composeStories instead of composeStory.


describe("<Accordion />", () => {
generateSnapshots(snapshotTestStoryFile);
generateSnapshots(stories);

it("renders accordion component", () => {
render(<Test {...Test.args} />);
render(<Test />);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need to pass in the story's args. Using composeStory / composeStories already does that.

const accordionElement = screen.getByTestId("accordion");
expect(accordionElement).not.toBeNull();
});

it("opens accordion when clicked", () => {
it("opens and closes the accordion when clicked", async () => {
const ariaExpanded = "aria-expanded";

render(<Test />);
const accordionElement = screen.getByTestId("accordion");
fireEvent.click(accordionElement);
expect(
screen.getAllByText(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."
)
).not.toBeNull();

// Starts closed
const accordionHeader = screen.getByRole("button");
expect(accordionHeader).toHaveAttribute(ariaExpanded, "false");
expect(screen.getByText(/Lorem ipsum/)).not.toBeVisible();

// It opens when clicked.
fireEvent.click(accordionHeader);
expect(accordionHeader).toHaveAttribute(ariaExpanded, "true");
expect(screen.getByText(/Lorem ipsum/)).toBeVisible();

// And closes when clicked again.
fireEvent.click(accordionHeader);
expect(accordionHeader).toHaveAttribute(ariaExpanded, "false");

await waitFor(() => {
expect(screen.getByText(/Lorem ipsum/)).not.toBeVisible();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why does this line need the waitFor when the lines above do not need it?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems like going from expanded back to collapsed is async for some reason, and takes a couple ms to happen.

Not sure why it's different than the collapsed -> expanded case.

});
});
});
5 changes: 3 additions & 2 deletions packages/components/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,11 @@
},
"include": [
"src/**/*",
"../../.eslintrc.js"
"jest.setup.ts",
"../../.eslintrc.js",
],
"exclude": [
"node_modules"
],
"references": []
}
}
2 changes: 2 additions & 0 deletions packages/data-viz/jest.setup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
import "@testing-library/jest-dom";
import "../../intersectionObserverMock";
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like data-viz doesn't have any tests, so we could remove jest and its setup from it if we wanted to simplify things a bit.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think @masoudmanson will start adding tests in December for data-viz Heatmap, so let's keep it 💪 Thank you!

1 change: 0 additions & 1 deletion packages/data-viz/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@
"devDependencies": {
"@types/react": "^17.0.2",
"@types/react-dom": "^17.0.1",
"jest-canvas-mock": "^2.5.2",
"jest-environment-jsdom": "^29.6.2"
},
"dependencies": {
Expand Down
72 changes: 38 additions & 34 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@
# yarn lockfile v1


"@adobe/css-tools@^4.3.1":
version "4.3.1"
resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.1.tgz#abfccb8ca78075a2b6187345c26243c1a0842f28"
integrity sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==

"@ampproject/remapping@^2.2.0":
version "2.2.0"
resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
Expand Down Expand Up @@ -2138,6 +2143,13 @@
dependencies:
regenerator-runtime "^0.13.11"

"@babel/runtime@^7.9.2":
version "7.23.5"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.5.tgz#11edb98f8aeec529b82b211028177679144242db"
integrity sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==
dependencies:
regenerator-runtime "^0.14.0"

"@babel/template@^7.18.10", "@babel/template@^7.20.7", "@babel/template@^7.3.3":
version "7.20.7"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
Expand Down Expand Up @@ -5854,6 +5866,20 @@
lz-string "^1.5.0"
pretty-format "^27.0.2"

"@testing-library/jest-dom@^6.1.4":
version "6.1.4"
resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.1.4.tgz#cf0835c33bc5ef00befb9e672b1e3e6a710e30e3"
integrity sha512-wpoYrCYwSZ5/AxcrjLxJmCU6I5QAJXslEeSiMQqaWmP2Kzpd1LvF/qxmAIW2qposULGWq2gw30GgVNFLSc2Jnw==
dependencies:
"@adobe/css-tools" "^4.3.1"
"@babel/runtime" "^7.9.2"
aria-query "^5.0.0"
chalk "^3.0.0"
css.escape "^1.5.1"
dom-accessibility-api "^0.5.6"
lodash "^4.17.15"
redent "^3.0.0"

"@testing-library/react@^12.1.2":
version "12.1.5"
resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-12.1.5.tgz#bb248f72f02a5ac9d949dea07279095fa577963b"
Expand Down Expand Up @@ -8345,7 +8371,7 @@ [email protected]:
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==

color-name@^1.1.4, color-name@~1.1.4:
color-name@~1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
Expand Down Expand Up @@ -8907,16 +8933,16 @@ css-what@^6.0.1, css-what@^6.1.0:
resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==

css.escape@^1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==

cssesc@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==

cssfontparser@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/cssfontparser/-/cssfontparser-1.2.1.tgz#f4022fc8f9700c68029d542084afbaf425a3f3e3"
integrity sha512-6tun4LoZnj7VN6YeegOVb67KBX/7JJsqvj+pv3ZA7F878/eN33AbGa5b/S/wXxS/tcp8nc40xRUrsPlxIyNUPg==

csso@^5.0.5:
version "5.0.5"
resolved "https://registry.yarnpkg.com/csso/-/csso-5.0.5.tgz#f9b7fe6cc6ac0b7d90781bb16d5e9874303e2ca6"
Expand Down Expand Up @@ -9292,7 +9318,7 @@ doctrine@^3.0.0:
dependencies:
esutils "^2.0.2"

dom-accessibility-api@^0.5.9:
dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
version "0.5.16"
resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
Expand Down Expand Up @@ -9899,13 +9925,6 @@ eslint-plugin-import@^2.27.5:
semver "^6.3.0"
tsconfig-paths "^3.14.1"

eslint-plugin-jest-playwright@^0.9.0:
version "0.9.0"
resolved "https://registry.yarnpkg.com/eslint-plugin-jest-playwright/-/eslint-plugin-jest-playwright-0.9.0.tgz#39b071e11f36ea64e18efcaf40e5f596505d564f"
integrity sha512-BZP0/b/WeR35W2cp3Ru1xAHKgxLFk1YzPd2sdZqDSgp3ovbnf6xbvvSyJ8fUcpznJFkOxMwBOCsEOe1e21VNww==
dependencies:
eslint-plugin-playwright "^0.9.0"

eslint-plugin-jest@^27.2.1:
version "27.2.1"
resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-27.2.1.tgz#b85b4adf41c682ea29f1f01c8b11ccc39b5c672c"
Expand Down Expand Up @@ -9935,11 +9954,6 @@ eslint-plugin-jsx-a11y@^6.7.1:
object.fromentries "^2.0.6"
semver "^6.3.0"

eslint-plugin-playwright@^0.9.0:
version "0.9.0"
resolved "https://registry.yarnpkg.com/eslint-plugin-playwright/-/eslint-plugin-playwright-0.9.0.tgz#e14ac6c834f2704b293fc3f45cd40d771ec2e840"
integrity sha512-5bxAhiKjRASSgtQ4IipwtdesgQ8GT9m0PK61Uqxclu/TpiZS4eaAksydVeiiSPIOQph5GvuuLA7+oBS0WkWO6w==

eslint-plugin-prettier@^4.2.1:
version "4.2.1"
resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz#651cbb88b1dab98bfd42f017a12fa6b2d993f94b"
Expand Down Expand Up @@ -12278,14 +12292,6 @@ jake@^10.8.5:
filelist "^1.0.1"
minimatch "^3.0.4"

jest-canvas-mock@^2.5.2:
version "2.5.2"
resolved "https://registry.yarnpkg.com/jest-canvas-mock/-/jest-canvas-mock-2.5.2.tgz#7e21ebd75e05ab41c890497f6ba8a77f915d2ad6"
integrity sha512-vgnpPupjOL6+L5oJXzxTxFrlGEIbHdZqFU+LFNdtLxZ3lRDCl17FlTMM7IatoRQkrcyOTMlDinjUguqmQ6bR2A==
dependencies:
cssfontparser "^1.2.1"
moo-color "^1.0.2"

jest-changed-files@^29.5.0:
version "29.5.0"
resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-29.5.0.tgz#e88786dca8bf2aa899ec4af7644e16d9dcf9b23e"
Expand Down Expand Up @@ -14466,13 +14472,6 @@ modify-values@^1.0.0:
resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==

moo-color@^1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/moo-color/-/moo-color-1.0.3.tgz#d56435f8359c8284d83ac58016df7427febece74"
integrity sha512-i/+ZKXMDf6aqYtBhuOcej71YSlbjT3wCO/4H1j8rPvxDJEifdwgg5MaFyu6iYAT8GBZJg2z0dkgK4YMzvURALQ==
dependencies:
color-name "^1.1.4"

mri@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
Expand Down Expand Up @@ -16535,6 +16534,11 @@ regenerator-runtime@^0.13.11:
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==

regenerator-runtime@^0.14.0:
version "0.14.0"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==

regenerator-transform@^0.15.1:
version "0.15.1"
resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56"
Expand Down