fix: update search story and test

thepolicylab-projectportals · Oct 26, 2023 · 8ec70dc · 8ec70dc
1 parent 5adb1e9
commit 8ec70dc
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 8 deletions.
diff --git a/__tests__/gatsby-theme-project-portal/SearchBar.spec.tsx b/__tests__/gatsby-theme-project-portal/SearchBar.spec.tsx
@@ -8,7 +8,12 @@ describe("SearchBar", () => {
 
   it("renders label and input elements with the correct props", () => {
     const { getByLabelText, getByText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"search"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     //looking for text set to "Test Label"
     expect(getByText("Test Label")).toBeInTheDocument()
@@ -18,7 +23,12 @@ describe("SearchBar", () => {
 
   it("calls the onChange callback when the input value changes", () => {
     const { getByLabelText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"search"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     //fireEvent.change to simulate the input value change
     //trigger's a change event on the input element
@@ -30,23 +40,38 @@ describe("SearchBar", () => {
 
   it("renders the input placeholder correctly", () => {
     const { getByPlaceholderText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"search"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     //check placeholder text
     expect(getByPlaceholderText("Type to filter posts...")).toBeInTheDocument()
   })
 
   it("sets the aria-label attribute to the correct value", () => {
     const { getByLabelText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"search"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     //checks  that aria-label is set correctly
     expect(getByLabelText("Search")).toHaveAttribute("aria-label", "Search")
   })
 
   it("applies the correct CSS classes to the input element", () => {
     const { getByLabelText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"search"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     //checks that tailwind styling is correct
     expect(getByLabelText("Search")).toHaveClass(
@@ -58,15 +83,25 @@ describe("SearchBar", () => {
 
   it("sets the htmlFor attribute on the label element", () => {
     const { getByText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"search"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     //check rendered component has attribute id = search-label
     expect(getByText("Test Label")).toHaveAttribute("id", "search-label")
   })
 
   it("applies the style prop correctly to the input element", () => {
     const { getByLabelText } = render(
-      <SearchBar label="Test Label" onChange={onChange} />
+      <SearchBar
+        label="Test Label"
+        onChange={onChange}
+        id={"search"}
+        placeholder={"Type to filter posts..."}
+      />
     )
     expect(getByLabelText("Search")).toHaveStyle({ height: "62%" })
   })

diff --git a/packages/gatsby-theme-project-portal/src/components/SearchBar.stories.tsx b/packages/gatsby-theme-project-portal/src/components/SearchBar.stories.tsx
@@ -11,5 +11,9 @@ export default meta
 type Story = StoryObj<typeof SearchBar>
 
 export const Primary: Story = {
-  args: { label: "Search here: " },
+  args: {
+    label: "Search here: ",
+    id: "filter",
+    placeholder: "Type to Search...",
+  },
 }