e3922ea1f3
The codebase was incredibly inconsistent with the use of spacing around
curly braces, e.g.:
```
// this?
const a = {b: 1}
// or?
const a = { b: 1 }
```
This extended into import statements also. Google's styleguide is no
spacing, so we're going with that.
253 lines
11 KiB
JavaScript
253 lines
11 KiB
JavaScript
/**
|
|
* Copyright 2018 Google Inc. All rights reserved.
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
const expect = require('expect');
|
|
const {getTestState,setupTestBrowserHooks, setupTestPageAndContextHooks} = require('./mocha-utils');
|
|
|
|
describe('Emulation', () => {
|
|
setupTestBrowserHooks();
|
|
setupTestPageAndContextHooks();
|
|
let iPhone;
|
|
let iPhoneLandscape;
|
|
|
|
before(() => {
|
|
const {puppeteer} = getTestState();
|
|
iPhone = puppeteer.devices['iPhone 6'];
|
|
iPhoneLandscape = puppeteer.devices['iPhone 6 landscape'];
|
|
});
|
|
|
|
describe('Page.viewport', function() {
|
|
|
|
it('should get the proper viewport size', async() => {
|
|
const {page} = getTestState();
|
|
|
|
expect(page.viewport()).toEqual({width: 800, height: 600});
|
|
await page.setViewport({width: 123, height: 456});
|
|
expect(page.viewport()).toEqual({width: 123, height: 456});
|
|
});
|
|
it('should support mobile emulation', async() => {
|
|
const {page, server} = getTestState();
|
|
|
|
await page.goto(server.PREFIX + '/mobile.html');
|
|
expect(await page.evaluate(() => window.innerWidth)).toBe(800);
|
|
await page.setViewport(iPhone.viewport);
|
|
expect(await page.evaluate(() => window.innerWidth)).toBe(375);
|
|
await page.setViewport({width: 400, height: 300});
|
|
expect(await page.evaluate(() => window.innerWidth)).toBe(400);
|
|
});
|
|
itFailsFirefox('should support touch emulation', async() => {
|
|
const {page, server} = getTestState();
|
|
|
|
await page.goto(server.PREFIX + '/mobile.html');
|
|
expect(await page.evaluate(() => 'ontouchstart' in window)).toBe(false);
|
|
await page.setViewport(iPhone.viewport);
|
|
expect(await page.evaluate(() => 'ontouchstart' in window)).toBe(true);
|
|
expect(await page.evaluate(dispatchTouch)).toBe('Received touch');
|
|
await page.setViewport({width: 100, height: 100});
|
|
expect(await page.evaluate(() => 'ontouchstart' in window)).toBe(false);
|
|
|
|
function dispatchTouch() {
|
|
let fulfill;
|
|
const promise = new Promise(x => fulfill = x);
|
|
window.ontouchstart = function(e) {
|
|
fulfill('Received touch');
|
|
};
|
|
window.dispatchEvent(new Event('touchstart'));
|
|
|
|
fulfill('Did not receive touch');
|
|
|
|
return promise;
|
|
}
|
|
});
|
|
itFailsFirefox('should be detectable by Modernizr', async() => {
|
|
const {page, server} = getTestState();
|
|
|
|
await page.goto(server.PREFIX + '/detect-touch.html');
|
|
expect(await page.evaluate(() => document.body.textContent.trim())).toBe('NO');
|
|
await page.setViewport(iPhone.viewport);
|
|
await page.goto(server.PREFIX + '/detect-touch.html');
|
|
expect(await page.evaluate(() => document.body.textContent.trim())).toBe('YES');
|
|
});
|
|
itFailsFirefox('should detect touch when applying viewport with touches', async() => {
|
|
const {page, server} = getTestState();
|
|
|
|
await page.setViewport({width: 800, height: 600, hasTouch: true});
|
|
await page.addScriptTag({url: server.PREFIX + '/modernizr.js'});
|
|
expect(await page.evaluate(() => Modernizr.touchevents)).toBe(true);
|
|
});
|
|
itFailsFirefox('should support landscape emulation', async() => {
|
|
const {page, server} = getTestState();
|
|
|
|
await page.goto(server.PREFIX + '/mobile.html');
|
|
expect(await page.evaluate(() => screen.orientation.type)).toBe('portrait-primary');
|
|
await page.setViewport(iPhoneLandscape.viewport);
|
|
expect(await page.evaluate(() => screen.orientation.type)).toBe('landscape-primary');
|
|
await page.setViewport({width: 100, height: 100});
|
|
expect(await page.evaluate(() => screen.orientation.type)).toBe('portrait-primary');
|
|
});
|
|
});
|
|
|
|
describe('Page.emulate', function() {
|
|
it('should work', async() => {
|
|
const {page, server} = getTestState();
|
|
|
|
await page.goto(server.PREFIX + '/mobile.html');
|
|
await page.emulate(iPhone);
|
|
expect(await page.evaluate(() => window.innerWidth)).toBe(375);
|
|
expect(await page.evaluate(() => navigator.userAgent)).toContain('iPhone');
|
|
});
|
|
it('should support clicking', async() => {
|
|
const {page, server} = getTestState();
|
|
|
|
await page.emulate(iPhone);
|
|
await page.goto(server.PREFIX + '/input/button.html');
|
|
const button = await page.$('button');
|
|
await page.evaluate(button => button.style.marginTop = '200px', button);
|
|
await button.click();
|
|
expect(await page.evaluate(() => result)).toBe('Clicked');
|
|
});
|
|
});
|
|
|
|
describe('Page.emulateMedia [deprecated]', function() {
|
|
/* emulateMedia is deprecated in favour of emulateMediaType but we
|
|
* don't want to remove it from Puppeteer just yet. We can't check
|
|
* that emulateMedia === emulateMediaType because when running tests
|
|
* with COVERAGE=1 the methods get rewritten. So instead we
|
|
* duplicate the tests for emulateMediaType and ensure they pass
|
|
* when calling the deprecated emulateMedia method.
|
|
*
|
|
* If you update these tests, you should update emulateMediaType's
|
|
* tests, and vice-versa.
|
|
*/
|
|
itFailsFirefox('should work', async() => {
|
|
const {page} = getTestState();
|
|
|
|
expect(await page.evaluate(() => matchMedia('screen').matches)).toBe(true);
|
|
expect(await page.evaluate(() => matchMedia('print').matches)).toBe(false);
|
|
await page.emulateMedia('print');
|
|
expect(await page.evaluate(() => matchMedia('screen').matches)).toBe(false);
|
|
expect(await page.evaluate(() => matchMedia('print').matches)).toBe(true);
|
|
await page.emulateMedia(null);
|
|
expect(await page.evaluate(() => matchMedia('screen').matches)).toBe(true);
|
|
expect(await page.evaluate(() => matchMedia('print').matches)).toBe(false);
|
|
});
|
|
it('should throw in case of bad argument', async() => {
|
|
const {page} = getTestState();
|
|
|
|
let error = null;
|
|
await page.emulateMedia('bad').catch(e => error = e);
|
|
expect(error.message).toBe('Unsupported media type: bad');
|
|
});
|
|
});
|
|
|
|
describe('Page.emulateMediaType', function() {
|
|
/* NOTE! Updating these tests? Update the emulateMedia tests above
|
|
* too (and see the big comment for why we have these duplicated).
|
|
*/
|
|
itFailsFirefox('should work', async() => {
|
|
const {page} = getTestState();
|
|
|
|
expect(await page.evaluate(() => matchMedia('screen').matches)).toBe(true);
|
|
expect(await page.evaluate(() => matchMedia('print').matches)).toBe(false);
|
|
await page.emulateMediaType('print');
|
|
expect(await page.evaluate(() => matchMedia('screen').matches)).toBe(false);
|
|
expect(await page.evaluate(() => matchMedia('print').matches)).toBe(true);
|
|
await page.emulateMediaType(null);
|
|
expect(await page.evaluate(() => matchMedia('screen').matches)).toBe(true);
|
|
expect(await page.evaluate(() => matchMedia('print').matches)).toBe(false);
|
|
});
|
|
it('should throw in case of bad argument', async() => {
|
|
const {page} = getTestState();
|
|
|
|
let error = null;
|
|
await page.emulateMediaType('bad').catch(e => error = e);
|
|
expect(error.message).toBe('Unsupported media type: bad');
|
|
});
|
|
});
|
|
|
|
describe('Page.emulateMediaFeatures', function() {
|
|
itFailsFirefox('should work', async() => {
|
|
const {page} = getTestState();
|
|
|
|
await page.emulateMediaFeatures([
|
|
{name: 'prefers-reduced-motion', value: 'reduce'},
|
|
]);
|
|
expect(await page.evaluate(() => matchMedia('(prefers-reduced-motion: reduce)').matches)).toBe(true);
|
|
expect(await page.evaluate(() => matchMedia('(prefers-reduced-motion: no-preference)').matches)).toBe(false);
|
|
await page.emulateMediaFeatures([
|
|
{name: 'prefers-color-scheme', value: 'light'},
|
|
]);
|
|
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: light)').matches)).toBe(true);
|
|
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(false);
|
|
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: no-preference)').matches)).toBe(false);
|
|
await page.emulateMediaFeatures([
|
|
{name: 'prefers-color-scheme', value: 'dark'},
|
|
]);
|
|
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(true);
|
|
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: light)').matches)).toBe(false);
|
|
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: no-preference)').matches)).toBe(false);
|
|
await page.emulateMediaFeatures([
|
|
{name: 'prefers-reduced-motion', value: 'reduce'},
|
|
{name: 'prefers-color-scheme', value: 'light'},
|
|
]);
|
|
expect(await page.evaluate(() => matchMedia('(prefers-reduced-motion: reduce)').matches)).toBe(true);
|
|
expect(await page.evaluate(() => matchMedia('(prefers-reduced-motion: no-preference)').matches)).toBe(false);
|
|
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: light)').matches)).toBe(true);
|
|
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(false);
|
|
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: no-preference)').matches)).toBe(false);
|
|
});
|
|
it('should throw in case of bad argument', async() => {
|
|
const {page} = getTestState();
|
|
|
|
let error = null;
|
|
await page.emulateMediaFeatures([{name: 'bad', value: ''}]).catch(e => error = e);
|
|
expect(error.message).toBe('Unsupported media feature: bad');
|
|
});
|
|
});
|
|
|
|
describeFailsFirefox('Page.emulateTimezone', function() {
|
|
it('should work', async() => {
|
|
const {page} = getTestState();
|
|
|
|
page.evaluate(() => {
|
|
globalThis.date = new Date(1479579154987);
|
|
});
|
|
await page.emulateTimezone('America/Jamaica');
|
|
expect(await page.evaluate(() => date.toString())).toBe('Sat Nov 19 2016 13:12:34 GMT-0500 (Eastern Standard Time)');
|
|
|
|
await page.emulateTimezone('Pacific/Honolulu');
|
|
expect(await page.evaluate(() => date.toString())).toBe('Sat Nov 19 2016 08:12:34 GMT-1000 (Hawaii-Aleutian Standard Time)');
|
|
|
|
await page.emulateTimezone('America/Buenos_Aires');
|
|
expect(await page.evaluate(() => date.toString())).toBe('Sat Nov 19 2016 15:12:34 GMT-0300 (Argentina Standard Time)');
|
|
|
|
await page.emulateTimezone('Europe/Berlin');
|
|
expect(await page.evaluate(() => date.toString())).toBe('Sat Nov 19 2016 19:12:34 GMT+0100 (Central European Standard Time)');
|
|
});
|
|
|
|
it('should throw for invalid timezone IDs', async() => {
|
|
const {page} = getTestState();
|
|
|
|
let error = null;
|
|
await page.emulateTimezone('Foo/Bar').catch(e => error = e);
|
|
expect(error.message).toBe('Invalid timezone ID: Foo/Bar');
|
|
await page.emulateTimezone('Baz/Qux').catch(e => error = e);
|
|
expect(error.message).toBe('Invalid timezone ID: Baz/Qux');
|
|
});
|
|
});
|
|
|
|
});
|