-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
27 changed files
with
2,414 additions
and
153 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| name: CI | ||
|
|
||
| on: | ||
| push: | ||
| pull_request: | ||
| types: [opened, synchronize, reopened] | ||
|
|
||
| jobs: | ||
| test: | ||
| name: 🧪 Test | ||
| runs-on: ubuntu-latest | ||
| steps: | ||
| - uses: actions/checkout@v4 | ||
|
|
||
| - name: 🔧 Setup Node.js | ||
| uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: '20' | ||
| cache: 'yarn' | ||
|
|
||
| - name: 📦 Install dependencies | ||
| run: yarn install --frozen-lockfile | ||
|
|
||
| - name: 🧪 Run tests | ||
| run: yarn test:ci | ||
|
|
||
| - name: 📊 Upload test results | ||
| if: always() | ||
| uses: actions/upload-artifact@v3 | ||
| with: | ||
| name: test-results | ||
| path: | | ||
| junit.xml | ||
| coverage/ | ||
| lint: | ||
| name: 🔍 Lint | ||
| runs-on: ubuntu-latest | ||
| steps: | ||
| - uses: actions/checkout@v4 | ||
|
|
||
| - name: 🔧 Setup Node.js | ||
| uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: '20' | ||
| cache: 'yarn' | ||
|
|
||
| - name: 📦 Install dependencies | ||
| run: yarn install --frozen-lockfile | ||
|
|
||
| - name: 🔍 Run ESLint | ||
| run: yarn lint | ||
|
|
||
| - name: 💅 Check formatting | ||
| run: yarn format:check | ||
|
|
||
| typecheck: | ||
| name: ʦ Type check | ||
| runs-on: ubuntu-latest | ||
| steps: | ||
| - uses: actions/checkout@v4 | ||
|
|
||
| - name: 🔧 Setup Node.js | ||
| uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: '20' | ||
| cache: 'yarn' | ||
|
|
||
| - name: 📦 Install dependencies | ||
| run: yarn install --frozen-lockfile | ||
|
|
||
| - name: ʦ Type check | ||
| run: yarn tsc --noEmit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import { describe, it, expect } from 'vitest' | ||
|
|
||
| import { ConsoleOutput } from './ConsoleOutput' | ||
| import { fireEvent, render, screen } from '../test/test-utils' | ||
|
|
||
| const sampleErrors = [ | ||
| '"[webpack-dev-server] ERROR in ./components/ErrorPages/utils.ts\\n × Module not found: Error message 1"', | ||
| '"Warning: Something went wrong\\nStack trace for warning"', | ||
| '"[webpack-dev-server] Another error occurred\\nStack trace for error"' | ||
| ] | ||
|
|
||
| describe('ConsoleOutput', () => { | ||
| it('renders without crashing', () => { | ||
| expect(() => render(<ConsoleOutput errors={[]} />)).not.toThrow() | ||
| }) | ||
|
|
||
| it('displays errors correctly', () => { | ||
| render(<ConsoleOutput errors={sampleErrors} />) | ||
|
|
||
| // Using more precise text matching | ||
| expect(screen.getByText('[webpack-dev-server] ERROR in ./components/ErrorPages/utils.ts')).toBeInTheDocument() | ||
| expect(screen.getByText('Warning: Something went wrong')).toBeInTheDocument() | ||
| expect(screen.getByText('[webpack-dev-server] Another error occurred')).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('filters errors based on search input', () => { | ||
| render(<ConsoleOutput errors={sampleErrors} />) | ||
|
|
||
| const searchInput = screen.getByPlaceholderText('Search errors...') | ||
| fireEvent.change(searchInput, { target: { value: 'message 1' } }) | ||
|
|
||
| expect(screen.getByText('[webpack-dev-server] ERROR in ./components/ErrorPages/utils.ts')).toBeInTheDocument() | ||
| expect(screen.queryByText('Warning: Something went wrong')).not.toBeInTheDocument() | ||
| expect(screen.queryByText('[webpack-dev-server] Another error occurred')).not.toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('toggles error details when clicked', () => { | ||
| render(<ConsoleOutput errors={sampleErrors} />) | ||
|
|
||
| // Find and click the first error | ||
| const firstError = screen.getByText('[webpack-dev-server] ERROR in ./components/ErrorPages/utils.ts') | ||
| fireEvent.click(firstError) | ||
|
|
||
| // Check if stack trace is visible | ||
| expect(screen.getByText('× Module not found: Error message 1')).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('applies correct styling based on error level', () => { | ||
| render(<ConsoleOutput errors={sampleErrors} />) | ||
|
|
||
| // Error should have red styling | ||
| const errorElement = screen.getByText('[webpack-dev-server] ERROR in ./components/ErrorPages/utils.ts') | ||
| .closest('.bg-red-100') | ||
| expect(errorElement).toBeInTheDocument() | ||
|
|
||
| // Warning should have yellow styling | ||
| const warningElement = screen.getByText('Warning: Something went wrong') | ||
| .closest('.bg-yellow-100') | ||
| expect(warningElement).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('handles empty error list', () => { | ||
| render(<ConsoleOutput errors={[]} />) | ||
| const searchInput = screen.getByPlaceholderText('Search errors...') | ||
| expect(searchInput).toBeInTheDocument() | ||
| expect(screen.queryByRole('button')).not.toBeInTheDocument() | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| import userEvent from '@testing-library/user-event' | ||
| import { describe, it, expect } from 'vitest' | ||
|
|
||
| import { DiagnosticData } from '@/types/DiagnosticData' | ||
|
|
||
| import { DevToolsUI } from './DevToolsUi' | ||
| import { render, screen } from '../test/test-utils' | ||
|
|
||
| describe('DevToolsUI', () => { | ||
| const sampleDiagnosticData: DiagnosticData = { | ||
| url: 'https://test.com', | ||
| description: 'Test description', | ||
| browserInfo: { | ||
| browserName: 'Chrome', | ||
| browserVersion: '100.0.0', | ||
| os: 'Windows', | ||
| osVersion: '10', | ||
| platform: 'Desktop', | ||
| language: 'en-US' | ||
| }, | ||
| entityInfo: { | ||
| bugReportDetails: {}, | ||
| 'metabase-info': {}, | ||
| 'system-info': {} | ||
| }, | ||
| frontendErrors: [ | ||
| '"[webpack-dev-server] ERROR in ./components/ErrorPages/utils.ts\\n × Module not found: Error message 1"', | ||
| '"[webpack-dev-server] ERROR in ./components/ErrorPages/tab.ts\\n × Module not found: Error message 1"', | ||
| '"Warning: Something went wrong\\nStack trace for warning"', | ||
| '"[webpack-dev-server] Another error occurred\\nStack trace for error"' | ||
| ], | ||
| backendErrors: [ | ||
| { message: 'Backend Error 1', timestamp: '2024-01-01' }, | ||
| { message: 'Backend Error 2', timestamp: '2024-01-02' } | ||
| ], | ||
| userLogs: [ | ||
| { message: 'User Log 1', timestamp: '2024-01-01' } | ||
| ], | ||
| logs: [ | ||
| { message: 'System Log 1', timestamp: '2024-01-01' } | ||
| ] | ||
| } | ||
|
|
||
| it('renders without crashing', () => { | ||
| expect(() => render(<DevToolsUI diagnosticData={sampleDiagnosticData} />)).not.toThrow() | ||
| }) | ||
|
|
||
| it('displays basic info correctly', () => { | ||
| render(<DevToolsUI diagnosticData={sampleDiagnosticData} />) | ||
|
|
||
| // Check URL and description | ||
| expect(screen.getByText('URL:')).toBeInTheDocument() | ||
| expect(screen.getByText('https://test.com')).toBeInTheDocument() | ||
| expect(screen.getByText('Description:')).toBeInTheDocument() | ||
| expect(screen.getByText('Test description')).toBeInTheDocument() | ||
|
|
||
| // Check browser info | ||
| expect(screen.getByText('Browser:')).toBeInTheDocument() | ||
| expect(screen.getByText('Chrome 100.0.0')).toBeInTheDocument() | ||
| expect(screen.getByText('OS:')).toBeInTheDocument() | ||
| expect(screen.getByText('Windows 10')).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('switches tabs correctly', async () => { | ||
| const user = userEvent.setup() | ||
| render(<DevToolsUI diagnosticData={sampleDiagnosticData} />) | ||
|
|
||
| // Click Console output tab | ||
| await user.click(screen.getByRole('tab', { name: 'Console output' })) | ||
| expect(screen.getByText('[webpack-dev-server] ERROR in ./components/ErrorPages/utils.ts')).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('displays error badges correctly', () => { | ||
| render(<DevToolsUI diagnosticData={sampleDiagnosticData} />) | ||
|
|
||
| // Check backend errors badge | ||
| const backendErrorsBadge = screen.getByText('2') | ||
| expect(backendErrorsBadge).toBeInTheDocument() | ||
| expect(backendErrorsBadge.className).toContain('destructive') | ||
| }) | ||
|
|
||
| it('displays raw data correctly', async () => { | ||
| const user = userEvent.setup() | ||
| render(<DevToolsUI diagnosticData={sampleDiagnosticData} />) | ||
|
|
||
| // Switch to raw data tab | ||
| await user.click(screen.getByRole('tab', { name: 'Raw Data' })) | ||
|
|
||
| // Check if JSON data is displayed | ||
| expect(screen.getByText(/"url":/)).toBeInTheDocument() | ||
| expect(screen.getByText(/"description":/)).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('handles empty diagnostic data', () => { | ||
| const emptyData: DiagnosticData = { | ||
| url: '', | ||
| description: '', | ||
| browserInfo: {}, | ||
| entityInfo: {}, | ||
| frontendErrors: [], | ||
| backendErrors: [], | ||
| userLogs: [], | ||
| logs: [] | ||
| } | ||
|
|
||
| render(<DevToolsUI diagnosticData={emptyData} />) | ||
|
|
||
| // Should still render without errors | ||
| expect(screen.getByText('Unknown URL')).toBeInTheDocument() | ||
| expect(screen.queryByText('Unknown browser')).not.toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('updates frontend error count', async () => { | ||
| const user = userEvent.setup() | ||
| render(<DevToolsUI diagnosticData={sampleDiagnosticData} />) | ||
|
|
||
| // Switch to console output tab | ||
| await user.click(screen.getByRole('tab', { name: 'Console output' })) | ||
|
|
||
| // Check if error count badge is updated | ||
| const frontendErrorsBadge = screen.getByText('3') | ||
| expect(frontendErrorsBadge).toBeInTheDocument() | ||
| expect(frontendErrorsBadge.className).toContain('destructive') | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.