Timmy Huang
2 years ago
committed by
james hadfield
james hadfield
14 changed files with 1275 additions and 63 deletions
-
4.github/workflows/ci.yaml
-
5.gitignore
-
77DEV_DOCS.md
-
1097package-lock.json
-
2package.json
-
1puppeteer.config.js
-
5puppeteer.setup.js
-
5src/components/controls/color-by.js
-
BINtest/integration/__image_snapshots__/Color-by:author-snap.png
-
BINtest/integration/__image_snapshots__/Color-by:country-snap.png
-
BINtest/integration/__image_snapshots__/Color-by:date-snap.png
-
BINtest/integration/__image_snapshots__/Color-by:region-snap.png
-
42test/integration/helpers.js
-
88test/integration/zika.test.js
1097
package-lock.json
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
size 247382 |
size 236376 |
size 241689 |
size 238657 |
@ -0,0 +1,42 @@ |
|||
/** |
|||
* @param {function} assert Function that calls `page.screenshot()` and `expect(image).toMatchImageSnapshot()` |
|||
* @param {object} options |
|||
* @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_TIMEOUT_MS = 10 * 1000; |
|||
const DEFAULT_POLLING_MS = 100; |
|||
|
|||
const { |
|||
timeoutMS = DEFAULT_TIMEOUT_MS, |
|||
pollingMS = DEFAULT_POLLING_MS |
|||
} = options; |
|||
|
|||
const startTime = Date.now(); |
|||
|
|||
/** |
|||
* (tihuan): We want `await` to complete before the next iteration |
|||
*/ |
|||
/* eslint-disable no-await-in-loop */ |
|||
// eslint-disable-next-line no-constant-condition
|
|||
while (true) { |
|||
try { |
|||
await assert(); |
|||
break; |
|||
} catch (error) { |
|||
if (isTimeoutExceeded()) { |
|||
throw error; |
|||
} |
|||
|
|||
page.waitFor(pollingMS); |
|||
|
|||
continue; |
|||
} |
|||
} |
|||
/* eslint-enable no-await-in-loop */ |
|||
|
|||
function isTimeoutExceeded() { |
|||
return Date.now() - startTime > timeoutMS; |
|||
} |
|||
} |
|||
@ -1,20 +1,90 @@ |
|||
import { toMatchImageSnapshot } from './helpers'; |
|||
|
|||
describe("Zika", () => { |
|||
it('displays the title on the page', async () => { |
|||
await goToZikaPage() |
|||
it("displays the title on the page", async () => { |
|||
await goToZikaPage(); |
|||
await expect(page).toMatch("Real-time tracking of Zika virus evolution"); |
|||
}); |
|||
|
|||
it('clicks `Play` on the `TransmissionsCard`', async () => { |
|||
await goToZikaPage() |
|||
it("clicks `Play` on the `TransmissionsCard`", async () => { |
|||
await goToZikaPage(); |
|||
|
|||
await expect(page).toClick("button", { text: "Play" }); |
|||
|
|||
await expect(page).toMatchElement("button", { text: "Pause" }); |
|||
}); |
|||
|
|||
describe("Color by", () => { |
|||
describe("author", () => { |
|||
it("matches the screenshot", async () => { |
|||
await matchSelectOptionScreenshot("author", async () => { |
|||
await page.keyboard.press("ArrowUp"); |
|||
await page.keyboard.press("Enter"); |
|||
}); |
|||
}); |
|||
}); |
|||
|
|||
await expect(page).toMatchElement('#TransmissionsCard') |
|||
describe("country", () => { |
|||
it("matches the screenshot", async () => { |
|||
await matchSelectOptionScreenshot("country", () => {}); |
|||
}); |
|||
}); |
|||
|
|||
await expect(page).toClick('button', { text: 'Play' }) |
|||
describe("date", () => { |
|||
it("matches the screenshot", async () => { |
|||
await matchSelectOptionScreenshot("date", async () => { |
|||
await page.keyboard.press("ArrowUp"); |
|||
await page.keyboard.press("ArrowUp"); |
|||
await page.keyboard.press("Enter"); |
|||
}); |
|||
}); |
|||
}); |
|||
|
|||
await expect(page).toMatchElement('button', { text: 'Pause' }) |
|||
}) |
|||
describe("region", () => { |
|||
it("matches the screenshot", async () => { |
|||
await matchSelectOptionScreenshot("region", async () => { |
|||
await page.keyboard.press("ArrowDown"); |
|||
await page.keyboard.press("Enter"); |
|||
}); |
|||
}); |
|||
}); |
|||
}); |
|||
}); |
|||
|
|||
async function matchSelectOptionScreenshot(option, selectOptionTest) { |
|||
await goToZikaPage(); |
|||
|
|||
const colorBySelector = await expect(page).toMatchElement("#selectColorBy"); |
|||
|
|||
await colorBySelector.click(); |
|||
|
|||
await selectOptionTest(); |
|||
|
|||
await expect(colorBySelector).toMatch(option); |
|||
|
|||
const treeTitle = await expect(page).toMatchElement("#Title"); |
|||
|
|||
await expect(treeTitle).toMatch(option); |
|||
|
|||
await toMatchImageSnapshot(async () => { |
|||
const image = await page.screenshot(); |
|||
|
|||
/** |
|||
* (tihuan): Apply `blur` 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 = { |
|||
blur: 2, |
|||
customSnapshotIdentifier: `Color-by:${option}` |
|||
}; |
|||
|
|||
expect(image).toMatchImageSnapshot(SNAPSHOT_CONFIG); |
|||
}); |
|||
} |
|||
|
|||
async function goToZikaPage() { |
|||
await page.goto(`${BASE_URL}/zika?p=grid`, { waitUntil: 'networkidle2' }) |
|||
await page.goto(`${BASE_URL}/zika?p=grid`, { waitUntil: "networkidle2" }); |
|||
await expect(page).toMatchElement("#TransmissionsCard"); |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue