Added ui testing config and mock deps.

studio/README.md

@@ -36,6 +36,16 @@ Project settings are managed outside of the Dashboard. If you use docker-compose
 - Send a PR to `master` and tag the following members in your PR as reviewers
   - [MildTomato](https://github.com/mildtomato), [phamhieu](https://github.com/phamhieu), [joshenlim](https://github.com/joshenlim)
 
+### Developer Quickstart
+```bash
+# in /studio
+
+npm i # install deps
+npm run dev # start dev server
+npm run test # run tests
+npm run -- --watch # run tests in watch mode
+```
+
 ## Running within a self-hosted environment
 
 Firstly, follow the guide [here](https://supabase.com/docs/guides/hosting/docker) to get started with self-hosted Supabase.

studio/jest.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  moduleDirectories: ['<rootDir>', 'node_modules'],
+  setupFiles: ["jest-canvas-mock"],
+  testEnvironment: 'jsdom',
+  testRegex: '(.*\\.test.(js|jsx|ts|tsx)$)',
+  transform: { '^.+\\.(t|j)sx?$': 'ts-jest' },
+  globals: {
+    'ts-jest': {
+      tsconfig: 'tsconfig.test.json'
+    }
+  }
+}

studio/package.json

@@ -6,6 +6,7 @@
     "dev": "next dev -p 8082",
     "build": "next build",
     "start": "next start",
+    "test": "jest",
     "deploy:staging": "VERCEL_ORG_ID=team_E6KJ1W561hMTjon1QSwOh0WO VERCEL_PROJECT_ID=QmcmhbiAtCMFTAHCuGgQscNbke4TzgWULECctNcKmxWCoT vercel --prod -A .vercel/staging.json"
   },
   "dependencies": {
@@ -60,6 +61,7 @@
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
+    "@testing-library/react": "^12.1.2",
     "@types/crypto-js": "^4.0.2",
     "@types/lodash": "^4.14.172",
     "@types/markdown-table": "^3.0.0",
@@ -75,8 +77,11 @@
     "@types/sqlstring": "^2.3.0",
     "@types/zxcvbn": "^4.4.1",
     "autoprefixer": "^10.2.6",
+    "jest": "^27.4.0",
+    "jest-canvas-mock": "^2.3.1",
     "postcss": "^8.3.5",
     "tailwindcss": "^2.2.4",
+    "ts-jest": "^27.0.7",
     "typescript": "4.3.4"
   }
 }

studio/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -13,8 +17,16 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "baseUrl": ".",
+    "baseUrl": "."
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.js",
+    "**/*.jsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

studio/tsconfig.test.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  }
+}