test: feedback component unit tests

editor.planx.uk/docs/adding-a-new-component.md

@@ -59,7 +59,7 @@ function SetValueComponent(props: Props) {
 }
 ```
 
-5. `Public.tsx`
+5. `Public.tsx` - note the props below are needed to display the 'More Information' sidebar correctly.
 
 ```typescript
 import { PublicProps } from "@planx/components/shared/types";
@@ -156,4 +156,4 @@ function isTypeForBopsPayload(type?: TYPES) {
     // ...
   }
 }
-```
+```

editor.planx.uk/src/@planx/components/Feedback/Editor/Editor.test.tsx

@@ -7,12 +7,19 @@ import { setup } from "testUtils";
 import { FeedbackEditor } from "./Editor";
 
 describe("When the Feedback editor modal is rendered", () => {
-  it("does not throw an error", () => {
+  beforeEach(() => {
     setup(
       <DndProvider backend={HTML5Backend}>
         <FeedbackEditor id="test-feedback-editor" />
       </DndProvider>,
     );
+  });
+  it("does not throw an error", () => {
     expect(screen.getByText("Feedback")).toBeInTheDocument();
   });
+  it("displays the default title if no edits are made", () => {
+    expect(
+      screen.getByPlaceholderText("Tell us what you think"),
+    ).toBeInTheDocument();
+  });
 });

editor.planx.uk/src/@planx/components/Feedback/Editor/Editor.tsx

@@ -14,17 +14,13 @@ import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
-import {
-  descriptionPlaceholder,
-  disclaimerPlaceholder,
-  freeformQuestionPlaceholder,
-  ratingQuestionPlaceholder,
-  titlePlaceholder,
-} from "../components/placeholders";
+import { defaultContent } from "../components/defaultContent";
 import { Feedback, parseFeedback } from "../model";
 
 type FeedbackEditorProps = EditorProps<TYPES.Feedback, Feedback>;
 
+const HTML_TAG_REGEX = /<[^>]*>/g;
+
 export const FeedbackEditor = (props: FeedbackEditorProps) => {
   const formik = useFormik<Feedback>({
     initialValues: parseFeedback(props.node?.data),
@@ -47,9 +43,9 @@ export const FeedbackEditor = (props: FeedbackEditorProps) => {
               <InputLabel label="Title">
                 <Input
                   format="large"
-                  placeholder={titlePlaceholder}
+                  placeholder={defaultContent.title}
                   name="title"
-                  value={formik.values.title || titlePlaceholder}
+                  value={formik.values.title}
                   onChange={formik.handleChange}
                 />
               </InputLabel>
@@ -58,7 +54,7 @@ export const FeedbackEditor = (props: FeedbackEditorProps) => {
               <InputLabel label="Description" htmlFor="description">
                 <RichTextInput
                   name="description"
-                  value={formik.values.description || descriptionPlaceholder}
+                  value={formik.values.description}
                   placeholder="Description"
                   onChange={formik.handleChange}
                 />
@@ -68,7 +64,10 @@ export const FeedbackEditor = (props: FeedbackEditorProps) => {
             <InputRow>
               <InputLabel label="Rating question" htmlFor="ratingQuestion">
                 <RichTextInput
-                  placeholder={ratingQuestionPlaceholder}
+                  placeholder={defaultContent.ratingQuestion?.replaceAll(
+                    HTML_TAG_REGEX,
+                    "",
+                  )}
                   name="ratingQuestion"
                   value={formik.values.ratingQuestion}
                   onChange={formik.handleChange}
@@ -78,7 +77,10 @@ export const FeedbackEditor = (props: FeedbackEditorProps) => {
             <InputRow>
               <InputLabel label="Freeform question" htmlFor="freeformQuestion">
                 <RichTextInput
-                  placeholder={freeformQuestionPlaceholder}
+                  placeholder={defaultContent.freeformQuestion?.replaceAll(
+                    HTML_TAG_REGEX,
+                    "",
+                  )}
                   name="freeformQuestion"
                   value={formik.values.freeformQuestion}
                   onChange={formik.handleChange}
@@ -89,8 +91,7 @@ export const FeedbackEditor = (props: FeedbackEditorProps) => {
               <InputLabel label="Disclaimer text" htmlFor="disclaimer">
                 <RichTextInput
                   name="disclaimer"
-                  value={formik.values.disclaimer || disclaimerPlaceholder}
-                  placeholder={disclaimerPlaceholder}
+                  value={formik.values.disclaimer}
                   onChange={formik.handleChange}
                 />
               </InputLabel>

editor.planx.uk/src/@planx/components/Feedback/Editor/FeedbackEditor.stories.tsx

@@ -2,12 +2,15 @@ import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 
 import { FeedbackEditor } from "./Editor";
+
 const meta = {
   title: "Editor Components/Feedback",
   component: FeedbackEditor,
 } satisfies Meta<typeof FeedbackEditor>;
+
 type Story = StoryObj<typeof meta>;
 export default meta;
+
 export const Basic = {
   render: () => <FeedbackEditor />,
 } satisfies Story;

editor.planx.uk/src/@planx/components/Feedback/Public/Feedback.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 
+import { defaultContent } from "../components/defaultContent";
 import Public from "./Public";
 
 const meta = {
@@ -12,8 +13,5 @@ type Story = StoryObj<typeof meta>;
 export default meta;
 
 export const Basic = {
-  args: {
-    title: "Tell us what you think",
-    feedbackRequired: false,
-  },
+  args: defaultContent,
 } satisfies Story;

editor.planx.uk/src/@planx/components/Feedback/Public/Public.tsx

@@ -1,34 +1,63 @@
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
-import Typography from "@mui/material/Typography";
+import { Disclaimer } from "@planx/components/shared/Disclaimer";
 import Card from "@planx/components/shared/Preview/Card";
 import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
 import type { PublicProps } from "@planx/components/shared/types";
+import { FeedbackView } from "components/Feedback/types";
 import { useFormik } from "formik";
+import {
+  getInternalFeedbackMetadata,
+  insertFeedbackMutation,
+} from "lib/feedback";
 import React from "react";
-import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
 import TerribleFace from "ui/images/feedback_filled-01.svg";
 import PoorFace from "ui/images/feedback_filled-02.svg";
 import NeutralFace from "ui/images/feedback_filled-03.svg";
 import GoodFace from "ui/images/feedback_filled-04.svg";
 import ExcellentFace from "ui/images/feedback_filled-05.svg";
 import InputLabel from "ui/public/InputLabel";
+import ErrorWrapper from "ui/shared/ErrorWrapper";
+import Input from "ui/shared/Input/Input";
 import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml/ReactMarkdownOrHtml";
 
 import { getPreviouslySubmittedData, makeData } from "../../shared/utils";
 import { FaceBox } from "../components/FaceBox";
-import { Feedback, FormProps } from "../model";
+import { createFeedbackSchema, Feedback, FormProps } from "../model";
 import { StyledToggleButtonGroup } from "../styled";
 
+export const PASSPORT_FEEDBACK_KEY = "_feedback";
+
 const FeedbackComponent = (props: PublicProps<Feedback>): FCReturn => {
+  const feedbackDataSchema = createFeedbackSchema(props.feedbackRequired);
+
+  const handleSubmitFeedback = async (values: FormProps) => {
+    const metadata = await getInternalFeedbackMetadata();
+    const data = {
+      ...metadata,
+      ...values,
+      feedbackType: "component" as FeedbackView,
+    };
+    const submitFeedbackResult = await insertFeedbackMutation(data).catch(
+      (err) => {
+        console.error(err);
+      },
+    );
+    props.handleSubmit?.(makeData(props, values, PASSPORT_FEEDBACK_KEY));
+    if (!submitFeedbackResult) {
+      return;
+    }
+  };
+
   const formik = useFormik<FormProps>({
     initialValues: getPreviouslySubmittedData(props) ?? {
       feedbackScore: "",
-      feedback: "",
-    },
-    onSubmit: (values) => {
-      props.handleSubmit?.(makeData(props, values));
+      userComment: "",
     },
+    onSubmit: handleSubmitFeedback,
+    validateOnBlur: false,
+    validateOnChange: false,
+    validationSchema: feedbackDataSchema,
   });
 
   const handleFeedbackChange = (
@@ -42,13 +71,18 @@ const FeedbackComponent = (props: PublicProps<Feedback>): FCReturn => {
 
   return (
     <Card handleSubmit={formik.handleSubmit}>
-      <CardHeader title={props.title} />
+      <CardHeader
+        title={props.title}
+        info={props.info}
+        policyRef={props.policyRef}
+        howMeasured={props.howMeasured}
+      />
       <ReactMarkdownOrHtml
         source={props.description}
         id={"DESCRIPTION_TEXT"}
         openLinksOnNewTab
       />
-      <Box pt={2} mb={3}>
+      <Box my={4}>
         {props.ratingQuestion && (
           <InputLabel
             label={
@@ -60,47 +94,54 @@ const FeedbackComponent = (props: PublicProps<Feedback>): FCReturn => {
             }
           />
         )}
-        <StyledToggleButtonGroup
-          value={formik.values.feedbackScore}
-          exclusive
-          id="feedbackButtonGroup"
-          onChange={handleFeedbackChange}
-          aria-label="feedback score"
-        >
-          <Grid container columnSpacing={15} component="fieldset">
-            <FaceBox
-              value="1"
-              testId="feedback-button-terrible"
-              icon={TerribleFace}
-              label="Terrible"
-              altText="very unhappy face"
-            />
-            <FaceBox
-              value="2"
-              icon={PoorFace}
-              label="Poor"
-              altText="slightly unhappy face"
-            />
-            <FaceBox
-              value="3"
-              icon={NeutralFace}
-              label="Neutral"
-              altText="neutral face"
-            />
-            <FaceBox
-              value="4"
-              icon={GoodFace}
-              label="Good"
-              altText="smiling face"
-            />
-            <FaceBox
-              value="5"
-              icon={ExcellentFace}
-              label="Excellent"
-              altText="very happy face"
-            />
-          </Grid>
-        </StyledToggleButtonGroup>
+        <ErrorWrapper error={formik.errors.feedbackScore}>
+          <StyledToggleButtonGroup
+            value={formik.values.feedbackScore}
+            exclusive
+            id="feedbackButtonGroup"
+            onChange={handleFeedbackChange}
+            aria-label="feedback score"
+          >
+            <Grid
+              container
+              columnSpacing={2}
+              component="fieldset"
+              direction={{ xs: "column", formWrap: "row" }}
+            >
+              <FaceBox
+                value={1}
+                testId="feedback-button-terrible"
+                icon={TerribleFace}
+                label="Terrible"
+                altText="very unhappy face"
+              />
+              <FaceBox
+                value={2}
+                icon={PoorFace}
+                label="Poor"
+                altText="slightly unhappy face"
+              />
+              <FaceBox
+                value={3}
+                icon={NeutralFace}
+                label="Neutral"
+                altText="neutral face"
+              />
+              <FaceBox
+                value={4}
+                icon={GoodFace}
+                label="Good"
+                altText="smiling face"
+              />
+              <FaceBox
+                value={5}
+                icon={ExcellentFace}
+                label="Excellent"
+                altText="very happy face"
+              />
+            </Grid>
+          </StyledToggleButtonGroup>
+        </ErrorWrapper>
         {props.freeformQuestion && (
           <InputLabel
             label={
@@ -112,16 +153,19 @@ const FeedbackComponent = (props: PublicProps<Feedback>): FCReturn => {
             }
           />
         )}
-        <RichTextInput
-          name="feedback"
-          value={formik.values.feedback}
-          placeholder="What did you think?"
+        <Input
+          multiline={true}
+          rows={3}
+          name="userComment"
+          value={formik.values.userComment}
+          bordered
           onChange={formik.handleChange}
+          aria-label="user comment"
+          data-testid="user-comment"
+          errorMessage={formik.errors.userComment}
         />
       </Box>
-      <Typography variant="caption">
-        <ReactMarkdownOrHtml source={props?.disclaimer} id={"DISCLAIMER"} />
-      </Typography>
+      {props.disclaimer && <Disclaimer text={props.disclaimer} />}
     </Card>
   );
 };