refactor: extract duplicated code between index.vue and [runId].vue pages (#68)

* Initial plan for issue

* Refactor: Extract duplicated code into composable and component

Co-authored-by: serhalp <[email protected]>

* Merge main and update refactored code with latest improvements - force push

Co-authored-by: serhalp <[email protected]>

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: serhalp <[email protected]>

Author: Copilot

app/components/RunDisplay.test.ts

@@ -0,0 +1,124 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import RunDisplay from './RunDisplay.vue'
+import type { Run } from '~/types/run'
+
+// Mock the child components
+vi.mock('./RunPanel.vue', () => ({
+  default: {
+    name: 'RunPanel',
+    template: '<div class="run-panel-mock">{{ runId }}</div>',
+    props: ['runId', 'url', 'status', 'durationInMs', 'cacheHeaders'],
+  },
+}))
+
+describe('RunDisplay', () => {
+  const mockRuns: Run[] = [
+    {
+      runId: 'test-run-1',
+      url: 'https://example.com',
+      status: 200,
+      durationInMs: 100,
+      cacheHeaders: {},
+    },
+    {
+      runId: 'test-run-2',
+      url: 'https://example2.com',
+      status: 404,
+      durationInMs: 200,
+      cacheHeaders: {},
+    },
+  ]
+
+  it('shows loading indicator when loading', () => {
+    const wrapper = mount(RunDisplay, {
+      props: {
+        runs: [],
+        error: null,
+        loading: true,
+        onClear: vi.fn(),
+      },
+    })
+
+    expect(wrapper.find('.loading-indicator').exists()).toBe(true)
+    expect(wrapper.find('.loading-indicator').text()).toBe('⏳ Inspecting URL...')
+  })
+
+  it('shows error message when error exists', () => {
+    const errorMessage = 'Test error message'
+    const wrapper = mount(RunDisplay, {
+      props: {
+        runs: [],
+        error: errorMessage,
+        loading: false,
+        onClear: vi.fn(),
+      },
+    })
+
+    expect(wrapper.find('.error').exists()).toBe(true)
+    expect(wrapper.find('.error').text()).toBe(errorMessage)
+  })
+
+  it('renders run panels for each run', () => {
+    const wrapper = mount(RunDisplay, {
+      props: {
+        runs: mockRuns,
+        error: null,
+        loading: false,
+        onClear: vi.fn(),
+      },
+    })
+
+    const runPanels = wrapper.findAll('.run-panel-mock')
+    expect(runPanels).toHaveLength(2)
+    expect(runPanels[0]?.text()).toBe('test-run-1')
+    expect(runPanels[1]?.text()).toBe('test-run-2')
+  })
+
+  it('shows clear button when runs exist', () => {
+    const mockOnClear = vi.fn()
+    const wrapper = mount(RunDisplay, {
+      props: {
+        runs: mockRuns,
+        error: null,
+        loading: false,
+        onClear: mockOnClear,
+      },
+    })
+
+    const clearButton = wrapper.find('button')
+    expect(clearButton.exists()).toBe(true)
+    expect(clearButton.text()).toBe('Clear')
+  })
+
+  it('hides clear button when no runs exist', () => {
+    const wrapper = mount(RunDisplay, {
+      props: {
+        runs: [],
+        error: null,
+        loading: false,
+        onClear: vi.fn(),
+      },
+    })
+
+    expect(wrapper.find('button').exists()).toBe(false)
+  })
+
+  it('calls onClear when clear button is clicked', async () => {
+    const mockOnClear = vi.fn()
+    const wrapper = mount(RunDisplay, {
+      props: {
+        runs: mockRuns,
+        error: null,
+        loading: false,
+        onClear: mockOnClear,
+      },
+    })
+
+    await wrapper.find('button').trigger('click')
+    expect(mockOnClear).toHaveBeenCalledOnce()
+  })
+})

app/components/RunDisplay.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import type { Run } from '~/types/run'
+
+defineProps<{
+  runs: readonly Run[]
+  error: string | null
+  loading: boolean
+  onClear: () => void
+}>()
+</script>
+
+<template>
+  <div>
+    <div
+      v-if="loading"
+      class="loading-indicator"
+    >
+      ⏳ Inspecting URL...
+    </div>
+
+    <div
+      v-if="error"
+      class="error"
+    >
+      {{ error }}
+    </div>
+
+    <div class="flex-btwn run-panels">
+      <RunPanel
+        v-for="(run, i) in runs"
+        v-bind="run"
+        :key="i"
+        :enable-diff-on-hover="runs.length > 1"
+      />
+    </div>
+
+    <div class="reset-container">
+      <button
+        v-if="runs.length > 0"
+        @click="onClear()"
+      >
+        Clear
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.loading-indicator {
+  text-align: center;
+  padding: 1em;
+  color: var(--blue-600, #2563eb);
+  font-weight: 500;
+}
+
+.error {
+  color: var(--red-400);
+}
+
+.run-panels {
+  flex-wrap: wrap;
+  align-items: stretch;
+}
+
+.run-panels>* {
+  flex: 1 1 20em;
+}
+
+.reset-container {
+  text-align: center;
+  background-color: inherit;
+}
+</style>

app/composables/useRunManager.test.ts

@@ -0,0 +1,137 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { useRunManager } from './useRunManager'
+import type { ApiRun } from '~/types/run'
+
+// Mock the getCacheHeaders function
+vi.mock('~/utils/getCacheHeaders', () => ({
+  default: vi.fn((headers: Record<string, string>) => headers),
+}))
+
+// Mock fetch and $fetch
+global.fetch = vi.fn()
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+global.$fetch = vi.fn() as any
+
+describe('useRunManager', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('initializes with empty state', () => {
+    const { runs, error, loading } = useRunManager()
+
+    expect(runs.value).toEqual([])
+    expect(error.value).toBe(null)
+    expect(loading.value).toBe(false)
+  })
+
+  it('transforms ApiRun to Run correctly', () => {
+    const { getRunFromApiRun } = useRunManager()
+
+    const apiRun: ApiRun = {
+      runId: 'test-run',
+      url: 'https://example.com',
+      status: 200,
+      durationInMs: 100,
+      headers: { 'cache-control': 'max-age=3600' },
+    }
+
+    const run = getRunFromApiRun(apiRun)
+
+    expect(run).toEqual({
+      runId: 'test-run',
+      url: 'https://example.com',
+      status: 200,
+      durationInMs: 100,
+      cacheHeaders: { 'cache-control': 'max-age=3600' },
+    })
+  })
+
+  it('handles successful API request', async () => {
+    const mockApiRun: ApiRun = {
+      runId: 'test-run',
+      url: 'https://example.com',
+      status: 200,
+      durationInMs: 100,
+      headers: { 'cache-control': 'max-age=3600' },
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const mockFetch = vi.mocked($fetch as any)
+    mockFetch.mockResolvedValueOnce(mockApiRun)
+
+    const { runs, error, loading, handleRequestFormSubmit } = useRunManager()
+
+    await handleRequestFormSubmit({ url: 'https://example.com' })
+
+    expect(loading.value).toBe(false)
+    expect(error.value).toBe(null)
+    expect(runs.value).toHaveLength(1)
+    expect(runs.value[0]?.url).toBe('https://example.com')
+    expect(mockFetch).toHaveBeenCalledWith('/api/inspect-url', {
+      method: 'POST',
+      body: { url: 'https://example.com' },
+    })
+  })
+
+  it('handles API request error', async () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const mockFetch = vi.mocked($fetch as any)
+    mockFetch.mockRejectedValueOnce(new Error('HTTP 500'))
+
+    const { runs, error, loading, handleRequestFormSubmit } = useRunManager()
+
+    await handleRequestFormSubmit({ url: 'https://example.com' })
+
+    expect(loading.value).toBe(false)
+    expect(error.value).toBeTruthy()
+    expect(runs.value).toHaveLength(0)
+  })
+
+  it('clears runs when handleClickClear is called', () => {
+    const { runs, setRuns, handleClickClear } = useRunManager()
+
+    // Add some runs first
+    setRuns([{
+      runId: 'test-run',
+      url: 'https://example.com',
+      status: 200,
+      durationInMs: 100,
+      cacheHeaders: {},
+    }])
+
+    expect(runs.value).toHaveLength(1)
+
+    handleClickClear()
+
+    expect(runs.value).toHaveLength(0)
+  })
+
+  it('adds runs with addRun', () => {
+    const { runs, addRun } = useRunManager()
+
+    const run = {
+      runId: 'test-run',
+      url: 'https://example.com',
+      status: 200,
+      durationInMs: 100,
+      cacheHeaders: {},
+    }
+
+    addRun(run)
+
+    expect(runs.value).toHaveLength(1)
+    expect(runs.value[0]).toEqual(run)
+  })
+
+  it('sets error with setError', () => {
+    const { error, setError } = useRunManager()
+
+    setError('Test error')
+
+    expect(error.value).toBe('Test error')
+  })
+})