Improve scripts and useTimestamp tests (#86)

* Make useTimestamp tests deterministic

* Cleanup

* Redo package scripts

* Update package lock

* Get rid of typecheck

* fixup

* Review tweaks

.github/workflows/ci.yml

@@ -16,7 +16,7 @@ jobs:
   build:
     strategy:
       matrix:
-        node: ['20']
+        node: ["20"]
         os: [ubuntu-latest]
     runs-on: ${{ matrix.os }}
 
@@ -28,7 +28,7 @@ jobs:
       - uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node }}
-          cache: 'pnpm'
+          cache: "pnpm"
       - run: pnpm install
 
       - run: pnpm build
@@ -49,7 +49,7 @@ jobs:
   test:
     strategy:
       matrix:
-        node: ['20']
+        node: ["20"]
         os: [ubuntu-latest]
     runs-on: ${{ matrix.os }}
 
@@ -61,18 +61,16 @@ jobs:
       - uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node }}
-          cache: 'pnpm'
+          cache: "pnpm"
       - run: pnpm install
 
-      - run: pnpm lint
-      - run: pnpm format
-      - run: pnpm run test
-      - run: pnpm typecheck
+      - run: pnpm check
+      - run: pnpm verify # does linting, type checking, and tests in parallel
 
   storybook-visual-regression:
     strategy:
       matrix:
-        node: ['20']
+        node: ["20"]
         os: [ubicloud-standard-4]
     runs-on: ${{ matrix.os }}
     steps:
@@ -85,7 +83,7 @@ jobs:
       - uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node }}
-          cache: 'pnpm'
+          cache: "pnpm"
       - run: pnpm install
 
       - name: Publish to Chromatic
@@ -100,7 +98,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node: ['20']
+        node: ["20"]
         os: [ubicloud-standard-16]
     runs-on: ${{ matrix.os }}
     timeout-minutes: 20
@@ -112,7 +110,7 @@ jobs:
       - uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node }}
-          cache: 'pnpm'
+          cache: "pnpm"
       - run: pnpm install
 
       - name: TMP fix MS repos
@@ -125,7 +123,7 @@ jobs:
       - run: pnpm run test-e2e
         working-directory: ./packages/app
         env:
-          TENDERLY_API_KEY: '${{ secrets.TENDERLY_API_KEY }}'
+          TENDERLY_API_KEY: "${{ secrets.TENDERLY_API_KEY }}"
           TENDERLY_ACCOUNT: phoenixlabs
           TENDERLY_PROJECT: sparklend
           PLAYWRIGHT_TRACE: 1
@@ -139,8 +137,8 @@ jobs:
 
       - uses: krzkaczor/reg-actions@action-v2
         with:
-          github-token: '${{ secrets.GITHUB_TOKEN }}'
-          image-directory-path: './packages/app/__screenshots-e2e__'
-          collection-name: 'e2e'
+          github-token: "${{ secrets.GITHUB_TOKEN }}"
+          image-directory-path: "./packages/app/__screenshots-e2e__"
+          collection-name: "e2e"
           threshold-pixel: 5
           matching-threshold: 0.09

package.json

@@ -9,20 +9,16 @@
   "scripts": {
     "dev": "pnpm run --filter './packages/app' dev",
     "storybook": "pnpm run --filter './packages/app' storybook",
-    "format": "biome format .",
-    "format:fix": "biome format --write .",
-    "biome-lint": "biome lint .",
-    "biome-lint:fix": "biome check --apply-unsafe .",
-    "lint": "pnpm run biome-lint && pnpm run --parallel --aggregate-output --reporter append-only --filter './packages/**' lint",
-    "lint:fix": "pnpm run biome-lint:fix && pnpm --parallel --aggregate-output --reporter append-only --filter './packages/**' lint:fix",
-    "typecheck": "pnpm --parallel --aggregate-output --reporter append-only --filter './packages/**' typecheck",
+    "check": "biome check .",
+    "check:fix": "biome check --apply-unsafe .",
     "build": "pnpm run --parallel --aggregate-output --reporter append-only --filter './packages/**' build",
-    "test": "pnpm run --parallel --aggregate-output --reporter append-only --filter './packages/**' test",
-    "fix": "pnpm lint:fix && pnpm format:fix && pnpm test && pnpm typecheck"
+    "verify": "pnpm run --parallel --aggregate-output --reporter append-only --filter './packages/**' verify",
+    "fix": "pnpm run check:fix && pnpm run verify"
   },
   "devDependencies": {
     "@biomejs/biome": "1.7.3",
     "@eslint/js": "^9.3.0",
+    "concurrently": "^8.2.2",
     "eslint": "^9.3.0",
     "typescript": "^5.0.2",
     "typescript-eslint": "^7.11.0"

packages/app/package.json

@@ -11,12 +11,9 @@
     "dev": "vite --port 4000",
     "build": "tsc && pnpm run lingui:extract && vite build",
     "build:staging": "pnpm run build --mode staging",
-    "format": "cd ../.. && pnpm run format",
-    "format:fix": "cd ../.. && pnpm run format:fix",
-    "lint": "pnpm run biome-lint && eslint src",
-    "lint:fix": "pnpm run biome-lint:fix && pnpm lint --fix",
-    "biome-lint": "cd ../../ && pnpm run biome-lint",
-    "biome-lint:fix": "cd ../../ && pnpm run biome-lint:fix",
+    "lint": "eslint src",
+    "verify": "concurrently --names \"LINT,TEST,TYPECHECK\" -c \"bgMagenta.bold,bgGreen.bold,bgBlue.bold\" \"pnpm run lint\" \"pnpm run test\" \"pnpm run typecheck\"",
+    "fix": "cd ../../ && pnpm run check:fix && cd - && pnpm run verify",
     "test": "DEBUG_PRINT_LIMIT=100000 vitest --run",
     "test-e2e": "playwright test",
     "test-e2e:ui": "pnpm test-e2e --ui --headed",

packages/app/src/test/integration/setup.ts

@@ -112,6 +112,3 @@ Object.defineProperty(window, 'matchMedia', {
     dispatchEvent: vitest.fn(),
   })),
 })
-
-// sometimes it's useful to increase the timeout for async tests
-// configure({ asyncUtilTimeout: 60_000 })

packages/app/src/ui/atoms/panel/CollapsiblePanel.test.tsx

@@ -4,7 +4,7 @@ import { expectRenderingError } from '@/test/integration/renderError'
 
 import { CollapsiblePanel } from './CollapsiblePanel'
 
-describe(CollapsiblePanel.name, () => {
+describe(CollapsiblePanel.displayName!, () => {
   it('renders correctly', async () => {
     render(
       <CollapsiblePanel>

packages/app/src/ui/atoms/panel/Panel.test.tsx

@@ -7,7 +7,7 @@ import { Panel } from './Panel'
 
 const queryClient = new QueryClient()
 
-describe(Panel.name, () => {
+describe(Panel.displayName!, () => {
   it('renders correctly', async () => {
     render(
       <QueryClientProvider client={queryClient}>

packages/app/src/utils/useTimestamp.test.ts

@@ -2,6 +2,8 @@ import { act, waitFor } from '@testing-library/react'
 
 import { setupHookRenderer } from '@/test/integration/setupHookRenderer'
 
+import { afterEach } from 'node:test'
+import { vi } from 'vitest'
 import { useTimestamp } from './useTimestamp'
 
 const hookRenderer = setupHookRenderer({
@@ -14,13 +16,13 @@ describe('useTimestamp', () => {
   it('should return the current timestamp', async () => {
     const { result } = hookRenderer()
 
-    await waitFor(() => expect(result.current.timestamp).toBeGreaterThan(0))
+    expect(result.current.timestamp).toBeGreaterThan(0)
   })
 
   it('should return the current timestamp in milliseconds', async () => {
     const { result } = hookRenderer()
 
-    await waitFor(() => expect(result.current.timestampInMs).toBeGreaterThan(0))
+    expect(result.current.timestampInMs).toBeGreaterThan(0)
   })
 
   it('should not change the timestamp during the component lifecycle', async () => {
@@ -40,15 +42,19 @@ describe('useTimestamp', () => {
   })
 
   it('should update the timestamp after the specified refresh interval', async () => {
+    vi.useFakeTimers()
+
     const refreshIntervalInMs = 10
     const { result } = hookRenderer({ args: { refreshIntervalInMs } })
-
-    await waitFor(() => expect(result.current).toBeDefined())
     const { timestampInMs: initialTimestampInMs, timestamp: initialTimestamp } = result.current
 
-    await waitFor(() => {
-      expect(result.current.timestampInMs).toBeGreaterThan(initialTimestampInMs)
-      expect(result.current.timestamp).toBeGreaterThan(initialTimestamp)
-    })
+    await vi.advanceTimersByTimeAsync(2_000)
+
+    expect(result.current.timestampInMs).toBeGreaterThan(initialTimestampInMs)
+    expect(result.current.timestamp).toBeGreaterThan(initialTimestamp)
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
   })
 })