x/pkgsite: frontend testing strategy

[jamalc]

Summary

The frontend testing strategy will include a combination of unit, e2e, visual diffing, accessibility, and performance tests using Puppeteer and the Jest testing framework. Lighthouse will be integrated in the testing suite to make assertions on performance and accessibility.

Details

Code in script files should be tested by co-located .test.ts files.

// hello.ts
export function hello(name: string): string {
  return `hello, ${name}!`
}

// hello.test.ts
describe('example', () => {
  test('hello', () => {
    expect(hello('world')).toEqual('hello, world!');
  });
});

Snapshot tests will be written for pages served by the pkgsite.

describe('Snapshot matches for', () => {
  const baseUrl = process.env.FRONTEND_URL || 'localhost';
  let browser: puppeteer.Browser;

  beforeAll(async () => {
    browser = await puppeteer.launch({
      defaultViewport: { height: 800, width: 1280 },
    });
  });

  test('homepage', async () => {
    const page = await browser.newPage();
    await page.goto(baseUrl);
    const image = await page.screenshot({ fullPage: true });
    expect(image).toMatchImageSnapshot();
  });

  test('github.com/sirupsen/logrus@v1.7.0', async () => {
    const page = await browser.newPage();
    await page.goto(`${baseUrl}/github.com/sirupsen/logrus@v1.7.0`);
    const image = await page.screenshot({ fullPage: true });
    expect(image).toMatchImageSnapshot();
  });
});

Example performance tests.

describe('Lighthouse Audit', () => {
  const baseUrl = process.env.FRONTEND_URL || 'localhost';
  let browser: puppeteer.Browser;
  let audit: lighthouse.Audit;

  beforeAll(async () => {
    browser = await puppeteer.launch({
      defaultViewport: { height: 800, width: 1280 },
    });
    audit = lighthouse(`${baseUrl}/net/http`)
  });

  test('performance should score 90+', () => {
    expect(audit.performance.score).toBeGreaterThanOrEqual(0.9);
  });
})

Related Issues

• #43358: using npm packages for frontend development
• #43359: migrating to typescript with esbuild
• #43360: transforming styles with PostCSS

[jamalc]

https://golang.org/cl/280600
https://golang.org/cl/280693

[gopherbot]

Change https://golang.org/cl/280711 mentions this issue: devtools: update jest config

[gopherbot]

Change https://golang.org/cl/280893 mentions this issue: content: move clipboard.js code to content/ts