This is a page with lazy-loaded images
-
+
diff --git a/test/integration/image-component/basic/test/index.test.js b/test/integration/image-component/basic/test/index.test.js
index c47a17bfafb8aa4a0ee8d4d5f8e0182ae46893f2..a358202ee2232c2b0c0ea3da1ac14377aa0f35e6 100644
--- a/test/integration/image-component/basic/test/index.test.js
+++ b/test/integration/image-component/basic/test/index.test.js
@@ -7,6 +7,7 @@ import {
nextStart,
nextBuild,
waitFor,
+ check,
} from 'next-test-utils'
import webdriver from 'next-webdriver'
@@ -91,19 +92,20 @@ function lazyLoadingTests() {
it('should load the second image after scrolling down', async () => {
let viewportHeight = await browser.eval(`window.innerHeight`)
let topOfMidImage = await browser.eval(
- `document.getElementById('lazy-mid').offsetTop`
+ `document.getElementById('lazy-mid').parentElement.offsetTop`
)
let buffer = 150
await browser.eval(
`window.scrollTo(0, ${topOfMidImage - (viewportHeight + buffer)})`
)
- await waitFor(200)
- expect(await browser.elementById('lazy-mid').getAttribute('src')).toBe(
- 'https://example.com/myaccount/foo2.jpg'
- )
- expect(await browser.elementById('lazy-mid').getAttribute('srcset')).toBe(
- 'https://example.com/myaccount/foo2.jpg?w=480 480w, https://example.com/myaccount/foo2.jpg?w=1024 1024w, https://example.com/myaccount/foo2.jpg?w=1600 1600w'
- )
+
+ await check(() => {
+ return browser.elementById('lazy-mid').getAttribute('src')
+ }, 'https://example.com/myaccount/foo2.jpg')
+
+ await check(() => {
+ return browser.elementById('lazy-mid').getAttribute('srcset')
+ }, 'https://example.com/myaccount/foo2.jpg?w=480 480w, https://example.com/myaccount/foo2.jpg?w=1024 1024w, https://example.com/myaccount/foo2.jpg?w=1600 1600w')
})
it('should not have loaded the third image after scrolling down', async () => {
expect(
@@ -116,7 +118,7 @@ function lazyLoadingTests() {
it('should load the third image, which is unoptimized, after scrolling further down', async () => {
let viewportHeight = await browser.eval(`window.innerHeight`)
let topOfBottomImage = await browser.eval(
- `document.getElementById('lazy-bottom').offsetTop`
+ `document.getElementById('lazy-bottom').parentElement.offsetTop`
)
let buffer = 150
await browser.eval(
diff --git a/test/integration/image-component/default/pages/index.js b/test/integration/image-component/default/pages/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..be82b9c08b181854b47b8af8e3aab16b12a331cf
--- /dev/null
+++ b/test/integration/image-component/default/pages/index.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import Image from 'next/image'
+
+const Page = () => {
+ return (
+
+
Hello World
+
+
This is the index page
+
+ )
+}
+
+export default Page
diff --git a/test/integration/image-component/default/public/test.bmp b/test/integration/image-component/default/public/test.bmp
new file mode 100644
index 0000000000000000000000000000000000000000..f33feda8616b735b81ededeb14244f820342f24b
Binary files /dev/null and b/test/integration/image-component/default/public/test.bmp differ
diff --git a/test/integration/image-component/default/public/test.gif b/test/integration/image-component/default/public/test.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6bbbd315e9fe876cbdbd61261aceabd359efb49f
Binary files /dev/null and b/test/integration/image-component/default/public/test.gif differ
diff --git a/test/integration/image-component/default/public/test.jpg b/test/integration/image-component/default/public/test.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d536c882412ed3df0dc162823ca5146bcc033499
Binary files /dev/null and b/test/integration/image-component/default/public/test.jpg differ
diff --git a/test/integration/image-component/default/public/test.png b/test/integration/image-component/default/public/test.png
new file mode 100644
index 0000000000000000000000000000000000000000..e14fafc5cf3bc63b70914ad20467f40f7fecd572
Binary files /dev/null and b/test/integration/image-component/default/public/test.png differ
diff --git a/test/integration/image-component/default/public/test.svg b/test/integration/image-component/default/public/test.svg
new file mode 100644
index 0000000000000000000000000000000000000000..025d874f92e6a3cc8ee9de39b8dd8c9fd247073c
--- /dev/null
+++ b/test/integration/image-component/default/public/test.svg
@@ -0,0 +1,13 @@
+
+
+
diff --git a/test/integration/image-component/default/public/test.tiff b/test/integration/image-component/default/public/test.tiff
new file mode 100644
index 0000000000000000000000000000000000000000..c2cc3e203bb3fdb5d828597623a630e6b0e59bfb
Binary files /dev/null and b/test/integration/image-component/default/public/test.tiff differ
diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..e09e9808ffb516756d9dd5eecd909fae2c5ee4a0
--- /dev/null
+++ b/test/integration/image-component/default/test/index.test.js
@@ -0,0 +1,89 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import {
+ killApp,
+ findPort,
+ launchApp,
+ nextStart,
+ nextBuild,
+ check,
+} from 'next-test-utils'
+import webdriver from 'next-webdriver'
+import fs from 'fs-extra'
+
+jest.setTimeout(1000 * 30)
+
+const appDir = join(__dirname, '../')
+const nextConfig = join(appDir, 'next.config.js')
+
+let appPort
+let app
+
+function runTests() {
+ it('should load the image', async () => {
+ let browser
+ try {
+ browser = await webdriver(appPort, '/')
+ await check(async () => {
+ const result = await browser.eval(
+ `document.getElementById('basic-image').naturalWidth`
+ )
+ if (result === 0) {
+ throw new Error('Incorrectly loaded image')
+ }
+
+ return 'result-correct'
+ }, /result-correct/)
+ } finally {
+ if (browser) {
+ await browser.close()
+ }
+ }
+ })
+}
+
+describe('Image Component Tests', () => {
+ describe('dev mode', () => {
+ beforeAll(async () => {
+ appPort = await findPort()
+ app = await launchApp(appDir, appPort)
+ })
+ afterAll(() => killApp(app))
+
+ runTests('dev')
+ })
+
+ describe('server mode', () => {
+ beforeAll(async () => {
+ await nextBuild(appDir)
+ appPort = await findPort()
+ app = await nextStart(appDir, appPort)
+ })
+ afterAll(() => killApp(app))
+
+ runTests('server')
+ })
+
+ describe('serverless mode', () => {
+ beforeAll(async () => {
+ await fs.writeFile(
+ nextConfig,
+ `
+ module.exports = {
+ target: 'serverless'
+ }
+ `
+ )
+ await nextBuild(appDir)
+ appPort = await findPort()
+ app = await nextStart(appDir, appPort)
+ })
+ afterAll(async () => {
+ await fs.unlink(nextConfig)
+ await killApp(app)
+ })
+
+ runTests('serverless')
+ })
+})