new project integration test

dashboard/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = '';

dashboard/__tests__/CreateNewProject.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render, fireEvent, screen } from '../test-utils';
+import '@testing-library/jest-dom';
+import { NewProjectFC } from '../src/main/home/new-project/NewProject';
+
+test('create new project with no name', async () => {
+  render(<NewProjectFC />);
+  fireEvent.click(screen.getByText('Create project'));
+  await screen.findByText(/^the name cannot be empty/i);
+});
+
+// TODO: use MSW for the API call
+test('create new project', async () => {
+  render(<NewProjectFC />);
+  const input = screen.getByPlaceholderText('ex: perspective-vortex');
+  fireEvent.change(input, { target: { value: 'hello-world-project' } });
+  fireEvent.click(screen.getByText('Create project'));
+  await screen.findByText(/^creating project/i);
+});

dashboard/jest.config.js

@@ -0,0 +1,19 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  transform: {
+    "^.+\\.tsx?$": [
+      "ts-jest",
+      {
+        diagnostics: false,
+      },
+    ],
+  },
+  moduleNameMapper: {
+    '^.+\\.(jpg|jpeg|png|gif|webp|svg)$': '<rootDir>/__mocks__/fileMock.js',
+    '^shared/(.*)$': '<rootDir>/src/shared/$1',
+    '^components/(.*)$': '<rootDir>/src/components/$1',
+    '^assets/(.*)$': '<rootDir>/src/assets/$1',
+  },
+};

dashboard/package.json

@@ -83,7 +83,7 @@
     "npm": "9.7.2"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "jest",
     "start": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
     "build": "NODE_ENV=\"production\" webpack",
     "build-and-analyze": "ENABLE_ANALYZER=true NODE_ENV=\"production\" ./node_modules/webpack/bin/webpack.js",
@@ -93,20 +93,20 @@
   "devDependencies": {
     "@babel/core": "^7.15.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-env": "^7.23.3",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.15.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
     "@porter-dev/api-contracts": "^0.2.28",
     "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
+    "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.1.2",
     "@types/chroma-js": "^2.1.4",
     "@types/color": "^3.0.3",
     "@types/d3-array": "^2.9.0",
     "@types/d3-time-format": "^3.0.0",
-    "@types/jest": "^24.0.0",
+    "@types/jest": "^24.9.1",
     "@types/js-base64": "^3.0.0",
     "@types/js-yaml": "^4.0.1",
     "@types/loadable__component": "^5.13.4",
@@ -148,6 +148,8 @@
     "file-loader": "^6.1.0",
     "html-webpack-plugin": "^4.5.0",
     "husky": "^8.0.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.0.2",
     "prettier": "^3.0.3",
     "qs": "^6.9.4",
@@ -157,6 +159,7 @@
     "source-map-loader": "^1.1.0",
     "style-loader": "^2.0.0",
     "terser-webpack-plugin": "^4.2.3",
+    "ts-jest": "^29.1.1",
     "ts-loader": "^8.0.4",
     "type-fest": "^4.3.1",
     "typescript": "^5.2.2",

dashboard/src/main/home/new-project/NewProject.tsx

@@ -15,16 +15,15 @@ import { isAlphanumeric } from "shared/common";
 import InputRow from "components/form-components/InputRow";
 import Helper from "components/form-components/Helper";
 import TitleSection from "components/TitleSection";
-import WelcomeForm from "./WelcomeForm";
 import { trackCreateNewProject } from "shared/anayltics";
-import { ProjectListType } from "shared/types";
+import type { ProjectListType } from "shared/types";
 
 type ValidationError = {
   hasError: boolean;
   description?: string;
 };
 
-export const NewProjectFC = () => {
+export const NewProjectFC = (): React.ReactNode => {
   const {
     user,
     setProjects,

dashboard/test-utils.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react';
+import { render, RenderOptions, RenderResult } from '@testing-library/react';
+
+import { ThemeProvider, createGlobalStyle } from "styled-components";
+import { ContextProvider } from "shared/Context";
+import AuthProvider from "shared/auth/AuthContext";
+import { useHistory, useLocation } from 'react-router';
+import { BrowserRouter } from 'react-router-dom';
+
+import standard from "shared/themes/standard";
+
+const AllTheProviders = ({children}: {children: React.ReactNode}) => {
+  return (
+    <ThemeProvider theme={standard}>
+      <BrowserRouter>
+        <ContextProvider history={null} location={null}>
+          <AuthProvider>
+            {children}
+          </AuthProvider>
+        </ContextProvider>
+      </BrowserRouter>
+    </ThemeProvider>
+  )
+}
+
+const customRender = (
+  ui: ReactElement,
+  options?: Omit<RenderOptions, 'wrapper'>,
+): RenderResult => render(ui, {
+  wrapper: AllTheProviders, 
+  ...options
+})
+
+export * from '@testing-library/react'
+export {customRender as render}

dashboard/tsconfig.json

@@ -1,11 +1,12 @@
 {
   "compilerOptions": {
-    "lib": ["ESNext"],
+    "lib": ["dom", "esnext"],
     "baseUrl": "src",
     "outDir": "./build/",
     "sourceMap": true,
     "noImplicitAny": true,
-    "module": "es6",
+    "module": "esnext",
+    "esModuleInterop": true,
     "target": "es5",
     "jsx": "react",
     "allowJs": true,