More frontend tests

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

@@ -57,6 +57,114 @@ test("renders", async () => {
   })
 })
 
+test("renders multiple", async () => {
+  render(
+    <GraphFilterInline
+      inlineFilters={[
+        {
+          type: "table",
+          field: "namespace",
+          operator: "in",
+          value: [],
+        },
+      ]}
+      setInlineFilters={setInlineFilters}
+    />,
+    {
+      path: ":organisationName/:workspaceName/graph",
+      route: "/default/demo/graph",
+    },
+  )
+
+  await waitFor(() => {
+    expect(screen.getByText("Save")).toBeInTheDocument()
+  })
+})
+
+test("renders null value", async () => {
+  render(
+    <GraphFilterInline
+      inlineFilters={[
+        {
+          type: "table",
+          field: "namespace",
+          operator: "in",
+          value: null,
+        },
+      ]}
+      setInlineFilters={setInlineFilters}
+    />,
+    {
+      path: ":organisationName/:workspaceName/graph",
+      route: "/default/demo/graph",
+    },
+  )
+
+  await waitFor(() => {
+    expect(screen.getByText("Save")).toBeInTheDocument()
+  })
+})
+
+test("renders data sources", async () => {
+  render(
+    <GraphFilterInline
+      inlineFilters={[
+        {
+          type: "table",
+          field: "data-source",
+          operator: "in",
+          value: ["1", "2"],
+        },
+      ]}
+      setInlineFilters={setInlineFilters}
+    />,
+    {
+      path: ":organisationName/:workspaceName/graph",
+      route: "/default/demo/graph",
+    },
+  )
+
+  await waitFor(() => {
+    expect(screen.getByText("Save")).toBeInTheDocument()
+  })
+})
+
+test("renders not field", async () => {
+  render(
+    <GraphFilterInline
+      inlineFilters={[
+        {
+          type: "table",
+          field: "test",
+          operator: null,
+          value: null,
+        },
+      ]}
+      setInlineFilters={setInlineFilters}
+    />,
+    {
+      path: ":organisationName/:workspaceName/graph",
+      route: "/default/demo/graph",
+    },
+  )
+
+  await waitFor(() => {
+    expect(screen.getByText("Save")).toBeInTheDocument()
+  })
+})
+
+test("from search", async () => {
+  render(<GraphFilterInline {...defaultProps} />, {
+    path: ":organisationName/:workspaceName/graph",
+    route:
+      '/default/demo/graph?inline-filter=%5B%7B"type"%3A"table"%2C"field"%3A"namespace"%2C"operator"%3A"equals"%2C"value"%3A"default"%7D%5D',
+  })
+
+  await waitFor(() => {
+    expect(screen.getByText("Save")).toBeInTheDocument()
+  })
+})
+
 test("add", async () => {
   const user = userEvent.setup()
 

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

@@ -1,6 +1,19 @@
 import { render } from "testing"
 import StyledInput from "./StyledInput"
+import { createTheme } from "@mui/material"
 
 test("renders", async () => {
   render(<StyledInput />)
 })
+
+test("renders dark mode", async () => {
+  const theme = createTheme({
+    palette: {
+      mode: "dark",
+    },
+  })
+
+  render(<StyledInput />, {
+    theme,
+  })
+})

grai-frontend/src/pages/Graph.test.tsx

@@ -6,6 +6,7 @@ import { destinationTable, sourceTable, spareTable } from "helpers/testNodes"
 import { GET_FILTERS } from "components/graph/drawer/GraphFilters"
 import { SEARCH_TABLES } from "components/graph/drawer/GraphSearch"
 import Graph, { GET_TABLES_AND_EDGES } from "./Graph"
+import { GET_WORKSPACE } from "components/graph/drawer/filters-inline/GraphFilterInline"
 
 const baseFilter = {
   min_x: -500,
@@ -546,3 +547,145 @@ test("filter", async () => {
     expect(screen.getByText("New Page")).toBeInTheDocument()
   })
 })
+
+test("inline filter", async () => {
+  const user = userEvent.setup()
+
+  class ResizeObserver {
+    callback: globalThis.ResizeObserverCallback
+
+    constructor(callback: globalThis.ResizeObserverCallback) {
+      this.callback = callback
+    }
+
+    observe(target: Element) {
+      this.callback([{ target } as globalThis.ResizeObserverEntry], this)
+    }
+
+    unobserve() {}
+
+    disconnect() {}
+  }
+
+  window.ResizeObserver = ResizeObserver
+
+  const inlineFilterMock = (value: string = "default") => ({
+    request: {
+      query: GET_TABLES_AND_EDGES,
+      variables: {
+        organisationName: "default",
+        workspaceName: "demo",
+        filters: {
+          filters: null,
+          min_x: -500,
+          max_x: 0,
+          min_y: 0,
+          max_y: 0,
+          inline_filters: [
+            {
+              type: "table",
+              field: "namespace",
+              operator: "equals",
+              value,
+            },
+          ],
+        },
+      },
+    },
+    result: {
+      data: {
+        workspace: {
+          id: "1",
+          graph: [sourceTable, destinationTable, spareTable],
+          filters: {
+            data: [
+              {
+                id: "1",
+                name: "test",
+                metadata: [],
+              },
+            ],
+          },
+        },
+      },
+    },
+  })
+
+  const workspacesMock = {
+    request: {
+      query: GET_WORKSPACE,
+      variables: {
+        organisationName: "default",
+        workspaceName: "demo",
+      },
+    },
+    result: {
+      data: {
+        workspace: {
+          id: "1",
+          name: "demo",
+          namespaces: {
+            data: ["default", "test"],
+          },
+          tags: {
+            data: [],
+          },
+          sources: {
+            data: [],
+          },
+        },
+      },
+    },
+  }
+
+  render(<Graph alwaysShow />, {
+    path: ":organisationName/:workspaceName/graph",
+    route:
+      '/default/demo/graph?inline-filter=%5B%7B"type"%3A"table"%2C"field"%3A"namespace"%2C"operator"%3A"equals"%2C"value"%3A"default"%7D%5D',
+    routes: ["/:organisationName/:workspaceName/filters"],
+    mocks: [
+      filtersMock,
+      filtersMock,
+      tablesMock,
+      tablesMock,
+      tablesMock,
+      tablesMockWithFilter,
+      searchMock(),
+      searchMock(),
+      inlineFilterMock(),
+      inlineFilterMock(),
+      inlineFilterMock(),
+      inlineFilterMock("test"),
+      workspacesMock,
+      workspacesMock,
+    ],
+  })
+
+  await waitFor(() => {
+    expect(screen.getByText("N2 Node")).toBeInTheDocument()
+  })
+
+  await waitFor(() => {
+    expect(screen.getByTestId("FilterAltIcon")).toBeInTheDocument()
+  })
+
+  await act(async () => {
+    await user.click(screen.getByTestId("FilterAltIcon"))
+  })
+
+  await waitFor(() => {
+    expect(screen.getByText("Namespace")).toBeInTheDocument()
+  })
+
+  await act(async () => {
+    await user.click(screen.getByText("Namespace"))
+  })
+
+  await act(async () => {
+    await user.click(screen.getByText("test"))
+  })
+
+  await waitFor(async () => {
+    await user.click(screen.getByTestId("DeleteIcon"))
+  })
+})

grai-frontend/src/testing/index.tsx

@@ -1,7 +1,7 @@
 /* istanbul ignore file */
 import React, { ReactElement, ReactNode } from "react"
 import { MockedResponse } from "@apollo/client/testing"
-import { ThemeProvider } from "@mui/material"
+import { Theme, ThemeProvider } from "@mui/material"
 import { LocalizationProvider } from "@mui/x-date-pickers"
 import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon"
 import { render, RenderOptions } from "@testing-library/react"
@@ -11,7 +11,7 @@ import { ConfirmProvider } from "material-ui-confirm"
 import { SnackbarProvider } from "notistack"
 import { HelmetProvider } from "react-helmet-async"
 import { MemoryRouter, Route, Routes, Location } from "react-router-dom"
-import theme from "theme"
+import defaultTheme from "theme"
 import GuestRoute from "components/auth/GuestRoute"
 import WorkspaceProvider from "components/utils/WorkspaceProvider"
 import AuthMock from "./AuthMock"
@@ -73,6 +73,7 @@ type CustomRenderOptions = RenderOptions & {
   loggedIn?: boolean
   guestRoute?: boolean
   mocks?: readonly MockedResponse<Record<string, any>>[]
+  theme?: Theme
 }
 
 const customRender = (ui: ReactElement, options?: CustomRenderOptions) => {
@@ -84,14 +85,14 @@ const customRender = (ui: ReactElement, options?: CustomRenderOptions) => {
 
 const basicRender = (
   ui: ReactElement,
-  { loggedIn = true, mocks }: CustomRenderOptions = {},
+  { loggedIn = true, mocks, theme }: CustomRenderOptions = {},
 ) =>
   render(ui, {
     wrapper: props => (
       <HelmetProvider>
         <SnackbarProvider>
           <ConfirmProvider>
-            <ThemeProvider theme={theme}>
+            <ThemeProvider theme={theme ?? defaultTheme}>
               <LocalizationProvider dateAdapter={AdapterLuxon}>
                 <AuthMock initialLoggedIn={loggedIn}>
                   <AutoMockedProvider
@@ -120,12 +121,13 @@ const renderWithRouter = (
     loggedIn = true,
     guestRoute = false,
     mocks,
+    theme,
   }: CustomRenderOptions = {},
 ) => {
   return render(ui, {
     wrapper: props => (
       <HelmetProvider>
-        <ThemeProvider theme={theme}>
+        <ThemeProvider theme={theme ?? defaultTheme}>
           <LocalizationProvider dateAdapter={AdapterLuxon}>
             <AutoMockedProvider
               mockResolvers={mockResolvers}