(HATCH-478) implement react-ui tests

packages/react-ui/src/components/HatchifyColumn/HatchifyColumn.test.tsx

@@ -0,0 +1,22 @@
+import "@testing-library/jest-dom"
+import { render } from "@testing-library/react"
+import { describe, it } from "vitest"
+import { assembler, integer } from "@hatchifyjs/core"
+import { HatchifyColumn } from "./HatchifyColumn.js"
+
+describe("components/HatchifyColumn", () => {
+  const partialSchemas = {
+    Todo: {
+      name: "Todo",
+      attributes: {
+        importance: integer(),
+      },
+    },
+  }
+
+  const finalSchemas = assembler(partialSchemas)
+
+  it("HatchifyColumn renders", async () => {
+    render(<HatchifyColumn allSchemas={finalSchemas} schemaName="Todo" />)
+  })
+})

packages/react-ui/src/components/HatchifyDataGrid/HatchifyDataGrid.test.tsx

@@ -0,0 +1,59 @@
+import "@testing-library/jest-dom"
+import { render } from "@testing-library/react"
+import { describe, it } from "vitest"
+import { assembler, integer } from "@hatchifyjs/core"
+import { default as HatchifyDataGrid } from "./HatchifyDataGrid.js"
+import hatchifyReactRest from "@hatchifyjs/react-rest"
+
+describe("components/HatchifyDataGrid", () => {
+  const partialSchemas = {
+    Todo: {
+      name: "Todo",
+      attributes: {
+        importance: integer(),
+      },
+    },
+  }
+
+  const finalSchemas = assembler(partialSchemas)
+
+  const fakeRestClient = hatchifyReactRest({
+    version: 0,
+    completeSchemaMap: partialSchemas,
+    findAll: () =>
+      Promise.resolve([
+        {
+          records: [
+            {
+              id: "1",
+              __schema: "Todo",
+              attributes: {
+                name: "foo",
+                created: "2021-01-01",
+                important: true,
+              },
+            },
+          ],
+          related: [],
+        },
+        {
+          unpaginatedCount: 1,
+        },
+      ]),
+    findOne: () => Promise.resolve({ record: {} as any, related: [] }),
+    createOne: () => Promise.resolve({ record: {} as any, related: [] }),
+    updateOne: () => Promise.resolve({ record: {} as any, related: [] }),
+    deleteOne: () => Promise.resolve(),
+  })
+
+  it("HatchifyDataGrid renders", async () => {
+    render(
+      <HatchifyDataGrid
+        finalSchemas={finalSchemas}
+        partialSchemas={partialSchemas}
+        schemaName="Todo"
+        restClient={fakeRestClient}
+      />,
+    )
+  })
+})

packages/react-ui/src/components/HatchifyEmpty/HatchifyEmpty.test.tsx

@@ -0,0 +1,10 @@
+import "@testing-library/jest-dom"
+import { render } from "@testing-library/react"
+import { describe, it } from "vitest"
+import { HatchifyEmpty } from "./HatchifyEmpty.js"
+
+describe("components/HatchifyEverything/components/HatchifyEmpty", () => {
+  it("'HatchifyEmpty' renders", async () => {
+    render(<HatchifyEmpty> </HatchifyEmpty>)
+  })
+})

packages/react-ui/src/components/HatchifyEverything/HatchifyEverything.test.tsx

@@ -0,0 +1,67 @@
+import "@testing-library/jest-dom"
+import { render } from "@testing-library/react"
+import { describe, it } from "vitest"
+import { assembler, integer } from "@hatchifyjs/core"
+import { HatchifyEverything } from "./HatchifyEverything.js"
+import hatchifyReactRest from "@hatchifyjs/react-rest"
+
+describe("components/HatchifyEverything/components/HatchifyEverything", () => {
+  const partialSchemas = {
+    Todo: {
+      name: "Todo",
+      attributes: {
+        importance: integer(),
+      },
+    },
+  }
+
+  const finalSchemas = assembler(partialSchemas)
+
+  const fakeRestClient = hatchifyReactRest({
+    version: 0,
+    completeSchemaMap: partialSchemas,
+    findAll: () =>
+      Promise.resolve([
+        {
+          records: [
+            {
+              id: "1",
+              __schema: "Todo",
+              attributes: {
+                name: "foo",
+                created: "2021-01-01",
+                important: true,
+              },
+            },
+          ],
+          related: [],
+        },
+        {
+          unpaginatedCount: 1,
+        },
+      ]),
+    findOne: () => Promise.resolve({ record: {} as any, related: [] }),
+    createOne: () => Promise.resolve({ record: {} as any, related: [] }),
+    updateOne: () => Promise.resolve({ record: {} as any, related: [] }),
+    deleteOne: () => Promise.resolve(),
+  })
+  it("'HatchifyEverything' renders", async () => {
+    render(
+      <HatchifyEverything
+        partialSchemas={partialSchemas}
+        finalSchemas={finalSchemas}
+        restClient={fakeRestClient}
+      />,
+    )
+  })
+
+  it("'HatchifyEverything' renders with no schemas", async () => {
+    render(
+      <HatchifyEverything
+        partialSchemas={partialSchemas}
+        finalSchemas={{}}
+        restClient={fakeRestClient}
+      />,
+    )
+  })
+})

packages/react-ui/src/components/HatchifyEverything/HatchifyEverything.tsx

@@ -26,7 +26,7 @@ export interface HatchifyEverythingProps<
   minimumLoadTime?: number
 }
 
-function HatchifyEverything<
+export function HatchifyEverything<
   const TSchemas extends Record<string, PartialSchema>,
 >({ finalSchemas, ...rest }: HatchifyEverythingProps<TSchemas>): JSX.Element {
   return (

packages/react-ui/src/components/HatchifyEverything/components/NoSchemas.test.tsx

@@ -0,0 +1,10 @@
+import "@testing-library/jest-dom"
+import { render } from "@testing-library/react"
+import { describe, it } from "vitest"
+import { NoSchemas } from "./NoSchemas.js"
+
+describe("components/HatchifyEverything/components/NoSchemas", () => {
+  it("'NoSchemas' renders", async () => {
+    render(<NoSchemas />)
+  })
+})

packages/react-ui/src/components/HatchifyEverything/components/WithSchemas.test.tsx

@@ -0,0 +1,57 @@
+import "@testing-library/jest-dom"
+import { render } from "@testing-library/react"
+import { describe, it } from "vitest"
+import { WithSchemas } from "./WithSchemas.js"
+import { assembler, integer } from "@hatchifyjs/core"
+import hatchifyReactRest from "@hatchifyjs/react-rest"
+
+describe("components/HatchifyEverything/components/WithSchemas", () => {
+  const partialSchemas = {
+    Todo: {
+      name: "Todo",
+      attributes: {
+        importance: integer(),
+      },
+    },
+  }
+
+  const finalSchemas = assembler(partialSchemas)
+
+  const fakeRestClient = hatchifyReactRest({
+    version: 0,
+    completeSchemaMap: partialSchemas,
+    findAll: () =>
+      Promise.resolve([
+        {
+          records: [
+            {
+              id: "1",
+              __schema: "Todo",
+              attributes: {
+                name: "foo",
+                created: "2021-01-01",
+                important: true,
+              },
+            },
+          ],
+          related: [],
+        },
+        {
+          unpaginatedCount: 1,
+        },
+      ]),
+    findOne: () => Promise.resolve({ record: {} as any, related: [] }),
+    createOne: () => Promise.resolve({ record: {} as any, related: [] }),
+    updateOne: () => Promise.resolve({ record: {} as any, related: [] }),
+    deleteOne: () => Promise.resolve(),
+  })
+  it("'WithSchemas' renders", async () => {
+    render(
+      <WithSchemas
+        partialSchemas={partialSchemas}
+        finalSchemas={finalSchemas}
+        restClient={fakeRestClient}
+      />,
+    )
+  })
+})

packages/react-ui/src/components/HatchifyPresentationProvider/DefaultDisplayComponents/DefaultDisplayComponents.test.tsx

@@ -0,0 +1,117 @@
+import "@testing-library/jest-dom"
+import { render, screen } from "@testing-library/react"
+import { describe, it, expect } from "vitest"
+import {
+  String,
+  StringList,
+  Number,
+  NumberList,
+  Boolean,
+  BooleanList,
+  Date,
+  DateList,
+  Relationship,
+  RelationshipList,
+} from "./DefaultDisplayComponents.js"
+
+describe("components/HatchifyPresentationProvider/DefaultDisplayComponents/", () => {
+  it("String renders", async () => {
+    render(<String value={"Hello"} />)
+
+    expect(screen.getByText("Hello"))
+  })
+
+  it("StringList renders", async () => {
+    render(<StringList values={["Hello, Goodbye"]} />)
+
+    expect(screen.getByText("Hello, Goodbye"))
+  })
+
+  it("Number renders", async () => {
+    render(<Number value={1000} />)
+
+    expect(screen.getByText("1,000"))
+  })
+
+  it("NumberList renders", async () => {
+    render(<NumberList values={[1, 1000, 2]} />)
+
+    expect(screen.getByText("1", { exact: false }))
+    expect(screen.getByText("1,000", { exact: false }))
+    expect(screen.getByText("2", { exact: false }))
+  })
+
+  it("Boolean renders", async () => {
+    render(<Boolean value={true} />)
+
+    expect(screen.getByText("true"))
+  })
+
+  it("BooleanList renders", async () => {
+    render(<BooleanList values={[true, true, false]} />)
+
+    expect(screen.getByText("true, true, false"))
+  })
+
+  describe("Date renders", async () => {
+    it("dateOnly", async () => {
+      render(<Date dateOnly={true} value={"January 17, 2000"} />)
+      expect(screen.getByText("1/17/2000"))
+    })
+    it("full date", async () => {
+      render(<Date dateOnly={false} value={"January 17, 2000"} />)
+      expect(screen.getByText("1/17/2000, 12:00:00 AM"))
+    })
+
+    it("value is invalid", async () => {
+      render(<Date dateOnly={false} value={"Not a good date"} />)
+      expect(screen.queryByText("AM")).not.toBeInTheDocument()
+      expect(screen.queryByText("PM")).not.toBeInTheDocument()
+    })
+  })
+
+  describe("DateList renders", async () => {
+    it("dateOnly", async () => {
+      render(
+        <DateList
+          dateOnly={true}
+          values={["January 1, 2000", "February 1, 2000", "March 1, 2000"]}
+        />,
+      )
+      expect(screen.getByText("1/1/2000", { exact: false }))
+      expect(screen.getByText("2/1/2000", { exact: false }))
+      expect(screen.getByText("3/1/2000", { exact: false }))
+    })
+
+    it("full date", async () => {
+      render(
+        <DateList
+          dateOnly={false}
+          values={["January 1, 2000", "February 1, 2000", "March 1, 2000"]}
+        />,
+      )
+      expect(screen.getByText("1/1/2000, 12:00:00 AM", { exact: false }))
+      expect(screen.getByText("2/1/2000, 12:00:00 AM", { exact: false }))
+      expect(screen.getByText("3/1/2000, 12:00:00 AM", { exact: false }))
+    })
+  })
+
+  it("Relationship renders", async () => {
+    render(
+      <Relationship value={{ id: "1", label: "label", something: true }} />,
+    )
+    expect(screen.getByText("label"))
+  })
+
+  it("RelationshipList renders", async () => {
+    render(
+      <RelationshipList
+        values={[
+          { id: "1", label: "label", something: true },
+          { id: "2", label: "otherLabel", somethingNumber: 1 },
+        ]}
+      />,
+    )
+    expect(screen.getByText("label, otherLabel"))
+  })
+})