x/pkgsite: frontend testing strategy #43361

jamalc · 2020-12-24T02:04:35Z

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

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

The text was updated successfully, but these errors were encountered:

jamalc · 2020-12-30T17:27:00Z

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

gopherbot · 2020-12-30T23:00:31Z

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

gopherbot · 2020-12-30T23:03:52Z

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

This change updates the jest config to specify test environments separately for unit and e2e tests and adds the isolated modules option to the ts-jest config to improve test startup time. For golang/go#43361 Change-Id: I3fbfae2a42c26bd0eeb2d235dab1cced0c8701ea Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/280711 Trust: Jamal Carvalho <jamal@golang.org> Run-TryBot: Jamal Carvalho <jamal@golang.org> TryBot-Result: kokoro <noreply+kokoro@google.com> Reviewed-by: Jonathan Amsterdam <jba@google.com>

Migrates CopyToClipboardController to TypeScript and adds a unit test. For golang/go#43359 For golang/go#43361 Change-Id: I2e1179aa7cecb0e280a57d420ee2f885c4d6db3c Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/280893 Reviewed-by: Julie Qiu <julie@golang.org> Trust: Jamal Carvalho <jamal@golang.org>

gopherbot · 2021-02-16T19:56:46Z

Change https://golang.org/cl/292691 mentions this issue: package.json: cleanup scripts and dependencies

gopherbot · 2021-02-16T19:59:29Z

Change https://golang.org/cl/292694 mentions this issue: devtools/config: create docker files for nodejs and frontend

gopherbot · 2021-02-16T20:00:13Z

Change https://golang.org/cl/292695 mentions this issue: devtools/config: create docker-compose.next config and run script

gopherbot · 2021-02-16T20:01:19Z

Change https://golang.org/cl/292696 mentions this issue: all.bash: update frontend testing scripts

gopherbot · 2021-02-16T20:01:43Z

Change https://golang.org/cl/292697 mentions this issue: devtools: remove legacy files

gopherbot · 2021-02-16T20:02:58Z

Change https://golang.org/cl/292698 mentions this issue: cmd/frontend: add host as runtime argument

gopherbot · 2021-02-16T20:03:30Z

Change https://golang.org/cl/292699 mentions this issue: devtools/config: jest config updates

gopherbot · 2021-02-16T20:04:12Z

Change https://golang.org/cl/292700 mentions this issue: e2e: add and update snapshot tests

gopherbot · 2021-02-16T20:47:02Z

Change https://golang.org/cl/292702 mentions this issue: doc: update frontend docs with new testing commands

- Updates version string from various dependencies to fix at an exact version. - Refactors scripts to simplify future CI configuration. For golang/go#43361 Change-Id: I73a48bf24a9126c01481c1744567297110b89b46 Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/292691 Trust: Jamal Carvalho <jamal@golang.org> Reviewed-by: Julie Qiu <julie@golang.org>

These dockerfiles will create the images used during CI testing. For golang/go#43361 Change-Id: I638b12709fd1a8b3f4bd06448d5e952345cd3917 Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/292694 Trust: Jamal Carvalho <jamal@golang.org> Run-TryBot: Jamal Carvalho <jamal@golang.org> TryBot-Result: kokoro <noreply+kokoro@google.com> Reviewed-by: Jonathan Amsterdam <jba@google.com>

For golang/go#43361 Change-Id: I5303902f29c746638c7a562833be52d3403d972f Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/292702 Trust: Jamal Carvalho <jamal@golang.org> Run-TryBot: Jamal Carvalho <jamal@golang.org> Reviewed-by: Jonathan Amsterdam <jba@google.com>

The config creates the following services - nodejs: used to run npm commands, a slight refactor of the existing config for npm in docker-compose.yaml - ci: extends nodejs, used to run the e2e tests - frontend: runs the frontend server - migrate: runs database migrations - wait_for_db: a utility service, used to delay the start of the migrations until the db is ready for connections - db: exposes a postgres database Using the devtools/docker_compose.sh script we can run these services and perform the relevant cleanup. The script exposes the nodejs and ci services. We'll use it in all.bash and CI to run the linters and tests for frontend assets. For golang/go#43361 Change-Id: Ie9c91058f9c6796b737e94c237b2d99f612f45a7 Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/292695 Trust: Jamal Carvalho <jamal@golang.org> Reviewed-by: Julie Qiu <julie@golang.org>

- Create a command to run npm scripts as a relacement for devtools/npm.sh. - Adds unit tests to all.bash run and a commmand to e2e tests locally. For golang/go#43361 Change-Id: I8bff0358c9e71b6790ee2f1516716c46bc07a702 Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/292696 Trust: Jamal Carvalho <jamal@golang.org> Run-TryBot: Jamal Carvalho <jamal@golang.org> TryBot-Result: kokoro <noreply+kokoro@google.com> Reviewed-by: Julie Qiu <julie@golang.org> Reviewed-by: Jonathan Amsterdam <jba@google.com>

jamalc added NeedsFix The path to resolution is known, but the work has not been done. pkgsite labels Dec 24, 2020

jamalc added this to the pkgsite/frontend milestone Dec 24, 2020

jamalc self-assigned this Dec 24, 2020

This was referenced Dec 24, 2020

x/pkgsite: improve frontend development ergonomics #40960

Closed

x/pkgsite: migrating to typescript #43359

Closed

x/pkgsite: transforming styles with PostCSS #43360

Closed

x/pkgsite: using npm packages for frontend development #43358

Closed

jamalc closed this as completed Feb 18, 2021

golang locked and limited conversation to collaborators Feb 18, 2022

gopherbot added the FrozenDueToAge label Feb 18, 2022

hyangah added the pkgsite/frontend Issues related to pkgsite HTML/CSS/JavaScript and frontend development label May 20, 2022

rsc unassigned jamalc Jun 23, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

x/pkgsite: frontend testing strategy #43361

x/pkgsite: frontend testing strategy #43361

jamalc commented Dec 24, 2020 •

edited

jamalc commented Dec 30, 2020 •

edited

gopherbot commented Dec 30, 2020

gopherbot commented Dec 30, 2020

gopherbot commented Feb 16, 2021

gopherbot commented Feb 16, 2021

gopherbot commented Feb 16, 2021

gopherbot commented Feb 16, 2021

gopherbot commented Feb 16, 2021

gopherbot commented Feb 16, 2021

gopherbot commented Feb 16, 2021

gopherbot commented Feb 16, 2021

gopherbot commented Feb 16, 2021

x/pkgsite: frontend testing strategy #43361

x/pkgsite: frontend testing strategy #43361

Comments

jamalc commented Dec 24, 2020 • edited

Summary

Details

Related Issues

jamalc commented Dec 30, 2020 • edited

gopherbot commented Dec 30, 2020

gopherbot commented Dec 30, 2020

gopherbot commented Feb 16, 2021

gopherbot commented Feb 16, 2021

gopherbot commented Feb 16, 2021

gopherbot commented Feb 16, 2021

gopherbot commented Feb 16, 2021

gopherbot commented Feb 16, 2021

gopherbot commented Feb 16, 2021

gopherbot commented Feb 16, 2021

gopherbot commented Feb 16, 2021

jamalc commented Dec 24, 2020 •

edited

jamalc commented Dec 30, 2020 •

edited