chore: test setup + accordion tests #712

ahuth · 2023-11-29T16:22:21Z

🚨 SDS Hackday PR! 🚨

This PR does a couple things:

Removes the unused jest-canvas-mock and eslint-plugin-jest-playwright deps
Adds @testing-library/jest-dom so we can use its matchers
Makes the Accordion tests more comprehensive

I'm planning on going through more of the tests, but wanted to stop here and get the test setup and DOm matchers in.

Doesn't seem like we're using Playwright.

ahuth · 2023-11-29T16:22:37Z

.eslintrc.js

@@ -15,7 +15,6 @@ module.exports = {
    "plugin:jsx-a11y/recommended",
    "airbnb-typescript",
    "plugin:sonarjs/recommended",
-    "plugin:jest-playwright/recommended",


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

Are we adding any today?

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

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

ahuth · 2023-11-29T16:23:11Z

jest.common.config.js

@@ -1,7 +1,7 @@
 module.exports = {
  moduleDirectories: ["node_modules", "<rootDir>"],
  preset: "ts-jest",
-  setupFiles: ["jest-canvas-mock", "../../intersectionObserverMock.js"],
+  setupFilesAfterEnv: ["./jest.setup.ts"],


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).

Oh great idea thanks for doing this!

ahuth · 2023-11-29T16:24:04Z

packages/components/src/core/Accordion/index.test.tsx


 // 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);


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

ahuth · 2023-11-29T16:24:23Z

packages/components/src/core/Accordion/index.test.tsx


  it("renders accordion component", () => {
-    render(<Test {...Test.args} />);
+    render(<Test />);


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

ahuth · 2023-11-29T16:25:17Z

packages/data-viz/jest.setup.ts

@@ -0,0 +1,2 @@
+import "@testing-library/jest-dom";
+import "../../intersectionObserverMock";


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.

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

ehoops-cz · 2023-11-29T16:37:17Z

packages/components/src/core/Accordion/index.test.tsx

+    expect(accordionHeader).toHaveAttribute("aria-expanded", "false");
+
+    await waitFor(() => {
+      expect(screen.getByText(/Lorem ipsum/)).not.toBeVisible();


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

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.

ehoops-cz

Looks good! Left a couple questions.

tihuan

LGTM! Thanks for creating the first SDS Hackday PR, @ahuth 🔥 🏆

Only one tiny non-blocking nit!

tihuan · 2023-11-29T16:40:15Z

jest.common.config.js

@@ -1,7 +1,7 @@
 module.exports = {
  moduleDirectories: ["node_modules", "<rootDir>"],
  preset: "ts-jest",
-  setupFiles: ["jest-canvas-mock", "../../intersectionObserverMock.js"],
+  setupFilesAfterEnv: ["./jest.setup.ts"],


Oh great idea thanks for doing this!

tihuan · 2023-11-29T16:41:13Z

packages/components/src/core/Accordion/index.test.tsx

+
+    // Starts closed
+    const accordionHeader = screen.getByRole("button");
+    // eslint-disable-next-line sonarjs/no-duplicate-string


nit: should we extract duplicate string as a constant 🙏 ?

Sure, will do

tihuan · 2023-11-29T16:41:22Z

packages/components/src/core/Accordion/index.test.tsx

+    // Starts closed
+    const accordionHeader = screen.getByRole("button");
+    // eslint-disable-next-line sonarjs/no-duplicate-string
+    expect(accordionHeader).toHaveAttribute("aria-expanded", "false");
+    expect(screen.getByText(/Lorem ipsum/)).not.toBeVisible();
+
+    // It opens when clicked.
+    fireEvent.click(accordionHeader);
+    expect(accordionHeader).toHaveAttribute("aria-expanded", "true");
+    expect(screen.getByText(/Lorem ipsum/)).toBeVisible();
+
+    // And closes when clicked again.
+    fireEvent.click(accordionHeader);
+    expect(accordionHeader).toHaveAttribute("aria-expanded", "false");
+
+    await waitFor(() => {
+      expect(screen.getByText(/Lorem ipsum/)).not.toBeVisible();
+    });


so much better 🔥 Thank you!

tihuan · 2023-11-29T16:42:20Z

packages/data-viz/jest.setup.ts

@@ -0,0 +1,2 @@
+import "@testing-library/jest-dom";
+import "../../intersectionObserverMock";


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

ahuth · 2023-11-29T16:58:21Z

Thanks 🙏

ahuth added 2 commits November 29, 2023 11:07

chore: add @testing-library/jest-dom

af5df53

chore: remove eslint-plugin-jest-playwright

ea2ceed

Doesn't seem like we're using Playwright.

ahuth commented Nov 29, 2023

View reviewed changes

ahuth changed the title ~~SDS Hackday: test setup + accordion tests~~ chore test setup + accordion tests Nov 29, 2023

ahuth requested review from tihuan, masoudmanson, booc0mtaco and ehoops-cz November 29, 2023 16:27

ahuth changed the title ~~chore test setup + accordion tests~~ chore: test setup + accordion tests Nov 29, 2023

ehoops-cz reviewed Nov 29, 2023

View reviewed changes

ehoops-cz approved these changes Nov 29, 2023

View reviewed changes

tihuan approved these changes Nov 29, 2023

View reviewed changes

ahuth added 2 commits November 29, 2023 11:51

chore: make the Accordion tests more comprehensive

637b85f

chore: remove the unused jest-canvas-mock

c2fc647

ahuth force-pushed the ah-tests-1 branch from e537735 to c2fc647 Compare November 29, 2023 16:51

ahuth merged commit ac8a72b into main Nov 29, 2023
7 checks passed

ahuth deleted the ah-tests-1 branch November 29, 2023 16:58

masoudmanson added the Released label Oct 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: test setup + accordion tests #712

chore: test setup + accordion tests #712

ahuth commented Nov 29, 2023 •

edited

Loading

ahuth Nov 29, 2023

ehoops-cz Nov 29, 2023

ahuth Nov 29, 2023 •

edited

Loading

tihuan Nov 29, 2023

ahuth Nov 29, 2023

tihuan Nov 29, 2023

ahuth Nov 29, 2023

ahuth Nov 29, 2023

ahuth Nov 29, 2023

tihuan Nov 29, 2023

ehoops-cz Nov 29, 2023

ahuth Nov 29, 2023

ehoops-cz left a comment

tihuan left a comment

tihuan Nov 29, 2023

tihuan Nov 29, 2023

ahuth Nov 29, 2023

tihuan Nov 29, 2023

tihuan Nov 29, 2023

ahuth commented Nov 29, 2023

		@@ -0,0 +1,2 @@
		import "@testing-library/jest-dom";
		import "../../intersectionObserverMock";

chore: test setup + accordion tests #712

chore: test setup + accordion tests #712

Conversation

ahuth commented Nov 29, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ahuth Nov 29, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ehoops-cz left a comment

Choose a reason for hiding this comment

tihuan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ahuth commented Nov 29, 2023

ahuth commented Nov 29, 2023 •

edited

Loading

ahuth Nov 29, 2023 •

edited

Loading