Merge pull request #1459 from isaacphysics/redesign/improvement/remove-confusing-text-from-test-page

remove confusing text from View Test page

Author: sjd210

src/app/components/elements/quiz/QuizContentsComponent.tsx

@@ -123,14 +123,16 @@ function QuizDetails({attempt, sections, questions, pageLink}: QuizAttemptProps)
 
 function QuizHeader({attempt, preview, view, user}: QuizAttemptProps | QuizViewProps) {
     const dispatch = useAppDispatch();
-    if (preview || view) {
-        const quiz = view ? view.quiz : attempt.quiz;
+    if (view) {
+        return isTeacherOrAbove(user) && <Button className="float-end ms-3 mb-3" onClick={() => dispatch(showQuizSettingModal(view.quiz!))}>Set Test</Button>;
+    }
+    else if (preview) {
         return <>
-            {preview && <EditContentButton doc={attempt.quiz} />}
+            <EditContentButton doc={attempt.quiz} />
             <div data-testid="quiz-action" className="d-flex">
-                <p>{ preview ? "You are previewing this test." : "You are viewing the rubric for this test."}</p>
+                <p>You are previewing this test.</p>
                 <Spacer />
-                {isTeacherOrAbove(user) && <Button onClick={() => dispatch(showQuizSettingModal(quiz!))}>Set Test</Button>}
+                {isTeacherOrAbove(user) && <Button onClick={() => dispatch(showQuizSettingModal(attempt.quiz!))}>Set Test</Button>}
             </div>
         </>;
     } else if (isDefined(attempt.quizAssignment)) {
@@ -165,8 +167,7 @@ function QuizRubric({attempt, view}: Pick<QuizAttemptProps | QuizViewProps, "att
     const rubric = attempt ? attempt.quiz?.rubric : view?.quiz?.rubric;
     const renderRubric = (rubric?.children || []).length > 0;
     return <div>
-        {rubric && renderRubric && <div>
-            <h4>Instructions</h4>
+        {rubric && renderRubric && <div data-testid="quiz-rubric">
             <IsaacContentValueOrChildren value={rubric.value}>
                 {rubric.children}
             </IsaacContentValueOrChildren>

src/test/helpers/quiz.ts

@@ -24,6 +24,8 @@ export const expectErrorMessage = expectTextInElementWithId('error-message');
 
 export const expectActionMessage = expectTextInElementWithId('quiz-action');
 
+export const expectRubric = expectTextInElementWithId('quiz-rubric');
+
 export const setTestButton = () => screen.queryByRole('button', {name: "Set Test"});
 
 export const editButton = () => screen.queryByRole('heading', {name: "Published ✎"});

src/test/pages/QuizAttempt.test.tsx

@@ -1,7 +1,7 @@
-import { expectLinkWithEnabledBackwardsNavigation, expectH1, expectH4, expectTitledSection, expectUrl } from "../testUtils";
+import { expectLinkWithEnabledBackwardsNavigation, expectH1, expectH4, expectUrl } from "../testUtils";
 import {mockAttempts} from "../../mocks/data";
 import { isPhy, siteSpecific } from "../../app/services";
-import { expectActionMessage, expectAdaBreadCrumbs, expectErrorMessage, expectPhyBreadCrumbs, expectSidebarToggle, renderQuizPage, sideBarTestCases, testSectionsHeader } from "../helpers/quiz";
+import { expectActionMessage, expectAdaBreadCrumbs, expectErrorMessage, expectPhyBreadCrumbs, expectSidebarToggle, expectRubric, renderQuizPage, sideBarTestCases, testSectionsHeader } from "../helpers/quiz";
 import { screen } from "@testing-library/react";
 
 describe("QuizAttempt", () => {
@@ -33,7 +33,7 @@ describe("QuizAttempt", () => {
 
         it('shows quiz rubric', async () => {
             await studentAttemptsQuiz();
-            expectTitledSection("Instructions", attempt.quiz?.rubric?.children?.[0].value);
+            expectRubric(attempt.quiz?.rubric?.children?.[0].value);
         });
 
         it("shows Test sections that load section and allow navigating back", async () => {

src/test/pages/QuizPreview.test.tsx

@@ -1,7 +1,7 @@
-import { expectLinkWithEnabledBackwardsNavigation, expectH1, expectH4, expectTitledSection, expectUrl } from "../testUtils";
+import { expectLinkWithEnabledBackwardsNavigation, expectH1, expectH4, expectUrl } from "../testUtils";
 import { mockPreviews } from "../../mocks/data";
 import { isPhy, siteSpecific } from "../../app/services";
-import { expectActionMessage, expectAdaBreadCrumbs, expectErrorMessage, expectPhyBreadCrumbs, expectSidebarToggle, renderQuizPage, sideBarTestCases, testSectionsHeader } from "../helpers/quiz";
+import { expectActionMessage, expectAdaBreadCrumbs, expectErrorMessage, expectPhyBreadCrumbs, expectSidebarToggle, expectRubric, renderQuizPage, sideBarTestCases, testSectionsHeader } from "../helpers/quiz";
 import { screen } from "@testing-library/react";
 
 describe("QuizPreview", () => {
@@ -33,7 +33,7 @@ describe("QuizPreview", () => {
 
         it('shows quiz rubric', async () => {
             await teacherPreviewsQuiz();
-            expectTitledSection("Instructions", preview.rubric?.children?.[0].value);
+            expectRubric(preview.rubric?.children?.[0].value);
         });
 
         it("shows Test sections that load section and allow navigating back", async () => {

src/test/pages/QuizView.test.tsx

@@ -1,8 +1,8 @@
-import { expectLinkWithEnabledBackwardsNavigation, expectH1, expectH4, expectTitledSection, expectUrl } from "../testUtils";
+import { expectLinkWithEnabledBackwardsNavigation, expectH1, expectH4, expectUrl } from "../testUtils";
 import {mockRubrics} from "../../mocks/data";
-import { editButton, expectActionMessage, expectAdaBreadCrumbs, expectErrorMessage, expectPhyBreadCrumbs, expectSidebarToggle, previewButton, renderQuizPage, setTestButton, sideBarTestCases, testSectionsHeader } from "../helpers/quiz";
+import { editButton,  expectAdaBreadCrumbs,  expectErrorMessage, expectPhyBreadCrumbs, expectRubric, expectSidebarToggle, previewButton, renderQuizPage, setTestButton, sideBarTestCases, testSectionsHeader } from "../helpers/quiz";
 import { isPhy, siteSpecific } from "../../app/services";
-import { screen } from "@testing-library/react";
+import {screen } from "@testing-library/react";
 
 describe("QuizView", () => {
     const quizId = Object.keys(mockRubrics)[0];
@@ -24,9 +24,9 @@ describe("QuizView", () => {
         expectH1(rubric.title);
     });
 
-    it('shows message about this page', async () => {
+    it('does not show message about this page', async () => {
         await studentViewsQuiz();
-        expectActionMessage('You are viewing the rubric for this test.');
+        expect(screen.queryByTestId("quiz-action")).not.toBeInTheDocument();
     });
 
     it('does not show Set Test button', async () => {
@@ -36,7 +36,7 @@ describe("QuizView", () => {
 
     it('shows quiz rubric', async () => {
         await studentViewsQuiz();
-        expectTitledSection("Instructions", rubric.rubric?.children?.[0].value);
+        expectRubric(rubric.rubric?.children?.[0].value);
     });
 
     it("does not show Test sections", async () => {

src/test/testUtils.tsx

@@ -226,15 +226,6 @@ export const expectH4 = expectHeading(4);
 
 export const expectTextInElementWithId = (testId: string) => (msg: string) => expect(screen.getByTestId(testId)).toHaveTextContent(msg);
 
-export const expectTitledSection = (title: string, message: string | undefined) => {
-    const titleE = screen.getByRole('heading', { name: title });
-    if (titleE.parentElement === null) {
-        throw new Error(`Could not find parent for heading: ${title}`);
-    }
-    const [paragraph] = within(titleE.parentElement).getAllByRole('paragraph');
-    return expect(paragraph).toHaveTextContent(`${message}`);
-}
-;
 export const expectLinkWithEnabledBackwardsNavigation = async (text: string | undefined, targetHref: string, originalHref: string) => {
     if (text === undefined) {
         throw new Error("Target text is undefined");