Add hydration callback for testing (vercel#10195)

ijjk · Timer · commit 53e9983d83d0 · 2020-01-21T15:33:58.000-05:00
* Add hydration callback for testing

* Update size-limit test
diff --git a/packages/next/client/index.js b/packages/next/client/index.js
@@ -114,6 +114,14 @@ class Container extends React.Component {
         }
       )
     }
+
+    if (process.env.__NEXT_TEST_MODE) {
+      window.__NEXT_HYDRATED = true
+
+      if (window.__NEXT_HYDRATED_CB) {
+        window.__NEXT_HYDRATED_CB()
+      }
+    }
   }
 
   componentDidUpdate() {
diff --git a/test/integration/auto-export/test/index.test.js b/test/integration/auto-export/test/index.test.js
@@ -8,7 +8,6 @@ import {
   findPort,
   killApp,
   launchApp,
-  waitFor,
 } from 'next-test-utils'
 
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60 * 1
@@ -42,14 +41,12 @@ const runTests = () => {
 
   it('should update asPath after mount', async () => {
     const browser = await webdriver(appPort, '/zeit/cmnt-2')
-    await waitFor(500)
     const html = await browser.eval(`document.documentElement.innerHTML`)
     expect(html).toMatch(/\/zeit\/cmnt-2/)
   })
 
   it('should not replace URL with page name while asPath is delayed', async () => {
     const browser = await webdriver(appPort, '/zeit/cmnt-1')
-    await waitFor(500)
     const val = await browser.eval(`!!window.pathnames.find(function(p) {
       return p !== '/zeit/cmnt-1'
     })`)
@@ -84,7 +81,6 @@ describe('Auto Export', () => {
 
     it('should not show hydration warning from mismatching asPath', async () => {
       const browser = await webdriver(appPort, '/zeit/cmnt-1')
-      await waitFor(500)
 
       const numCaught = await browser.eval(`window.caughtWarns.length`)
       expect(numCaught).toBe(0)
diff --git a/test/integration/chunking/test/index.test.js b/test/integration/chunking/test/index.test.js
@@ -3,13 +3,7 @@
 import { join } from 'path'
 import express from 'express'
 import http from 'http'
-import {
-  nextBuild,
-  waitFor,
-  nextServer,
-  promiseCall,
-  stopApp,
-} from 'next-test-utils'
+import { nextBuild, nextServer, promiseCall, stopApp } from 'next-test-utils'
 import { readdir, readFile, unlink, access } from 'fs-extra'
 import cheerio from 'cheerio'
 import webdriver from 'next-webdriver'
@@ -134,7 +128,6 @@ describe('Chunking', () => {
 
     it('should hydrate with granularChunks config', async () => {
       const browser = await webdriver(appPort, '/page2')
-      await waitFor(1000)
       const text = await browser.elementByCss('#padded-str').text()
 
       expect(text).toBe('__rad__')
@@ -144,7 +137,6 @@ describe('Chunking', () => {
 
     it('should load chunks when navigating', async () => {
       const browser = await webdriver(appPort, '/page3')
-      await waitFor(1000)
       const text = await browser
         .elementByCss('#page2-link')
         .click()
diff --git a/test/integration/config/test/client.js b/test/integration/config/test/client.js
@@ -8,8 +8,6 @@ export default (context, render) => {
   describe('Configuration', () => {
     it('should have config available on the client', async () => {
       const browser = await webdriver(context.appPort, '/next-config')
-      // Wait for client side to load
-      await waitFor(10000)
 
       const serverText = await browser.elementByCss('#server-only').text()
       const serverClientText = await browser
diff --git a/test/integration/conflicting-public-file-page/test/index.test.js b/test/integration/conflicting-public-file-page/test/index.test.js
@@ -7,7 +7,6 @@ import {
   findPort,
   killApp,
   renderViaHTTP,
-  waitFor,
 } from 'next-test-utils'
 
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60 * 5
@@ -25,7 +24,6 @@ describe('Errors on conflict between public file and page file', () => {
         /A conflicting public file and page file was found for path/
       )
     }
-    await waitFor(1000)
     await killApp(app)
   })
 
diff --git a/test/integration/css-client-nav/test/index.test.js b/test/integration/css-client-nav/test/index.test.js
@@ -5,7 +5,6 @@ import { remove } from 'fs-extra'
 import {
   nextBuild,
   nextStart,
-  waitFor,
   findPort,
   killApp,
   renderViaHTTP,
@@ -80,9 +79,6 @@ describe('CSS Module client-side navigation in Production', () => {
     let browser
     try {
       browser = await webdriver(appPort, '/blue')
-
-      await waitFor(2000) // Ensure hydration
-
       await browser.eval(`window.__did_not_ssr = 'make sure this is set'`)
 
       const redColor = await browser.eval(
diff --git a/test/integration/css-modules/test/index.test.js b/test/integration/css-modules/test/index.test.js
@@ -178,7 +178,6 @@ xdescribe('Can hot reload CSS Module without losing state', () => {
   // FIXME: this is broken
   it('should update CSS color without remounting <input>', async () => {
     const browser = await webdriver(appPort, '/')
-    await waitFor(2000) // ensure application hydrates
 
     const desiredText = 'hello world'
     await browser.elementById('text-input').type(desiredText)
diff --git a/test/integration/css/test/index.test.js b/test/integration/css/test/index.test.js
@@ -304,7 +304,6 @@ describe('CSS Support', () => {
       let browser
       try {
         browser = await webdriver(appPort, '/page1')
-        await waitFor(2000) // ensure application hydrates
 
         const desiredText = 'hello world'
         await browser.elementById('text-input').type(desiredText)
@@ -703,7 +702,6 @@ describe('CSS Support', () => {
 
     it('should have the correct color (css ordering)', async () => {
       const browser = await webdriver(appPort, '/')
-      await waitFor(2000) // ensure application hydrates
 
       const currentColor = await browser.eval(
         `window.getComputedStyle(document.querySelector('.my-text')).color`
@@ -729,7 +727,6 @@ describe('CSS Support', () => {
 
     it('should have the correct color (css ordering)', async () => {
       const browser = await webdriver(appPort, '/')
-      await waitFor(2000) // ensure application hydrates
 
       const currentColor = await browser.eval(
         `window.getComputedStyle(document.querySelector('.my-text')).color`
diff --git a/test/integration/duplicate-pages/test/index.test.js b/test/integration/duplicate-pages/test/index.test.js
@@ -8,7 +8,6 @@ import {
   launchApp,
   renderViaHTTP,
   killApp,
-  waitFor,
 } from 'next-test-utils'
 
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60 * 1
@@ -34,7 +33,6 @@ describe('Handles Duplicate Pages', () => {
         onStderr: handleOutput,
       })
       await renderViaHTTP(appPort, '/hello')
-      await waitFor(3000)
       await killApp(app)
       expect(output).toMatch(/Duplicate page detected/)
     })
diff --git a/test/integration/dynamic-routing/test/index.test.js b/test/integration/dynamic-routing/test/index.test.js
@@ -304,7 +304,6 @@ function runTests(dev) {
     expect(html).toMatch(/onmpost:.*pending/)
 
     const browser = await webdriver(appPort, '/on-mount/post-1')
-    await waitFor(1000)
     const text = await browser.eval(`document.body.innerHTML`)
     expect(text).toMatch(/onmpost:.*post-1/)
   })
@@ -316,14 +315,12 @@ function runTests(dev) {
 
   it('should update with a hash in the URL', async () => {
     const browser = await webdriver(appPort, '/on-mount/post-1#abc')
-    await waitFor(1000)
     const text = await browser.eval(`document.body.innerHTML`)
     expect(text).toMatch(/onmpost:.*post-1/)
   })
 
   it('should scroll to a hash on mount', async () => {
     const browser = await webdriver(appPort, '/on-mount/post-1#item-400')
-    await waitFor(1000)
 
     const text = await browser.eval(`document.body.innerHTML`)
     expect(text).toMatch(/onmpost:.*post-1/)
@@ -334,7 +331,6 @@ function runTests(dev) {
 
   it('should scroll to a hash on client-side navigation', async () => {
     const browser = await webdriver(appPort, '/')
-    await waitFor(1000)
     await browser.elementByCss('#view-dynamic-with-hash').click()
     await browser.waitForElementByCss('p')
 
diff --git a/test/integration/empty-object-getInitialProps/test/index.test.js b/test/integration/empty-object-getInitialProps/test/index.test.js
@@ -49,7 +49,6 @@ describe('Empty Project', () => {
 
   it('should show empty object warning during client transition', async () => {
     const browser = await webdriver(appPort, '/static')
-    await waitFor(1000)
     await browser.eval(`(function() {
       window.gotWarn = false
       const origWarn = console.warn
diff --git a/test/integration/export-dynamic-pages-serverless/test/index.test.js b/test/integration/export-dynamic-pages-serverless/test/index.test.js
@@ -9,7 +9,6 @@ import {
   startCleanStaticServer,
   stopApp,
   renderViaHTTP,
-  waitFor,
 } from 'next-test-utils'
 
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60
@@ -41,7 +40,6 @@ describe('Export Dyanmic Pages', () => {
     expect.assertions(1)
     const browser = await webdriver(port, '/regression/jeff-is-cool')
     try {
-      await waitFor(3000)
       expect(await browser.eval(`window.__AS_PATHS`)).toEqual([
         '/regression/jeff-is-cool',
       ])
diff --git a/test/integration/export-dynamic-pages/test/index.test.js b/test/integration/export-dynamic-pages/test/index.test.js
@@ -9,7 +9,6 @@ import {
   startCleanStaticServer,
   stopApp,
   renderViaHTTP,
-  waitFor,
 } from 'next-test-utils'
 
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60
@@ -41,7 +40,6 @@ describe('Export Dyanmic Pages', () => {
     expect.assertions(1)
     const browser = await webdriver(port, '/regression/jeff-is-cool')
     try {
-      await waitFor(3000)
       expect(await browser.eval(`window.__AS_PATHS`)).toEqual([
         '/regression/jeff-is-cool',
       ])
diff --git a/test/integration/export-serverless/test/browser.js b/test/integration/export-serverless/test/browser.js
@@ -1,6 +1,6 @@
 /* eslint-env jest */
 import webdriver from 'next-webdriver'
-import { check, waitFor, getBrowserBodyText } from 'next-test-utils'
+import { check, getBrowserBodyText } from 'next-test-utils'
 
 export default function(context) {
   describe('Render via browser', () => {
@@ -184,7 +184,6 @@ export default function(context) {
 
     it('should update query after mount', async () => {
       const browser = await webdriver(context.port, '/query-update?hello=world')
-      await waitFor(2000)
       const query = await browser.elementByCss('#query').text()
       expect(JSON.parse(query)).toEqual({ hello: 'world', a: 'blue' })
       await browser.close()
diff --git a/test/integration/export/test/browser.js b/test/integration/export/test/browser.js
@@ -1,6 +1,6 @@
 /* eslint-env jest */
 import webdriver from 'next-webdriver'
-import { check, waitFor, getBrowserBodyText } from 'next-test-utils'
+import { check, getBrowserBodyText } from 'next-test-utils'
 
 export default function(context) {
   describe('Render via browser', () => {
@@ -191,7 +191,6 @@ export default function(context) {
 
     it('should update query after mount', async () => {
       const browser = await webdriver(context.port, '/query-update?hello=world')
-      await waitFor(2000)
       const query = await browser.elementByCss('#query').text()
       expect(JSON.parse(query)).toEqual({ hello: 'world', a: 'blue' })
       await browser.close()
diff --git a/test/integration/future/test/index.test.js b/test/integration/future/test/index.test.js
@@ -8,7 +8,6 @@ import {
   startApp,
   stopApp,
   renderViaHTTP,
-  waitFor,
 } from 'next-test-utils'
 
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60 * 5
@@ -34,7 +33,6 @@ describe('future.excludeDefaultMomentLocales', () => {
 
   it('should load momentjs', async () => {
     const browser = await webdriver(appPort, '/')
-    await waitFor(5000)
     expect(await browser.elementByCss('h1').text()).toMatch(/current time/i)
     const locales = await browser.eval('moment.locales()')
     expect(locales).toEqual(['en'])
diff --git a/test/integration/hydration/test/index.test.js b/test/integration/hydration/test/index.test.js
@@ -3,13 +3,7 @@
 import path from 'path'
 import fs from 'fs-extra'
 import webdriver from 'next-webdriver'
-import {
-  nextBuild,
-  nextStart,
-  findPort,
-  waitFor,
-  killApp,
-} from 'next-test-utils'
+import { nextBuild, nextStart, findPort, killApp } from 'next-test-utils'
 
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60 * 1
 const appDir = path.join(__dirname, '..')
@@ -27,7 +21,6 @@ describe('Hydration', () => {
 
   it('Hydrates correctly', async () => {
     const browser = await webdriver(appPort, '/')
-    await waitFor(2000)
     expect(await browser.eval('window.didHydrate')).toBe(true)
   })
 })
diff --git a/test/integration/initial-ref/test/index.test.js b/test/integration/initial-ref/test/index.test.js
@@ -7,7 +7,6 @@ import {
   nextStart,
   launchApp,
   findPort,
-  waitFor,
   killApp,
 } from 'next-test-utils'
 
@@ -19,12 +18,11 @@ let appPort
 const runTest = () => {
   it('Has correct initial ref values', async () => {
     const browser = await webdriver(appPort, '/')
-    await waitFor(2000)
     expect(await browser.elementByCss('#ref-val').text()).toContain('76px')
   })
 }
 
-describe('Hydration', () => {
+describe('Initial Refs', () => {
   describe('production mode', () => {
     beforeAll(async () => {
       await nextBuild(appDir)
diff --git a/test/integration/invalid-href/test/index.test.js b/test/integration/invalid-href/test/index.test.js
@@ -64,7 +64,6 @@ const showsError = async (
 
 const noError = async (pathname, click = false) => {
   const browser = await webdriver(appPort, '/')
-  await waitFor(2000)
   await browser.eval(`(function() {
     window.caughtErrors = []
     window.addEventListener('error', function (error) {
diff --git a/test/integration/link-ref/test/index.test.js b/test/integration/link-ref/test/index.test.js
@@ -35,7 +35,6 @@ const noError = async pathname => {
 
 const didPrefetch = async pathname => {
   const browser = await webdriver(appPort, pathname)
-  await waitFor(500)
   const links = await browser.elementsByCss('link[rel=prefetch]')
   let found = false
 
diff --git a/test/integration/next-dynamic/test/index.test.js b/test/integration/next-dynamic/test/index.test.js
@@ -7,7 +7,6 @@ import {
   findPort,
   launchApp,
   killApp,
-  waitFor,
   runNextCommand,
   nextServer,
   startApp,
@@ -29,7 +28,6 @@ function runTests() {
 
   it('should render dynamic server rendered values on client mount', async () => {
     const browser = await webdriver(appPort, '/')
-    await waitFor(5000)
     const text = await browser.elementByCss('#first-render').text()
 
     // Failure case is 'Index<!-- -->3<!-- --><!-- -->'
diff --git a/test/integration/next-plugins/test/index.test.js b/test/integration/next-plugins/test/index.test.js
@@ -8,7 +8,6 @@ import {
   findPort,
   launchApp,
   killApp,
-  waitFor,
   nextBuild,
   nextStart,
   renderViaHTTP,
@@ -57,7 +56,6 @@ function runTests() {
 
   it('should call clientInit from plugin correctly', async () => {
     const browser = await webdriver(appPort, '/')
-    await waitFor(250)
     expect(await browser.eval('window.didClientInit')).toBe(true)
   })
 
@@ -125,7 +123,6 @@ describe('Next.js plugins', () => {
 
       it('should expose a plugins config', async () => {
         const browser = await webdriver(appPort, '/')
-        await waitFor(500)
         expect(await browser.eval('window.initClientConfig')).toBe('world')
       })
     })
diff --git a/test/integration/polyfills/test/index.test.js b/test/integration/polyfills/test/index.test.js
diff --git a/test/integration/preload-viewport/test/index.test.js b/test/integration/preload-viewport/test/index.test.js
diff --git a/test/integration/prerender/test/index.test.js b/test/integration/prerender/test/index.test.js
diff --git a/test/integration/production/test/index.test.js b/test/integration/production/test/index.test.js
diff --git a/test/integration/production/test/security.js b/test/integration/production/test/security.js
diff --git a/test/integration/size-limit/test/index.test.js b/test/integration/size-limit/test/index.test.js
diff --git a/test/lib/next-test-utils.js b/test/lib/next-test-utils.js
diff --git a/test/lib/next-webdriver.d.ts b/test/lib/next-webdriver.d.ts
diff --git a/test/lib/next-webdriver.js b/test/lib/next-webdriver.js
diff --git a/test/lib/wd-chain.js b/test/lib/wd-chain.js
diff --git a/test/tsconfig.json b/test/tsconfig.json

Original file line number	Diff line number	Diff line change
`@@ -114,6 +114,14 @@ class Container extends React.Component {`
`114`	`114`	`}`
`115`	`115`	`)`
`116`	`116`	`}`
	`117`	`+`
	`118`	`+ if (process.env.__NEXT_TEST_MODE) {`
	`119`	`+ window.__NEXT_HYDRATED = true`
	`120`	`+`
	`121`	`+ if (window.__NEXT_HYDRATED_CB) {`
	`122`	`+ window.__NEXT_HYDRATED_CB()`
	`123`	`+ }`
	`124`	`+ }`
`117`	`125`	`}`
`118`	`126`
`119`	`127`	`componentDidUpdate() {`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,6 @@ import {`
`7`	`7`	`findPort,`
`8`	`8`	`killApp,`
`9`	`9`	`renderViaHTTP,`
`10`		`- waitFor,`
`11`	`10`	`} from 'next-test-utils'`
`12`	`11`
`13`	`12`	`jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60 * 5`
`@@ -25,7 +24,6 @@ describe('Errors on conflict between public file and page file', () => {`
`25`	`24`	`/A conflicting public file and page file was found for path/`
`26`	`25`	`)`
`27`	`26`	`}`
`28`		`- await waitFor(1000)`
`29`	`27`	`await killApp(app)`
`30`	`28`	`})`
`31`	`29`