Axe plugin setup wizard

[matejchalk]

User story

Our setup wizard should be able to configure a basic working version of each of our official plugins. Each plugin may prompt for its own specific configuration options and infer smart defaults from the user's repo. The resulting configuration code adds the plugin to the user's config and sets up some basic categories.

This issue is about @code-pushup/axe-plugin specifically.

Output example

import axePlugin, { axeGroupRefs } from '@code-pushup/axe-plugin';
import type { CoreConfig } from '@code-pushup/models';

const axe = await axePlugin([
  'http://localhost:4200/login',
  'http://localhost:4200/platform',
]);

const config: CoreConfig = {
  plugins: [axe],
  categories: [
    {
      slug: 'a11y',
      title: 'Accessibility',
      description: 'Tests website **accessibility** in accordance with WCAG',
      refs: axeGroupRefs(axe),
    },
  ],
};

export default config;

Setup script

import type { Page } from 'playwright-core';

export default async function (page: Page): Promise<void> {
  // ... add your custom logic here ...
}

import axePlugin, { axeGroupRefs } from '@code-pushup/axe-plugin';
import type { CoreConfig } from '@code-pushup/models';

const axe = await axePlugin('http://localhost:4200', {
  setupScript: './axe-setup.ts',
});

const config: CoreConfig = {
  plugins: [axe],
  categories: [
    {
      slug: 'a11y',
      title: 'Accessibility',
      description: 'Tests website **accessibility** in accordance with WCAG',
      refs: axeGroupRefs(axe),
    },
  ],
};

export default config;

Category merging

import axePlugin, { axeGroupRefs } from '@code-pushup/axe-plugin';
import lighthousePlugin, { lighthouseGroupRefs } from '@code-pushup/lighthouse-plugin';
import type { CoreConfig } from '@code-pushup/models';

const lighthouse = await lighthousePlugin('http://localhost:4200');
const axe = await axePlugin('http://localhost:4200');

const config: CoreConfig = {
  plugins: [lighthouse, axe],
  categories: [
    {
      slug: 'a11y',
      title: 'Accessibility',
      description:
        'Tests website **accessibility** in accordance with WCAG. Determine if all users access content and navigate your site effectively.',
      refs: [
        ...axeGroupRefs(axe),
        ...lighthouseGroupRefs(lhPlugin, 'accessibility'),
      ],
    },
    {
      slug: 'performance',
      title: 'Performance',
      description: 'Measure performance and find opportunities to speed up page loads.',
      refs: lighthouseGroupRefs(lhPlugin, 'performance'),
    },

    {
      slug: 'best-practices',
      title: 'Best Practices',
      description: 'Improve code health of your web page following these best practices.',
      refs: lighthouseGroupRefs(lhPlugin, 'best-practices'),
    },
    {
      slug: 'seo',
      title: 'SEO',
      description: 'Ensure that your page is optimized for search engine results ranking.',
      refs: lighthouseGroupRefs(lhPlugin, 'seo'),
    },
  ],
};

export default config;

Acceptance criteria

• The Axe plugin is unselected by default.
• The user is prompted (or provides a CLI argument) for at least 1 target URL.
• The user is prompted (or provides a CLI argument) for which Axe preset to use (default is WCAG 2.2 AA).
• The user is prompted (or provides a CLI argument) for a yes/no answer to whether they'll be needing a custom setup script because their app is auth-protected.
  • If the user selects yes, then a small boilerplate script is created and linked in their plugin config.
• The user should confirm (via prompt or CLI argument) if they want to also generate basic categories.
  • The default answer is yes (create the categories).
  • If confirmed, 1 is created - Accessibility.
    • The generated config uses plugin-provided functions that resolve multiple URLs correctly.
  • If denied, no categories are created.
• All of the above logic lives in @code-pushup/lighthouse-plugin. The core of the setup wizard in @code-pushup/create-cli orchestrates plugin selection and generation, but doesn't know any specifics about individual plugins.
• In general, it's possible for plugins to create the same category. This needs to be handled by the core logic in @code-pushup/create-cli - the refs are merged into 1 category.