From 933525be5ab540fd89e164832029d7012c9eed8d Mon Sep 17 00:00:00 2001 From: kristian4res <57638182+kristian4res@users.noreply.github.com> Date: Thu, 24 Oct 2024 11:57:36 +0100 Subject: [PATCH 1/7] wip: filter and hide "ContactInfo" and "Attempts" questionnaires by default unless searched --- src/components/questionnaireList.tsx | 31 +++++++++++++++++----------- 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/src/components/questionnaireList.tsx b/src/components/questionnaireList.tsx index 8c26bc7a..8462421f 100644 --- a/src/components/questionnaireList.tsx +++ b/src/components/questionnaireList.tsx @@ -15,18 +15,24 @@ type Props = { setErrored: (errored: boolean) => void } -function questionnaireTableRow(questionnaire: Questionnaire): ReactElement { - function questionnaireName(questionnaire: Questionnaire) { - if (questionnaire.name.toUpperCase().startsWith("DST")) { - return ( - <> - <>{questionnaire.name} - - ); - } - return <>{questionnaire.name}; +const QUESTIONNAIRES_HIDDEN_BY_DEFAULT = ["DST", "ContactInfo", "Attempts"]; + +function questionnaireName(questionnaire: Questionnaire) { + const isHiddenByDefault = QUESTIONNAIRES_HIDDEN_BY_DEFAULT.some(prefix => + questionnaire.name.toUpperCase().startsWith(prefix) + ); + + if (isHiddenByDefault) { + return ( + <> + <>{questionnaire.name} + + ); } + return <>{questionnaire.name}; +} +function questionnaireTableRow(questionnaire: Questionnaire): ReactElement { return ( @@ -65,15 +71,16 @@ export const QuestionnaireList = ({ setErrored }: Props): ReactElement => { const [filteredList, setFilteredList] = useState([]); function filterTestQuestionnaires(questionnairesToFilter: Questionnaire[], filterValue: string): Questionnaire[] { - if (!filterValue.toUpperCase().startsWith("DST")) { + if (!QUESTIONNAIRES_HIDDEN_BY_DEFAULT.some(hiddenQuestionnaire => filterValue.toUpperCase().startsWith(hiddenQuestionnaire))) { questionnairesToFilter = filter(questionnairesToFilter, (questionnaire) => { if (!questionnaire?.name) { return false; } - return !questionnaire.name.toUpperCase().startsWith("DST"); + return !QUESTIONNAIRES_HIDDEN_BY_DEFAULT.some(hiddenQuestionnaire => questionnaire.name.toUpperCase().startsWith(hiddenQuestionnaire)); }); setRealQuestionnaireCount(questionnairesToFilter.length); } + return questionnairesToFilter; } From 24c0445b80633615ada45638f5f6e88467525bee Mon Sep 17 00:00:00 2001 From: kristian4res <57638182+kristian4res@users.noreply.github.com> Date: Thu, 24 Oct 2024 18:03:57 +0100 Subject: [PATCH 2/7] feat: filter and hide "ContactInfo" and "Attempts" questionnaires by default unless searched --- src/components/questionnaireList.tsx | 30 +++++++++++++--------------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/src/components/questionnaireList.tsx b/src/components/questionnaireList.tsx index 8462421f..437a8699 100644 --- a/src/components/questionnaireList.tsx +++ b/src/components/questionnaireList.tsx @@ -1,6 +1,6 @@ import React, { ReactElement, useEffect, useState } from "react"; import { ONSLoadingPanel, ONSPanel } from "blaise-design-system-react-components"; -import { filter } from "lodash"; +import { filter, get } from "lodash"; import { Questionnaire } from "blaise-api-node-client"; import ONSTable, { TableColumns } from "./onsTable"; import dateFormatter from "dayjs"; @@ -15,14 +15,13 @@ type Props = { setErrored: (errored: boolean) => void } -const QUESTIONNAIRES_HIDDEN_BY_DEFAULT = ["DST", "ContactInfo", "Attempts"]; +function containsHiddenWord(text: string): boolean { + const QUESTIONNAIRE_KEYWORDS = ["DST", "CONTACTINFO", "ATTEMPTS"]; + return QUESTIONNAIRE_KEYWORDS.some(keyword => text.toUpperCase().includes(keyword)); +} function questionnaireName(questionnaire: Questionnaire) { - const isHiddenByDefault = QUESTIONNAIRES_HIDDEN_BY_DEFAULT.some(prefix => - questionnaire.name.toUpperCase().startsWith(prefix) - ); - - if (isHiddenByDefault) { + if (containsHiddenWord(questionnaire.name)) { return ( <> <>{questionnaire.name} @@ -70,26 +69,25 @@ export const QuestionnaireList = ({ setErrored }: Props): ReactElement => { const [message, setMessage] = useState(""); const [filteredList, setFilteredList] = useState([]); - function filterTestQuestionnaires(questionnairesToFilter: Questionnaire[], filterValue: string): Questionnaire[] { - if (!QUESTIONNAIRES_HIDDEN_BY_DEFAULT.some(hiddenQuestionnaire => filterValue.toUpperCase().startsWith(hiddenQuestionnaire))) { + function filterQuestionnaires(questionnairesToFilter: Questionnaire[], filterValue: string): Questionnaire[] { + if (!containsHiddenWord(filterValue)) { questionnairesToFilter = filter(questionnairesToFilter, (questionnaire) => { if (!questionnaire?.name) { return false; } - return !QUESTIONNAIRES_HIDDEN_BY_DEFAULT.some(hiddenQuestionnaire => questionnaire.name.toUpperCase().startsWith(hiddenQuestionnaire)); + return !containsHiddenWord(questionnaire.name); }); setRealQuestionnaireCount(questionnairesToFilter.length); } - return questionnairesToFilter; } function filterList(filterValue: string) { // Filter by the search field if (filterValue === "") { - setFilteredList(filterTestQuestionnaires(questionnaires, filterValue)); + setFilteredList(filterQuestionnaires(questionnaires, filterValue)); } - const newFilteredList = filter(filterTestQuestionnaires(questionnaires, filterValue), (questionnaire) => questionnaire.name.includes(filterValue.toUpperCase())); + const newFilteredList = filter(filterQuestionnaires(questionnaires, filterValue), (questionnaire) => questionnaire.name.includes(filterValue.toUpperCase())); // Order by date newFilteredList.sort((a: Questionnaire, b: Questionnaire) => Date.parse(b.installDate) - Date.parse(a.installDate)); setFilteredList(newFilteredList); @@ -121,9 +119,9 @@ export const QuestionnaireList = ({ setErrored }: Props): ReactElement => { useEffect(() => { getQuestionnairesList().then((questionnaireList: Questionnaire[]) => { setQuestionnaires(questionnaireList); - const nonTestQuestionnaires = filterTestQuestionnaires(questionnaireList, ""); - setFilteredList(nonTestQuestionnaires); - if (nonTestQuestionnaires.length === 0) { + const filteredQuestionnaireList = filterQuestionnaires(questionnaireList, ""); + setFilteredList(filteredQuestionnaireList); + if (filteredQuestionnaireList.length === 0) { setMessage("No installed questionnaires found."); } setLoaded(true); From 69df5d23f35f94919a214d129e8ec8a9b06f73c5 Mon Sep 17 00:00:00 2001 From: kristian4res <57638182+kristian4res@users.noreply.github.com> Date: Fri, 25 Oct 2024 15:43:53 +0100 Subject: [PATCH 3/7] feat: filter and hide "ContactInfo" and "Attempts" questionnaires by default unless searched --- src/components/questionnaireList.tsx | 82 ++++++++++++++-------------- 1 file changed, 40 insertions(+), 42 deletions(-) diff --git a/src/components/questionnaireList.tsx b/src/components/questionnaireList.tsx index 437a8699..b0ba07fd 100644 --- a/src/components/questionnaireList.tsx +++ b/src/components/questionnaireList.tsx @@ -1,6 +1,6 @@ import React, { ReactElement, useEffect, useState } from "react"; import { ONSLoadingPanel, ONSPanel } from "blaise-design-system-react-components"; -import { filter, get } from "lodash"; +import { filter } from "lodash"; import { Questionnaire } from "blaise-api-node-client"; import ONSTable, { TableColumns } from "./onsTable"; import dateFormatter from "dayjs"; @@ -17,7 +17,12 @@ type Props = { function containsHiddenWord(text: string): boolean { const QUESTIONNAIRE_KEYWORDS = ["DST", "CONTACTINFO", "ATTEMPTS"]; - return QUESTIONNAIRE_KEYWORDS.some(keyword => text.toUpperCase().includes(keyword)); + const textUpperCase = text.toUpperCase(); + return QUESTIONNAIRE_KEYWORDS.some(keyword => { + console.log(`Checking for keyword: ${keyword}, within text: ${textUpperCase}`); + console.log(`Result: ${textUpperCase.includes(keyword)}`); + return textUpperCase.includes(keyword); + }); } function questionnaireName(questionnaire: Questionnaire) { @@ -61,6 +66,22 @@ function questionnaireTableRow(questionnaire: Questionnaire): ReactElement { ); } +function questionnaireTable(filteredList: Questionnaire[], tableColumns: TableColumns[], message: string): ReactElement { + if (filteredList && filteredList.length > 0) { + return + { + filteredList.map((item: Questionnaire) => { + return questionnaireTableRow(item); + }) + } + ; + } + return {message}; +} + export const QuestionnaireList = ({ setErrored }: Props): ReactElement => { const [questionnaires, setQuestionnaires] = useState([]); const [realQuestionnaireCount, setRealQuestionnaireCount] = useState(0); @@ -69,25 +90,19 @@ export const QuestionnaireList = ({ setErrored }: Props): ReactElement => { const [message, setMessage] = useState(""); const [filteredList, setFilteredList] = useState([]); - function filterQuestionnaires(questionnairesToFilter: Questionnaire[], filterValue: string): Questionnaire[] { - if (!containsHiddenWord(filterValue)) { - questionnairesToFilter = filter(questionnairesToFilter, (questionnaire) => { - if (!questionnaire?.name) { - return false; - } - return !containsHiddenWord(questionnaire.name); - }); - setRealQuestionnaireCount(questionnairesToFilter.length); + function filterListFromState(filterValue: string) { + if (questionnaires.length === 0) { + setMessage("No installed questionnaires found."); + return []; } - return questionnairesToFilter; - } - - function filterList(filterValue: string) { // Filter by the search field - if (filterValue === "") { - setFilteredList(filterQuestionnaires(questionnaires, filterValue)); - } - const newFilteredList = filter(filterQuestionnaires(questionnaires, filterValue), (questionnaire) => questionnaire.name.includes(filterValue.toUpperCase())); + const newFilteredList = filter(questionnaires, (questionnaire) => { + if (filterValue === "") { + return questionnaire.name.toUpperCase().includes(filterValue.toUpperCase()) && !containsHiddenWord(questionnaire.name); + } + return questionnaire.name.toUpperCase().includes(filterValue.toUpperCase()); + }); + setRealQuestionnaireCount(newFilteredList.length); // Order by date newFilteredList.sort((a: Questionnaire, b: Questionnaire) => Date.parse(b.installDate) - Date.parse(a.installDate)); setFilteredList(newFilteredList); @@ -95,6 +110,7 @@ export const QuestionnaireList = ({ setErrored }: Props): ReactElement => { if (questionnaires.length > 0 && newFilteredList.length === 0) { setMessage(`No questionnaires containing ${filterValue} found`); } + return newFilteredList; } async function getQuestionnairesList() { @@ -119,31 +135,12 @@ export const QuestionnaireList = ({ setErrored }: Props): ReactElement => { useEffect(() => { getQuestionnairesList().then((questionnaireList: Questionnaire[]) => { setQuestionnaires(questionnaireList); - const filteredQuestionnaireList = filterQuestionnaires(questionnaireList, ""); + const filteredQuestionnaireList = filterListFromState(""); setFilteredList(filteredQuestionnaireList); - if (filteredQuestionnaireList.length === 0) { - setMessage("No installed questionnaires found."); - } setLoaded(true); }); }, []); - function QuestionnaireTable(): ReactElement { - if (filteredList && filteredList.length > 0) { - return - { - filteredList.map((item: Questionnaire) => { - return questionnaireTableRow(item); - }) - } - ; - } - return {message}; - } - const tableColumns: TableColumns[] = [ { @@ -173,7 +170,7 @@ export const QuestionnaireList = ({ setErrored }: Props): ReactElement => { filterList(e.target.value)} /> + onChange={(e) => filterListFromState(e.target.value)} />
@@ -181,8 +178,9 @@ export const QuestionnaireList = ({ setErrored }: Props): ReactElement => { questionnaires &&

{filteredList.length} results of {realQuestionnaireCount}

} - - + { + questionnaireTable(filteredList, tableColumns, message) + }
From b0b1fedeac92a34ff2bc9301b2bb2fa2a022c1f2 Mon Sep 17 00:00:00 2001 From: kristian4res <57638182+kristian4res@users.noreply.github.com> Date: Fri, 25 Oct 2024 16:09:15 +0100 Subject: [PATCH 4/7] refactor: change var names, remove unnecessary vars, etc. --- src/components/questionnaireList.tsx | 77 ++++++++++++++-------------- 1 file changed, 38 insertions(+), 39 deletions(-) diff --git a/src/components/questionnaireList.tsx b/src/components/questionnaireList.tsx index b0ba07fd..02e37594 100644 --- a/src/components/questionnaireList.tsx +++ b/src/components/questionnaireList.tsx @@ -17,11 +17,8 @@ type Props = { function containsHiddenWord(text: string): boolean { const QUESTIONNAIRE_KEYWORDS = ["DST", "CONTACTINFO", "ATTEMPTS"]; - const textUpperCase = text.toUpperCase(); return QUESTIONNAIRE_KEYWORDS.some(keyword => { - console.log(`Checking for keyword: ${keyword}, within text: ${textUpperCase}`); - console.log(`Result: ${textUpperCase.includes(keyword)}`); - return textUpperCase.includes(keyword); + return text.toUpperCase().includes(keyword); }); } @@ -90,30 +87,32 @@ export const QuestionnaireList = ({ setErrored }: Props): ReactElement => { const [message, setMessage] = useState(""); const [filteredList, setFilteredList] = useState([]); - function filterListFromState(filterValue: string) { - if (questionnaires.length === 0) { + const filterQuestionnaireList = (questionnaireList: Questionnaire[], filterValue: string) =>{ + if (questionnaireList.length === 0) { setMessage("No installed questionnaires found."); return []; } - // Filter by the search field - const newFilteredList = filter(questionnaires, (questionnaire) => { + + const newFilteredList = filter(questionnaireList, (questionnaire) => { if (filterValue === "") { return questionnaire.name.toUpperCase().includes(filterValue.toUpperCase()) && !containsHiddenWord(questionnaire.name); } return questionnaire.name.toUpperCase().includes(filterValue.toUpperCase()); }); - setRealQuestionnaireCount(newFilteredList.length); + // Order by date newFilteredList.sort((a: Questionnaire, b: Questionnaire) => Date.parse(b.installDate) - Date.parse(a.installDate)); setFilteredList(newFilteredList); - - if (questionnaires.length > 0 && newFilteredList.length === 0) { + setRealQuestionnaireCount(newFilteredList.length); + + if (questionnaireList.length > 0 && newFilteredList.length === 0) { setMessage(`No questionnaires containing ${filterValue} found`); + return []; } return newFilteredList; - } + }; - async function getQuestionnairesList() { + const getQuestionnairesList = async () => { let questionnaires: Questionnaire[]; try { questionnaires = await getQuestionnaires(); @@ -130,56 +129,56 @@ export const QuestionnaireList = ({ setErrored }: Props): ReactElement => { } return questionnaires; - } + }; useEffect(() => { getQuestionnairesList().then((questionnaireList: Questionnaire[]) => { setQuestionnaires(questionnaireList); - const filteredQuestionnaireList = filterListFromState(""); + const filteredQuestionnaireList = filterQuestionnaireList(questionnaireList, ""); setFilteredList(filteredQuestionnaireList); setLoaded(true); }); }, []); - const tableColumns: TableColumns[] = - [ - { - title: "Questionnaire" - }, - { - title: "Field period" - }, - { - title: "Status" - }, - { - title: "Install date" - }, - { - title: "Cases" - } - ]; - if (!loaded) { return ; } + return ( <>
-
-
{ questionnaires &&

{filteredList.length} results of {realQuestionnaireCount}

} { - questionnaireTable(filteredList, tableColumns, message) + questionnaireTable(filteredList, [ + { + title: "Questionnaire" + }, + { + title: "Field period" + }, + { + title: "Status" + }, + { + title: "Install date" + }, + { + title: "Cases" + } + ], message) }
From c5a4262e7a3cfba052645da13f966b47c53308f7 Mon Sep 17 00:00:00 2001 From: kristian4res <57638182+kristian4res@users.noreply.github.com> Date: Sun, 27 Oct 2024 20:33:48 +0000 Subject: [PATCH 5/7] feat/refactor: filter and hide "DST*", "ContactInfo", "Attempts" questionnaires by default unless searched --- src/components/questionnaireList.tsx | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/components/questionnaireList.tsx b/src/components/questionnaireList.tsx index 02e37594..7b733662 100644 --- a/src/components/questionnaireList.tsx +++ b/src/components/questionnaireList.tsx @@ -15,15 +15,15 @@ type Props = { setErrored: (errored: boolean) => void } -function containsHiddenWord(text: string): boolean { +function isHiddenQuestionnaire(questionnaireName: string): boolean { const QUESTIONNAIRE_KEYWORDS = ["DST", "CONTACTINFO", "ATTEMPTS"]; return QUESTIONNAIRE_KEYWORDS.some(keyword => { - return text.toUpperCase().includes(keyword); + return questionnaireName.toUpperCase().includes(keyword); }); } function questionnaireName(questionnaire: Questionnaire) { - if (containsHiddenWord(questionnaire.name)) { + if (isHiddenQuestionnaire(questionnaire.name)) { return ( <> <>{questionnaire.name} @@ -85,8 +85,14 @@ export const QuestionnaireList = ({ setErrored }: Props): ReactElement => { const [loaded, setLoaded] = useState(false); const [message, setMessage] = useState(""); + const [filterText, setFilterText] = useState(""); const [filteredList, setFilteredList] = useState([]); + const handleFilterChange = (value: string) => { + setFilterText(value); + filterQuestionnaireList(questionnaires, value); + }; + const filterQuestionnaireList = (questionnaireList: Questionnaire[], filterValue: string) =>{ if (questionnaireList.length === 0) { setMessage("No installed questionnaires found."); @@ -95,7 +101,7 @@ export const QuestionnaireList = ({ setErrored }: Props): ReactElement => { const newFilteredList = filter(questionnaireList, (questionnaire) => { if (filterValue === "") { - return questionnaire.name.toUpperCase().includes(filterValue.toUpperCase()) && !containsHiddenWord(questionnaire.name); + return questionnaire.name.toUpperCase().includes(filterValue.toUpperCase()) && !isHiddenQuestionnaire(questionnaire.name); } return questionnaire.name.toUpperCase().includes(filterValue.toUpperCase()); }); @@ -151,9 +157,11 @@ export const QuestionnaireList = ({ setErrored }: Props): ReactElement => { - filterQuestionnaireList(questionnaires, e.target.value)} + onChange={(e) => handleFilterChange(e.target.value)} + value={filterText} />
From fd9782255dbe64d1346dd2bc5de99191fb9512f7 Mon Sep 17 00:00:00 2001 From: kristian4res <57638182+kristian4res@users.noreply.github.com> Date: Sun, 27 Oct 2024 20:34:00 +0000 Subject: [PATCH 6/7] test: filter and hide "DST*", "ContactInfo", "Attempts" questionnaires by default unless searched --- src/components/questionnaireList.test.tsx | 214 ++++++++++++++++++++-- 1 file changed, 203 insertions(+), 11 deletions(-) diff --git a/src/components/questionnaireList.test.tsx b/src/components/questionnaireList.test.tsx index 3d8304a3..1ce64f06 100644 --- a/src/components/questionnaireList.test.tsx +++ b/src/components/questionnaireList.test.tsx @@ -1,51 +1,243 @@ /** * @jest-environment jsdom */ - +import React from "react"; +import "@testing-library/jest-dom"; import flushPromises from "../tests/utils"; -import { render, waitFor, screen } from "@testing-library/react"; +import { render, waitFor, screen, act } from "@testing-library/react"; import { MemoryRouter } from "react-router-dom"; -import { act } from "react-dom/test-utils"; -import React from "react"; import { Authenticate } from "blaise-login-react/blaise-login-react-client"; import axios from "axios"; import MockAdapter from "axios-mock-adapter"; import QuestionnaireList from "./questionnaireList"; +import userEvent from "@testing-library/user-event"; const mock = new MockAdapter(axios); -// mock login +// Mock the blaise-login-react Authenticate component jest.mock("blaise-login-react/blaise-login-react-client"); const { MockAuthenticate } = jest.requireActual("blaise-login-react/blaise-login-react-client"); Authenticate.prototype.render = MockAuthenticate.prototype.render; MockAuthenticate.OverrideReturnValues(null, true); -describe("Questionnaire Details page ", () => { +const MOCK_QUESTIONNAIRE_LIST = [ + { + "name": "IPS2409A", + "id": "ef8980d9-5f5c-416d-9b4b-9570c15c85c0", + "serverParkName": "gusty", + "installDate": "2024-10-16T13:14:01.7557563+01:00", + "status": "Active", + "dataRecordCount": 1, + "hasData": true, + "blaiseVersion": "5.14.4.3668", + "nodes": [ + { + "nodeName": "blaise-gusty-mgmt", + "nodeStatus": "Active" + } + ], + "fieldPeriod": "September 2024" + }, + { + "name": "IPS2409B", + "id": "ef8980d9-5f5c-416d-9b4b-9570c15c85c0", + "serverParkName": "gusty", + "installDate": "2024-10-16T13:14:01.7557563+01:00", + "status": "Active", + "dataRecordCount": 1, + "hasData": true, + "blaiseVersion": "5.14.4.3668", + "nodes": [ + { + "nodeName": "blaise-gusty-mgmt", + "nodeStatus": "Active" + } + ], + "fieldPeriod": "September 2024" + }, + { + "name": "IPS_ContactInfo", + "id": "10effca3-caec-4fc0-a037-20a43cf050c2", + "serverParkName": "gusty", + "installDate": "2024-10-18T12:59:23.4164608+01:00", + "status": "Active", + "dataRecordCount": 0, + "hasData": false, + "blaiseVersion": "5.14.4.3668", + "nodes": [ + { + "nodeName": "blaise-gusty-mgmt", + "nodeStatus": "Active" + } + ], + "fieldPeriod": "Field period unknown" + }, + { + "name": "IPS_Attempts", + "id": "10effca3-caec-4fc0-a037-20a43cf050c4", + "serverParkName": "gusty", + "installDate": "2024-10-18T12:59:23.4164608+01:00", + "status": "Active", + "dataRecordCount": 0, + "hasData": false, + "blaiseVersion": "5.14.4.3668", + "nodes": [ + { + "nodeName": "blaise-gusty-mgmt", + "nodeStatus": "Active" + } + ], + "fieldPeriod": "Field period unknown" + }, + { + "name": "DST2304Z", + "id": "10effca3-caec-4fc0-a037-20a43cf050c5", + "serverParkName": "gusty", + "installDate": "2024-10-18T12:59:23.4164608+01:00", + "status": "Active", + "dataRecordCount": 0, + "hasData": false, + "blaiseVersion": "5.14.4.3668", + "nodes": [ + { + "nodeName": "blaise-gusty-mgmt", + "nodeStatus": "Active" + } + ], + "fieldPeriod": "Field period unknown" + } +]; + +describe("Questionnaire List displays valid user questionnaires", () => { beforeEach(() => { + mock.onGet("/api/questionnaires").reply(200, MOCK_QUESTIONNAIRE_LIST); + }); + + afterEach(() => { + mock.reset(); + }); + + it("should not display any questionnaires if no questionnaires were fetched back from the server", async () => { + // Arrange mock.onGet("/api/questionnaires").reply(200, []); + render( + + + + ); + + // Act + await act(async () => { + await flushPromises(); + }); + + // Assert + await waitFor(() => { + expect(screen.getByText(/Filter by questionnaire name/i)).toBeVisible(); + expect(screen.getByText(/No installed questionnaires found/i)).toBeVisible(); + }); + }); + + it("should display a list of questionnaires containing only questionnaires that match the filter", async () => { + // Arrange + render( + + + + ); + + // Act + await act(async () => { + await flushPromises(); + }); + const filterInput = screen.getByTestId(/filter-by-name/i); + userEvent.type(filterInput, "IPS2409A"); + + // Assert + await waitFor(() => { + expect(screen.getByText(/Filter by questionnaire name/i)).toBeVisible(); + expect(screen.getByText(/1 results of 1/i)).toBeVisible(); + expect(screen.getByText(/IPS2409A/i)).toBeVisible(); + }); + }); + +}); + +describe("Questionnaire List displays hidden questionnaires that match when using the search filter", () => { + beforeEach(() => { + mock.onGet("/api/questionnaires").reply(200, MOCK_QUESTIONNAIRE_LIST); }); afterEach(() => { mock.reset(); }); - it("should redirect to the homepage when no questionnaire has been provided ", async () => { + it("should display the hidden ContactInfo questionnaire", async () => { + // Arrange + render( + + + + ); + + // Act + await act(async () => { + await flushPromises(); + }); + const filterInput = screen.getByTestId(/filter-by-name/i); + userEvent.type(filterInput, "ContactInfo"); - // Go direct to the questionnaire details page not from a link + // Assert + await waitFor(() => { + expect(screen.getByText(/Filter by questionnaire name/i)).toBeVisible(); + expect(screen.getByText(/1 results of 1/i)).toBeVisible(); + expect(screen.getByText(/IPS_ContactInfo/i)).toBeVisible(); + }); + }); + + it("should display the hidden Attempts questionnaire", async () => { + // Arrange + render( + + + + ); + + // Act + await act(async () => { + await flushPromises(); + }); + const filterInput = screen.getByTestId(/filter-by-name/i); + userEvent.type(filterInput, "Attempts"); + + // Assert + await waitFor(() => { + expect(screen.getByText(/Filter by questionnaire name/i)).toBeVisible(); + expect(screen.getByText(/1 results of 1/i)).toBeVisible(); + expect(screen.getByText(/IPS_Attempts/i)).toBeVisible(); + }); + }); + + it("should display the hidden DST2304Z test questionnaire", async () => { + // Arrange render( ); + // Act await act(async () => { await flushPromises(); }); + const filterInput = screen.getByTestId(/filter-by-name/i); + userEvent.type(filterInput, "DST2304Z"); + // Assert await waitFor(() => { - expect(screen.queryByText("Questionnaire settings")).toEqual(null); - expect(screen.getByText(/Filter by questionnaire name/i)).toBeDefined(); - expect(screen.queryByText(/Questionnaire details/i)).toEqual(null); + expect(screen.getByText(/Filter by questionnaire name/i)).toBeVisible(); + expect(screen.getByText(/1 results of 1/i)).toBeVisible(); + expect(screen.getByText(/DST2304Z/i)).toBeVisible(); }); }); }); From 92d0da102f2e2642182a161f7082ace176b52115 Mon Sep 17 00:00:00 2001 From: kristian4res <57638182+kristian4res@users.noreply.github.com> Date: Sun, 27 Oct 2024 20:34:23 +0000 Subject: [PATCH 7/7] chore: install types as dev deps --- package.json | 10 +++++----- yarn.lock | 31 +++---------------------------- 2 files changed, 8 insertions(+), 33 deletions(-) diff --git a/package.json b/package.json index cddd7e9f..62e7f17b 100644 --- a/package.json +++ b/package.json @@ -31,11 +31,6 @@ "@google-cloud/logging": "^9.6.0", "@google-cloud/profiler": "^4.1.3", "@google-cloud/storage": "^5.8.5", - "@types/express": "^4.17.11", - "@types/jest": "^27.0.0", - "@types/node": "^15.12.2", - "@types/react": "^18.2.51", - "@types/react-dom": "^18.2.18", "axios": "^1.7.4", "blaise-api-node-client": "git+https://github.com/ONSdigital/blaise-api-node-client#1.1.0", "blaise-design-system-react-components": "git+https://github.com/ONSdigital/blaise-design-system-react-components#0.14.0", @@ -74,9 +69,14 @@ "@testing-library/react": "^14.2.1", "@testing-library/user-event": "^13.2.1", "@types/ejs": "^3.1.0", + "@types/express": "^4.17.11", + "@types/jest": "^27.0.0", "@types/jsonwebtoken": "^8.5.5", "@types/lodash": "^4.14.170", + "@types/node": "^15.12.2", "@types/pino-http": "^5.7.0", + "@types/react": "^18.2.51", + "@types/react-dom": "^18.2.18", "@types/react-router-dom": "^5.3.3", "@types/react-timeago": "^4.1.7", "@types/supertest": "^2.0.11", diff --git a/yarn.lock b/yarn.lock index 0333d873..0a463904 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13174,16 +13174,7 @@ string-natural-compare@^3.0.1: resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4" integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw== -"string-width-cjs@npm:string-width@^4.2.0": - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - -"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -13266,14 +13257,7 @@ stringify-object@^3.3.0: is-obj "^1.0.1" is-regexp "^1.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - -strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -14634,7 +14618,7 @@ workbox-window@6.6.1: "@types/trusted-types" "^2.0.2" workbox-core "6.6.1" -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -14652,15 +14636,6 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" -wrap-ansi@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"