Merge pull request #1628 from NYPL/DSD-1746/feedback-interaction-tests

DSD-1746: FeedbackBox interaction tests

CHANGELOG.md

@@ -10,7 +10,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ### Adds
 
-- Adds Storybook interaction tests for `CheckboxGroup`, `DatePicker`, and `Slider` components.
+- Adds Storybook interaction tests for `CheckboxGroup`, `DatePicker`, `Slider`, and `FeedbackBox` components.
 - Adds `closeOnBlur` prop to `MultiSelect` component which, when set to true, closes the component if it loses focus.
 
 ### Updates

src/components/FeedbackBox/FeedbackBox.mdx

@@ -9,10 +9,10 @@ import Link from "../Link/Link";
 
 # FeedbackBox
 
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `1.3.0`    |
-| Latest            | `3.0.0`    |
+| Component Version | DS Version   |
+| ----------------- | ------------ |
+| Added             | `1.3.0`      |
+| Latest            | `Prerelease` |
 
 ## Table of Contents
 

src/components/FeedbackBox/FeedbackBox.stories.tsx

@@ -1,6 +1,7 @@
 import { Box } from "@chakra-ui/react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
+import { userEvent, expect, screen } from "@storybook/test";
 
 import FeedbackBox, { feedbackBoxViewTypeArray } from "./FeedbackBox";
 import Heading from "../Heading/Heading";
@@ -102,14 +103,14 @@ export const WithControls: Story = {
     hiddenFields: undefined,
     id: "feedbackBox-id",
     isInvalidComment: false,
-    isInvalidEmail: false,
+    isInvalidEmail: true,
     isOpen: undefined,
     notificationText: undefined,
     onClose: undefined,
     onOpen: undefined,
     onSubmit: undefined,
-    showCategoryField: false,
-    showEmailField: false,
+    showCategoryField: true,
+    showEmailField: true,
     title: "Help and Feedback",
     view: "form",
   },
@@ -120,5 +121,41 @@ export const WithControls: Story = {
     },
     jest: "FeedbackBox.test.tsx",
   },
+  play: async () => {
+    expect(
+      screen.queryByRole("textbox", { name: /comment/i })
+    ).not.toBeInTheDocument();
+    const button = screen.getByRole("button", { name: "Help and Feedback" });
+    await userEvent.click(button);
+    expect(screen.getByLabelText("Correction")).not.toBeChecked();
+    await userEvent.click(screen.getByLabelText("Correction"));
+    expect(screen.getByLabelText("Correction")).toBeChecked();
+    expect(
+      screen.getByRole("textbox", { name: /comment/i })
+    ).toBeInTheDocument();
+    const submit = screen.getByRole("button", { name: "Submit" });
+    await userEvent.click(submit);
+    expect(screen.getByText(/please fill out this field/i)).toBeInTheDocument();
+    await userEvent.type(
+      screen.getByRole("textbox", { name: /comment/i }),
+      "Hello"
+    );
+    await userEvent.type(
+      screen.getByRole("textbox", { name: /email/i }),
+      "not valid"
+    );
+    expect(
+      screen.getByText(/please enter a valid email address/i)
+    ).toBeInTheDocument();
+    await userEvent.clear(screen.getByRole("textbox", { name: /email/i }));
+    await userEvent.type(
+      screen.getByRole("textbox", { name: /email/i }),
+      "a@b.com"
+    );
+    await userEvent.click(submit);
+    expect(
+      screen.getByText(/thank you for submitting your feedback/i)
+    ).toBeInTheDocument();
+  },
   render: (args) => <FeedbackBoxWithControls {...args} />,
 };

src/components/FeedbackBox/feedbackBoxChangelogData.ts

@@ -9,6 +9,13 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Styles"],
+    notes: ["Adds interaction tests for the Controls story."],
+  },
   {
     date: "2024-03-14",
     version: "3.0.0",