Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

x/pkgsite: frontend testing strategy #43361

Open
jamalc opened this issue Dec 24, 2020 · 3 comments
Open

x/pkgsite: frontend testing strategy #43361

jamalc opened this issue Dec 24, 2020 · 3 comments
Assignees
Labels

Comments

@jamalc
Copy link
Member

@jamalc jamalc commented Dec 24, 2020

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
Copy link
Member Author

@jamalc jamalc commented Dec 30, 2020

@gopherbot
Copy link

@gopherbot gopherbot commented Dec 30, 2020

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

@gopherbot
Copy link

@gopherbot gopherbot commented Dec 30, 2020

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

gopherbot pushed a commit to golang/pkgsite that referenced this issue Jan 5, 2021
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>
gopherbot pushed a commit to golang/pkgsite that referenced this issue Jan 5, 2021
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.