From c5ae3f5bb76d6f707ddda04f8be9dbccaa69d7fd Mon Sep 17 00:00:00 2001 From: Farhanam76 Date: Thu, 16 May 2024 10:28:23 +0100 Subject: [PATCH 01/19] removed the information banner and added button to match with EQ --- .../App/page/Preview/CalculatedSummaryPreview.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js index 93bbddb0d8..e633018353 100644 --- a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js +++ b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js @@ -32,6 +32,19 @@ const Container = styled.div` white-space: pre-wrap; } `; +const Button = styled.div` + color: white; + background-color: ${colors.green}; + border: 2px solid ${colors.green}; + padding: 0.75rem 1rem; + margin: 0; + font-size: 1rem; + font-weight: 600; + border-radius: 3px; + display: inline-block; + text-rendering: optimizeLegibility; + margin-bottom: 2em; +`; const Summary = styled.div` border-bottom: 1px solid #999; @@ -98,7 +111,6 @@ const CalculatedSummaryPagePreview = ({ page }) => { - Please review your answers and confirm these are correct. {page.summaryAnswers.length > 0 ? ( @@ -148,6 +160,7 @@ const CalculatedSummaryPagePreview = ({ page }) => { No answers selected )} + From 348a5ca7b286585580273442fcf3bf1858a6161b Mon Sep 17 00:00:00 2001 From: Farhanam76 Date: Wed, 29 May 2024 14:17:54 +0100 Subject: [PATCH 02/19] added condition to display the question page title --- .../page/Preview/CalculatedSummaryPreview.js | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js index e633018353..6836aaf36f 100644 --- a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js +++ b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js @@ -5,7 +5,6 @@ import { propType } from "graphql-anywhere"; import styled from "styled-components"; import Error from "components/preview/Error"; import PageTitle from "components/preview/elements/PageTitle"; -import Info from "components/preview/elements/Info"; import EditorLayout from "components/EditorLayout"; import Panel from "components/Panel"; @@ -15,6 +14,9 @@ import CommentsPanel from "App/Comments"; import { colors } from "constants/theme"; import CalculatedSummaryPageEditor from "../Design/CalculatedSummaryPageEditor"; import { useSetNavigationCallbacksForPage } from "components/NavigationCallbacks"; +import { getPageByAnswerId } from "utils/questionnaireUtils"; +import { useQuestionnaire } from "components/QuestionnaireContext"; +import Answers from "../Design/CalculatedSummaryPageEditor/AnswerSelector/Answers"; const Container = styled.div` padding: 2em; @@ -97,6 +99,21 @@ const CalculatedSummaryPagePreview = ({ page }) => { section: page?.section, }); + const { questionnaire } = useQuestionnaire(); + const uniqueTitles = new Set(); + + const titles = page.summaryAnswers.map((answer) => { + const pages = getPageByAnswerId(questionnaire, answer.id); + if (pages) { + const title = pages.title.replace(/<[^>]*>/g, ""); + if (!uniqueTitles.has(title)) { + uniqueTitles.add(title); + return title; + } + } + return null; + }); + return ( { {page.summaryAnswers.length > 0 ? ( +
{titles}
{page.summaryAnswers.map((answer) => ( From e68269ebebc7dc70e7779586e30f686be04ab1db Mon Sep 17 00:00:00 2001 From: farres1 Date: Fri, 31 May 2024 17:02:12 +0100 Subject: [PATCH 03/19] Display question page title when calculated summary page uses multiple answers from the same page --- .../page/Preview/CalculatedSummaryPreview.js | 85 ++++++++++++------- 1 file changed, 52 insertions(+), 33 deletions(-) diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js index 6836aaf36f..77ddc3fa0c 100644 --- a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js +++ b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js @@ -16,7 +16,6 @@ import CalculatedSummaryPageEditor from "../Design/CalculatedSummaryPageEditor"; import { useSetNavigationCallbacksForPage } from "components/NavigationCallbacks"; import { getPageByAnswerId } from "utils/questionnaireUtils"; import { useQuestionnaire } from "components/QuestionnaireContext"; -import Answers from "../Design/CalculatedSummaryPageEditor/AnswerSelector/Answers"; const Container = styled.div` padding: 2em; @@ -93,26 +92,30 @@ const SummaryTotalLabel = styled.div` `; const CalculatedSummaryPagePreview = ({ page }) => { + const { questionnaire } = useQuestionnaire(); useSetNavigationCallbacksForPage({ page: page, folder: page?.folder, section: page?.section, }); - const { questionnaire } = useQuestionnaire(); - const uniqueTitles = new Set(); - - const titles = page.summaryAnswers.map((answer) => { - const pages = getPageByAnswerId(questionnaire, answer.id); - if (pages) { - const title = pages.title.replace(/<[^>]*>/g, ""); - if (!uniqueTitles.has(title)) { - uniqueTitles.add(title); - return title; - } - } - return null; - }); + const usedPageIds = []; + + const getDuplicatedPageIds = () => { + const allPageIds = []; + + page.summaryAnswers.forEach((summaryAnswer) => { + const summaryAnswerPage = getPageByAnswerId( + questionnaire, + summaryAnswer.id + ); + allPageIds.push(summaryAnswerPage?.id); + }); + + return allPageIds.filter( + (pageId, index) => allPageIds.indexOf(pageId) !== index + ); + }; return ( { {page.summaryAnswers.length > 0 ? ( -
{titles}
- {page.summaryAnswers.map((answer) => ( - - - - - {answer.displayName} - - - - Value - - - Change - - - - ))} + {page.summaryAnswers.map((answer) => { + const answerPage = getPageByAnswerId(questionnaire, answer.id); + const hasAnswerPageIdBeenUsed = usedPageIds.includes( + answerPage?.id + ); + if (!hasAnswerPageIdBeenUsed) { + usedPageIds.push(answerPage?.id); + } + + const duplicatedPageIds = getDuplicatedPageIds(); + + return ( + <> + {!hasAnswerPageIdBeenUsed && + duplicatedPageIds.includes(answerPage?.id) && + answerPage?.title.replace(/

|<\/p>/g, "")} + + + + + {answer.displayName} + + + + Value + + + Change + + + + + ); + })} {page.totalTitle ? ( From 8b9ff700b80594c4f0c3c3450ebb8c63fc7529da Mon Sep 17 00:00:00 2001 From: farres1 Date: Tue, 4 Jun 2024 13:12:12 +0100 Subject: [PATCH 04/19] Sort answers used in calculated summary pages to follow the correct page and answer order --- .../page/Preview/CalculatedSummaryPreview.js | 49 +++++++++++++++++-- 1 file changed, 46 insertions(+), 3 deletions(-) diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js index 77ddc3fa0c..20c031b692 100644 --- a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js +++ b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js @@ -101,10 +101,53 @@ const CalculatedSummaryPagePreview = ({ page }) => { const usedPageIds = []; + const getAnswerIndexInPage = (answer) => { + const page = getPageByAnswerId(questionnaire, answer.id); + + // Finds the index of the answer argument within its page + return page?.answers?.findIndex( + (pageAnswer) => pageAnswer.id === answer.id + ); + }; + + /* + Sorts summaryAnswers by page and answers (keeps pages in the order they appear in summaryAnswers, and sorts answers by their order in their page) + Ensures answers are always displayed underneath their page, and in the order they appear in the page + .slice() creates a copy of page.summaryAnswers to prevent mutating the original page.summaryAnswers array + */ + const sortedSummaryAnswers = page.summaryAnswers.slice().sort((a, b) => { + const pageContainingAnswerA = getPageByAnswerId(questionnaire, a.id); + const pageContainingAnswerB = getPageByAnswerId(questionnaire, b.id); + + // If the answers are on the same page, sort the answers in the order they appear in the page + if (pageContainingAnswerA?.id === pageContainingAnswerB?.id) { + return getAnswerIndexInPage(a) - getAnswerIndexInPage(b); + } + + // Gets the first answer from page A that appears in summaryAnswers + const firstAnswerFromPageA = page.summaryAnswers.find( + (answer) => + getPageByAnswerId(questionnaire, answer.id)?.id === + pageContainingAnswerA?.id + ); + // Gets the first answer from page B that appears in summaryAnswers + const firstAnswerFromPageB = page.summaryAnswers.find( + (answer) => + getPageByAnswerId(questionnaire, answer.id)?.id === + pageContainingAnswerB?.id + ); + + // Sorts answers based on the order of their pages in summaryAnswers (keeps pages in the order they appear in summaryAnswers) + return ( + page.summaryAnswers.indexOf(firstAnswerFromPageA) - + page.summaryAnswers.indexOf(firstAnswerFromPageB) + ); + }); + const getDuplicatedPageIds = () => { const allPageIds = []; - page.summaryAnswers.forEach((summaryAnswer) => { + sortedSummaryAnswers.forEach((summaryAnswer) => { const summaryAnswerPage = getPageByAnswerId( questionnaire, summaryAnswer.id @@ -132,9 +175,9 @@ const CalculatedSummaryPagePreview = ({ page }) => { - {page.summaryAnswers.length > 0 ? ( + {sortedSummaryAnswers.length > 0 ? (

- {page.summaryAnswers.map((answer) => { + {sortedSummaryAnswers.map((answer) => { const answerPage = getPageByAnswerId(questionnaire, answer.id); const hasAnswerPageIdBeenUsed = usedPageIds.includes( answerPage?.id From 8dba232cb11b88a5231b20915aef803d7bf5f5cb Mon Sep 17 00:00:00 2001 From: Farhanam76 Date: Thu, 6 Jun 2024 13:53:51 +0100 Subject: [PATCH 05/19] added styling for question title --- .../page/Preview/CalculatedSummaryPreview.js | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js index 20c031b692..759ddf015e 100644 --- a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js +++ b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js @@ -48,17 +48,21 @@ const Button = styled.div` `; const Summary = styled.div` - border-bottom: 1px solid #999; margin-bottom: 2rem; `; const SummaryItem = styled.div` - border-top: 1px solid #999; border-radius: 0; position: relative; padding: 1rem 0; `; +const TitleQuestion = styled.div` + &:not(:first-of-type) { + border-top: ${(props) => (props.questionTitle ? "1px solid #999" : "none")}; + } +`; + const SummaryLabel = styled.div` font-weight: normal; word-break: break-word; @@ -187,12 +191,18 @@ const CalculatedSummaryPagePreview = ({ page }) => { } const duplicatedPageIds = getDuplicatedPageIds(); + const questionTitle = + !hasAnswerPageIdBeenUsed && + duplicatedPageIds.includes(answerPage?.id) && + answerPage?.title.replace(/

|<\/p>/g, ""); + + console.log("questionpage", questionTitle); return ( <> - {!hasAnswerPageIdBeenUsed && - duplicatedPageIds.includes(answerPage?.id) && - answerPage?.title.replace(/

|<\/p>/g, "")} + + {questionTitle} + From 1194de3e07e0aad73253d454fb65185a06c70b80 Mon Sep 17 00:00:00 2001 From: farres1 Date: Thu, 6 Jun 2024 15:13:29 +0100 Subject: [PATCH 06/19] Find if a looped answer is the last answer from its page used in summary answers --- .../src/App/page/Preview/CalculatedSummaryPreview.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js index 759ddf015e..cb2735be93 100644 --- a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js +++ b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js @@ -196,7 +196,14 @@ const CalculatedSummaryPagePreview = ({ page }) => { duplicatedPageIds.includes(answerPage?.id) && answerPage?.title.replace(/

|<\/p>/g, ""); - console.log("questionpage", questionTitle); + const lastSummaryAnswerFromPage = sortedSummaryAnswers.findLast( + (summaryAnswer) => + getPageByAnswerId(questionnaire, summaryAnswer.id)?.id === + answerPage?.id + ); + + const isLastSummaryAnswerFromPage = + answer.id === lastSummaryAnswerFromPage.id; return ( <> From 84fcddaa4bbb8282e666300e7d28fc84d82ce3d1 Mon Sep 17 00:00:00 2001 From: Farhanam76 Date: Fri, 7 Jun 2024 13:01:54 +0100 Subject: [PATCH 07/19] Added borders to group the summary answer types with question page title --- .../page/Preview/CalculatedSummaryPreview.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js index cb2735be93..32c67f385c 100644 --- a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js +++ b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js @@ -55,12 +55,13 @@ const SummaryItem = styled.div` border-radius: 0; position: relative; padding: 1rem 0; + border-bottom: ${(props) => + props.isLastSummaryAnswerFromPage ? "1px solid #999" : "none"}; `; -const TitleQuestion = styled.div` - &:not(:first-of-type) { - border-top: ${(props) => (props.questionTitle ? "1px solid #999" : "none")}; - } +const QuestionPageTitle = styled.div` + margin-top: 1rem; + margin-bottom: 1rem; `; const SummaryLabel = styled.div` @@ -207,10 +208,13 @@ const CalculatedSummaryPagePreview = ({ page }) => { return ( <> - + {questionTitle} - - + + From d3925b40f025ff2250c977059044c223d5bd0b84 Mon Sep 17 00:00:00 2001 From: Farhanam76 Date: Fri, 7 Jun 2024 15:57:26 +0100 Subject: [PATCH 08/19] changed the code to show the unique key so test won't fail --- .../page/Preview/CalculatedSummaryPreview.js | 40 +++++++++---------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js index 32c67f385c..2a9fe28efb 100644 --- a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js +++ b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js @@ -60,7 +60,6 @@ const SummaryItem = styled.div` `; const QuestionPageTitle = styled.div` - margin-top: 1rem; margin-bottom: 1rem; `; @@ -207,29 +206,28 @@ const CalculatedSummaryPagePreview = ({ page }) => { answer.id === lastSummaryAnswerFromPage.id; return ( - <> + {questionTitle} - - - - - {answer.displayName} - - - - Value - - - Change - - - - + + + + + {answer.displayName} + + + + Value + + + Change + + + ); })} From f4cca92b14f4f294a529cbfe2dfb31d9b65f52a0 Mon Sep 17 00:00:00 2001 From: Farhanam76 Date: Wed, 12 Jun 2024 08:30:51 +0100 Subject: [PATCH 09/19] updated changes for finding the last summary answer of the same page --- eq-author/src/App/page/Preview/CalculatedSummaryPreview.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js index 2a9fe28efb..9868977619 100644 --- a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js +++ b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js @@ -196,11 +196,13 @@ const CalculatedSummaryPagePreview = ({ page }) => { duplicatedPageIds.includes(answerPage?.id) && answerPage?.title.replace(/

|<\/p>/g, ""); - const lastSummaryAnswerFromPage = sortedSummaryAnswers.findLast( + const summaryAnswersOnSamePage = sortedSummaryAnswers.filter( (summaryAnswer) => getPageByAnswerId(questionnaire, summaryAnswer.id)?.id === answerPage?.id ); + const lastSummaryAnswerFromPage = + summaryAnswersOnSamePage[summaryAnswersOnSamePage.length - 1]; const isLastSummaryAnswerFromPage = answer.id === lastSummaryAnswerFromPage.id; From 52fa56637ae4ea6f9cd35197ad447787381dd058 Mon Sep 17 00:00:00 2001 From: Farhanam76 Date: Wed, 12 Jun 2024 14:23:59 +0100 Subject: [PATCH 10/19] created a mock questionnaie --- .../Preview/CalculatedSummaryPreview.test.js | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js index 77cd6bfc80..50f0b33300 100644 --- a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js +++ b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js @@ -8,6 +8,61 @@ import { byTestAttr } from "tests/utils/selectors"; import CalculatedSummaryPreview from "./CalculatedSummaryPreview"; import { publishStatusSubscription } from "components/EditorLayout/Header"; +import { useQuestionnaire } from "components/QuestionnaireContext"; + +jest.mock("components/QuestionnaireContext", () => ({ + useQuestionnaire: jest.fn(), +})); + +const questionnaire = { + id: "questionnaire-1", + sections: [ + { + id: "1", + folders: [ + { + id: "2", + pages: [ + { + id: "3", + pageType: "QuestionPage", + title: "Page 1", + answers: [ + { id: "4", label: "answer 1", questionPageId: "123" }, + { + id: "5", + label: "answer 2", + questionPageId: "234", + }, + ], + }, + { + id: "6", + pageType: "QuestionPage", + title: "Page 2", + answers: [ + { + id: "7", + label: "answer 3", + questionPageId: "345", + }, + { + id: "8", + label: "answer 4", + questionPageId: "456", + }, + ], + }, + ], + }, + ], + }, + ], +}; + +// useQuestionnaire.mockImplementation(() => ({ +// questionnaire: +// })); describe("CalculatedSummaryPreview", () => { let page, me, mocks, questionnaireId; @@ -133,4 +188,6 @@ describe("CalculatedSummaryPreview", () => { ); expect(wrapper.find(byTestAttr("no-answers-selected"))).toBeTruthy(); }); + + it("should order the summary answers correctly ", () => {}); }); From a692c4bbccfbd30e8f1b405c377bba2667293d61 Mon Sep 17 00:00:00 2001 From: Farhanam76 Date: Wed, 12 Jun 2024 14:49:31 +0100 Subject: [PATCH 11/19] added calculated summary page in the mock questionnaire --- .../src/App/page/Preview/CalculatedSummaryPreview.test.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js index 50f0b33300..786c2b4d3f 100644 --- a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js +++ b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js @@ -8,7 +8,7 @@ import { byTestAttr } from "tests/utils/selectors"; import CalculatedSummaryPreview from "./CalculatedSummaryPreview"; import { publishStatusSubscription } from "components/EditorLayout/Header"; -import { useQuestionnaire } from "components/QuestionnaireContext"; +import useQuestionnaire from "components/QuestionnaireContext"; jest.mock("components/QuestionnaireContext", () => ({ useQuestionnaire: jest.fn(), @@ -53,6 +53,12 @@ const questionnaire = { }, ], }, + { + id: "9", + title: "calculated summary page 1", + pageType: "CalculatedSummaryPage", + summaryAnswers: ["4", "5", "7", "8"], + }, ], }, ], From 9b219eebf00aaafa934b8cf4a4b3fb94461ce69b Mon Sep 17 00:00:00 2001 From: Farhanam76 Date: Fri, 14 Jun 2024 09:56:23 +0100 Subject: [PATCH 12/19] started rtl structure --- .../Preview/CalculatedSummaryPreview.test.js | 35 ++++++++++++------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js index 786c2b4d3f..f36c7bd0d5 100644 --- a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js +++ b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js @@ -4,24 +4,21 @@ import { render, flushPromises, act } from "tests/utils/rtl"; import commentsSubscription from "graphql/subscriptions/commentSubscription.graphql"; import { MeContext } from "App/MeContext"; + import { byTestAttr } from "tests/utils/selectors"; import CalculatedSummaryPreview from "./CalculatedSummaryPreview"; import { publishStatusSubscription } from "components/EditorLayout/Header"; -import useQuestionnaire from "components/QuestionnaireContext"; - -jest.mock("components/QuestionnaireContext", () => ({ - useQuestionnaire: jest.fn(), -})); +import QuestionnaireContext from "components/QuestionnaireContext"; const questionnaire = { id: "questionnaire-1", sections: [ { - id: "1", + id: "section-1", folders: [ { - id: "2", + id: "folder-1", pages: [ { id: "3", @@ -57,7 +54,7 @@ const questionnaire = { id: "9", title: "calculated summary page 1", pageType: "CalculatedSummaryPage", - summaryAnswers: ["4", "5", "7", "8"], + summaryAnswers: ["8", "5", "7", "4"], }, ], }, @@ -66,10 +63,6 @@ const questionnaire = { ], }; -// useQuestionnaire.mockImplementation(() => ({ -// questionnaire: -// })); - describe("CalculatedSummaryPreview", () => { let page, me, mocks, questionnaireId; @@ -195,5 +188,21 @@ describe("CalculatedSummaryPreview", () => { expect(wrapper.find(byTestAttr("no-answers-selected"))).toBeTruthy(); }); - it("should order the summary answers correctly ", () => {}); + it("should order the summary answers correctly ", () => { + const sortedSummaryAnswers = jest.fn(); + const { getByTestId, getByText, getAllByTestId } = render( + + + + + , + { + route: `/q/${questionnaireId}/page/9/preview`, + urlParamMatcher: "/q/:questionnaireId/page/:pageId", + mocks, + } + ); + + expect(sortedSummaryAnswers).toHaveBeenCalled(); + }); }); From 95e92c95efb02aa90f70b3bbe534d8d8cc56ec52 Mon Sep 17 00:00:00 2001 From: Farhanam76 Date: Fri, 14 Jun 2024 14:11:46 +0100 Subject: [PATCH 13/19] started rendering the answer.displayname --- .../Preview/CalculatedSummaryPreview.test.js | 22 ++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js index f36c7bd0d5..5d33eb617e 100644 --- a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js +++ b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js @@ -54,7 +54,12 @@ const questionnaire = { id: "9", title: "calculated summary page 1", pageType: "CalculatedSummaryPage", - summaryAnswers: ["8", "5", "7", "4"], + summaryAnswers: [ + { id: "8", displayName: "Answer 8" }, + { id: "5", displayName: "Answer 5" }, + { id: "7", displayName: "Answer 7" }, + { id: "4", displayName: "Answer 4" }, + ], }, ], }, @@ -188,9 +193,12 @@ describe("CalculatedSummaryPreview", () => { expect(wrapper.find(byTestAttr("no-answers-selected"))).toBeTruthy(); }); + // test the answer.display name is rendered in the page. + // change the code where it test based on the data-test id(data-test id need to be unique for each answer) no functions need to be mock at all. + // check the text of answer found from the data test id is equal to the answer.displayName + it("should order the summary answers correctly ", () => { - const sortedSummaryAnswers = jest.fn(); - const { getByTestId, getByText, getAllByTestId } = render( + const { getByTestId, getByText } = render( @@ -202,7 +210,11 @@ describe("CalculatedSummaryPreview", () => { mocks, } ); - - expect(sortedSummaryAnswers).toHaveBeenCalled(); + questionnaire.sections[0].folders[0].pages[2].summaryAnswers.forEach( + (answer) => { + const renderDisplayName = getByText(answer.displayName); + expect(renderDisplayName).toBeInTheDocument(); + } + ); }); }); From 9b60d3e63e1e43cd948cb6fc1c13ba5ba4178d5d Mon Sep 17 00:00:00 2001 From: Farhanam76 Date: Mon, 17 Jun 2024 12:31:46 +0100 Subject: [PATCH 14/19] updated the data test id and wrote test to check the summary answers --- .../page/Preview/CalculatedSummaryPreview.js | 2 +- .../Preview/CalculatedSummaryPreview.test.js | 28 +++++++++++++------ 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js index 9868977619..37efe13a78 100644 --- a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js +++ b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js @@ -218,7 +218,7 @@ const CalculatedSummaryPagePreview = ({ page }) => { - + {answer.displayName} diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js index 5d33eb617e..6f8523eb95 100644 --- a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js +++ b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js @@ -37,7 +37,7 @@ const questionnaire = { id: "6", pageType: "QuestionPage", title: "Page 2", - answers: [ + answer: [ { id: "7", label: "answer 3", @@ -196,13 +196,17 @@ describe("CalculatedSummaryPreview", () => { // test the answer.display name is rendered in the page. // change the code where it test based on the data-test id(data-test id need to be unique for each answer) no functions need to be mock at all. // check the text of answer found from the data test id is equal to the answer.displayName + // check if the question page title appear in the correct order with the answer display name it("should order the summary answers correctly ", () => { - const { getByTestId, getByText } = render( + const { getByTestId } = render( - + + , , { route: `/q/${questionnaireId}/page/9/preview`, @@ -210,11 +214,19 @@ describe("CalculatedSummaryPreview", () => { mocks, } ); - questionnaire.sections[0].folders[0].pages[2].summaryAnswers.forEach( - (answer) => { - const renderDisplayName = getByText(answer.displayName); - expect(renderDisplayName).toBeInTheDocument(); - } + + const answer = questionnaire.sections[0].folders[0].pages[2].summaryAnswers; + expect(getByTestId(`answer-item-${answer[0].id}`)).toHaveTextContent( + "Answer 8" + ); + expect(getByTestId(`answer-item-${answer[1].id}`)).toHaveTextContent( + "Answer 5" + ); + expect(getByTestId(`answer-item-${answer[2].id}`)).toHaveTextContent( + "Answer 7" + ); + expect(getByTestId(`answer-item-${answer[3].id}`)).toHaveTextContent( + "Answer 4" ); }); }); From e937877702d9363502541c41da79e757469dc1d4 Mon Sep 17 00:00:00 2001 From: Farhanam76 Date: Tue, 18 Jun 2024 10:49:53 +0100 Subject: [PATCH 15/19] updated the test for sorted answers and added data test for question title --- .../page/Preview/CalculatedSummaryPreview.js | 9 +++-- .../Preview/CalculatedSummaryPreview.test.js | 38 ++++++++----------- 2 files changed, 22 insertions(+), 25 deletions(-) diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js index 37efe13a78..bf12e0bdb1 100644 --- a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js +++ b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js @@ -181,7 +181,7 @@ const CalculatedSummaryPagePreview = ({ page }) => { {sortedSummaryAnswers.length > 0 ? (

- {sortedSummaryAnswers.map((answer) => { + {sortedSummaryAnswers.map((answer, index) => { const answerPage = getPageByAnswerId(questionnaire, answer.id); const hasAnswerPageIdBeenUsed = usedPageIds.includes( answerPage?.id @@ -212,13 +212,16 @@ const CalculatedSummaryPagePreview = ({ page }) => { key={answer.id} isLastSummaryAnswerFromPage={isLastSummaryAnswerFromPage} > - + {questionTitle} - + {answer.displayName} diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js index 6f8523eb95..c6f10bb7b2 100644 --- a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js +++ b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js @@ -25,9 +25,9 @@ const questionnaire = { pageType: "QuestionPage", title: "Page 1", answers: [ - { id: "4", label: "answer 1", questionPageId: "123" }, + { id: "answer-1", label: "answer 1", questionPageId: "123" }, { - id: "5", + id: "answer-2", label: "answer 2", questionPageId: "234", }, @@ -39,12 +39,12 @@ const questionnaire = { title: "Page 2", answer: [ { - id: "7", + id: "answer-3", label: "answer 3", questionPageId: "345", }, { - id: "8", + id: "answer-4", label: "answer 4", questionPageId: "456", }, @@ -54,11 +54,13 @@ const questionnaire = { id: "9", title: "calculated summary page 1", pageType: "CalculatedSummaryPage", + pageDescription: "Hello", + alias: "Who am I?", summaryAnswers: [ - { id: "8", displayName: "Answer 8" }, - { id: "5", displayName: "Answer 5" }, - { id: "7", displayName: "Answer 7" }, - { id: "4", displayName: "Answer 4" }, + { id: "answer-4", displayName: "Answer 4" }, + { id: "answer-2", displayName: "Answer 2" }, + { id: "answer-3", displayName: "Answer 3" }, + { id: "answer-1", displayName: "Answer 1" }, ], }, ], @@ -197,8 +199,9 @@ describe("CalculatedSummaryPreview", () => { // change the code where it test based on the data-test id(data-test id need to be unique for each answer) no functions need to be mock at all. // check the text of answer found from the data test id is equal to the answer.displayName // check if the question page title appear in the correct order with the answer display name + // index for each loop - it("should order the summary answers correctly ", () => { + it.only("should order the summary answers correctly ", () => { const { getByTestId } = render( @@ -215,18 +218,9 @@ describe("CalculatedSummaryPreview", () => { } ); - const answer = questionnaire.sections[0].folders[0].pages[2].summaryAnswers; - expect(getByTestId(`answer-item-${answer[0].id}`)).toHaveTextContent( - "Answer 8" - ); - expect(getByTestId(`answer-item-${answer[1].id}`)).toHaveTextContent( - "Answer 5" - ); - expect(getByTestId(`answer-item-${answer[2].id}`)).toHaveTextContent( - "Answer 7" - ); - expect(getByTestId(`answer-item-${answer[3].id}`)).toHaveTextContent( - "Answer 4" - ); + expect(getByTestId("answer-item-0")).toHaveTextContent("Answer 4"); + expect(getByTestId("answer-item-1")).toHaveTextContent("Answer 3"); + expect(getByTestId("answer-item-2")).toHaveTextContent("Answer 1"); + expect(getByTestId("answer-item-3")).toHaveTextContent("Answer 2"); }); }); From 11926c6f2c86740c7a01b27c66c7d1f22826c82d Mon Sep 17 00:00:00 2001 From: Farhanam76 Date: Tue, 18 Jun 2024 13:31:41 +0100 Subject: [PATCH 16/19] fixed the issue with the testing --- .../Preview/CalculatedSummaryPreview.test.js | 21 ++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js index c6f10bb7b2..fcd3ae921a 100644 --- a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js +++ b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js @@ -11,6 +11,12 @@ import CalculatedSummaryPreview from "./CalculatedSummaryPreview"; import { publishStatusSubscription } from "components/EditorLayout/Header"; import QuestionnaireContext from "components/QuestionnaireContext"; +jest.mock("@apollo/react-hooks", () => ({ + ...jest.requireActual("@apollo/react-hooks"), + useQuery: jest.fn(), + useMutation: jest.fn(() => [() => null]), +})); + const questionnaire = { id: "questionnaire-1", sections: [ @@ -25,11 +31,13 @@ const questionnaire = { pageType: "QuestionPage", title: "Page 1", answers: [ - { id: "answer-1", label: "answer 1", questionPageId: "123" }, + { + id: "answer-1", + label: "answer 1", + }, { id: "answer-2", label: "answer 2", - questionPageId: "234", }, ], }, @@ -37,16 +45,14 @@ const questionnaire = { id: "6", pageType: "QuestionPage", title: "Page 2", - answer: [ + answers: [ { id: "answer-3", label: "answer 3", - questionPageId: "345", }, { id: "answer-4", label: "answer 4", - questionPageId: "456", }, ], }, @@ -56,6 +62,7 @@ const questionnaire = { pageType: "CalculatedSummaryPage", pageDescription: "Hello", alias: "Who am I?", + summaryAnswers: [ { id: "answer-4", displayName: "Answer 4" }, { id: "answer-2", displayName: "Answer 2" }, @@ -218,8 +225,8 @@ describe("CalculatedSummaryPreview", () => { } ); - expect(getByTestId("answer-item-0")).toHaveTextContent("Answer 4"); - expect(getByTestId("answer-item-1")).toHaveTextContent("Answer 3"); + expect(getByTestId("answer-item-0")).toHaveTextContent("Answer 3"); + expect(getByTestId("answer-item-1")).toHaveTextContent("Answer 4"); expect(getByTestId("answer-item-2")).toHaveTextContent("Answer 1"); expect(getByTestId("answer-item-3")).toHaveTextContent("Answer 2"); }); From bf79b30d46076574bacf7a5aa0a3da278348a2b0 Mon Sep 17 00:00:00 2001 From: Farhanam76 Date: Tue, 18 Jun 2024 20:54:12 +0100 Subject: [PATCH 17/19] added testing for the question page title appear in the correct order with the answer display name --- eq-author/src/App/page/Preview/CalculatedSummaryPreview.js | 2 +- .../src/App/page/Preview/CalculatedSummaryPreview.test.js | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js index bf12e0bdb1..e74e06ac80 100644 --- a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js +++ b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js @@ -213,7 +213,7 @@ const CalculatedSummaryPagePreview = ({ page }) => { isLastSummaryAnswerFromPage={isLastSummaryAnswerFromPage} > {questionTitle} diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js index fcd3ae921a..7fc62bc563 100644 --- a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js +++ b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js @@ -206,10 +206,9 @@ describe("CalculatedSummaryPreview", () => { // change the code where it test based on the data-test id(data-test id need to be unique for each answer) no functions need to be mock at all. // check the text of answer found from the data test id is equal to the answer.displayName // check if the question page title appear in the correct order with the answer display name - // index for each loop it.only("should order the summary answers correctly ", () => { - const { getByTestId } = render( + const { getByTestId, getByText } = render( { mocks, } ); + expect(getByTestId("question-title-0")).toHaveTextContent("Page 2"); expect(getByTestId("answer-item-0")).toHaveTextContent("Answer 3"); expect(getByTestId("answer-item-1")).toHaveTextContent("Answer 4"); + + expect(getByTestId("question-title-2")).toHaveTextContent("Page 1"); + expect(getByTestId("answer-item-2")).toHaveTextContent("Answer 1"); expect(getByTestId("answer-item-3")).toHaveTextContent("Answer 2"); }); From 7009b271a1c59bad3a1f1ddb49e7eff9508bcb79 Mon Sep 17 00:00:00 2001 From: Farhanam76 Date: Tue, 18 Jun 2024 21:22:23 +0100 Subject: [PATCH 18/19] added the missing props in the calculated summary mock data --- .../Preview/CalculatedSummaryPreview.test.js | 38 ++++++++++++++----- 1 file changed, 28 insertions(+), 10 deletions(-) diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js index 7fc62bc563..2ec8e31a75 100644 --- a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js +++ b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js @@ -58,10 +58,15 @@ const questionnaire = { }, { id: "9", - title: "calculated summary page 1", - pageType: "CalculatedSummaryPage", - pageDescription: "Hello", + displayName: "Cal Sum", + position: 1, + title: "Calculated summary page 1", + totalTitle: "Total bills:", + pageDescription: "This page calculates the total bills", alias: "Who am I?", + type: "Number", + answers: [], + comments: [], summaryAnswers: [ { id: "answer-4", displayName: "Answer 4" }, @@ -69,6 +74,24 @@ const questionnaire = { { id: "answer-3", displayName: "Answer 3" }, { id: "answer-1", displayName: "Answer 1" }, ], + pageType: "CalculatedSummaryPage", + section: { + id: "1", + position: 0, + questionnaire: { + id: "1", + metadata: [], + }, + }, + validationErrorInfo: { + id: "test", + totalCount: 0, + errors: [], + }, + folder: { + id: "folder-1", + position: 0, + }, }, ], }, @@ -202,13 +225,8 @@ describe("CalculatedSummaryPreview", () => { expect(wrapper.find(byTestAttr("no-answers-selected"))).toBeTruthy(); }); - // test the answer.display name is rendered in the page. - // change the code where it test based on the data-test id(data-test id need to be unique for each answer) no functions need to be mock at all. - // check the text of answer found from the data test id is equal to the answer.displayName - // check if the question page title appear in the correct order with the answer display name - - it.only("should order the summary answers correctly ", () => { - const { getByTestId, getByText } = render( + it("should sort the summary answers based on the first selection and ensure that the display names and question titles match this order ", () => { + const { getByTestId } = render( Date: Wed, 19 Jun 2024 09:25:01 +0100 Subject: [PATCH 19/19] updated the data test id and changed the if statement within the jsx --- .../page/Preview/CalculatedSummaryPreview.js | 26 ++++++++++++------- .../Preview/CalculatedSummaryPreview.test.js | 4 +-- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js index e74e06ac80..e1888471f9 100644 --- a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js +++ b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js @@ -186,15 +186,16 @@ const CalculatedSummaryPagePreview = ({ page }) => { const hasAnswerPageIdBeenUsed = usedPageIds.includes( answerPage?.id ); + if (!hasAnswerPageIdBeenUsed) { usedPageIds.push(answerPage?.id); } const duplicatedPageIds = getDuplicatedPageIds(); - const questionTitle = - !hasAnswerPageIdBeenUsed && - duplicatedPageIds.includes(answerPage?.id) && - answerPage?.title.replace(/

|<\/p>/g, ""); + const questionTitle = answerPage?.title.replace( + /

|<\/p>/g, + "" + ); const summaryAnswersOnSamePage = sortedSummaryAnswers.filter( (summaryAnswer) => @@ -212,12 +213,17 @@ const CalculatedSummaryPagePreview = ({ page }) => { key={answer.id} isLastSummaryAnswerFromPage={isLastSummaryAnswerFromPage} > - - {questionTitle} - + {!hasAnswerPageIdBeenUsed && + duplicatedPageIds.includes(answerPage?.id) && ( + pageId === answerPage?.id + )}`} + questionTitle={questionTitle} + > + {questionTitle} + + )} diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js index 2ec8e31a75..03f9a9a283 100644 --- a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js +++ b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js @@ -225,7 +225,7 @@ describe("CalculatedSummaryPreview", () => { expect(wrapper.find(byTestAttr("no-answers-selected"))).toBeTruthy(); }); - it("should sort the summary answers based on the first selection and ensure that the display names and question titles match this order ", () => { + it("should sort the summary answers based on the first selection and ensure that the display names and question titles match this order", () => { const { getByTestId } = render( @@ -246,7 +246,7 @@ describe("CalculatedSummaryPreview", () => { expect(getByTestId("answer-item-0")).toHaveTextContent("Answer 3"); expect(getByTestId("answer-item-1")).toHaveTextContent("Answer 4"); - expect(getByTestId("question-title-2")).toHaveTextContent("Page 1"); + expect(getByTestId("question-title-1")).toHaveTextContent("Page 1"); expect(getByTestId("answer-item-2")).toHaveTextContent("Answer 1"); expect(getByTestId("answer-item-3")).toHaveTextContent("Answer 2");