mirror of
https://github.com/puppeteer/puppeteer
synced 2024-06-14 14:02:48 +00:00
chore: migrate unit tests to Mocha (#5600)
Rather than maintain our own test runner we should instead lean on the community and use Mocha which is very popular and also our test runner of choice in DevTools too. Note that this commit doesn't remove the TestRunner source as it's still used for other unit tests, but they will be updated in a future PR and then we can remove the TestRunner. The main bulk of this PR is updating the tests as the old TestRunner passed in contextual data via the `it` function callback whereas Mocha does not, so we introduce some helpers for the tests to make it easier.
This commit is contained in:
Jack Franklin
GitHub
@@ -13,83 +13,107 @@
|
||||
* 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');
|
||||
|
||||
module.exports.addTests = function({testRunner, expect, product}) {
|
||||
const {describe, xdescribe, fdescribe, describe_fails_ffox} = testRunner;
|
||||
const {it, fit, xit, it_fails_ffox} = testRunner;
|
||||
const {beforeAll, beforeEach, afterAll, afterEach} = testRunner;
|
||||
describe('querySelector', function() {
|
||||
setupTestBrowserHooks();
|
||||
setupTestPageAndContextHooks();
|
||||
describeFailsFirefox('Page.$eval', function() {
|
||||
it('should work', async() => {
|
||||
const { page } = getTestState();
|
||||
|
||||
describe_fails_ffox('Page.$eval', function() {
|
||||
it('should work', async({page, server}) => {
|
||||
await page.setContent('<section id="testAttribute">43543</section>');
|
||||
const idAttribute = await page.$eval('section', e => e.id);
|
||||
expect(idAttribute).toBe('testAttribute');
|
||||
});
|
||||
it('should accept arguments', async({page, server}) => {
|
||||
it('should accept arguments', async() => {
|
||||
const { page } = getTestState();
|
||||
|
||||
await page.setContent('<section>hello</section>');
|
||||
const text = await page.$eval('section', (e, suffix) => e.textContent + suffix, ' world!');
|
||||
expect(text).toBe('hello world!');
|
||||
});
|
||||
it('should accept ElementHandles as arguments', async({page, server}) => {
|
||||
it('should accept ElementHandles as arguments', async() => {
|
||||
const { page } = getTestState();
|
||||
|
||||
await page.setContent('<section>hello</section><div> world</div>');
|
||||
const divHandle = await page.$('div');
|
||||
const text = await page.$eval('section', (e, div) => e.textContent + div.textContent, divHandle);
|
||||
expect(text).toBe('hello world');
|
||||
});
|
||||
it('should throw error if no element is found', async({page, server}) => {
|
||||
it('should throw error if no element is found', async() => {
|
||||
const { page } = getTestState();
|
||||
|
||||
let error = null;
|
||||
await page.$eval('section', e => e.id).catch(e => error = e);
|
||||
expect(error.message).toContain('failed to find element matching selector "section"');
|
||||
});
|
||||
});
|
||||
|
||||
describe_fails_ffox('Page.$$eval', function() {
|
||||
it('should work', async({page, server}) => {
|
||||
describeFailsFirefox('Page.$$eval', function() {
|
||||
it('should work', async() => {
|
||||
const { page } = getTestState();
|
||||
|
||||
await page.setContent('<div>hello</div><div>beautiful</div><div>world!</div>');
|
||||
const divsCount = await page.$$eval('div', divs => divs.length);
|
||||
expect(divsCount).toBe(3);
|
||||
});
|
||||
});
|
||||
|
||||
describe_fails_ffox('Page.$', function() {
|
||||
it('should query existing element', async({page, server}) => {
|
||||
describeFailsFirefox('Page.$', function() {
|
||||
it('should query existing element', async() => {
|
||||
const { page } = getTestState();
|
||||
|
||||
await page.setContent('<section>test</section>');
|
||||
const element = await page.$('section');
|
||||
expect(element).toBeTruthy();
|
||||
});
|
||||
it('should return null for non-existing element', async({page, server}) => {
|
||||
it('should return null for non-existing element', async() => {
|
||||
const { page } = getTestState();
|
||||
|
||||
const element = await page.$('non-existing-element');
|
||||
expect(element).toBe(null);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Page.$$', function() {
|
||||
it_fails_ffox('should query existing elements', async({page, server}) => {
|
||||
itFailsFirefox('should query existing elements', async() => {
|
||||
const { page } = getTestState();
|
||||
|
||||
await page.setContent('<div>A</div><br/><div>B</div>');
|
||||
const elements = await page.$$('div');
|
||||
expect(elements.length).toBe(2);
|
||||
const promises = elements.map(element => page.evaluate(e => e.textContent, element));
|
||||
expect(await Promise.all(promises)).toEqual(['A', 'B']);
|
||||
});
|
||||
it('should return empty array if nothing is found', async({page, server}) => {
|
||||
it('should return empty array if nothing is found', async() => {
|
||||
const { page, server } = getTestState();
|
||||
|
||||
await page.goto(server.EMPTY_PAGE);
|
||||
const elements = await page.$$('div');
|
||||
expect(elements.length).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe_fails_ffox('Path.$x', function() {
|
||||
it('should query existing element', async({page, server}) => {
|
||||
describeFailsFirefox('Path.$x', function() {
|
||||
it('should query existing element', async() => {
|
||||
const { page } = getTestState();
|
||||
|
||||
await page.setContent('<section>test</section>');
|
||||
const elements = await page.$x('/html/body/section');
|
||||
expect(elements[0]).toBeTruthy();
|
||||
expect(elements.length).toBe(1);
|
||||
});
|
||||
it('should return empty array for non-existing element', async({page, server}) => {
|
||||
it('should return empty array for non-existing element', async() => {
|
||||
const { page } = getTestState();
|
||||
|
||||
const element = await page.$x('/html/body/non-existing-element');
|
||||
expect(element).toEqual([]);
|
||||
});
|
||||
it('should return multiple elements', async({page, sever}) => {
|
||||
it('should return multiple elements', async() => {
|
||||
const { page } = getTestState();
|
||||
|
||||
await page.setContent('<div></div><div></div>');
|
||||
const elements = await page.$x('/html/body/div');
|
||||
expect(elements.length).toBe(2);
|
||||
@@ -98,7 +122,9 @@ module.exports.addTests = function({testRunner, expect, product}) {
|
||||
|
||||
|
||||
describe('ElementHandle.$', function() {
|
||||
it('should query existing element', async({page, server}) => {
|
||||
it('should query existing element', async() => {
|
||||
const { page, server } = getTestState();
|
||||
|
||||
await page.goto(server.PREFIX + '/playground.html');
|
||||
await page.setContent('<html><body><div class="second"><div class="inner">A</div></div></body></html>');
|
||||
const html = await page.$('html');
|
||||
@@ -108,22 +134,28 @@ module.exports.addTests = function({testRunner, expect, product}) {
|
||||
expect(content).toBe('A');
|
||||
});
|
||||
|
||||
it_fails_ffox('should return null for non-existing element', async({page, server}) => {
|
||||
itFailsFirefox('should return null for non-existing element', async() => {
|
||||
const { page } = getTestState();
|
||||
|
||||
await page.setContent('<html><body><div class="second"><div class="inner">B</div></div></body></html>');
|
||||
const html = await page.$('html');
|
||||
const second = await html.$('.third');
|
||||
expect(second).toBe(null);
|
||||
});
|
||||
});
|
||||
describe_fails_ffox('ElementHandle.$eval', function() {
|
||||
it('should work', async({page, server}) => {
|
||||
describeFailsFirefox('ElementHandle.$eval', function() {
|
||||
it('should work', async() => {
|
||||
const { page } = getTestState();
|
||||
|
||||
await page.setContent('<html><body><div class="tweet"><div class="like">100</div><div class="retweets">10</div></div></body></html>');
|
||||
const tweet = await page.$('.tweet');
|
||||
const content = await tweet.$eval('.like', node => node.innerText);
|
||||
expect(content).toBe('100');
|
||||
});
|
||||
|
||||
it('should retrieve content from subtree', async({page, server}) => {
|
||||
it('should retrieve content from subtree', async() => {
|
||||
const { page } = getTestState();
|
||||
|
||||
const htmlContent = '<div class="a">not-a-child-div</div><div id="myId"><div class="a">a-child-div</div></div>';
|
||||
await page.setContent(htmlContent);
|
||||
const elementHandle = await page.$('#myId');
|
||||
@@ -131,7 +163,9 @@ module.exports.addTests = function({testRunner, expect, product}) {
|
||||
expect(content).toBe('a-child-div');
|
||||
});
|
||||
|
||||
it('should throw in case of missing selector', async({page, server}) => {
|
||||
it('should throw in case of missing selector', async() => {
|
||||
const { page } = getTestState();
|
||||
|
||||
const htmlContent = '<div class="a">not-a-child-div</div><div id="myId"></div>';
|
||||
await page.setContent(htmlContent);
|
||||
const elementHandle = await page.$('#myId');
|
||||
@@ -139,15 +173,19 @@ module.exports.addTests = function({testRunner, expect, product}) {
|
||||
expect(errorMessage).toBe(`Error: failed to find element matching selector ".a"`);
|
||||
});
|
||||
});
|
||||
describe_fails_ffox('ElementHandle.$$eval', function() {
|
||||
it('should work', async({page, server}) => {
|
||||
describeFailsFirefox('ElementHandle.$$eval', function() {
|
||||
it('should work', async() => {
|
||||
const { page } = getTestState();
|
||||
|
||||
await page.setContent('<html><body><div class="tweet"><div class="like">100</div><div class="like">10</div></div></body></html>');
|
||||
const tweet = await page.$('.tweet');
|
||||
const content = await tweet.$$eval('.like', nodes => nodes.map(n => n.innerText));
|
||||
expect(content).toEqual(['100', '10']);
|
||||
});
|
||||
|
||||
it('should retrieve content from subtree', async({page, server}) => {
|
||||
it('should retrieve content from subtree', async() => {
|
||||
const { page } = getTestState();
|
||||
|
||||
const htmlContent = '<div class="a">not-a-child-div</div><div id="myId"><div class="a">a1-child-div</div><div class="a">a2-child-div</div></div>';
|
||||
await page.setContent(htmlContent);
|
||||
const elementHandle = await page.$('#myId');
|
||||
@@ -155,7 +193,9 @@ module.exports.addTests = function({testRunner, expect, product}) {
|
||||
expect(content).toEqual(['a1-child-div', 'a2-child-div']);
|
||||
});
|
||||
|
||||
it('should not throw in case of missing selector', async({page, server}) => {
|
||||
it('should not throw in case of missing selector', async() => {
|
||||
const { page } = getTestState();
|
||||
|
||||
const htmlContent = '<div class="a">not-a-child-div</div><div id="myId"></div>';
|
||||
await page.setContent(htmlContent);
|
||||
const elementHandle = await page.$('#myId');
|
||||
@@ -165,8 +205,10 @@ module.exports.addTests = function({testRunner, expect, product}) {
|
||||
|
||||
});
|
||||
|
||||
describe_fails_ffox('ElementHandle.$$', function() {
|
||||
it('should query existing elements', async({page, server}) => {
|
||||
describeFailsFirefox('ElementHandle.$$', function() {
|
||||
it('should query existing elements', async() => {
|
||||
const { page } = getTestState();
|
||||
|
||||
await page.setContent('<html><body><div>A</div><br/><div>B</div></body></html>');
|
||||
const html = await page.$('html');
|
||||
const elements = await html.$$('div');
|
||||
@@ -175,7 +217,9 @@ module.exports.addTests = function({testRunner, expect, product}) {
|
||||
expect(await Promise.all(promises)).toEqual(['A', 'B']);
|
||||
});
|
||||
|
||||
it('should return empty array for non-existing elements', async({page, server}) => {
|
||||
it('should return empty array for non-existing elements', async() => {
|
||||
const { page } = getTestState();
|
||||
|
||||
await page.setContent('<html><body><span>A</span><br/><span>B</span></body></html>');
|
||||
const html = await page.$('html');
|
||||
const elements = await html.$$('div');
|
||||
@@ -185,7 +229,9 @@ module.exports.addTests = function({testRunner, expect, product}) {
|
||||
|
||||
|
||||
describe('ElementHandle.$x', function() {
|
||||
it('should query existing element', async({page, server}) => {
|
||||
it('should query existing element', async() => {
|
||||
const { page, server } = getTestState();
|
||||
|
||||
await page.goto(server.PREFIX + '/playground.html');
|
||||
await page.setContent('<html><body><div class="second"><div class="inner">A</div></div></body></html>');
|
||||
const html = await page.$('html');
|
||||
@@ -195,11 +241,13 @@ module.exports.addTests = function({testRunner, expect, product}) {
|
||||
expect(content).toBe('A');
|
||||
});
|
||||
|
||||
it_fails_ffox('should return null for non-existing element', async({page, server}) => {
|
||||
itFailsFirefox('should return null for non-existing element', async() => {
|
||||
const { page } = getTestState();
|
||||
|
||||
await page.setContent('<html><body><div class="second"><div class="inner">B</div></div></body></html>');
|
||||
const html = await page.$('html');
|
||||
const second = await html.$x(`/div[contains(@class, 'third')]`);
|
||||
expect(second).toEqual([]);
|
||||
});
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user