Fix tests

grai-io · Aug 24, 2023 · 948fe26 · 948fe26
1 parent 4e83836
commit 948fe26
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 5 deletions.
diff --git a/grai-frontend/src/components/nodes/BarChart.tsx b/grai-frontend/src/components/nodes/BarChart.tsx
@@ -11,7 +11,11 @@ import ChartDataLabels from "chartjs-plugin-datalabels"
 import { Bar } from "react-chartjs-2"
 import theme from "theme"
 
-const BarChart: React.FC = () => {
+type BarChartProps = {
+  responsive?: boolean
+}
+
+const BarChart: React.FC<BarChartProps> = ({ responsive }) => {
   const data = [
     { category: "credit-card", count: 25 },
     { category: "cash", count: 15 },
@@ -22,6 +26,7 @@ const BarChart: React.FC = () => {
   Chart.register(CategoryScale, LinearScale, BarElement, ChartDataLabels)
 
   const options: ChartOptions<"bar"> = {
+    responsive,
     scales: {
       x: {
         grid: {

diff --git a/grai-frontend/src/components/nodes/LineChart.tsx b/grai-frontend/src/components/nodes/LineChart.tsx
@@ -10,7 +10,11 @@ import {
 import { Scatter } from "react-chartjs-2"
 import theme from "theme"
 
-const LineChart: React.FC = () => {
+type LineChartProps = {
+  responsive?: boolean
+}
+
+const LineChart: React.FC<LineChartProps> = ({ responsive }) => {
   Chart.register(PointElement, LineElement)
 
   const inputData = [
@@ -69,6 +73,7 @@ const LineChart: React.FC = () => {
   ]
 
   const options: ChartOptions<"scatter"> = {
+    responsive,
     scales: {
       x: {
         grid: {

diff --git a/grai-frontend/src/components/nodes/NodeProfile.test.tsx b/grai-frontend/src/components/nodes/NodeProfile.test.tsx
@@ -40,6 +40,39 @@ test("renders", async () => {
   })
 })
 
+test("renders column", async () => {
+  const table = {
+    id: "1",
+    name: "Table 1",
+    namespace: "default",
+    display_name: "Table 1",
+    columns: { data: [] },
+    metadata: {
+      grai: {
+        node_type: "Column",
+      },
+    },
+    source_tables: { data: [other_table] },
+    destination_tables: { data: [other_table] },
+    data_sources: {
+      data: [
+        {
+          id: "1",
+          name: "source 1",
+        },
+      ],
+    },
+  }
+
+  render(<NodeProfile node={table} responsive={false} />, {
+    withRouter: true,
+  })
+
+  await waitFor(() => {
+    expect(screen.getByText("Table 1")).toBeInTheDocument()
+  })
+})
+
 test("renders no sources or destinations", async () => {
   const table = {
     id: "1",

diff --git a/grai-frontend/src/components/nodes/NodeProfile.tsx b/grai-frontend/src/components/nodes/NodeProfile.tsx
@@ -34,9 +34,10 @@ export interface Node {
 
 type NodeProfileProps = {
   node: Node
+  responsive?: boolean
 }
 
-const NodeProfile: React.FC<NodeProfileProps> = ({ node }) => (
+const NodeProfile: React.FC<NodeProfileProps> = ({ node, responsive }) => (
   <Grid container spacing={3}>
     <Grid item md={6}>
       <TableDetail table={node} />
@@ -68,8 +69,8 @@ const NodeProfile: React.FC<NodeProfileProps> = ({ node }) => (
                   />
                   <LinearProgress value={30} title="cash" titleValue={15} />
                   <LinearProgress value={10} title="bnpl" titleValue={5} />
-                  <BarChart />
-                  <LineChart />
+                  <BarChart responsive={responsive} />
+                  <LineChart responsive={responsive} />
                 </Stack>
               </NodeDetailRow>
             )}