Merge pull request #267 from duyet/chore/ui

feat: add jest for unittest

Author: duyet

.github/workflows/test.yml

@@ -130,3 +130,41 @@ jobs:
           browser: ${{ matrix.browser }}
           parallel: true
           record: true
+
+
+  unittest:
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        node: [20, 21]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+          cache: yarn
+
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+
+      - name: Install dependencies
+        run: |
+          yarn install
+
+      - name: Jest
+        run: |
+          yarn test

components/ui/navigation-menu.tsx

@@ -72,7 +72,7 @@ const NavigationMenuContent = React.forwardRef<
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
-      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ',
+      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
       className
     )}
     {...props}

jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+};

lib/clickhouse.test.ts

@@ -0,0 +1,132 @@
+import { afterAll, expect, jest } from '@jest/globals'
+import { getClickHouseHosts, getClient } from './clickhouse'
+
+import { createClient } from '@clickhouse/client'
+import { createClient as createClientWeb } from '@clickhouse/client-web'
+
+jest.mock('@clickhouse/client', () => ({
+  createClient: jest.fn(),
+}))
+
+jest.mock('@clickhouse/client-web', () => ({
+  createClient: jest.fn(),
+}))
+
+describe('getClickHouseHosts', () => {
+  const originalEnv = process.env
+
+  beforeEach(() => {
+    jest.resetModules() // Clears the module cache
+    process.env = { ...originalEnv } // Restores the original environment variables
+  })
+
+  afterAll(() => {
+    process.env = originalEnv // Restores the original environment variables
+  })
+
+  it('should return an empty array if CLICKHOUSE_HOST is not set', () => {
+    delete process.env.CLICKHOUSE_HOST
+    const result = getClickHouseHosts()
+    expect(result).toEqual([])
+  })
+
+  it('should return an array with a single host', () => {
+    process.env.CLICKHOUSE_HOST = 'localhost'
+    const result = getClickHouseHosts()
+    expect(result).toEqual(['localhost'])
+  })
+
+  it('should return an array with multiple hosts', () => {
+    process.env.CLICKHOUSE_HOST = 'host1,host2,host3'
+    const result = getClickHouseHosts()
+    expect(result).toEqual(['host1', 'host2', 'host3'])
+  })
+
+  it('should trim hosts and filter out empty values', () => {
+    process.env.CLICKHOUSE_HOST = ' host1 , , host2 ,  , host3 '
+    const result = getClickHouseHosts()
+    expect(result).toEqual(['host1', 'host2', 'host3'])
+  })
+
+  it('should handle environment variable with only spaces', () => {
+    process.env.CLICKHOUSE_HOST = '    '
+    const result = getClickHouseHosts()
+    expect(result).toEqual([])
+  })
+
+  it('should handle environment variable with empty values', () => {
+    process.env.CLICKHOUSE_HOST = ',,,'
+    const result = getClickHouseHosts()
+    expect(result).toEqual([])
+  })
+})
+
+describe('getClient', () => {
+  const originalEnv = process.env
+
+  beforeEach(() => {
+    jest.resetModules() // Clears the module cache
+    process.env = { ...originalEnv } // Restores the original environment variables
+  })
+
+  afterAll(() => {
+    process.env = originalEnv // Restores the original environment variables
+  })
+
+  it('should create a ClickHouse client using the standard library', () => {
+    process.env.CLICKHOUSE_HOST = 'localhost'
+    const mockClient = {}
+    ;(createClient as jest.Mock).mockReturnValue(mockClient)
+
+    const client = getClient({ web: false })
+
+    expect(createClient).toHaveBeenCalledWith({
+      host: 'localhost',
+      username: 'default',
+      password: '',
+      clickhouse_settings: {
+        max_execution_time: 60,
+      },
+    })
+    expect(client).toBe(mockClient)
+  })
+
+  it('should create a ClickHouse client using the web library', () => {
+    process.env.CLICKHOUSE_HOST = 'localhost'
+    const mockClient = {}
+    ;(createClientWeb as jest.Mock).mockReturnValue(mockClient)
+
+    const client = getClient({ web: true })
+
+    expect(createClientWeb).toHaveBeenCalledWith({
+      host: 'localhost',
+      username: 'default',
+      password: '',
+      clickhouse_settings: {
+        max_execution_time: 60,
+      },
+    })
+    expect(client).toBe(mockClient)
+  })
+
+  it('should use environment variables for username, password, and max_execution_time', () => {
+    process.env.CLICKHOUSE_HOST = 'localhost'
+    process.env.CLICKHOUSE_USER = 'testuser'
+    process.env.CLICKHOUSE_PASSWORD = 'testpassword'
+    process.env.CLICKHOUSE_MAX_EXECUTION_TIME = '120'
+    const mockClient = {}
+    ;(createClient as jest.Mock).mockReturnValue(mockClient)
+
+    const client = getClient({ web: false })
+
+    expect(createClient).toHaveBeenCalledWith({
+      host: 'localhost',
+      username: 'testuser',
+      password: 'testpassword',
+      clickhouse_settings: {
+        max_execution_time: 120,
+      },
+    })
+    expect(client).toBe(mockClient)
+  })
+})

lib/format-readable.test.ts

@@ -0,0 +1,81 @@
+import { expect } from '@jest/globals'
+import { formatReadableQuantity, formatReadableSize } from './format-readable'
+
+describe('formatReadableSize', () => {
+  it('should format 0 bytes correctly', () => {
+    const result = formatReadableSize(0)
+    expect(result).toBe('0 Bytes')
+  })
+
+  it('should format bytes correctly', () => {
+    const result = formatReadableSize(512)
+    expect(result).toBe('512 Bytes')
+  })
+
+  it('should format kilobytes correctly', () => {
+    const result = formatReadableSize(1024)
+    expect(result).toBe('1 KiB')
+  })
+
+  it('should format megabytes correctly', () => {
+    const result = formatReadableSize(1048576)
+    expect(result).toBe('1 MiB')
+  })
+
+  it('should format gigabytes correctly', () => {
+    const result = formatReadableSize(1073741824)
+    expect(result).toBe('1 GiB')
+  })
+
+  it('should format with specified decimal places', () => {
+    const result = formatReadableSize(1500, 2)
+    expect(result).toBe('1.46 KiB')
+  })
+
+  it('should handle large sizes correctly', () => {
+    const result = formatReadableSize(1.5e15)
+    expect(result).toBe('1.3 PiB')
+  })
+})
+
+describe('formatReadableQuantity', () => {
+  it('should format a number to a human readable short quantity', () => {
+    const result = formatReadableQuantity(123456789)
+    expect(result).toBe('123M')
+  })
+
+  it('should format a number to a human readable short quantity explicitly', () => {
+    const result = formatReadableQuantity(123456789, 'short')
+    expect(result).toBe('123M')
+  })
+
+  it('should format a number to a human readable long quantity', () => {
+    const result = formatReadableQuantity(123456789, 'long')
+    expect(result).toBe('123,456,789')
+  })
+
+  it('should handle small numbers correctly', () => {
+    const result = formatReadableQuantity(1234)
+    expect(result).toBe('1.2K')
+  })
+
+  it('should handle small numbers in long format correctly', () => {
+    const result = formatReadableQuantity(1234, 'long')
+    expect(result).toBe('1,234')
+  })
+
+  it('should handle zero correctly', () => {
+    const result = formatReadableQuantity(0)
+    expect(result).toBe('0')
+  })
+
+  it('should handle negative numbers correctly', () => {
+    const result = formatReadableQuantity(-123456789)
+    expect(result).toBe('-123M')
+  })
+
+  it('should handle negative numbers in long format correctly', () => {
+    const result = formatReadableQuantity(-123456789, 'long')
+    expect(result).toBe('-123,456,789')
+  })
+})