005-agent-enables-theme-switching

Prompt

Enable support for switching between all available color schemes.

Checks

• node-tests

  vitest.config.scenario.ts

  import {defineConfig} from 'vitest/config'
  
  export default defineConfig({
    test: {
      include: ['scenario.test.ts'],
      reporters: [
        [
          'json',
          {
            outputFile: 'vitest-scenario-report.json',
            includeTaskLocation: true,
          },
        ],
      ],
    },
  })
  

  scenario.test.ts

  import fs from 'node:fs/promises'
  import path from 'node:path'
  import {expect, test} from 'vitest'
  
  const layoutPath = path.resolve(import.meta.dirname, 'src', 'app', 'layout.tsx')
  const layout = await fs.readFile(layoutPath, 'utf8')
  
  test('src/app/layout.tsx imports Primer primitives', () => {
    expect(layout).toMatch(/import\s+['"]@primer\/primitives\/dist\/css\/primitives\.css['"]/)
  })
  
  test('src/app/layout.tsx imports Primer light theme primitives', () => {
    expect(layout).toMatch(/import\s+['"]@primer\/primitives\/dist\/css\/functional\/themes\/light\.css['"]/)
  })
  
  test('src/app/layout.tsx imports Primer dark theme primitives', () => {
    expect(layout).toMatch(/import\s+['"]@primer\/primitives\/dist\/css\/functional\/themes\/dark\.css['"]/)
  })
  
  test.each([
    'light-tritanopia',
    'light-tritanopia-high-contrast',
    'light-high-contrast',
    'light-colorblind',
    'light-colorblind-high-contrast',
    'dark-colorblind',
    'dark-colorblind-high-contrast',
    'dark-dimmed',
    'dark-dimmed-high-contrast',
    'dark-high-contrast',
    'dark-tritanopia',
    'dark-tritanopia-high-contrast',
  ])('src/app/layout.tsx imports Primer %s theme primitives', theme => {
    expect(layout).toMatch(new RegExp(`import\\s+['"]@primer/primitives/dist/css/functional/themes/${theme}\\.css['"]`))
  })
  
  test('src/app/layout.tsx sets data-color-mode', () => {
    expect(layout).toMatch(/<html[^>]*\bdata-color-mode=/)
  })
  
  test('src/app/layout.tsx sets data-light-mode', () => {
    expect(layout).toMatch(/<html[^>]*\bdata-light-mode=/)
  })
  
  test('src/app/layout.tsx sets data-dark-mode', () => {
    expect(layout).toMatch(/<html[^>]*\bdata-dark-mode=/)
  })
  

Scenario configuration

import {defineConfig} from '@primer/agent-eval/scenario'
import type {JsonTestResults} from 'vitest/node'

export default defineConfig({
  description: 'Evaluate whether the agent enables every available Primer color scheme.',
  prompt: `Enable support for switching between all available color schemes.`,
  tags: ['accessibility', 'baseline', 'nextjs', 'primer', 'theming'],
  checks: [
    {
      name: 'node-tests',
      files: ['vitest.config.scenario.ts', 'scenario.test.ts'],
      async run({sandbox}) {
        const commandResult = await sandbox.runCommand(
          'npx',
          ['vitest', 'run', '--config', 'vitest.config.scenario.ts'],
          {allowNonZeroExitCode: true},
        )
        if (commandResult.exitCode !== 0 && commandResult.exitCode !== 1) {
          throw new Error(`Vitest failed with exit code ${commandResult.exitCode}: ${commandResult.stderr}`)
        }
        const contents = await sandbox.readFile('vitest-scenario-report.json')
        const json: JsonTestResults = JSON.parse(contents)
        if (commandResult.exitCode !== 0 && json.numFailedTests === 0) {
          throw new Error(`Vitest failed without reporting failed tests: ${commandResult.stderr}`)
        }
        return {
          outcomes: json.testResults.flatMap(({assertionResults}) => {
            return assertionResults.map(assertion => {
              return {
                type: 'outcome',
                id: assertion.fullName,
                status: assertion.status === 'passed' ? 'passed' : assertion.status === 'failed' ? 'failed' : 'skipped',
              }
            })
          }),
        }
      },
    },
  ],
})

Experiments

This scenario is not included in any experiments.