| import { expect } from 'chai'; |
| import { |
| addEventListenersToPuppeteerPage, EventName, inBazel, loadCachedTestBed, |
| takeScreenshot, TestBed |
| } from '../../../puppeteer-tests/util'; |
| import { positiveDigest, negativeDigest, untriagedDigest } from '../cluster-page-sk/test_data'; |
| import path from "path"; |
| import {ClusterPageSkPO} from './cluster-page-sk_po'; |
| import {ElementHandle} from 'puppeteer'; |
| |
| describe('cluster-page-sk', () => { |
| let testBed: TestBed; |
| |
| before(async () => { |
| testBed = await loadCachedTestBed( |
| path.join(__dirname, '..', '..', 'webpack.config.ts') |
| ); |
| }); |
| |
| let clusterPageSk: ElementHandle; |
| let clusterPageSkPO: ClusterPageSkPO; |
| |
| let promiseFactory: <T>(eventName: EventName) => Promise<T>; |
| |
| beforeEach(async () => { |
| await testBed.page.setViewport({ width: 1200, height: 1200 }); |
| |
| promiseFactory = |
| await addEventListenersToPuppeteerPage( |
| testBed.page, ['layout-complete', 'selection-changed']); |
| |
| const loaded = promiseFactory('layout-complete'); // Emitted when layout stabilizes. |
| await testBed.page.goto( |
| inBazel() ? testBed.baseUrl : `${testBed.baseUrl}/dist/cluster-page-sk.html`); |
| await loaded; |
| |
| clusterPageSk = (await testBed.page.$('cluster-page-sk'))!; |
| clusterPageSkPO = new ClusterPageSkPO(clusterPageSk); |
| }); |
| |
| 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 takeScreenshot(testBed.page, 'gold', 'cluster-page-sk'); |
| }); |
| |
| it('shows details about a single digest when clicked', async () => { |
| await clusterPageSkPO.clusterDigestsSkPO.clickNode(positiveDigest); |
| await takeScreenshot(testBed.page, 'gold', 'cluster-page-sk_one-digest-selected'); |
| }); |
| |
| it('shows diff between two digests that are selected', async () => { |
| await clusterPageSkPO.clusterDigestsSkPO.clickNode(positiveDigest); |
| await clusterPageSkPO.clusterDigestsSkPO.shiftClickNode(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 clusterPageSkPO.clusterDigestsSkPO.clickNode(positiveDigest); |
| await clusterPageSkPO.clusterDigestsSkPO.shiftClickNode(negativeDigest); |
| await clusterPageSkPO.clusterDigestsSkPO.shiftClickNode(untriagedDigest); |
| await takeScreenshot(testBed.page, 'gold', 'cluster-page-sk_three-digests-selected'); |
| }); |
| |
| it('shows all values when a paramset key is clicked', async () => { |
| const done = promiseFactory('layout-complete'); |
| await clusterPageSkPO.paramSetSkPO.clickKey('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 () => { |
| const done = promiseFactory('layout-complete'); |
| await clusterPageSkPO.paramSetSkPO.clickValue({paramSetIndex: 0, key: 'gpu', value: 'AMD'}); |
| await done; |
| await takeScreenshot(testBed.page, 'gold', 'cluster-page-sk_value-clicked'); |
| }); |
| |
| it('can zoom in using the keyboard', async () => { |
| const done = promiseFactory('layout-complete'); |
| await clusterPageSk.type( 'aa'); |
| await done; |
| await takeScreenshot(testBed.page, 'gold', 'cluster-page-sk_zoom-in'); |
| }); |
| |
| it('can zoom out using the keyboard', async () => { |
| const done = promiseFactory('layout-complete'); |
| await clusterPageSk.type('zz'); |
| await done; |
| await takeScreenshot(testBed.page, 'gold', 'cluster-page-sk_zoom-out'); |
| }); |
| |
| it('can increase node spacing using the keyboard', async () => { |
| const done = promiseFactory('layout-complete'); |
| await clusterPageSk.type('ss'); |
| await done; |
| await takeScreenshot(testBed.page, 'gold', 'cluster-page-sk_more-node-space'); |
| }); |
| |
| it('can decrease node spacing using the keyboard', async () => { |
| const done = promiseFactory('layout-complete'); |
| await clusterPageSk.type('xx'); |
| await done; |
| await takeScreenshot(testBed.page, 'gold', 'cluster-page-sk_less-node-space'); |
| }); |
| }); |