Update image tests files from *.js to *.ts (#39663)

Let's utilize typescript for our tests

package.json

@@ -74,7 +74,7 @@
     "@testing-library/react": "13.0.0",
     "@types/cheerio": "0.22.16",
     "@types/fs-extra": "8.1.0",
-    "@types/html-validator": "5.0.2",
+    "@types/html-validator": "5.0.3",
     "@types/http-proxy": "1.17.3",
     "@types/jest": "24.0.13",
     "@types/node": "13.11.0",

test/integration/image-component/base-path/test/index.test.js → test/integration/image-component/base-path/test/index.test.ts

@@ -308,16 +308,16 @@ function runTests(mode) {
       expect(await getComputed(browser, id, 'width')).toBe(width)
       expect(await getComputed(browser, id, 'height')).toBe(height)
       const delta = 150
-      const largeWidth = width + delta
-      const largeHeight = height + delta
+      const largeWidth = Number(width) + delta
+      const largeHeight = Number(height) + delta
       await browser.setDimensions({
         width: largeWidth,
         height: largeHeight,
       })
       expect(await getComputed(browser, id, 'width')).toBe(largeWidth)
       expect(await getComputed(browser, id, 'height')).toBe(largeHeight)
-      const smallWidth = width - delta
-      const smallHeight = height - delta
+      const smallWidth = Number(width) - delta
+      const smallHeight = Number(height) - delta
       await browser.setDimensions({
         width: smallWidth,
         height: smallHeight,
@@ -389,9 +389,7 @@ function runTests(mode) {
       expect(await hasRedbox(browser)).toBe(false)
 
       await check(async () => {
-        return (await browser.log('browser'))
-          .map((log) => log.message)
-          .join('\n')
+        return (await browser.log()).map((log) => log.message).join('\n')
       }, /Image is missing required "src" property/gm)
     })
 

test/integration/image-component/default/test/index.test.js → test/integration/image-component/default/test/index.test.ts

@@ -151,7 +151,7 @@ function runTests(mode) {
         await browser.elementById('responsive2').getAttribute('loading')
       ).toBe(null)
 
-      const warnings = (await browser.log('browser'))
+      const warnings = (await browser.log())
         .map((log) => log.message)
         .join('\n')
       expect(warnings).not.toMatch(
@@ -607,16 +607,16 @@ function runTests(mode) {
       expect(await getComputed(browser, id, 'width')).toBe(width)
       expect(await getComputed(browser, id, 'height')).toBe(height)
       const delta = 150
-      const largeWidth = width + delta
-      const largeHeight = height + delta
+      const largeWidth = Number(width) + delta
+      const largeHeight = Number(height) + delta
       await browser.setDimensions({
         width: largeWidth,
         height: largeHeight,
       })
       expect(await getComputed(browser, id, 'width')).toBe(largeWidth)
       expect(await getComputed(browser, id, 'height')).toBe(largeHeight)
-      const smallWidth = width - delta
-      const smallHeight = height - delta
+      const smallWidth = Number(width) - delta
+      const smallHeight = Number(height) - delta
       await browser.setDimensions({
         width: smallWidth,
         height: smallHeight,
@@ -722,7 +722,7 @@ function runTests(mode) {
 
       if (mode === 'dev') {
         await waitFor(1000)
-        const warnings = (await browser.log('browser'))
+        const warnings = (await browser.log())
           .map((log) => log.message)
           .join('\n')
         expect(warnings).toMatch(
@@ -749,9 +749,7 @@ function runTests(mode) {
       expect(await hasRedbox(browser)).toBe(false)
 
       await check(async () => {
-        return (await browser.log('browser'))
-          .map((log) => log.message)
-          .join('\n')
+        return (await browser.log()).map((log) => log.message).join('\n')
       }, /Image is missing required "src" property/gm)
     })
 
@@ -807,9 +805,7 @@ function runTests(mode) {
       const browser = await webdriver(appPort, '/layout-responsive-inside-flex')
       await browser.eval(`document.getElementById("img").scrollIntoView()`)
       await check(async () => {
-        return (await browser.log('browser'))
-          .map((log) => log.message)
-          .join('\n')
+        return (await browser.log()).map((log) => log.message).join('\n')
       }, /Image with src (.*)jpg(.*) may not render properly as a child of a flex container. Consider wrapping the image with a div to configure the width/gm)
       expect(await hasRedbox(browser)).toBe(false)
     })
@@ -821,7 +817,7 @@ function runTests(mode) {
       )
       await browser.eval(`document.querySelector("footer").scrollIntoView()`)
       await waitFor(1000)
-      const warnings = (await browser.log('browser'))
+      const warnings = (await browser.log())
         .map((log) => log.message)
         .join('\n')
       expect(warnings).toMatch(
@@ -842,7 +838,7 @@ function runTests(mode) {
     it('should warn when using a very small image with placeholder=blur', async () => {
       const browser = await webdriver(appPort, '/small-img-import')
 
-      const warnings = (await browser.log('browser'))
+      const warnings = (await browser.log())
         .map((log) => log.message)
         .join('\n')
       expect(await hasRedbox(browser)).toBe(false)
@@ -854,7 +850,7 @@ function runTests(mode) {
     it('should not warn when Image is child of p', async () => {
       const browser = await webdriver(appPort, '/inside-paragraph')
 
-      const warnings = (await browser.log('browser'))
+      const warnings = (await browser.log())
         .map((log) => log.message)
         .join('\n')
       expect(await hasRedbox(browser)).toBe(false)
@@ -879,7 +875,7 @@ function runTests(mode) {
           return 'done'
         }, 'done')
         await waitFor(1000)
-        const warnings = (await browser.log('browser'))
+        const warnings = (await browser.log())
           .map((log) => log.message)
           .join('\n')
         expect(await hasRedbox(browser)).toBe(false)
@@ -896,7 +892,7 @@ function runTests(mode) {
     it('should warn when loader is missing width', async () => {
       const browser = await webdriver(appPort, '/invalid-loader')
       await browser.eval(`document.querySelector("footer").scrollIntoView()`)
-      const warnings = (await browser.log('browser'))
+      const warnings = (await browser.log())
         .map((log) => log.message)
         .join('\n')
       expect(await hasRedbox(browser)).toBe(false)
@@ -920,7 +916,7 @@ function runTests(mode) {
     it('should warn when using sizes with incorrect layout', async () => {
       const browser = await webdriver(appPort, '/invalid-sizes')
       await browser.eval(`document.querySelector("footer").scrollIntoView()`)
-      const warnings = (await browser.log('browser'))
+      const warnings = (await browser.log())
         .map((log) => log.message)
         .join('\n')
       expect(await hasRedbox(browser)).toBe(false)
@@ -941,7 +937,7 @@ function runTests(mode) {
     it('should not warn when svg, even if with loader prop or without', async () => {
       const browser = await webdriver(appPort, '/loader-svg')
       await browser.eval(`document.querySelector("footer").scrollIntoView()`)
-      const warnings = (await browser.log('browser'))
+      const warnings = (await browser.log())
         .map((log) => log.message)
         .join('\n')
       expect(await hasRedbox(browser)).toBe(false)
@@ -981,7 +977,7 @@ function runTests(mode) {
         return 'done'
       }, 'done')
       await waitFor(1000)
-      const warnings = (await browser.log('browser'))
+      const warnings = (await browser.log())
         .map((log) => log.message)
         .filter((log) => log.startsWith('Image with src'))
       expect(warnings[0]).toMatch(
@@ -1397,12 +1393,12 @@ function runTests(mode) {
       await waitFor(1000)
       expect(await browser.hasElementByCssSelector('img')).toBeTruthy()
       const url = await browser.url()
-      const result = await validateHTML({
+      const result = (await validateHTML({
         url,
         format: 'json',
         isLocal: true,
         validator: 'whatwg',
-      })
+      })) as any
       expect(result.isValid).toBe(true)
       expect(result.errors).toEqual([])
     } finally {

test/integration/image-future/react-virtualized/test/index.test.js → test/integration/image-component/react-virtualized/test/index.test.ts

@@ -16,7 +16,7 @@ import http from 'http'
 const appDir = join(__dirname, '../')
 let appPort
 let app
-let proxyServer
+let proxyServer: http.Server
 let cancelCount = 0
 describe('react-virtualized wrapping next/image', () => {
   describe('production', () => {
@@ -51,7 +51,7 @@ describe('react-virtualized wrapping next/image', () => {
         console.warn('Failed to proxy', err)
       })
 
-      await new Promise((resolve) => {
+      await new Promise<void>((resolve) => {
         proxyServer.listen(appPort, () => resolve())
       })
     })

test/integration/image-component/unoptimized/test/index.test.js → test/integration/image-component/unoptimized/test/index.test.ts

@@ -107,7 +107,7 @@ describe('Unoptimized Image Tests', () => {
       await killApp(app)
     })
 
-    runTests('dev')
+    runTests()
   })
 
   describe('server mode', () => {
@@ -120,6 +120,6 @@ describe('Unoptimized Image Tests', () => {
       await killApp(app)
     })
 
-    runTests('server')
+    runTests()
   })
 })

test/integration/image-future/default/test/index.test.js → test/integration/image-future/default/test/index.test.ts

@@ -624,9 +624,7 @@ function runTests(mode) {
       expect(await hasRedbox(browser)).toBe(false)
 
       await check(async () => {
-        return (await browser.log('browser'))
-          .map((log) => log.message)
-          .join('\n')
+        return (await browser.log()).map((log) => log.message).join('\n')
       }, /Image is missing required "src" property/gm)
     })
 
@@ -726,7 +724,7 @@ function runTests(mode) {
     it('should warn when using a very small image with placeholder=blur', async () => {
       const browser = await webdriver(appPort, '/small-img-import')
 
-      const warnings = (await browser.log('browser'))
+      const warnings = (await browser.log())
         .map((log) => log.message)
         .join('\n')
       expect(await hasRedbox(browser)).toBe(false)
@@ -738,7 +736,7 @@ function runTests(mode) {
     it('should not warn when Image is child of p', async () => {
       const browser = await webdriver(appPort, '/inside-paragraph')
 
-      const warnings = (await browser.log('browser'))
+      const warnings = (await browser.log())
         .map((log) => log.message)
         .join('\n')
       expect(await hasRedbox(browser)).toBe(false)
@@ -780,7 +778,7 @@ function runTests(mode) {
     it('should warn when loader is missing width', async () => {
       const browser = await webdriver(appPort, '/invalid-loader')
       await browser.eval(`document.querySelector("footer").scrollIntoView()`)
-      const warnings = (await browser.log('browser'))
+      const warnings = (await browser.log())
         .map((log) => log.message)
         .join('\n')
       expect(await hasRedbox(browser)).toBe(false)
@@ -804,7 +802,7 @@ function runTests(mode) {
     it('should not warn when svg, even if with loader prop or without', async () => {
       const browser = await webdriver(appPort, '/loader-svg')
       await browser.eval(`document.querySelector("footer").scrollIntoView()`)
-      const warnings = (await browser.log('browser'))
+      const warnings = (await browser.log())
         .map((log) => log.message)
         .join('\n')
       expect(await hasRedbox(browser)).toBe(false)
@@ -844,7 +842,7 @@ function runTests(mode) {
         return 'done'
       }, 'done')
       await waitFor(1000)
-      const warnings = (await browser.log('browser'))
+      const warnings = (await browser.log())
         .map((log) => log.message)
         .filter((log) => log.startsWith('Image with src'))
       expect(warnings[0]).toMatch(
@@ -1120,12 +1118,12 @@ function runTests(mode) {
       await waitFor(1000)
       expect(await browser.hasElementByCssSelector('img')).toBeTruthy()
       const url = await browser.url()
-      const result = await validateHTML({
+      const result = (await validateHTML({
         url,
         format: 'json',
         isLocal: true,
         validator: 'whatwg',
-      })
+      })) as any
       expect(result.isValid).toBe(true)
       expect(result.errors).toEqual([])
     } finally {

test/integration/image-component/react-virtualized/test/index.test.js → test/integration/image-future/react-virtualized/test/index.test.ts

@@ -16,7 +16,7 @@ import http from 'http'
 const appDir = join(__dirname, '../')
 let appPort
 let app
-let proxyServer
+let proxyServer: http.Server
 let cancelCount = 0
 describe('react-virtualized wrapping next/image', () => {
   describe('production', () => {
@@ -51,7 +51,7 @@ describe('react-virtualized wrapping next/image', () => {
         console.warn('Failed to proxy', err)
       })
 
-      await new Promise((resolve) => {
+      await new Promise<void>((resolve) => {
         proxyServer.listen(appPort, () => resolve())
       })
     })

test/integration/image-future/unoptimized/test/index.test.js → test/integration/image-future/unoptimized/test/index.test.ts

@@ -102,7 +102,7 @@ describe('Unoptimized Image Tests', () => {
       await killApp(app)
     })
 
-    runTests('dev')
+    runTests()
   })
 
   describe('server mode', () => {
@@ -115,6 +115,6 @@ describe('Unoptimized Image Tests', () => {
       await killApp(app)
     })
 
-    runTests('server')
+    runTests()
   })
 })

test/lib/browsers/base.ts

@@ -97,7 +97,9 @@ export class BrowserInterface {
   async hasElementByCssSelector(selector: string): Promise<boolean> {
     return false
   }
-  async log(): Promise<any[]> {
+  async log(): Promise<
+    { source: 'error' | 'info' | 'log'; message: string }[]
+  > {
     return []
   }
   async websocketFrames(): Promise<any[]> {

test/lib/browsers/playwright.ts

@@ -27,7 +27,7 @@ export async function quit() {
   browser = undefined
 }
 
-class Playwright extends BrowserInterface {
+export class Playwright extends BrowserInterface {
   private activeTrace?: string
   private eventCallbacks: Record<Event, Set<(...args: any[]) => void>> = {
     request: new Set(),
@@ -385,5 +385,3 @@ class Playwright extends BrowserInterface {
     return this.chain(() => page.evaluate('window.location.href')) as any
   }
 }
-
-export default Playwright

test/lib/browsers/selenium.ts

@@ -42,7 +42,7 @@ export async function quit() {
   seleniumServer = undefined
 }
 
-class Selenium extends BrowserInterface {
+export class Selenium extends BrowserInterface {
   private browserName: string
 
   // TODO: support setting locale
@@ -356,5 +356,3 @@ class Selenium extends BrowserInterface {
     return this.chain(() => browser.getCurrentUrl()) as any
   }
 }
-
-export default Selenium