003-agent-uses-form-from-primer

Prompt

Update the index page to render a sign-up form. The form does not need to post to an endpoint, I am only working on the UI for now.

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 pagePath = path.resolve(import.meta.dirname, 'src', 'app', 'page.tsx')
  const page = await fs.readFile(pagePath, 'utf8')
  
  test('src/app/page.tsx imports Primer FormControl', () => {
    expect(page).toMatch(/import\s+{[^}]*\bFormControl\b[^}]*}\s+from\s+['"]@primer\/react['"]/)
  })
  
  test('src/app/page.tsx imports Primer TextInput', () => {
    expect(page).toMatch(/import\s+{[^}]*\bTextInput\b[^}]*}\s+from\s+['"]@primer\/react['"]/)
  })
  
  test('src/app/page.tsx imports Primer Button', () => {
    expect(page).toMatch(/import\s+{[^}]*\bButton\b[^}]*}\s+from\s+['"]@primer\/react['"]/)
  })
  
  test('src/app/page.tsx uses a semantic form element', () => {
    expect(page).toMatch(/<form(?:\s[^>]*)?>[\s\S]*?<\/form>/)
  })
  
  test('src/app/page.tsx uses Primer FormControl', () => {
    expect(page).toMatch(/<FormControl(?:\s[^>]*)?>[\s\S]*?<\/FormControl>/)
  })
  
  test('src/app/page.tsx uses Primer TextInput', () => {
    expect(page).toMatch(/<TextInput(?:\s[^>]*)?\/>|<TextInput(?:\s[^>]*)?>[\s\S]*?<\/TextInput>/)
  })
  
  test('src/app/page.tsx uses Primer Button with type submit', () => {
    expect(page).toMatch(/<Button[^>]*type=["']submit["'][^>]*>[\s\S]*?<\/Button>/)
  })
  

Scenario configuration

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

export default defineConfig({
  description: 'Evaluate whether the agent builds a sign-up form with Primer form components.',
  prompt: `Update the index page to render a sign-up form. The form does not need to post to an endpoint, I am only working on the UI for now.`,
  tags: ['baseline', 'component', 'form', 'nextjs', 'primer'],
  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.