[skip ci]EES-5469: Replace banner conditional rendering with hidden a…

…ttribute, update tests.
dfe-analytical-services · Jan 16, 2025 · 7f32394 · 7f32394
1 parent 1df1d46
commit 7f32394
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 85 deletions.
diff --git a/src/explore-education-statistics-frontend/src/components/Feedback.tsx b/src/explore-education-statistics-frontend/src/components/Feedback.tsx
@@ -126,66 +126,63 @@ export default function Feedback() {
         )}
       </div>
 
-      {response &&
-        (bannerState === 'notUseful' ||
-          bannerState === 'problemEncountered') && (
-          <div
-            id="feedbackFormContainer"
-            className="govuk-!-padding-left-6 govuk-!-padding-right-6"
-          >
-            <h3 className="govuk-!-margin-top-5">
-              Help us improve Explore education statistics
-            </h3>
-            <p>
-              Don't include personal or financial information like your National
-              Insurance number or credit card details.
-            </p>
-
-            <FormProvider validationSchema={validationSchema}>
-              {({ formState }) => {
-                return (
-                  <Form id="feedbackForm" onSubmit={handleSubmit}>
-                    <FormFieldTextArea<FeedbackRequest>
-                      label="What were you doing?"
-                      name="context"
-                      rows={3}
-                      maxLength={2000}
-                    />
-
-                    {response === 'NotUseful' && (
-                      <FormFieldTextArea<FeedbackRequest>
-                        label="What were you hoping to achieve?"
-                        name="intent"
-                        rows={3}
-                        maxLength={2000}
-                      />
-                    )}
-
-                    {response === 'ProblemEncountered' && (
-                      <FormFieldTextArea<FeedbackRequest>
-                        label="What went wrong?"
-                        name="issue"
-                        rows={3}
-                        maxLength={2000}
-                      />
-                    )}
-
-                    <input type="hidden" name="response" value={response} />
-
-                    <ButtonGroup>
-                      <Button type="submit" disabled={formState.isSubmitting}>
-                        Send
-                      </Button>
-                      <Button variant="secondary" onClick={cancel}>
-                        Cancel
-                      </Button>
-                    </ButtonGroup>
-                  </Form>
-                );
-              }}
-            </FormProvider>
-          </div>
-        )}
+      <div
+        id="feedbackFormContainer"
+        className="govuk-!-padding-left-6 govuk-!-padding-right-6"
+        hidden={bannerState === 'initial' || bannerState === 'thanks'}
+      >
+        <h3 className="govuk-!-margin-top-5">
+          Help us improve Explore education statistics
+        </h3>
+        <p>
+          Don't include personal or financial information like your National
+          Insurance number or credit card details.
+        </p>
+
+        <FormProvider validationSchema={validationSchema}>
+          {({ formState }) => {
+            return (
+              <Form id="feedbackForm" onSubmit={handleSubmit}>
+                {response && (
+                  <FormFieldTextArea<FeedbackRequest>
+                    label="What were you doing?"
+                    name="context"
+                    rows={3}
+                    maxLength={2000}
+                  />
+                )}
+
+                {response === 'NotUseful' && (
+                  <FormFieldTextArea<FeedbackRequest>
+                    label="What were you hoping to achieve?"
+                    name="intent"
+                    rows={3}
+                    maxLength={2000}
+                  />
+                )}
+
+                {response === 'ProblemEncountered' && (
+                  <FormFieldTextArea<FeedbackRequest>
+                    label="What went wrong?"
+                    name="issue"
+                    rows={3}
+                    maxLength={2000}
+                  />
+                )}
+
+                <ButtonGroup>
+                  <Button type="submit" disabled={formState.isSubmitting}>
+                    Send
+                  </Button>
+                  <Button variant="secondary" onClick={cancel}>
+                    Cancel
+                  </Button>
+                </ButtonGroup>
+              </Form>
+            );
+          }}
+        </FormProvider>
+      </div>
     </div>
   );
 }
diff --git a/src/explore-education-statistics-frontend/src/components/__tests__/Feedback.test.tsx b/src/explore-education-statistics-frontend/src/components/__tests__/Feedback.test.tsx
@@ -12,6 +12,7 @@ const feedbackService = jest.mocked(_feedbackService);
 describe('Feedback', () => {
   test('renders initial state correctly', () => {
     render(<Feedback />);
+
     expect(screen.getByText('Is this page useful?')).toBeInTheDocument();
     expect(
       screen.getByRole('button', { name: 'Yes this page is useful' }),
@@ -22,11 +23,22 @@ describe('Feedback', () => {
     expect(
       screen.getByRole('button', { name: 'Report a problem with this page' }),
     ).toBeInTheDocument();
+
+    expect(
+      screen.getByText('Help us improve Explore education statistics'),
+    ).not.toBeVisible();
+
+    expect(
+      screen.queryByText('Thank you for your feedback'),
+    ).not.toBeInTheDocument();
   });
 
   test('renders correctly and submits when "Yes" is selected', async () => {
+    const user = userEvent.setup();
+
     render(<Feedback />);
-    await userEvent.click(
+
+    await user.click(
       screen.getByRole('button', { name: 'Yes this page is useful' }),
     );
 
@@ -43,8 +55,18 @@ describe('Feedback', () => {
   });
 
   test('renders correctly when "No" is selected', async () => {
+    const user = userEvent.setup();
+
     render(<Feedback />);
-    await userEvent.click(
+
+    expect(
+      screen.queryByLabelText('What were you doing?'),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByLabelText('What were you hoping to achieve?'),
+    ).not.toBeInTheDocument();
+
+    await user.click(
       screen.getByRole('button', { name: 'No this page is not useful' }),
     );
 
@@ -55,25 +77,22 @@ describe('Feedback', () => {
   });
 
   test('submits correctly when "No" is selected', async () => {
+    const user = userEvent.setup();
+
     render(<Feedback />);
-    await userEvent.click(
+
+    await user.click(
       screen.getByRole('button', { name: 'No this page is not useful' }),
     );
 
-    const contextTextArea = screen.getByLabelText('What were you doing?', {
-      selector: 'textarea',
-    });
-
+    const contextTextArea = screen.getByLabelText('What were you doing?');
     const intentTextArea = screen.getByLabelText(
       'What were you hoping to achieve?',
-      {
-        selector: 'textarea',
-      },
     );
 
-    await userEvent.type(contextTextArea, 'test context');
-    await userEvent.type(intentTextArea, 'test intent');
-    await userEvent.click(screen.getByRole('button', { name: 'Send' }));
+    await user.type(contextTextArea, 'test context');
+    await user.type(intentTextArea, 'test intent');
+    await user.click(screen.getByRole('button', { name: 'Send' }));
 
     await waitFor(() => {
       expect(feedbackService.sendFeedback).toHaveBeenCalledWith(
@@ -90,8 +109,16 @@ describe('Feedback', () => {
   });
 
   test('renders correctly when "Report a problem with this page" is selected', async () => {
+    const user = userEvent.setup();
+
     render(<Feedback />);
-    await userEvent.click(
+
+    expect(
+      screen.queryByLabelText('What were you doing?'),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByLabelText('What went wrong?')).not.toBeInTheDocument();
+
+    await user.click(
       screen.getByRole('button', { name: 'Report a problem with this page' }),
     );
 
@@ -100,22 +127,20 @@ describe('Feedback', () => {
   });
 
   test('submits correctly when "Report a problem with this page" is selected', async () => {
+    const user = userEvent.setup();
+
     render(<Feedback />);
-    await userEvent.click(
+
+    await user.click(
       screen.getByRole('button', { name: 'Report a problem with this page' }),
     );
 
-    const contextTextArea = screen.getByLabelText('What were you doing?', {
-      selector: 'textarea',
-    });
-
-    const issueTextArea = screen.getByLabelText('What went wrong?', {
-      selector: 'textarea',
-    });
+    const contextTextArea = screen.getByLabelText('What were you doing?');
+    const issueTextArea = screen.getByLabelText('What went wrong?');
 
-    await userEvent.type(contextTextArea, 'test context');
-    await userEvent.type(issueTextArea, 'test issue');
-    await userEvent.click(screen.getByRole('button', { name: 'Send' }));
+    await user.type(contextTextArea, 'test context');
+    await user.type(issueTextArea, 'test issue');
+    await user.click(screen.getByRole('button', { name: 'Send' }));
 
     await waitFor(() => {
       expect(feedbackService.sendFeedback).toHaveBeenCalledWith(