More tests

grai-io · Aug 22, 2023 · 6dae2be · 6dae2be
1 parent 8ba4469
commit 6dae2be
Show file tree

Hide file tree

Showing 6 changed files with 220 additions and 22 deletions.
diff --git a/grai-frontend/src/components/graph/drawer/filters-inline/AddButton.test.tsx b/grai-frontend/src/components/graph/drawer/filters-inline/AddButton.test.tsx
@@ -40,3 +40,22 @@ test("click", async () => {
     expect(screen.getByText("Choose data field to add")).toBeInTheDocument()
   })
 })
+
+test("escape", async () => {
+  render(<AddButton {...defaultProps} />, {
+    path: ":organisationName/:workspaceName/graph",
+    route: "/default/demo/graph",
+  })
+
+  await waitFor(() => {
+    expect(screen.getByTestId("AddIcon")).toBeInTheDocument()
+  })
+
+  await userEvent.click(screen.getByTestId("AddIcon"))
+
+  await waitFor(() => {
+    expect(screen.getByText("Choose data field to add")).toBeInTheDocument()
+  })
+
+  await userEvent.keyboard("{Escape}")
+})
diff --git a/grai-frontend/src/components/graph/drawer/filters-inline/FilterItem.test.tsx b/grai-frontend/src/components/graph/drawer/filters-inline/FilterItem.test.tsx
@@ -0,0 +1,26 @@
+import { render, screen, waitFor } from "testing"
+import FilterItem from "./FilterItem"
+
+const defaultProps = {
+  filter: {
+    type: "table",
+    field: "name",
+    operator: "equals",
+    value: "test",
+  },
+  setFilter: () => {},
+  field: null,
+  operator: null,
+  onDelete: () => {},
+}
+
+test("renders", async () => {
+  render(<FilterItem {...defaultProps} />, {
+    path: ":organisationName/:workspaceName/graph",
+    route: "/default/demo/graph",
+  })
+
+  await waitFor(() => {
+    expect(screen.getByText("name")).toBeInTheDocument()
+  })
+})
diff --git a/grai-frontend/src/components/graph/drawer/filters-inline/FilterItem.tsx b/grai-frontend/src/components/graph/drawer/filters-inline/FilterItem.tsx
@@ -26,7 +26,7 @@ const FilterItem: React.FC<FilterItemProps> = ({
     setAnchorEl(event.currentTarget)
 
   const handleDelete = (
-    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
   ) => {
     event.stopPropagation()
     onDelete()
@@ -41,7 +41,7 @@ const FilterItem: React.FC<FilterItemProps> = ({
       typeof option === "string" ? option === value : option.value === value,
     )
 
-    return typeof option === "string" ? option : option?.label ?? null
+    return typeof option === "string" ? option : option?.label ?? value
   }
 
   const filterValue = Array.isArray(filter.value)
@@ -88,7 +88,7 @@ const FilterItem: React.FC<FilterItemProps> = ({
           </Stack>
           {hover && (
             <Tooltip title="Remove Filter">
-              <IconButton size="small" onClick={handleDelete}>
+              <IconButton size="small" component="div" onClick={handleDelete}>
                 <Delete fontSize="small" />
               </IconButton>
             </Tooltip>

diff --git a/grai-frontend/src/components/graph/drawer/filters-inline/FilterPopper.tsx b/grai-frontend/src/components/graph/drawer/filters-inline/FilterPopper.tsx
@@ -52,14 +52,7 @@ const FilterPopper: React.FC<FilterPopperProps> = ({
       | OperationOption
       | (null | string | OperationOption)[],
     reason: AutocompleteChangeReason,
-  ) => {
-    if (
-      event.type === "keydown" &&
-      (event as React.KeyboardEvent).key === "Backspace" &&
-      reason === "removeOption"
-    ) {
-      return
-    }
+  ) =>
     setFilter({
       ...filter,
       value: Array.isArray(newValue)
@@ -70,7 +63,6 @@ const FilterPopper: React.FC<FilterPopperProps> = ({
             .filter(notEmpty)
         : (typeof newValue === "string" ? newValue : newValue?.value) ?? null,
     })
-  }
 
   const handleClose = () => {
     if (anchorEl) {
@@ -80,6 +72,7 @@ const FilterPopper: React.FC<FilterPopperProps> = ({
   }
 
   const open = Boolean(anchorEl)
+
   const id = open ? "github-label" : undefined
 
   return (
@@ -219,7 +212,6 @@ const FilterPopper: React.FC<FilterPopperProps> = ({
                 onChange={handleValueChange}
                 disableCloseOnSelect
                 PopperComponent={PopperComponent}
-                renderTags={() => null}
                 noOptionsText={`No ${field?.label ?? filter.field}`}
                 renderOption={(props, option, { selected }) => (
                   <li {...props}>

diff --git a/grai-frontend/src/components/graph/drawer/filters-inline/GraphFilterInline.test.tsx b/grai-frontend/src/components/graph/drawer/filters-inline/GraphFilterInline.test.tsx
@@ -1,6 +1,6 @@
 import userEvent from "@testing-library/user-event"
 import { GraphQLError } from "graphql"
-import { render, screen, waitFor } from "testing"
+import { act, fireEvent, render, screen, waitFor } from "testing"
 import GraphFilterInline, { GET_WORKSPACE } from "./GraphFilterInline"
 
 const setInlineFilters = jest.fn()
@@ -32,7 +32,7 @@ const mocks = [
           id: "1",
           name: "demo",
           namespaces: {
-            data: [],
+            data: ["default", "test", "prod"],
           },
           tags: {
             data: [],
@@ -58,6 +58,8 @@ test("renders", async () => {
 })
 
 test("add", async () => {
+  const user = userEvent.setup()
+
   render(<GraphFilterInline {...defaultProps} />, {
     path: ":organisationName/:workspaceName/graph",
     route: "/default/demo/graph",
@@ -67,21 +69,50 @@ test("add", async () => {
     expect(screen.getByTestId("AddIcon")).toBeInTheDocument()
   })
 
-  await userEvent.click(screen.getByTestId("AddIcon"))
+  await act(async () => await user.click(screen.getByTestId("AddIcon")))
 
   await waitFor(() => {
     expect(screen.getByText("Choose data field to add")).toBeInTheDocument()
   })
 
-  await userEvent.click(screen.getByRole("option", { name: /tag/i }))
+  await act(
+    async () => await user.click(screen.getByRole("option", { name: /tag/i })),
+  )
 
   expect(setInlineFilters).toHaveBeenCalledWith([
     { field: "namespace", operator: "equals", type: "table", value: "test" },
     { field: "tag", operator: "contains", type: "table", value: null },
   ])
 })
 
+test("hover", async () => {
+  const user = userEvent.setup()
+
+  render(<GraphFilterInline {...defaultProps} />, {
+    path: ":organisationName/:workspaceName/graph",
+    route: "/default/demo/graph",
+  })
+
+  await waitFor(() => {
+    expect(screen.getByText("Namespace")).toBeInTheDocument()
+  })
+
+  await act(async () => await user.hover(screen.getByText("Namespace")))
+
+  await waitFor(() => {
+    expect(screen.getByTestId("DeleteIcon")).toBeInTheDocument()
+  })
+
+  fireEvent.mouseLeave(screen.getByText("Namespace"))
+
+  await waitFor(() => {
+    expect(screen.queryByTestId("DeleteIcon")).not.toBeInTheDocument()
+  })
+})
+
 test("remove", async () => {
+  const user = userEvent.setup()
+
   render(<GraphFilterInline {...defaultProps} />, {
     path: ":organisationName/:workspaceName/graph",
     route: "/default/demo/graph",
@@ -91,18 +122,20 @@ test("remove", async () => {
     expect(screen.getByText("Namespace")).toBeInTheDocument()
   })
 
-  await userEvent.hover(screen.getByText("Namespace"))
+  await act(async () => await user.hover(screen.getByText("Namespace")))
 
   await waitFor(() => {
     expect(screen.getByTestId("DeleteIcon")).toBeInTheDocument()
   })
 
-  await userEvent.click(screen.getByTestId("DeleteIcon"))
+  await act(async () => await user.click(screen.getByTestId("DeleteIcon")))
 
   expect(setInlineFilters).toHaveBeenCalledWith([])
 })
 
 test("edit", async () => {
+  const user = userEvent.setup()
+
   render(<GraphFilterInline {...defaultProps} />, {
     path: ":organisationName/:workspaceName/graph",
     route: "/default/demo/graph",
@@ -113,7 +146,7 @@ test("edit", async () => {
     expect(screen.getByText("Namespace")).toBeInTheDocument()
   })
 
-  await userEvent.click(screen.getByText("Namespace"))
+  await act(async () => await user.click(screen.getByText("Namespace")))
 
   await waitFor(() => {
     expect(
@@ -122,10 +155,12 @@ test("edit", async () => {
   })
 
   await waitFor(() => {
-    expect(screen.getByText("In")).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: /in/i })).toBeInTheDocument()
   })
 
-  await userEvent.click(screen.getByText("In"))
+  await act(
+    async () => await user.click(screen.getByRole("button", { name: /in/i })),
+  )
 
   expect(setInlineFilters).toHaveBeenCalledWith([
     {
@@ -135,6 +170,126 @@ test("edit", async () => {
       value: "test",
     },
   ])
+
+  await waitFor(() => {
+    expect(screen.getByText("default")).toBeInTheDocument()
+  })
+
+  await act(async () => await user.click(screen.getByText("default")))
+
+  expect(setInlineFilters).toHaveBeenCalledWith([
+    {
+      field: "namespace",
+      operator: "equals",
+      type: "table",
+      value: "default",
+    },
+  ])
+
+  await act(async () => await user.type(screen.getByRole("listbox"), "test"))
+
+  await act(async () => await user.keyboard("{escape}"))
+})
+
+test("edit multiple", async () => {
+  const user = userEvent.setup()
+
+  render(
+    <GraphFilterInline
+      inlineFilters={[
+        {
+          type: "table",
+          field: "namespace",
+          operator: "in",
+          value: ["test"],
+        },
+      ]}
+      setInlineFilters={setInlineFilters}
+    />,
+    {
+      path: ":organisationName/:workspaceName/graph",
+      route: "/default/demo/graph",
+      mocks,
+    },
+  )
+
+  await waitFor(() => {
+    expect(screen.getByText("Namespace")).toBeInTheDocument()
+  })
+
+  await act(async () => await user.click(screen.getByText("Namespace")))
+
+  await waitFor(() => {
+    expect(
+      screen.getByText("Only show Table where Namespace"),
+    ).toBeInTheDocument()
+  })
+
+  await waitFor(() => {
+    expect(screen.getByText("default")).toBeInTheDocument()
+  })
+
+  await act(
+    async () =>
+      await act(async () => await user.click(screen.getByText("default"))),
+  )
+
+  expect(setInlineFilters).toHaveBeenCalledWith([
+    {
+      field: "namespace",
+      operator: "in",
+      type: "table",
+      value: ["test", "default"],
+    },
+  ])
+
+  await act(async () => await user.keyboard("{escape}"))
+})
+
+test("edit text", async () => {
+  const user = userEvent.setup()
+
+  render(
+    <GraphFilterInline
+      inlineFilters={[
+        {
+          type: "table",
+          field: "name",
+          operator: "equals",
+          value: "test",
+        },
+      ]}
+      setInlineFilters={setInlineFilters}
+    />,
+    {
+      path: ":organisationName/:workspaceName/graph",
+      route: "/default/demo/graph",
+      mocks,
+    },
+  )
+
+  await waitFor(() => {
+    expect(screen.getByText("Name")).toBeInTheDocument()
+  })
+
+  await act(async () => await user.click(screen.getByText("Name")))
+
+  await waitFor(() => {
+    expect(screen.getByText("Only show Table where Name")).toBeInTheDocument()
+  })
+
+  await act(async () => await user.type(screen.getByRole("textbox"), "name2"))
+
+  await act(async () => await user.keyboard("{escape}"))
+
+  expect(setInlineFilters).toHaveBeenCalledWith([
+    {
+      field: "name",
+      operator: "equals",
+      type: "table",
+      value: "name2",
+    },
+  ])
 })
 
 test("error", async () => {

diff --git a/grai-frontend/src/components/graph/drawer/filters-inline/StyledInput.test.tsx b/grai-frontend/src/components/graph/drawer/filters-inline/StyledInput.test.tsx
@@ -0,0 +1,6 @@
+import { render } from "testing"
+import StyledInput from "./StyledInput"
+
+test("renders", async () => {
+  render(<StyledInput />)
+})