build: improve build times

.github/workflows/avoid-typos.yml

@@ -3,13 +3,18 @@ on:
   pull_request:
     types: [opened, synchronize, reopened, edited]
 
+# Cancel old builds on new commit for same workflow + branch/PR
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 jobs:
   misspell:
     name: runner / misspell
     runs-on: ubuntu-latest
     steps:
       - name: Check out code.
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: misspell
         uses: reviewdog/action-misspell@v1
         with:

.github/workflows/docs-tests.yml

@@ -6,6 +6,11 @@ on:
     paths:
       - 'apps/docs/**/*.ts*'
 
+# Cancel old builds on new commit for same workflow + branch/PR
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -15,7 +20,11 @@ jobs:
         node-version: [18.x]
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
+        with:
+          sparse-checkout: |
+            apps/docs
+            packages
 
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3

.github/workflows/fix-typos.yml

@@ -4,11 +4,16 @@ on:
     branches:
       - master
 
+# Cancel old builds on new commit for same workflow + branch/PR
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           ref: master
       - uses: sobolevn/misspell-fixer-action@master

.github/workflows/prettier.yml

@@ -5,74 +5,72 @@ on:
     branches:
       - 'master'
 
+# Cancel old builds on new commit for same workflow + branch/PR
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 jobs:
   format:
     runs-on: ubuntu-latest
     steps:
       - name: Check out repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+        with:
+          sparse-checkout: |
+            apps
       - name: Setup node
         uses: actions/setup-node@v3
         with:
           node-version: 18
-          cache: 'npm'
+      # Installing all dependencies takes up to three minutes, hacking around to only installing prettier+deps
       - name: Download dependencies
-        run: npm ci
+        run: |
+          rm package.json
+          rm package-lock.json
+          npm i prettier@2 prettier-plugin-sql-cst
       - name: Run prettier
         run: |-
           npx prettier -c 'apps/**/*.{js,jsx,ts,tsx,css,md,mdx,json}'
-        # [Joshen] Temp disable the following due to an issue
-        # https://github.com/EPMatt/reviewdog-action-prettier/issues/34
-        # uses: EPMatt/reviewdog-action-prettier@v1
-        # with:
-        #   github_token: ${{ secrets.github_token }}
-        #   reporter: github-pr-review
-        #   level: warning
-        #   command: npx prettier -c 'apps/**/*.{js,jsx,ts,tsx,css,md,json}'
 
-        # run: |-
-        #   function run_check() {
-        #     if $(grep -q '"prettier"' "$1") ; then
-        #       pushd "$(dirname $1)"
-        #       echo "Running prettier on $(pwd)"
-        #       npx prettier -c '**/*.{js,jsx,ts,tsx,css,md,json}'
-        #       popd
-        #     fi
-        #   }
-        #   find . -type f -name 'package.json' ! -path '*node_modules*' -print0 | while IFS= read -r -d '' file; do
-        #     run_check "$file"
-        #   done
 
   # i18n is not a node package, so we handle that one separately
   format-i18n:
     runs-on: ubuntu-latest
     steps:
       - name: Check out repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+        with:
+          sparse-checkout: |
+            i18n
       - name: Setup node
         uses: actions/setup-node@v3
         with:
           node-version: 18
-          cache: 'npm'
+      # Installing all dependencies takes up to three minutes, hacking around to only installing prettier+deps
       - name: Download dependencies
-        run: npm ci
+        run: |
+          rm package.json
+          rm package-lock.json
+          npm i prettier@2 prettier-plugin-sql-cst
       - name: Run prettier
         run: |-
           npx prettier -c 'i18n/**/*.{js,jsx,ts,tsx,css,md,mdx,json}'
-        # uses: EPMatt/reviewdog-action-prettier@v1
-        # with:
-        #   github_token: ${{ secrets.github_token }}
-        #   reporter: github-pr-review
-        #   level: warning
-        #   command: npx prettier -c 'i18n/**/*.{js,jsx,ts,tsx,css,md,json}'
 
   format-sql:
     runs-on: ubuntu-latest
     steps:
       - name: Check out repo
-        uses: actions/checkout@v3
-      - name: Install plugin
-        run: npm ci
+        uses: actions/checkout@v4
+        with:
+          sparse-checkout: |
+            apps/docs/pages
+      # Installing all dependencies takes up to three minutes, hacking around to only installing prettier+deps
+      - name: Download dependencies
+        run: |
+          rm package.json
+          rm package-lock.json
+          npm i prettier@2 prettier-plugin-sql-cst
       - name: Run prettier
         run: |-
           # Check mdx files which contain sql code blocks

.github/workflows/search.yml

@@ -35,7 +35,10 @@ jobs:
 
     steps:
       - name: Check out repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+        with:
+          sparse-checkout: |
+            apps/docs
 
       - name: Setup node
         uses: actions/setup-node@v3

.github/workflows/studio-tests.yml

@@ -14,6 +14,12 @@ on:
     paths:
       - 'studio/**'
       - 'package-lock.json'
+
+# Cancel old builds on new commit for same workflow + branch/PR
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 jobs:
   check:
     runs-on: ubuntu-latest
@@ -26,7 +32,11 @@ jobs:
           - npm run build:studio
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
+        with:
+          sparse-checkout: |
+            studio
+            packages
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:

.github/workflows/ui-tests.yml

@@ -6,6 +6,11 @@ on:
     paths:
       - 'packages/ui/**'
 
+# Cancel old builds on new commit for same workflow + branch/PR
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -15,7 +20,10 @@ jobs:
         node-version: [18.x]
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
+        with:
+          sparse-checkout: |
+            packages
 
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3

apps/docs/jest.config.mjs

@@ -0,0 +1,13 @@
+import nextJest from 'next/jest.js'
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+})
+
+const config = {
+  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
+  testEnvironment: 'jsdom',
+}
+
+export default createJestConfig(config)

apps/docs/jest.config.ts

@@ -1,9 +0,0 @@
-import type { Config } from '@jest/types'
-
-const config: Config.InitialOptions = {
-  preset: 'ts-jest',
-  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
-  testEnvironment: 'jsdom',
-}
-
-export default config

apps/docs/package.json

@@ -127,6 +127,7 @@
     "ts-node": "^10.9.1",
     "tsconfig": "*",
     "tsx": "^3.12.2",
-    "typescript": "^5.0.4"
+    "typescript": "^5.0.4",
+    "jest-environment-jsdom": "^29.7.0"
   }
 }

apps/docs/tsconfig.json

@@ -21,6 +21,12 @@
     "jsx": "preserve",
     "module": "esnext"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "pages/guides/append-test.js"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "pages/guides/append-test.js",
+    "jest.config.mjs"
+  ],
   "exclude": ["node_modules"]
 }

apps/www/package.json

@@ -73,7 +73,7 @@
     "@tailwindcss/typography": "^0.5.9",
     "@types/classnames": "^2.3.1",
     "@types/dat.gui": "^0.7.10",
-    "@types/jest": "^27.4.0",
+    "@types/jest": "^29.5.4",
     "@types/mdx-js__react": "^1.5.5",
     "@types/node": "^17.0.24",
     "@types/nodemailer": "^6.4.4",

jest.config.ts

@@ -1,194 +0,0 @@
-/*
- * For a detailed explanation regarding each configuration property and type check, visit:
- * https://jestjs.io/docs/configuration
- */
-
-export default {
-  // All imported modules in your tests should be mocked automatically
-  // automock: false,
-
-  // Stop running tests after `n` failures
-  // bail: 0,
-
-  // The directory where Jest should store its cached dependency information
-  // cacheDirectory: "/private/var/folders/62/vmlm9g556_n1v120hqkjrp8r0000gn/T/jest_dx",
-
-  // Automatically clear mock calls and instances between every test
-  clearMocks: true,
-
-  // Indicates whether the coverage information should be collected while executing the test
-  collectCoverage: false,
-
-  // An array of glob patterns indicating a set of files for which coverage information should be collected
-  // collectCoverageFrom: undefined,
-
-  // The directory where Jest should output its coverage files
-  coverageDirectory: 'tests/coverage',
-
-  // An array of regexp pattern strings used to skip coverage collection
-  // coveragePathIgnorePatterns: [
-  //   "/node_modules/"
-  // ],
-
-  // Indicates which provider should be used to instrument code for coverage
-  coverageProvider: 'v8',
-
-  // A list of reporter names that Jest uses when writing coverage reports
-  coverageReporters: [
-    'json',
-    'text',
-    'lcov',
-    // "clover"
-  ],
-
-  // An object that configures minimum threshold enforcement for coverage results
-  // coverageThreshold: undefined,
-
-  // A path to a custom dependency extractor
-  // dependencyExtractor: undefined,
-
-  // Make calling deprecated APIs throw helpful error messages
-  // errorOnDeprecated: false,
-
-  // Force coverage collection from ignored files using an array of glob patterns
-  // forceCoverageMatch: [],
-
-  // A path to a module which exports an async function that is triggered once before all test suites
-  // globalSetup: undefined,
-
-  // A path to a module which exports an async function that is triggered once after all test suites
-  // globalTeardown: undefined,
-
-  // A set of global variables that need to be available in all test environments
-  // globals: {},
-
-  // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
-  // maxWorkers: "50%",
-
-  // An array of directory names to be searched recursively up from the requiring module's location
-  // moduleDirectories: [
-  //   "node_modules"
-  // ],
-
-  // An array of file extensions your modules use
-  // moduleFileExtensions: [
-  //   "js",
-  //   "jsx",
-  //   "ts",
-  //   "tsx",
-  //   "json",
-  //   "node"
-  // ],
-
-  // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
-  // moduleNameMapper: {},
-
-  // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
-  // modulePathIgnorePatterns: [],
-
-  // Activates notifications for test results
-  // notify: false,
-
-  // An enum that specifies notification mode. Requires { notify: true }
-  // notifyMode: "failure-change",
-
-  // A preset that is used as a base for Jest's configuration
-  // preset: undefined,
-
-  // Run tests from one or more projects
-  // projects: undefined,
-
-  // Use this configuration option to add custom reporters to Jest
-  // reporters: undefined,
-
-  // Automatically reset mock state between every test
-  // resetMocks: false,
-
-  // Reset the module registry before running each individual test
-  // resetModules: false,
-
-  // A path to a custom resolver
-  // resolver: undefined,
-
-  // Automatically restore mock state between every test
-  // restoreMocks: false,
-
-  // The root directory that Jest should scan for tests and modules within
-  // rootDir: undefined,
-
-  // A list of paths to directories that Jest should use to search for files in
-  // roots: [
-  //   "<rootDir>"
-  // ],
-
-  // Allows you to use a custom runner instead of Jest's default test runner
-  // runner: "jest-runner",
-
-  // The paths to modules that run some code to configure or set up the testing environment before each test
-  setupFiles: ['<rootDir>/tests/jest-env'],
-
-  // A list of paths to modules that run some code to configure or set up the testing framework before each test
-  // setupFilesAfterEnv: [],
-
-  // The number of seconds after which a test is considered as slow and reported as such in the results.
-  // slowTestThreshold: 5,
-
-  // A list of paths to snapshot serializer modules Jest should use for snapshot testing
-  // snapshotSerializers: [],
-
-  // The test environment that will be used for testing
-  // testEnvironment: "jest-environment-node",
-
-  // Options that will be passed to the testEnvironment
-  // testEnvironmentOptions: {},
-
-  // Adds a location field to test results
-  // testLocationInResults: false,
-
-  // // The glob patterns Jest uses to detect test files
-  testMatch: [
-    '<rootDir>/tests/**/*.test.ts',
-    // "**/?(*.)+(spec|test).[tj]s?(x)"
-  ],
-
-  // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
-  testPathIgnorePatterns: ['/node_modules/', 'docker'],
-
-  // The regexp pattern or array of patterns that Jest uses to detect test files
-  // testRegex: [],
-
-  // This option allows the use of a custom results processor
-  // testResultsProcessor: undefined,
-
-  // This option allows use of a custom test runner
-  // testRunner: "jest-circus/runner",
-
-  // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
-  // testURL: "http://localhost",
-
-  // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
-  // timers: "real",
-
-  // A map from regular expressions to paths to transformers
-  transform: {
-    '^.+\\.tsx?$': 'ts-jest',
-  },
-
-  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-  // transformIgnorePatterns: [
-  //   "/node_modules/",
-  //   "\\.pnp\\.[^\\/]+$"
-  // ],
-
-  // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
-  // unmockedModulePathPatterns: undefined,
-
-  // Indicates whether each individual test should be reported during the run
-  // verbose: undefined,
-
-  // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
-  // watchPathIgnorePatterns: [],
-
-  // Whether to use watchman for file crawling
-  // watchman: true,
-}

package.json

@@ -39,16 +39,13 @@
     }
   },
   "devDependencies": {
-    "@types/json-stringify-safe": "^5.0.0",
     "aws-sdk": "^2.1354.0",
     "eslint": "^8.41.0",
     "eslint-config-custom": "*",
-    "json-stringify-safe": "^5.0.1",
     "prettier": "^2.8.8",
     "prettier-plugin-sql-cst": "^0.5.0",
     "supabase": "^1.45.2",
-    "ts-jest": "^27.1.3",
-    "turbo": "^1.10.3"
+    "turbo": "^1.10.13"
   },
   "repository": {
     "type": "git",

packages/ui/package.json

@@ -101,6 +101,7 @@
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "^17.0.11",
     "@types/react-syntax-highlighter": "^15.5.6",
+    "@testing-library/react": "^12.1.5",
     "config": "*",
     "copyfiles": "^2.4.1",
     "glob": "^8.1.0",
@@ -109,6 +110,9 @@
     "storybook-dark-mode": "^3.0.0",
     "style-dictionary": "^3.7.1",
     "tsconfig-paths-webpack-plugin": "^4.0.1",
-    "typescript": "^5.0.4"
+    "typescript": "^5.0.4",
+    "ts-jest": "^29.1.1",
+    "jest-environment-jsdom": "^29.7.0",
+    "next": "^12.3.2"
   }
 }

studio/jest.config.mjs

@@ -1,16 +1,17 @@
-module.exports = {
+import nextJest from 'next/jest.js'
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+})
+
+const config = {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   moduleDirectories: ['<rootDir>', 'node_modules'],
   setupFiles: ['jest-canvas-mock', './tests/setup/radix'],
   testEnvironment: 'jsdom',
   testTimeout: 10000,
   testRegex: '(.*\\.test.(js|jsx|ts|tsx)$)',
-  transform: { '^.+\\.(t|j)sx?$': 'ts-jest' },
-  globals: {
-    'ts-jest': {
-      tsconfig: 'tsconfig.test.json',
-    },
-  },
   maxConcurrency: 3,
   maxWorkers: '50%',
   moduleNameMapper: {
@@ -18,3 +19,5 @@ module.exports = {
     '^@ui/(.*)$': '<rootDir>/../packages/ui/src/$1',
   },
 }
+
+export default createJestConfig(config)

studio/package.json

@@ -153,8 +153,9 @@
     "babel-loader": "^8.2.3",
     "common": "*",
     "config": "*",
-    "jest": "^27.4.7",
-    "jest-canvas-mock": "^2.3.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-canvas-mock": "^2.5.2",
     "openapi-typescript": "^6.3.4",
     "postcss": "^8.4.22",
     "prettier": "^2.8.8",

studio/tests/components/Reports/ReportWidget.test.js

@@ -11,8 +11,8 @@ beforeEach(() => {
 
 test('static elements', async () => {
   render(<ReportWidget data={[]} title="Some chart" sql="select" renderer={() => 'something'} />)
-  await screen.findByText(/Some chart/)
   await screen.findByText(/something/)
+  await screen.findByText(/Some chart/)
 })
 
 test("append", async ()=>{

studio/tsconfig.test.json

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

tests/package.json

@@ -19,8 +19,8 @@
   "devDependencies": {
     "@faker-js/faker": "^6.1.2",
     "@supabase/supabase-js": "^2.23.0",
-    "@testdeck/jest": "^0.2.0",
-    "@types/jest": "^27.4.0",
+    "@testdeck/jest": "^0.3.3",
+    "@types/jest": "^29.5.4",
     "@types/node": "^17.0.24",
     "@typescript-eslint/eslint-plugin": "^5.10.0",
     "@typescript-eslint/parser": "^5.10.0",
@@ -28,10 +28,10 @@
     "allure-js-commons": "^2.0.0-beta.14",
     "cross-fetch": "^3.1.5",
     "eslint": "^8.45.0",
-    "jest": "^27.4.7",
-    "jest-allure2-adapter": "^0.3.11",
+    "ts-jest": "^29.1.1",
+    "jest-allure2-adapter": "^0.3.12",
+    "jest-environment-jsdom": "^29.7.0",
     "postgres": "^3.0.5",
-    "ts-jest": "^27.1.3",
     "ts-node": "^10.9.1",
     "typescript": "^5.0.4"
   }