From 33067a58621e1c937bbf2fd11d1b9f7fc3bab212 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Sun, 2 Sep 2018 17:22:29 +0200 Subject: [PATCH] Fix inconsistency in dynamic tests (#5071) --- test/integration/basic/test/dynamic.js | 6 - test/integration/production/test/dynamic.js | 141 ++++++++++++++++++ .../integration/production/test/index.test.js | 2 +- test/lib/next-test-utils.js | 12 +- 4 files changed, 151 insertions(+), 10 deletions(-) create mode 100644 test/integration/production/test/dynamic.js diff --git a/test/integration/basic/test/dynamic.js b/test/integration/basic/test/dynamic.js index f94632ed..9d46da67 100644 --- a/test/integration/basic/test/dynamic.js +++ b/test/integration/basic/test/dynamic.js @@ -136,11 +136,5 @@ export default (context, render) => { browser.close() }) }) - - // describe('with browser', () => { - - // describe('with bundle', () => { - - // }) }) } diff --git a/test/integration/production/test/dynamic.js b/test/integration/production/test/dynamic.js new file mode 100644 index 00000000..6b522936 --- /dev/null +++ b/test/integration/production/test/dynamic.js @@ -0,0 +1,141 @@ +/* global describe, it, expect */ +import webdriver from 'next-webdriver' +import cheerio from 'cheerio' +import { waitFor, check } from 'next-test-utils' + +// These tests are similar to ../../basic/test/dynamic.js +export default (context, render) => { + async function get$ (path, query) { + const html = await render(path, query) + return cheerio.load(html) + } + describe('Dynamic import', () => { + describe('default behavior', () => { + it('should render dynamic import components', async () => { + const $ = await get$('/dynamic/ssr') + expect($('body').text()).toMatch(/Hello World 1/) + }) + + it('should render even there are no physical chunk exists', async () => { + let browser + try { + browser = await webdriver(context.appPort, '/dynamic/no-chunk') + await check(() => browser.elementByCss('body').text(), /Welcome, normal/) + await check(() => browser.elementByCss('body').text(), /Welcome, dynamic/) + } finally { + if (browser) { + browser.close() + } + } + }) + }) + describe('ssr:false option', () => { + it('Should render loading on the server side', async () => { + const $ = await get$('/dynamic/no-ssr') + expect($('p').text()).toBe('loading...') + }) + + it('should render the component on client side', async () => { + let browser + try { + browser = await webdriver(context.appPort, '/dynamic/no-ssr') + await check(() => browser.elementByCss('body').text(), /Hello World 1/) + } finally { + if (browser) { + browser.close() + } + } + }) + }) + + describe('custom loading', () => { + it('should render custom loading on the server side when `ssr:false` and `loading` is provided', async () => { + const $ = await get$('/dynamic/no-ssr-custom-loading') + expect($('p').text()).toBe('LOADING') + }) + + it('should render the component on client side', async () => { + let browser + try { + browser = await webdriver(context.appPort, '/dynamic/no-ssr-custom-loading') + await check(() => browser.elementByCss('body').text(), /Hello World 1/) + } finally { + if (browser) { + browser.close() + } + } + }) + }) + + describe('Import mapping', () => { + it('should render dynamic imports bundle', async () => { + const $ = await get$('/dynamic/bundle') + const bodyText = $('body').text() + expect(/Dynamic Bundle/.test(bodyText)).toBe(true) + expect(/Hello World 1/.test(bodyText)).toBe(true) + expect(/Hello World 2/.test(bodyText)).toBe(false) + }) + + it('should render dynamic imports bundle with additional components', async () => { + const $ = await get$('/dynamic/bundle?showMore=1') + const bodyText = $('body').text() + expect(/Dynamic Bundle/.test(bodyText)).toBe(true) + expect(/Hello World 1/.test(bodyText)).toBe(true) + expect(/Hello World 2/.test(bodyText)).toBe(true) + }) + + it('should render components', async () => { + const browser = await webdriver(context.appPort, '/dynamic/bundle') + + while (true) { + const bodyText = await browser + .elementByCss('body').text() + if ( + /Dynamic Bundle/.test(bodyText) && + /Hello World 1/.test(bodyText) && + !(/Hello World 2/.test(bodyText)) + ) break + await waitFor(1000) + } + + browser.close() + }) + + it('should render support React context', async () => { + const browser = await webdriver(context.appPort, '/dynamic/bundle') + + while (true) { + const bodyText = await browser + .elementByCss('body').text() + if ( + /ZEIT Rocks/.test(bodyText) + ) break + await waitFor(1000) + } + + browser.close() + }) + + it('should load new components and render for prop changes', async () => { + const browser = await webdriver(context.appPort, '/dynamic/bundle') + + await browser + .waitForElementByCss('#toggle-show-more') + .elementByCss('#toggle-show-more').click() + + while (true) { + const bodyText = await browser + .elementByCss('body').text() + if ( + /Dynamic Bundle/.test(bodyText) && + /Hello World 1/.test(bodyText) && + /Hello World 2/.test(bodyText) + ) break + await waitFor(1000) + } + + browser.close() + }) + }) + }) +} diff --git a/test/integration/production/test/index.test.js b/test/integration/production/test/index.test.js index a47d108f..84a083ca 100644 --- a/test/integration/production/test/index.test.js +++ b/test/integration/production/test/index.test.js @@ -13,7 +13,7 @@ import { } from 'next-test-utils' import webdriver from 'next-webdriver' import fetch from 'node-fetch' -import dynamicImportTests from '../../basic/test/dynamic' +import dynamicImportTests from './dynamic' import security from './security' import {BUILD_MANIFEST, REACT_LOADABLE_MANIFEST} from 'next/constants' diff --git a/test/lib/next-test-utils.js b/test/lib/next-test-utils.js index 6cbb87d1..25c246ef 100644 --- a/test/lib/next-test-utils.js +++ b/test/lib/next-test-utils.js @@ -152,12 +152,18 @@ export async function startStaticServer (dir) { export async function check (contentFn, regex) { let found = false - setTimeout(() => { + setTimeout(async () => { if (found) { return } - console.error('TIMED OUT CHECK: ', regex) - throw new Error('TIMED OUT') + let content + try { + content = await contentFn() + } catch (err) { + console.error('Error while getting content', {regex}) + } + console.error('TIMED OUT CHECK: ', {regex, content}) + throw new Error('TIMED OUT: ' + regex + '\n\n' + content) }, 1000 * 30) while (!found) { try {