Updated starter with most recent test adjustments

src/App.jsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 // IMPORT ANY NEEDED COMPONENTS HERE
-import { createDataSet } from "./data/dataset"
+import { Dataset } from "./data/dataset"
 import "./App.css"
 
 // don't move this!
@@ -18,9 +18,10 @@ export const appInfo = {
   },
 }
 // or this!
-const { data, categories, restaurants } = createDataSet()
 
 export function App() {
+  const { data, categories, restaurants } = Dataset.createDataSet()
+
   return (
     <main className="App">
       {/* CATEGORIES COLUMN */}

src/data/dataset.js

@@ -1,12 +1,13 @@
 import data from "./normalized-fast-food-feud.json"
 
-export const getUniqueCategories = (d) => [...new Set(d.map((row) => row.food_category))]
-export const getUniqueRestaurants = (d) => [...new Set(d.map((row) => row.restaurant))]
-
-export const createDataSet = () => {
-  return {
-    data,
-    restaurants: getUniqueRestaurants(data),
-    categories: getUniqueCategories(data),
-  }
+export const Dataset = {
+  getUniqueCategories: (d) => [...new Set(d.map((row) => row.food_category))],
+  getUniqueRestaurants: (d) => [...new Set(d.map((row) => row.restaurant))],
+  createDataSet: () => {
+    return {
+      data,
+      restaurants: Dataset.getUniqueRestaurants(data),
+      categories: Dataset.getUniqueCategories(data),
+    }
+  },
 }

src/tests/feature-001-passing-props.test.jsx

@@ -3,8 +3,16 @@ import { configureSpecSuiteWithUtils } from "./utils"
 import { appInfo } from "../App"
 
 export function testPassingProps(App) {
-  const { assert, suite, render, fireEvent, customQueries, bootstrapTestSuiteContext } =
-    configureSpecSuiteWithUtils(App)
+  const {
+    assert,
+    suite,
+    render,
+    cleanup,
+    customQueries,
+    bootstrapTestSuiteContext,
+    within,
+    //
+  } = configureSpecSuiteWithUtils(App)
 
   const FeatureTestSuite = suite(`FEATURE 001: The \`Header\` component`)
 
@@ -15,7 +23,6 @@ export function testPassingProps(App) {
       singleComponentNames: [
         "Header",
         "Instructions",
-        // "NutritionLabel",
       ],
       multiComponentNames: ["Chip"],
     })
@@ -29,94 +36,124 @@ export function testPassingProps(App) {
 
   FeatureTestSuite.after.each((ctx) => {
     ctx.sandbox.restore()
+    cleanup()
   })
 
   FeatureTestSuite.after((ctx) => {
     ctx.sandbox.restore()
   })
 
-  FeatureTestSuite.test("Header component renders the appropriate site Title", async () => {
-    const { getByText, findByText } = render(<App />)
+  FeatureTestSuite.test("`Header` component receives the correct props", async (ctx) => {
+    ctx.propAssertions.assertComponentExistsAndHasProps("Header")
+
+    ctx.propAssertions.assertComponentExistsAndHasValueInProps("Header", "title")
+    ctx.propAssertions.assertComponentExistsAndHasValueInProps("Header", "tagline")
+    ctx.propAssertions.assertComponentExistsAndHasValueInProps("Header", "description")
+
+    ctx.propAssertions.assertComponentExistsAndHasPropOfType("Header", "title", "string")
+    ctx.propAssertions.assertComponentExistsAndHasPropOfType("Header", "tagline", "string")
+    ctx.propAssertions.assertComponentExistsAndHasPropOfType("Header", "description", "string")
 
-    assert.ok(getByText("Fast Food Feud", { exact: false, selector: "h1" }), "Couldn't find the site title")
-    assert.ok(await findByText("Fast Food Feud", { exact: false, selector: "h1" }), "Couldn't find the site title")
+    ctx.propAssertions.assertComponentExistsAndHasPropWithValue("Header", "title", appInfo.title)
+    ctx.propAssertions.assertComponentExistsAndHasPropWithValue("Header", "tagline", appInfo.tagline)
+    ctx.propAssertions.assertComponentExistsAndHasPropWithValue("Header", "description", appInfo.description)
   })
 
-  FeatureTestSuite.test("Header component renders the appropriate tagline", async () => {
-    const { getByText, findByText } = render(<App />)
+  FeatureTestSuite.test("`Header` component renders the appropriate site title", async () => {
+    const { container, findByText } = render(<App />)
 
-    assert.ok(getByText("Fast Food Feud", { exact: false, selector: "h1" }), "Couldn't find the site title")
+    const Header = customQueries.getHeaderElement(container)
 
-    assert.equal(
-      Boolean(await findByText("Folks' Favorite Friendly Fuel Finder For Food Facts", { selector: "h4" })),
-      true,
-      "Couldn't find the proper tagline"
+    assert.ok(
+      Header,
+      `The \`Header\` component should be rendered to the screen and should return JSX inside a native HTML \`header\` element.`
+    )
+
+    assert.ok(
+      await findByText(appInfo.title, { exact: false, selector: "h1" }),
+      "Couldn't find the site title rendered by the `Header` component in an `h1` tag"
     )
     assert.ok(
-      await findByText("Folks' Favorite Friendly Fuel Finder For Food Facts", { selector: "h4" }),
-      "Couldn't find the proper tagline"
+      within(Header).getByText(appInfo.title, { exact: false, selector: "h1" }),
+      "Couldn't find the site title rendered by the `Header` component in an `h1` tag"
     )
   })
 
-  FeatureTestSuite.test("Header component renders the appropriate site description prop", async () => {
-    const { getByText, findByText } = render(<App />)
+  FeatureTestSuite.test("`Header` component renders the appropriate tagline", async () => {
+    const { container, findByText } = render(<App />)
+
+    const Header = customQueries.getHeaderElement(container)
 
     assert.ok(
-      getByText("is here to arm the public", { exact: false, selector: "p" }),
-      "Site description doesn't exist on the page."
+      Header,
+      `The \`Header\` component should be rendered to the screen and should return JSX inside a native HTML \`header\` element.`
     )
 
     assert.ok(
-      await findByText("is here to arm the public", { exact: false, selector: "p" }),
-      "Site description doesn't exist on the page."
+      await findByText(appInfo.tagline, { exact: true, selector: "h4" }),
+      "Couldn't find the site tagline rendered by the `Header` component in an `h4` tag"
+    )
+    assert.ok(
+      within(Header).getByText(appInfo.tagline, { exact: true, selector: "h4" }),
+      "Couldn't find the site tagline rendered by the `Header` component in an `h4` tag"
     )
   })
 
-  FeatureTestSuite.test("Header component receives the correct props", async (ctx) => {
-    ctx.propAssertions.assertComponentExistsAndHasProps("Header")
+  FeatureTestSuite.test("`Header` component renders the appropriate site description prop", async () => {
+    const { container, findByText } = render(<App />)
 
-    ctx.propAssertions.assertComponentExistsAndHasValueInProps("Header", "title")
-    ctx.propAssertions.assertComponentExistsAndHasValueInProps("Header", "tagline")
-    ctx.propAssertions.assertComponentExistsAndHasValueInProps("Header", "description")
+    const Header = customQueries.getHeaderElement(container)
 
-    ctx.propAssertions.assertComponentExistsAndHasPropOfType("Header", "title", "string")
-    ctx.propAssertions.assertComponentExistsAndHasPropOfType("Header", "tagline", "string")
-    ctx.propAssertions.assertComponentExistsAndHasPropOfType("Header", "description", "string")
+    assert.ok(
+      Header,
+      `The \`Header\` component should be rendered to the screen and should return JSX inside a native HTML \`header\` element.`
+    )
 
-    ctx.propAssertions.assertComponentExistsAndHasPropWithValue("Header", "title", appInfo.title)
-    ctx.propAssertions.assertComponentExistsAndHasPropWithValue("Header", "tagline", appInfo.tagline)
-    ctx.propAssertions.assertComponentExistsAndHasPropWithValue("Header", "description", appInfo.description)
+    assert.ok(
+      await findByText("is here to arm the public", { exact: false, selector: "p" }),
+      "Couldn't find the site description rendered by the `Header` component inside a `p` tag"
+    )
+    assert.ok(
+      within(Header).getByText(appInfo.description, { exact: true, selector: "p" }),
+      "Couldn't find the site description rendered by the `Header` component inside a `p` tag"
+    )
+  })
+
+  FeatureTestSuite.test("`Instructions` component receives the correct props", async (ctx) => {
+    ctx.propAssertions.assertComponentExistsAndHasProps("Instructions")
+    ctx.propAssertions.assertComponentExistsAndHasValueInProps("Instructions", "instructions")
+    ctx.propAssertions.assertComponentExistsAndHasPropOfType("Instructions", "instructions", "string")
+    ctx.propAssertions.assertComponentExistsAndHasPropWithValue(
+      "Instructions",
+      "instructions",
+      appInfo.instructions.start
+    )
   })
 
   FeatureTestSuite.test(
-    "Instructions component receives props and renders the appropriate instruction",
+    "`Instructions` component receives props and renders the appropriate instruction",
     async (ctx) => {
-      const { getByText, findByText } = render(<App />)
+      const { container, findByText } = render(<App />)
+
+      const Instructions = customQueries.getInstructionsAside(container)
+
+      assert.ok(
+        Instructions,
+        `The \`Instructions\` component should be rendered to the screen and ` +
+          `should return JSX inside a native HTML \`aside\` element with a className of \`instructions\`.`
+      )
 
       assert.ok(
-        await findByText(
-          "Start by clicking on a food category on the left and a fast food joint from the list above. Afterwards, you'll be able to choose from a list of menu items and see their nutritional content."
-        ),
-        "Couldn't find the proper instructions"
+        within(Instructions).getByText(appInfo.instructions.start, { exact: true, selector: "p" }),
+        "Couldn't find the start instructions rendered by the `Instructions` component inside a `p` tag"
       )
 
       assert.ok(
-        getByText("clicking on a food category on the left", { exact: false }),
-        "Couldn't find the proper instructions"
+        await findByText(appInfo.instructions.start, { exact: true, selector: "p" }),
+        "Couldn't find the start instructions rendered by the `Instructions` component inside a `p` tag"
       )
     }
   )
 
-  FeatureTestSuite.test("Instructions component receives the correct props", async (ctx) => {
-    ctx.propAssertions.assertComponentExistsAndHasProps("Instructions")
-    ctx.propAssertions.assertComponentExistsAndHasValueInProps("Instructions", "instructions")
-    ctx.propAssertions.assertComponentExistsAndHasPropOfType("Instructions", "instructions", "string")
-    ctx.propAssertions.assertComponentExistsAndHasPropWithValue(
-      "Instructions",
-      "instructions",
-      appInfo.instructions.start
-    )
-  })
-
   return FeatureTestSuite.run()
 }