Skip to content

Commit

Permalink
add toMatchImageSnapshot()
Browse files Browse the repository at this point in the history
  • Loading branch information
tihuan committed Apr 17, 2020
1 parent 1fb1464 commit 9e3202c
Show file tree
Hide file tree
Showing 3 changed files with 74 additions and 53 deletions.
27 changes: 13 additions & 14 deletions DEV_DOCS.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: Contributing to Auspice development
Title: Contributing to Auspice development
---

Thank you for helping us to improve Nextstrain!
Expand All @@ -10,17 +10,19 @@ This project strictly adheres to the [Contributor Covenant Code of Conduct](http

Please see the [project boards](https://github.com/orgs/nextstrain/projects) for currently available issues.

## Contributing code
Code contributions are welcomed! [Please see the main auspice docs](https://nextstrain.github.io/auspice/introduction/install) for details on how to install and run auspice from source.
## Contributing code

Code contributions are welcomed! [Please see the main auspice docs](https://nextstrain.github.io/auspice/introduction/install) for details on how to install and run auspice from source.

Please comment on an open issue if you are working on it.
For changes unrelated to an open issue, please make an issue outlining what you would like to change/add.

Please ensure there are no **linting** errors by running `npm run lint` (which uses [eslint](https://eslint.org/)).
In the future we will make this a requirement for PRs or commits.
In the future we will make this a requirement for PRs or commits.

Where possible, **please rebase** your work onto master rather than merging changes from master into your PR.

From a fork: `git pull --rebase upstream master`

## Contributing to Documentation

Expand All @@ -30,49 +32,46 @@ This documentation is built from files contained within the Auspice GitHub repo

Note that currently the documentation must be rebuilt & pushed to GitHub _after_ a new version is released in order for the changelog to correctly appear at [nextstrain.github.io/auspice/releases/changelog](https://nextstrain.github.io/auspice/releases/changelog).


## Contributing to Internationalization and Localization (i18n/l18n)

If you can assist in efforts to translate the Auspice interface to more languages your assistance would be very much appreciated.
The currently available languages are displayed via a drop-down at the bottom of the sidebar.

#### Adding a new language:
## Adding a new language

1) Add the language to the `getlanguageOptions` function in [this file](https://github.com/nextstrain/auspice/blob/master/src/components/controls/language.js#L24)
2) If this is a new language, copy the folder (and the JSONs within it) `src/locales/en` and name it to match the language code for the new translation -- e.g. for Spanish this would be `src/locales/es`
3) For each key-value in the JSONs, translate the english phrase to the new locale. (Do not modify the strings within `{{...}}` sections.)


For example, a spanish translation would change the English:
```json
"sampled between {{from}} and {{to}}": "sampled between {{from}} and {{to}}",
"and comprising": "and comprising",
```
to
to
```json
"sampled between {{from}} and {{to}}": "aislados entre {{from}} y {{to}}",
"and comprising": "y compuesto de",
```

#### Helper script to check what parts of a translation are out-of-date or missing:
## Helper script to check what parts of a translation are out-of-date or missing

Run `npm run diff-lang -- X`, where `X` is the language you wish to check, for instance `es`.
This will display the strings which:
* need to be added to the translation
* are present but should be removed as they are no longer used
* are present but are simply a copy of the English version & need to be translated


> Running `npm run diff-lang` will check all available languages.
#### Improving an existing translation:
## Improving an existing translation

If a translation of a particular string is not yet available, then auspice will fall-back to the english version.

1) Find the relevant key in the (EN) JSONs [in this directory](https://github.com/nextstrain/auspice/tree/master/src/locales/en)
2) Add the key to the JSON with the same name, but in the directory corresponding to the language you are translating into (see above for an example).



## Releases & versioning

New versions are released via the `./releaseNewVersion.sh` script from an up-to-date `master` branch. It will prompt you for the version number increase, push changes to the `release` branch and, as long as Travis-CI is successful then a new version will be automatically published to [npm](https://www.npmjs.com/package/auspice).
52 changes: 37 additions & 15 deletions test/integration/helpers.js
Original file line number Diff line number Diff line change
@@ -1,32 +1,54 @@
const WAIT_BETWEEN_SCREENSHOTS_MS = 100;

export async function waitUntilScreenStable() {
const RETRY_TIMES = 5;
/**
* @param {function} assert Function that calls `page.screenshot()` and `expect(image).toMatchImageSnapshot()`
* @param {object} options
* @param options.retries The number of retries
* @param options.timeoutMS The max timeout before failing the test in milliseconds
* @param options.pollingMS The polling frequency in milliseconds
*/
export async function toMatchImageSnapshot(assert, options = {}) {
const DEFAULT_RETRY_TIMES = 5;
const DEFAULT_TIMEOUT_MS = 10 * 1000;
const DEFAULT_POLLING_MS = 100;

const {
retries = DEFAULT_RETRY_TIMES,
timeoutMS = DEFAULT_TIMEOUT_MS,
pollingMS = DEFAULT_POLLING_MS
} = options;

const startTime = Date.now();

let attempt = 0;

/**
* (tihuan): We want `await` to complete
* before the next iteration
* (tihuan): We want `await` to complete before the next iteration
*/
/* eslint-disable no-await-in-loop */
while (attempt < RETRY_TIMES) {
while (!isTimeoutExceeded()) {
attempt++;

const imageA = await page.screenshot();

await page.waitFor(WAIT_BETWEEN_SCREENSHOTS_MS);

const imageB = await page.screenshot();

if (imageA.equals(imageB)) {
try {
await assert();
break;
} else {
if (attempt === RETRY_TIMES) {
throw new Error(`Screen not stable after ${RETRY_TIMES} tries`);
} catch (error) {
if (attempt === retries) {
throw error;
}

page.waitFor(pollingMS);

continue;
}
}
/* eslint-enable no-await-in-loop */

if (isTimeoutExceeded()) {
throw new Error(`Timeout exceeded!`);
}

function isTimeoutExceeded() {
return Date.now() - startTime > timeoutMS;
}
}
48 changes: 24 additions & 24 deletions test/integration/zika.test.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { waitUntilScreenStable } from "./helpers";
import { toMatchImageSnapshot } from './helpers';

describe("Zika", () => {
it("displays the title on the page", async () => {
Expand All @@ -17,7 +17,7 @@ describe("Zika", () => {
describe("Color by", () => {
describe("author", () => {
it("matches the screenshot", async () => {
await toMatchImageSnapshot("author", async () => {
await matchSelectOptionScreenshot("author", async () => {
await page.keyboard.press("ArrowUp");
await page.keyboard.press("Enter");
});
Expand All @@ -26,13 +26,13 @@ describe("Zika", () => {

describe("country", () => {
it("matches the screenshot", async () => {
await toMatchImageSnapshot("country", () => {});
await matchSelectOptionScreenshot("country", () => {});
});
});

describe("date", () => {
it("matches the screenshot", async () => {
await toMatchImageSnapshot("date", async () => {
await matchSelectOptionScreenshot("date", async () => {
await page.keyboard.press("ArrowUp");
await page.keyboard.press("ArrowUp");
await page.keyboard.press("Enter");
Expand All @@ -42,7 +42,7 @@ describe("Zika", () => {

describe("region", () => {
it("matches the screenshot", async () => {
await toMatchImageSnapshot("region", async () => {
await matchSelectOptionScreenshot("region", async () => {
await page.keyboard.press("ArrowDown");
await page.keyboard.press("Enter");
});
Expand All @@ -51,7 +51,7 @@ describe("Zika", () => {
});
});

async function toMatchImageSnapshot(option, selectOptionTest) {
async function matchSelectOptionScreenshot(option, selectOptionTest) {
await goToZikaPage();

const colorBySelector = await expect(page).toMatchElement("#selectColorBy");
Expand All @@ -66,24 +66,24 @@ async function toMatchImageSnapshot(option, selectOptionTest) {

await expect(treeTitle).toMatch(option);

await waitUntilScreenStable();

const image = await page.screenshot();

/**
* (tihuan): Apply `blur` and `failureThreshold` to ignore minor noises.
* Also `customSnapshotIdentifier` is needed, since we use `jest.retryTimes()`
* https://github.com/americanexpress/jest-image-snapshot/pull/122/files
* https://github.com/americanexpress/jest-image-snapshot#%EF%B8%8F-api
*/
const SNAPSHOT_CONFIG = {
failureThreshold: 5,
failureThresholdType: 'percent',
blur: 2,
customSnapshotIdentifier: `Color by: ${option}`
};

expect(image).toMatchImageSnapshot(SNAPSHOT_CONFIG);
await toMatchImageSnapshot(async () => {
const image = await page.screenshot();

/**
* (tihuan): Apply `blur` and `failureThreshold` to ignore minor noises.
* Also `customSnapshotIdentifier` is needed, since we use `jest.retryTimes()`
* https://github.com/americanexpress/jest-image-snapshot/pull/122/files
* https://github.com/americanexpress/jest-image-snapshot#%EF%B8%8F-api
*/
const SNAPSHOT_CONFIG = {
failureThreshold: 5,
failureThresholdType: "percent",
blur: 2,
customSnapshotIdentifier: `Color by: ${option}`
};

expect(image).toMatchImageSnapshot(SNAPSHOT_CONFIG);
});
}

async function goToZikaPage() {
Expand Down

0 comments on commit 9e3202c

Please sign in to comment.