More tests

grai-frontend/src/components/graph/drawer/GraphDrawer.tsx

@@ -23,7 +23,7 @@ import {
 import { Viewport } from "reactflow"
 import useLocalState from "helpers/useLocalState"
 import { Filter } from "components/filters/filters"
-import GraphFilterInline from "./GraphFilterInline"
+import GraphFilterInline from "./filters-inline/GraphFilterInline"
 import GraphFilters from "./GraphFilters"
 import GraphSearch from "./GraphSearch"
 

grai-frontend/src/components/graph/drawer/filters-inline/GraphFilterInline.test.tsx

@@ -0,0 +1,208 @@
+import userEvent from "@testing-library/user-event"
+import { act } from "react-dom/test-utils"
+import { render, screen, waitFor } from "testing"
+import GraphFilterInline, { GET_WORKSPACE } from "./GraphFilterInline"
+import GraphError from "components/utils/GraphError"
+import { GraphQLError } from "graphql"
+
+const setInlineFilters = jest.fn()
+
+const defaultProps = {
+  inlineFilters: [
+    {
+      type: "table",
+      field: "namespace",
+      operator: "equals",
+      value: "test",
+    },
+  ],
+  setInlineFilters,
+}
+
+const mocks = [
+  {
+    request: {
+      query: GET_WORKSPACE,
+      variables: {
+        organisationName: "default",
+        workspaceName: "demo",
+      },
+    },
+    result: {
+      data: {
+        workspace: {
+          id: "1",
+          name: "demo",
+          namespaces: {
+            data: [],
+          },
+          tags: {
+            data: [],
+          },
+          sources: {
+            data: [],
+          },
+        },
+      },
+    },
+  },
+]
+
+test("renders", async () => {
+  render(<GraphFilterInline {...defaultProps} />, {
+    path: ":organisationName/:workspaceName/graph",
+    route: "/default/demo/graph",
+  })
+
+  await waitFor(() => {
+    expect(screen.getByText("Save")).toBeInTheDocument()
+  })
+})
+
+test("add", async () => {
+  render(<GraphFilterInline {...defaultProps} />, {
+    path: ":organisationName/:workspaceName/graph",
+    route: "/default/demo/graph",
+  })
+
+  await waitFor(() => {
+    expect(screen.getByTestId("AddIcon")).toBeInTheDocument()
+  })
+
+  await act(async () => {
+    await userEvent.click(screen.getByTestId("AddIcon"))
+  })
+
+  await waitFor(() => {
+    expect(screen.getByText("Choose data field to add")).toBeInTheDocument()
+  })
+
+  await act(async () => {
+    await userEvent.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("remove", async () => {
+  render(<GraphFilterInline {...defaultProps} />, {
+    path: ":organisationName/:workspaceName/graph",
+    route: "/default/demo/graph",
+  })
+
+  await waitFor(() => {
+    expect(screen.getByText("Namespace")).toBeInTheDocument()
+  })
+
+  await act(async () => {
+    await userEvent.hover(screen.getByText("Namespace"))
+  })
+
+  await waitFor(() => {
+    expect(screen.getByTestId("DeleteIcon")).toBeInTheDocument()
+  })
+
+  await act(async () => {
+    await userEvent.click(screen.getByTestId("DeleteIcon"))
+  })
+
+  expect(setInlineFilters).toHaveBeenCalledWith([])
+})
+
+test("edit", async () => {
+  render(<GraphFilterInline {...defaultProps} />, {
+    path: ":organisationName/:workspaceName/graph",
+    route: "/default/demo/graph",
+    mocks,
+  })
+
+  await waitFor(() => {
+    expect(screen.getByText("Namespace")).toBeInTheDocument()
+  })
+
+  await act(async () => {
+    await userEvent.click(screen.getByText("Namespace"))
+  })
+
+  await waitFor(() => {
+    expect(
+      screen.getByText("Only show Table where Namespace"),
+    ).toBeInTheDocument()
+  })
+
+  await waitFor(() => {
+    expect(screen.getByText("In")).toBeInTheDocument()
+  })
+
+  await act(async () => {
+    await userEvent.click(screen.getByText("In"))
+  })
+
+  expect(setInlineFilters).toHaveBeenCalledWith([
+    {
+      field: "namespace",
+      operator: "in",
+      type: "table",
+      value: "test",
+    },
+  ])
+})
+
+test("error", async () => {
+  const mocks = [
+    {
+      request: {
+        query: GET_WORKSPACE,
+        variables: {
+          organisationName: "default",
+          workspaceName: "demo",
+        },
+      },
+      result: {
+        errors: [new GraphQLError("Error!")],
+      },
+    },
+  ]
+
+  render(<GraphFilterInline {...defaultProps} />, {
+    path: ":organisationName/:workspaceName/graph",
+    route: "/default/demo/graph",
+    mocks,
+  })
+
+  await waitFor(() => {
+    expect(screen.getByText("Error!")).toBeInTheDocument()
+  })
+})
+
+test("not found", async () => {
+  const mocks = [
+    {
+      request: {
+        query: GET_WORKSPACE,
+        variables: {
+          organisationName: "default",
+          workspaceName: "demo",
+        },
+      },
+      result: {
+        data: {
+          workspace: null,
+        },
+      },
+    },
+  ]
+
+  render(<GraphFilterInline {...defaultProps} />, {
+    path: ":organisationName/:workspaceName/graph",
+    route: "/default/demo/graph",
+    mocks,
+  })
+
+  await waitFor(() => {
+    expect(screen.getByText("Page not found")).toBeInTheDocument()
+  })
+})

grai-frontend/src/components/graph/drawer/GraphFilterInline.tsx → grai-frontend/src/components/graph/drawer/filters-inline/GraphFilterInline.tsx

@@ -12,9 +12,10 @@ import GraphError from "components/utils/GraphError"
 import {
   GetWorkspaceFilterInline,
   GetWorkspaceFilterInlineVariables,
-} from "./__generated__/GetWorkspaceFilterInline"
-import AddButton from "./filters-inline/AddButton"
-import FilterRow from "./filters-inline/FilterRow"
+} from "../__generated__/GetWorkspaceFilterInline"
+import AddButton from "./AddButton"
+import FilterRow from "./FilterRow"
+import NotFound from "pages/NotFound"
 
 export const GET_WORKSPACE = gql`
   query GetWorkspaceFilterInline(
@@ -65,14 +66,17 @@ const GraphFilterInline: React.FC<GraphFilterInlineProps> = ({
 
   const workspace = data?.workspace
 
-  if (!workspace) return null
+  if (!workspace) return <NotFound />
 
   const properties = getProperties(
     workspace.namespaces.data,
     workspace.tags.data,
     workspace.sources.data,
   )
 
+  const handleAdd = (newFilter: Filter) =>
+    setInlineFilters([...inlineFilters, newFilter])
+
   const handleFilterChange = (index: number) => (filter: Filter) => {
     const newFilters = [...inlineFilters]
     newFilters[index] = filter
@@ -85,27 +89,9 @@ const GraphFilterInline: React.FC<GraphFilterInlineProps> = ({
     setInlineFilters(newFilters)
   }
 
-  const handleAddField = () =>
-    setInlineFilters([
-      ...inlineFilters,
-      {
-        ...defaultFilter,
-        field: properties[0].fields[0].value,
-        operator: properties[0].fields[0].operators[0].value,
-      },
-    ])
-
   return (
     <Box sx={{ p: 1 }}>
       <Stack direction="row" spacing={1} sx={{ mb: 1 }}>
-        <Button
-          variant="outlined"
-          fullWidth
-          startIcon={<Add />}
-          onClick={handleAddField}
-        >
-          Add Field
-        </Button>
         <Button variant="outlined" fullWidth startIcon={<Save />}>
           Save
         </Button>
@@ -119,10 +105,7 @@ const GraphFilterInline: React.FC<GraphFilterInlineProps> = ({
           onDelete={handleFilterDelete(index)}
         />
       ))}
-      <AddButton
-        fields={properties[0].fields}
-        onAdd={newFilter => setInlineFilters([...inlineFilters, newFilter])}
-      />
+      <AddButton fields={properties[0].fields} onAdd={handleAdd} />
     </Box>
   )
 }