From 0f1ad0beb923f5ac6c6ef2e5fbb902b50a3853ca Mon Sep 17 00:00:00 2001 From: nbarlowATI Date: Fri, 18 Mar 2022 18:45:40 +0000 Subject: [PATCH 1/5] some progress towards making tests test stuff --- frontend/.babelrc | 7 ++++++- frontend/package-lock.json | 17 +++++++++++++++++ frontend/package.json | 1 + .../src/components/tests/CaseContainer.test.js | 11 +++++++++-- .../src/components/tests/CaseCreator.test.js | 12 +++++++++--- .../src/components/tests/CaseSelector.test.js | 7 +++++++ frontend/src/components/tests/Mermaid.test.js | 9 ++++++--- 7 files changed, 55 insertions(+), 9 deletions(-) diff --git a/frontend/.babelrc b/frontend/.babelrc index 66f4fbd2..598f062f 100644 --- a/frontend/.babelrc +++ b/frontend/.babelrc @@ -1,4 +1,9 @@ { "presets": ["@babel/preset-env", "@babel/preset-react"], - "plugins": ["dynamic-import-node"] + "plugins": ["dynamic-import-node"], + "env": { + "test": { + "plugins": ["transform-require-context"] + } + } } diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 58b4334e..ce66ce2b 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -11,6 +11,7 @@ "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", "babel-plugin-dynamic-import-node": "^2.3.3", + "babel-plugin-transform-require-context": "^0.1.1", "grommet": "^2.20.1", "grommet-icons": "^4.7.0", "jest-transform-stub": "^2.0.0", @@ -4526,6 +4527,14 @@ "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz", "integrity": "sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==" }, + "node_modules/babel-plugin-transform-require-context": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-require-context/-/babel-plugin-transform-require-context-0.1.1.tgz", + "integrity": "sha512-4ceqYOtzgmq4/QsB8dP7pUrUOCjY/jrRYdt7YkIOWHxtGDQbcf6YZDyLCiPQf6KsEIcIbSQiTRXOsbLiuJfgNQ==", + "dependencies": { + "@babel/template": "7" + } + }, "node_modules/babel-preset-current-node-syntax": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz", @@ -31808,6 +31817,14 @@ "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz", "integrity": "sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==" }, + "babel-plugin-transform-require-context": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-require-context/-/babel-plugin-transform-require-context-0.1.1.tgz", + "integrity": "sha512-4ceqYOtzgmq4/QsB8dP7pUrUOCjY/jrRYdt7YkIOWHxtGDQbcf6YZDyLCiPQf6KsEIcIbSQiTRXOsbLiuJfgNQ==", + "requires": { + "@babel/template": "7" + } + }, "babel-preset-current-node-syntax": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 62621e6e..08b3e7a7 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -7,6 +7,7 @@ "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", "babel-plugin-dynamic-import-node": "^2.3.3", + "babel-plugin-transform-require-context": "^0.1.1", "grommet": "^2.20.1", "grommet-icons": "^4.7.0", "jest-transform-stub": "^2.0.0", diff --git a/frontend/src/components/tests/CaseContainer.test.js b/frontend/src/components/tests/CaseContainer.test.js index d8e4bcb6..79fd6d4e 100644 --- a/frontend/src/components/tests/CaseContainer.test.js +++ b/frontend/src/components/tests/CaseContainer.test.js @@ -4,9 +4,16 @@ import React from "react"; import { Link } from "react-router-dom"; import CaseContainer from "../CaseContainer.js"; +global.fetch = jest.fn(() => + Promise.resolve({ + json: () => + Promise.resolve({ id: 1, name: "Test case", description: "", goals: [] }), + }) +); + test("renders main screen", () => { - //render(); - // const linkElement = screen.getByText(/Ethical Assurance Platform/i); + render(); + // const linkElement = screen.getByText("Ethical"); // expect(linkElement).toBeInTheDocument(); //expect(true); }); diff --git a/frontend/src/components/tests/CaseCreator.test.js b/frontend/src/components/tests/CaseCreator.test.js index 4d7f56bc..412b7c84 100644 --- a/frontend/src/components/tests/CaseCreator.test.js +++ b/frontend/src/components/tests/CaseCreator.test.js @@ -4,9 +4,15 @@ import React from "react"; import { Link } from "react-router-dom"; import CaseCreator from "../CaseCreator.js"; +const mockedUsedNavigate = jest.fn(); +jest.mock("react-router-dom", () => ({ + ...jest.requireActual("react-router-dom"), + useNavigate: () => mockedUsedNavigate, +})); + test("renders case creator layer", () => { - // render(); - // const textElement = screen.getByText(/Assurance/i); - // expect(textElement).toBeInTheDocument(); + render(); + const textElement = screen.getByText(/Create a new assurance case/i); + expect(textElement).toBeInTheDocument(); expect(true); }); diff --git a/frontend/src/components/tests/CaseSelector.test.js b/frontend/src/components/tests/CaseSelector.test.js index 9666c5ec..ed687c56 100644 --- a/frontend/src/components/tests/CaseSelector.test.js +++ b/frontend/src/components/tests/CaseSelector.test.js @@ -1,8 +1,15 @@ import { render, screen } from "@testing-library/react"; import React from "react"; import { Link } from "react-router-dom"; +import "regenerator-runtime/runtime"; import CaseSelector from "../CaseSelector.js"; +const mockedUsedNavigate = jest.fn(); +jest.mock("react-router-dom", () => ({ + ...jest.requireActual("react-router-dom"), + useNavigate: () => mockedUsedNavigate, +})); + test("renders selector screen", () => { //render(); // const linkElement = screen.getByText(/Ethical Assurance Platform/i); diff --git a/frontend/src/components/tests/Mermaid.test.js b/frontend/src/components/tests/Mermaid.test.js index 8f717f2a..c38bcea3 100644 --- a/frontend/src/components/tests/Mermaid.test.js +++ b/frontend/src/components/tests/Mermaid.test.js @@ -4,8 +4,11 @@ import { Link } from "react-router-dom"; import Mermaid from "../Mermaid.js"; test("renders chart", () => { - render(); - // const linkElement = screen.getByText(/Select an existing case/i); - //expect(linkElement).toBeInTheDocument(); + render( + + ); + //expect(screen.getByRole('link')).toHaveAttribute('href', 'https://www.test.com'); + // const linkElement = screen.getByText(/TestGoal/i); + // expect(linkElement).toBeInTheDocument(); expect(true); }); From 4c12641af85f489f5a8dd771297408ccd1d19bae Mon Sep 17 00:00:00 2001 From: nbarlowATI Date: Mon, 21 Mar 2022 16:51:51 +0000 Subject: [PATCH 2/5] add some tests --- .../components/tests/CaseContainer.test.js | 19 +++++++---- .../src/components/tests/CaseSelector.test.js | 25 ++++++++++---- .../src/components/tests/ItemEditor.test.js | 34 +++++++++++-------- .../src/components/tests/ItemViewer.test.js | 24 +++++++++---- 4 files changed, 69 insertions(+), 33 deletions(-) diff --git a/frontend/src/components/tests/CaseContainer.test.js b/frontend/src/components/tests/CaseContainer.test.js index 79fd6d4e..da9db155 100644 --- a/frontend/src/components/tests/CaseContainer.test.js +++ b/frontend/src/components/tests/CaseContainer.test.js @@ -1,8 +1,9 @@ -import { render, screen } from "@testing-library/react"; +import { render, screen, waitFor } from "@testing-library/react"; import "regenerator-runtime/runtime"; import React from "react"; import { Link } from "react-router-dom"; import CaseContainer from "../CaseContainer.js"; +import "@testing-library/jest-dom"; global.fetch = jest.fn(() => Promise.resolve({ @@ -11,9 +12,15 @@ global.fetch = jest.fn(() => }) ); -test("renders main screen", () => { - render(); - // const linkElement = screen.getByText("Ethical"); - // expect(linkElement).toBeInTheDocument(); - //expect(true); +test("renders loading screen", () => { + render(); + const textElement = screen.getByText("loading"); + expect(textElement).toBeInTheDocument(); +}); + +test("renders case view", async () => { + render(); + await waitFor(() => + expect(screen.getByText("Test case")).toBeInTheDocument() + ); }); diff --git a/frontend/src/components/tests/CaseSelector.test.js b/frontend/src/components/tests/CaseSelector.test.js index ed687c56..8664a0f4 100644 --- a/frontend/src/components/tests/CaseSelector.test.js +++ b/frontend/src/components/tests/CaseSelector.test.js @@ -1,8 +1,9 @@ -import { render, screen } from "@testing-library/react"; +import { render, screen, waitFor } from "@testing-library/react"; import React from "react"; import { Link } from "react-router-dom"; import "regenerator-runtime/runtime"; import CaseSelector from "../CaseSelector.js"; +import "@testing-library/jest-dom"; const mockedUsedNavigate = jest.fn(); jest.mock("react-router-dom", () => ({ @@ -10,9 +11,21 @@ jest.mock("react-router-dom", () => ({ useNavigate: () => mockedUsedNavigate, })); -test("renders selector screen", () => { - //render(); - // const linkElement = screen.getByText(/Ethical Assurance Platform/i); - // expect(linkElement).toBeInTheDocument(); - expect(true); +global.fetch = jest.fn(() => + Promise.resolve({ + json: () => + Promise.resolve([ + { id: 1, name: "Test case 1" }, + { id: 2, name: "Test case 2" }, + ]), + }) +); + +test("renders selector screen", async () => { + render(); + await waitFor(() => + expect( + screen.getByPlaceholderText("Select or create a case") + ).toBeInTheDocument() + ); }); diff --git a/frontend/src/components/tests/ItemEditor.test.js b/frontend/src/components/tests/ItemEditor.test.js index 93dda49d..a43b0b42 100644 --- a/frontend/src/components/tests/ItemEditor.test.js +++ b/frontend/src/components/tests/ItemEditor.test.js @@ -1,21 +1,25 @@ -import { render, screen } from "@testing-library/react"; +import { render, screen, waitFor } from "@testing-library/react"; import "@testing-library/jest-dom"; import "regenerator-runtime/runtime"; import React from "react"; -import { Link } from "react-router-dom"; import ItemEditor from "../ItemEditor.js"; -test("renders item editor layer", (done) => { - //render(); - //try { - // const textElement = screen.getByText(/TopLevelNormativeGoal/i); - // expect(textElement).toBeInTheDocument(); - // done() - //} catch (error) { - // done(error) - // } - //const textElement = screen.getByText(/TopLevelNormativeGoal/i); - //expect(textElement).toBeInTheDocument(); - done(); - expect(true); +global.fetch = jest.fn(() => + Promise.resolve({ + json: () => + Promise.resolve({ + id: 1, + name: "Test goal", + short_description: "short", + long_description: "long", + keywords: "key", + }), + }) +); + +test("renders item editor layer", async () => { + render(); + await waitFor(() => + expect(screen.getByPlaceholderText("Test goal")).toBeInTheDocument() + ); }); diff --git a/frontend/src/components/tests/ItemViewer.test.js b/frontend/src/components/tests/ItemViewer.test.js index 62705271..61104cce 100644 --- a/frontend/src/components/tests/ItemViewer.test.js +++ b/frontend/src/components/tests/ItemViewer.test.js @@ -1,13 +1,25 @@ -import { render, screen } from "@testing-library/react"; +import { render, screen, waitFor } from "@testing-library/react"; import "@testing-library/jest-dom"; import "regenerator-runtime/runtime"; import React from "react"; import { Link } from "react-router-dom"; import ItemViewer from "../ItemViewer.js"; +import "@testing-library/jest-dom"; + +global.fetch = jest.fn(() => + Promise.resolve({ + json: () => + Promise.resolve({ + id: 1, + name: "Test goal 1", + short_description: "Test short", + long_description: "Test long", + keywords: "Test keywords", + }), + }) +); -test("renders item viewer layer", () => { - //render(); - //const textElement = screen.getByText(/TopLevelNormativeGoal/i); - //expect(textElement).toBeInTheDocument(); - expect(true); +test("renders item viewer layer", async () => { + render(); + // await waitFor(() => expect(screen.findByText("Loading")).toBeInTheDocument()); }); From e2154b7d4a3fdc9827872c44645d92be4bfd756f Mon Sep 17 00:00:00 2001 From: nbarlowATI Date: Mon, 21 Mar 2022 17:33:45 +0000 Subject: [PATCH 3/5] add some tests --- .../src/components/tests/ItemViewer.test.js | 9 ++++++--- frontend/src/components/tests/Mermaid.test.js | 17 ++++++++--------- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/tests/ItemViewer.test.js b/frontend/src/components/tests/ItemViewer.test.js index 61104cce..3dd5c09d 100644 --- a/frontend/src/components/tests/ItemViewer.test.js +++ b/frontend/src/components/tests/ItemViewer.test.js @@ -1,6 +1,7 @@ import { render, screen, waitFor } from "@testing-library/react"; import "@testing-library/jest-dom"; import "regenerator-runtime/runtime"; +import { act } from "react-dom/test-utils"; import React from "react"; import { Link } from "react-router-dom"; import ItemViewer from "../ItemViewer.js"; @@ -19,7 +20,9 @@ global.fetch = jest.fn(() => }) ); -test("renders item viewer layer", async () => { - render(); - // await waitFor(() => expect(screen.findByText("Loading")).toBeInTheDocument()); +test("renders item viewer layer", () => { + act(() => { + render(); + }); + expect(screen.getByText("Name")).toBeInTheDocument(); }); diff --git a/frontend/src/components/tests/Mermaid.test.js b/frontend/src/components/tests/Mermaid.test.js index c38bcea3..83ff5233 100644 --- a/frontend/src/components/tests/Mermaid.test.js +++ b/frontend/src/components/tests/Mermaid.test.js @@ -1,14 +1,13 @@ -import { render, screen } from "@testing-library/react"; +import { render, screen, waitFor } from "@testing-library/react"; import React from "react"; -import { Link } from "react-router-dom"; import Mermaid from "../Mermaid.js"; +import "regenerator-runtime/runtime"; +import "@testing-library/jest-dom"; -test("renders chart", () => { - render( - +test("renders chart", async () => { + render(); + /// not sure why the graph isn't rendering :( + await waitFor(() => + expect(screen.getByText("Syntax error in graph")).toBeInTheDocument() ); - //expect(screen.getByRole('link')).toHaveAttribute('href', 'https://www.test.com'); - // const linkElement = screen.getByText(/TestGoal/i); - // expect(linkElement).toBeInTheDocument(); - expect(true); }); From a6b70ff5313b9005e8f63da031ca2561d7fed544 Mon Sep 17 00:00:00 2001 From: nbarlowATI Date: Tue, 22 Mar 2022 13:54:47 +0000 Subject: [PATCH 4/5] fix a few inconsistencies and unused imports --- frontend/src/components/tests/CaseContainer.test.js | 3 +-- frontend/src/components/tests/CaseCreator.test.js | 4 +--- frontend/src/components/tests/CaseSelector.test.js | 3 +-- frontend/src/components/tests/ItemCreator.test.js | 3 +-- frontend/src/components/tests/ItemEditor.test.js | 2 +- frontend/src/components/tests/ItemViewer.test.js | 3 +-- 6 files changed, 6 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/tests/CaseContainer.test.js b/frontend/src/components/tests/CaseContainer.test.js index da9db155..33a65647 100644 --- a/frontend/src/components/tests/CaseContainer.test.js +++ b/frontend/src/components/tests/CaseContainer.test.js @@ -1,9 +1,8 @@ import { render, screen, waitFor } from "@testing-library/react"; import "regenerator-runtime/runtime"; import React from "react"; -import { Link } from "react-router-dom"; -import CaseContainer from "../CaseContainer.js"; import "@testing-library/jest-dom"; +import CaseContainer from "../CaseContainer.js"; global.fetch = jest.fn(() => Promise.resolve({ diff --git a/frontend/src/components/tests/CaseCreator.test.js b/frontend/src/components/tests/CaseCreator.test.js index 412b7c84..586a356c 100644 --- a/frontend/src/components/tests/CaseCreator.test.js +++ b/frontend/src/components/tests/CaseCreator.test.js @@ -1,7 +1,6 @@ import { render, screen } from "@testing-library/react"; import "@testing-library/jest-dom"; import React from "react"; -import { Link } from "react-router-dom"; import CaseCreator from "../CaseCreator.js"; const mockedUsedNavigate = jest.fn(); @@ -12,7 +11,6 @@ jest.mock("react-router-dom", () => ({ test("renders case creator layer", () => { render(); - const textElement = screen.getByText(/Create a new assurance case/i); + const textElement = screen.getByText("Create a new assurance case"); expect(textElement).toBeInTheDocument(); - expect(true); }); diff --git a/frontend/src/components/tests/CaseSelector.test.js b/frontend/src/components/tests/CaseSelector.test.js index 8664a0f4..d54cc224 100644 --- a/frontend/src/components/tests/CaseSelector.test.js +++ b/frontend/src/components/tests/CaseSelector.test.js @@ -1,9 +1,8 @@ import { render, screen, waitFor } from "@testing-library/react"; import React from "react"; -import { Link } from "react-router-dom"; import "regenerator-runtime/runtime"; -import CaseSelector from "../CaseSelector.js"; import "@testing-library/jest-dom"; +import CaseSelector from "../CaseSelector.js"; const mockedUsedNavigate = jest.fn(); jest.mock("react-router-dom", () => ({ diff --git a/frontend/src/components/tests/ItemCreator.test.js b/frontend/src/components/tests/ItemCreator.test.js index 252731c4..16a89e4c 100644 --- a/frontend/src/components/tests/ItemCreator.test.js +++ b/frontend/src/components/tests/ItemCreator.test.js @@ -1,11 +1,10 @@ import { render, screen } from "@testing-library/react"; import "@testing-library/jest-dom"; import React from "react"; -import { Link } from "react-router-dom"; import ItemCreator from "../ItemCreator.js"; test("renders item creator layer", () => { render(); - const textElement = screen.getByText(/TopLevelNormativeGoal/i); + const textElement = screen.getByText("TopLevelNormativeGoal"); expect(textElement).toBeInTheDocument(); }); diff --git a/frontend/src/components/tests/ItemEditor.test.js b/frontend/src/components/tests/ItemEditor.test.js index a43b0b42..770042f3 100644 --- a/frontend/src/components/tests/ItemEditor.test.js +++ b/frontend/src/components/tests/ItemEditor.test.js @@ -18,7 +18,7 @@ global.fetch = jest.fn(() => ); test("renders item editor layer", async () => { - render(); + render(); await waitFor(() => expect(screen.getByPlaceholderText("Test goal")).toBeInTheDocument() ); diff --git a/frontend/src/components/tests/ItemViewer.test.js b/frontend/src/components/tests/ItemViewer.test.js index 3dd5c09d..9d42b490 100644 --- a/frontend/src/components/tests/ItemViewer.test.js +++ b/frontend/src/components/tests/ItemViewer.test.js @@ -3,9 +3,8 @@ import "@testing-library/jest-dom"; import "regenerator-runtime/runtime"; import { act } from "react-dom/test-utils"; import React from "react"; -import { Link } from "react-router-dom"; -import ItemViewer from "../ItemViewer.js"; import "@testing-library/jest-dom"; +import ItemViewer from "../ItemViewer.js"; global.fetch = jest.fn(() => Promise.resolve({ From 6180b4c8edf7a725283287fafd6989351312570b Mon Sep 17 00:00:00 2001 From: nbarlowATI Date: Tue, 22 Mar 2022 14:08:47 +0000 Subject: [PATCH 5/5] match the whole string in ItemCreator.test.js --- frontend/src/components/tests/ItemCreator.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/tests/ItemCreator.test.js b/frontend/src/components/tests/ItemCreator.test.js index 16a89e4c..5ff59284 100644 --- a/frontend/src/components/tests/ItemCreator.test.js +++ b/frontend/src/components/tests/ItemCreator.test.js @@ -5,6 +5,6 @@ import ItemCreator from "../ItemCreator.js"; test("renders item creator layer", () => { render(); - const textElement = screen.getByText("TopLevelNormativeGoal"); + const textElement = screen.getByText("Create a new TopLevelNormativeGoal"); expect(textElement).toBeInTheDocument(); });