wip: add linting, fix tests

Author: apdavison

.eslintrc

@@ -0,0 +1,22 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "plugins": ["react", "react-hooks"],
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "env": {
+    "browser": true,
+    "es2020": true
+  },
+  "rules": {
+    "react/react-in-jsx-scope": "off"
+  }
+}

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

.prettierrc.json

@@ -1,4 +1,5 @@
 {
   "printWidth": 100,
-  "tabWidth": 2
+  "tabWidth": 2,
+  "trailingComma": "es5"
 }

__tests__/components/CodeWidget.test.jsx

@@ -9,6 +9,6 @@ describe("CodeWidget", () => {
     const onChange = (value) => {
       return value;
     };
-    render(<CodeWidget code={code} onChange={onChange} />);
+    render(<CodeWidget code={code} onChange={onChange} initialTab="editor" />);
   });
 });

__tests__/components/CommentsPanel.test.jsx

@@ -1,10 +1,21 @@
 import { describe, expect, test, vi } from "vitest";
 import { render, screen, getByRole, fireEvent, waitFor } from "@testing-library/react";
+import { createMemoryRouter, RouterProvider } from "react-router-dom";
 
 import CommentsPanel from "../../src/components/CommentsPanel";
 
 describe("CommentsPanel", () => {
   test("placeholder", () => {
-    render(<CommentsPanel jobId="99999" />);
+    const router = createMemoryRouter(
+      [
+        {
+          path: "/:collabId/jobs/:jobId",
+          element: <CommentsPanel jobId="99999" />,
+        },
+      ],
+      { initialEntries: ["/my-collab/jobs/99999"] }
+    );
+
+    render(<RouterProvider router={router} />);
   });
 });

__tests__/components/CreateJobDialog.test.jsx

@@ -1,8 +1,8 @@
 import { describe, expect, test, vi } from "vitest";
 import { render, screen, getByRole, fireEvent, waitFor } from "@testing-library/react";
 
-import CreateJobDialog from "../../src/components/CreateJobDialog";
+import CreateJobForm from "../../src/components/CreateJobForm";
 
-describe("CreateJobDialog", () => {
+describe("CreateJobForm", () => {
   test("placeholder", () => {});
 });

__tests__/components/FilesPanel.test.jsx

@@ -1,5 +1,6 @@
 import { describe, expect, test, vi } from "vitest";
 import { render, screen, getByRole, fireEvent, waitFor } from "@testing-library/react";
+import { createMemoryRouter, RouterProvider } from "react-router-dom";
 
 import FilesPanel from "../../src/components/FilesPanel";
 
@@ -9,6 +10,17 @@ describe("FilesPanel", () => {
       repository: "A file repository",
       files: [],
     };
-    render(<FilesPanel label="Output data" dataset={mockDataset} />);
+
+    const router = createMemoryRouter(
+      [
+        {
+          path: "/:collabId/jobs/:jobId",
+          element: <FilesPanel label="Output data" dataset={mockDataset} />,
+        },
+      ],
+      { initialEntries: ["/my-collab/jobs/1234"] }
+    );
+
+    render(<RouterProvider router={router} />);
   });
 });

__tests__/components/JobDetail.test.jsx

@@ -1,9 +1,8 @@
 import { describe, expect, test, vi } from "vitest";
 import { render, screen, getByRole, fireEvent, waitFor } from "@testing-library/react";
+import { createMemoryRouter, RouterProvider } from "react-router-dom";
 
-import { BrowserRouter } from "react-router-dom";
-
-import JobDetail from "../../src/components/JobDetail";
+import JobDetailRoute from "../../src/routes/job-detail";
 
 describe("JobDetail", () => {
   test("placeholder", () => {
@@ -29,12 +28,12 @@ describe("JobDetail", () => {
         key4: "value4",
       },
     };
-    // Because JobDetail contains a RouterLink we need
-    // to wrap it in a Router
-    render(
-      <BrowserRouter>
-        <JobDetail job={job} collab="my-collab" />
-      </BrowserRouter>
+
+    const router = createMemoryRouter(
+      [{ path: "/:collabId/jobs/:jobId", element: <JobDetailRoute />, loader: () => job }],
+      { initialEntries: ["/my-collab/jobs/1234"] }
     );
+
+    render(<RouterProvider router={router} />);
   });
 });

__tests__/components/JobList.test.jsx

@@ -1,10 +1,16 @@
 import { describe, expect, test, vi } from "vitest";
 import { render, screen, getByRole, fireEvent, waitFor } from "@testing-library/react";
+import { createMemoryRouter, RouterProvider } from "react-router-dom";
 
-import JobList from "../../src/components/JobList";
+import JobListRoute from "../../src/routes/jobs";
 
 describe("JobList", () => {
   test("placeholder", () => {
-    render(<JobList jobs={[]} collab="my-collab" />);
+    const router = createMemoryRouter(
+      [{ path: "/:collabId/jobs/", element: <JobListRoute />, loader: () => [] }],
+      { initialEntries: ["/my-collab/jobs/"] }
+    );
+
+    render(<RouterProvider router={router} />);
   });
 });

__tests__/components/ProjectList.test.jsx

@@ -1,10 +1,16 @@
 import { describe, expect, test, vi } from "vitest";
 import { render, screen, getByRole, fireEvent, waitFor } from "@testing-library/react";
+import { createMemoryRouter, RouterProvider } from "react-router-dom";
 
-import ProjectList from "../../src/components/ProjectList";
+import ProjectListRoute from "../../src/routes/projects";
 
 describe("ProjectList", () => {
   test("placeholder", () => {
-    render(<ProjectList projects={[]} />);
+    const router = createMemoryRouter(
+      [{ path: "/:collabId/projects/", element: <ProjectListRoute />, loader: () => [] }],
+      { initialEntries: ["/fake-collab/projects/"] }
+    );
+
+    render(<RouterProvider router={router} />);
   });
 });