blob: b4eb72e8f1afdf419f6d0e38e358a4ba3f50103f [file] [log] [blame]
import { expect } from 'chai';
import { Page } from 'puppeteer';
import {
addEventListenersToPuppeteerPage,
loadCachedTestBed,
takeScreenshot,
TestBed,
} from '../../../puppeteer-tests/util';
describe('list-page-sk', () => {
let testBed: TestBed;
before(async () => {
testBed = await loadCachedTestBed();
});
it('should render the demo page', async () => {
await navigateTo(testBed.page, testBed.baseUrl, '');
// Smoke test.
expect(await testBed.page.$$('list-page-sk')).to.have.length(1);
});
describe('screenshots', () => {
it('should show the default page', async () => {
await navigateTo(testBed.page, testBed.baseUrl);
await testBed.page.setViewport({ width: 1000, height: 1000 });
await takeScreenshot(testBed.page, 'gold', 'list-page-sk');
});
it('should show a query dialog', async () => {
await navigateTo(testBed.page, testBed.baseUrl,
'?corpus=skp&disregard_ignores=true&query=alpha_type%3DOpaque');
await testBed.page.setViewport({ width: 1000, height: 1000 });
await testBed.page.click(
'list-page-sk button.show_query_dialog',
);
await takeScreenshot(testBed.page, 'gold', 'list-page-sk_query-dialog');
});
});
it('has the checkboxes respond to forward and back browser buttons', async () => {
await navigateTo(testBed.page, testBed.baseUrl, '?corpus=gm');
await expectCheckBoxSkToBe('checkbox-sk.ignore_rules', false);
expect(testBed.page.url()).to.contain('?corpus=gm');
// click on ignore rules checkbox
await testBed.page.click('checkbox-sk.ignore_rules');
await expectCheckBoxSkToBe('checkbox-sk.ignore_rules', true);
expect(testBed.page.url()).to.contain('?corpus=gm&disregard_ignores=true');
await testBed.page.goBack();
await expectCheckBoxSkToBe('checkbox-sk.ignore_rules', false);
expect(testBed.page.url()).to.contain('?corpus=gm');
await testBed.page.goForward();
await expectCheckBoxSkToBe('checkbox-sk.ignore_rules', true);
expect(testBed.page.url()).to.contain('?corpus=gm&disregard_ignores=true');
});
it('has the corpus respond to forward and back browser buttons', async () => {
await navigateTo(testBed.page, testBed.baseUrl, '?corpus=gm&query=alpha_type%3DOpaque');
await expectSelectedCorpusToBe('gm');
// click on colorImage corpus
await testBed.page.click('corpus-selector-sk > ul > li:nth-child(1)');
expect(testBed.page.url()).to.contain('?corpus=colorImage&query=alpha_type%3DOpaque');
await expectSelectedCorpusToBe('colorImage');
await testBed.page.goBack();
expect(testBed.page.url()).to.contain('?corpus=gm&query=alpha_type%3DOpaque');
await expectSelectedCorpusToBe('gm');
await testBed.page.goForward();
expect(testBed.page.url()).to.contain('?corpus=colorImage&query=alpha_type%3DOpaque');
await expectSelectedCorpusToBe('colorImage');
});
it('has the corpus respond to forward and back browser buttons', async () => {
await navigateTo(testBed.page, testBed.baseUrl, '?corpus=gm&query=alpha_type%3DOpaque');
await expectDisplayedFilterToBe('source_type=gm, \nalpha_type=Opaque');
// show dialog
await testBed.page.click('button.show_query_dialog');
// clear selected key/values
await testBed.page.click('query-sk button.clear_selections');
// apply that clear action.
await testBed.page.click('query-dialog-sk button.show-matches');
await expectDisplayedFilterToBe('source_type=gm');
await testBed.page.goBack();
await expectDisplayedFilterToBe('source_type=gm, \nalpha_type=Opaque');
await testBed.page.goForward();
await expectDisplayedFilterToBe('source_type=gm');
});
const expectCheckBoxSkToBe = async (selector: string, expectedToBeChecked: boolean) => {
const isChecked = await testBed.page.$eval(
selector,
(e: Element) => (e as HTMLElement).hasAttribute('checked'),
);
expect(isChecked).to.equal(expectedToBeChecked);
};
const expectSelectedCorpusToBe = async (corpus: string) => {
const selectedTitle = await testBed.page.$eval(
'corpus-selector-sk li.selected',
(e: Element) => (e as HTMLLIElement).innerText,
);
expect(selectedTitle).to.contain(corpus);
};
const expectDisplayedFilterToBe = async (filter: string) => {
const displayedFilter = await testBed.page.$eval(
'.query_params pre',
(e: Element) => (e as HTMLPreElement).innerText,
);
expect(displayedFilter).to.equal(filter);
};
});
async function navigateTo(page: Page, base: string, queryParams = '') {
const eventPromise = await addEventListenersToPuppeteerPage(page, ['busy-end']);
const loaded = eventPromise('busy-end'); // Emitted when page is loaded.
await page.goto(`${base}${queryParams}`);
await loaded;
}