| import { expect } from 'chai'; |
| import { |
| addEventListenersToPuppeteerPage, EventName, loadCachedTestBed, |
| takeScreenshot, TestBed |
| } from '../../../puppeteer-tests/util'; |
| import { positiveDigest, negativeDigest, untriagedDigest } from '../cluster-page-sk/test_data'; |
| import { |
| clickNodeWithDigest, |
| shiftClickNodeWithDigest |
| } from '../cluster-digests-sk/cluster-digests-sk_puppeteer_test'; |
| import path from "path"; |
| |
| describe('cluster-page-sk', () => { |
| let testBed: TestBed; |
| before(async () => { |
| testBed = await loadCachedTestBed( |
| path.join(__dirname, '..', '..', 'webpack.config.ts') |
| ); |
| }); |
| |
| let promiseFactory: <T>(eventName: EventName) => Promise<T>; |
| |
| beforeEach(async () => { |
| promiseFactory = await addEventListenersToPuppeteerPage(testBed.page, |
| ['layout-complete', 'selection-changed']); |
| const loaded = promiseFactory('layout-complete'); // Emitted when layout stabilizes. |
| await testBed.page.goto(`${testBed.baseUrl}/dist/cluster-page-sk.html`); |
| await loaded; |
| }); |
| |
| it('should render the demo page', async () => { |
| // Smoke test. |
| expect(await testBed.page.$$('cluster-page-sk')).to.have.length(1); |
| }); |
| |
| it('should take a screenshot', async () => { |
| await testBed.page.setViewport({ width: 1200, height: 1200 }); |
| await takeScreenshot(testBed.page, 'gold', 'cluster-page-sk'); |
| }); |
| |
| it('shows details about a single digest when clicked', async () => { |
| await testBed.page.setViewport({ width: 1200, height: 1200 }); |
| await clickNodeWithDigest(testBed, positiveDigest); |
| await takeScreenshot(testBed.page, 'gold', 'cluster-page-sk_one-digest-selected'); |
| }); |
| |
| it('shows diff between two digests that are selected', async () => { |
| await testBed.page.setViewport({ width: 1200, height: 1200 }); |
| await clickNodeWithDigest(testBed, positiveDigest); |
| await shiftClickNodeWithDigest(testBed, negativeDigest); |
| await takeScreenshot(testBed.page, 'gold', 'cluster-page-sk_two-digests-selected'); |
| }); |
| |
| it('shows a summary when more than two digests are selected', async () => { |
| await testBed.page.setViewport({ width: 1200, height: 1200 }); |
| await clickNodeWithDigest(testBed, positiveDigest); |
| await shiftClickNodeWithDigest(testBed, negativeDigest); |
| await shiftClickNodeWithDigest(testBed, untriagedDigest); |
| await takeScreenshot(testBed.page, 'gold', 'cluster-page-sk_three-digests-selected'); |
| }); |
| |
| it('shows all values when a paramset key is clicked', async () => { |
| await testBed.page.setViewport({ width: 1200, height: 1200 }); |
| const done = promiseFactory('layout-complete'); |
| await clickParamKey(testBed, 'gpu'); |
| await done; |
| await takeScreenshot(testBed.page, 'gold', 'cluster-page-sk_key-clicked'); |
| }); |
| |
| it('shows nodes with matching values when a value is clicked', async () => { |
| await testBed.page.setViewport({ width: 1200, height: 1200 }); |
| const done = promiseFactory('layout-complete'); |
| await clickParamValue(testBed, 'AMD'); |
| await done; |
| await takeScreenshot(testBed.page, 'gold', 'cluster-page-sk_value-clicked'); |
| }); |
| |
| it('can zoom in using the keyboard', async () => { |
| await testBed.page.setViewport({ width: 1200, height: 1200 }); |
| const done = promiseFactory('layout-complete'); |
| await testBed.page.type('cluster-page-sk', 'aa'); |
| await done; |
| await takeScreenshot(testBed.page, 'gold', 'cluster-page-sk_zoom-in'); |
| }); |
| |
| it('can zoom out using the keyboard', async () => { |
| await testBed.page.setViewport({ width: 1200, height: 1200 }); |
| const done = promiseFactory('layout-complete'); |
| await testBed.page.type('cluster-page-sk', 'zz'); |
| await done; |
| await takeScreenshot(testBed.page, 'gold', 'cluster-page-sk_zoom-out'); |
| }); |
| |
| it('can increase node spacing using the keyboard', async () => { |
| await testBed.page.setViewport({ width: 1200, height: 1200 }); |
| const done = promiseFactory('layout-complete'); |
| await testBed.page.type('cluster-page-sk', 'ss'); |
| await done; |
| await takeScreenshot(testBed.page, 'gold', 'cluster-page-sk_more-node-space'); |
| }); |
| |
| it('can decrease node spacing using the keyboard', async () => { |
| await testBed.page.setViewport({ width: 1200, height: 1200 }); |
| const done = promiseFactory('layout-complete'); |
| await testBed.page.type('cluster-page-sk', 'xx'); |
| await done; |
| await takeScreenshot(testBed.page, 'gold', 'cluster-page-sk_less-node-space'); |
| }); |
| |
| async function clickParamKey(testBed: TestBed, key: string) { |
| await testBed.page.click(`paramset-sk[clickable] th[data-key="${key}"]`); |
| } |
| |
| async function clickParamValue(testBed: TestBed, value: string) { |
| await testBed.page.click(`paramset-sk[clickable] div[data-value="${value}"]`); |
| } |
| }); |