Skip to content

Commit

Permalink
revert
Browse files Browse the repository at this point in the history
  • Loading branch information
Eric Biewener committed Aug 27, 2021
1 parent 8ee497b commit d67b997
Showing 1 changed file with 28 additions and 102 deletions.
130 changes: 28 additions & 102 deletions test/integration/image-component/basic/test/index.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
/* eslint-env jest */

import { join } from 'path'
import {
check,
findPort,
killApp,
nextBuild,
findPort,
nextStart,
nextBuild,
waitFor,
check,
} from 'next-test-utils'
import webdriver from 'next-webdriver'
import { join } from 'path'

jest.setTimeout(1000 * 30)

Expand All @@ -22,7 +22,7 @@ const emptyImage =

function runTests() {
it('should render an image tag', async () => {
await waitFor(100000)
await waitFor(1000)
expect(await browser.hasElementByCssSelector('img')).toBeTruthy()
})
it('should support passing through arbitrary attributes', async () => {
Expand Down Expand Up @@ -61,20 +61,20 @@ function runTests() {
})
it('should use imageSizes when width matches, not deviceSizes from next.config.js', async () => {
expect(await browser.elementById('icon-image-16').getAttribute('src')).toBe(
'https://example.com/myaccount/icon.png?auto=format&fit=max&w=32'
'https://example.com/myaccount/icon.png?auto=format&fit=max&w=48'
)
expect(
await browser.elementById('icon-image-16').getAttribute('srcset')
).toBe(
'https://example.com/myaccount/icon.png?auto=format&fit=max&w=16 1x, https://example.com/myaccount/icon.png?auto=format&fit=max&w=32 2x'
'https://example.com/myaccount/icon.png?auto=format&fit=max&w=16 1x, https://example.com/myaccount/icon.png?auto=format&fit=max&w=32 2x, https://example.com/myaccount/icon.png?auto=format&fit=max&w=48 3x'
)
expect(await browser.elementById('icon-image-32').getAttribute('src')).toBe(
'https://example.com/myaccount/icon.png?auto=format&fit=max&w=64'
'https://example.com/myaccount/icon.png?auto=format&fit=max&w=480'
)
expect(
await browser.elementById('icon-image-32').getAttribute('srcset')
).toBe(
'https://example.com/myaccount/icon.png?auto=format&fit=max&w=32 1x, https://example.com/myaccount/icon.png?auto=format&fit=max&w=64 2x'
'https://example.com/myaccount/icon.png?auto=format&fit=max&w=32 1x, https://example.com/myaccount/icon.png?auto=format&fit=max&w=64 2x, https://example.com/myaccount/icon.png?auto=format&fit=max&w=480 3x'
)
})
it('should support the unoptimized attribute', async () => {
Expand All @@ -87,32 +87,15 @@ function runTests() {
await browser.elementById('unoptimized-image').getAttribute('srcset')
).toBeFalsy()
})
it('should keep auto parameter if already set', async () => {
expect(
await browser.elementById('image-with-param-auto').getAttribute('src')
).toBe('https://example.com/myaccount/foo.png?auto=compress&fit=max&w=1024')
})
it('should keep width parameter if already set', async () => {
expect(
await browser.elementById('image-with-param-width').getAttribute('src')
).toBe('https://example.com/myaccount/foo.png?auto=format&w=500&fit=max')
})
it('should keep fit parameter if already set', async () => {
expect(
await browser.elementById('image-with-param-fit').getAttribute('src')
).toBe(
'https://example.com/myaccount/foo.png?auto=format&fit=crop&w=300&h=300'
)
})
}

function lazyLoadingTests() {
it('should have loaded the first image immediately', async () => {
expect(await browser.elementById('lazy-top').getAttribute('src')).toBe(
'https://example.com/myaccount/lazy1.jpg?auto=format&fit=max&w=2000'
'https://example.com/myaccount/foo1.jpg?auto=format&fit=max&w=2000'
)
expect(await browser.elementById('lazy-top').getAttribute('srcset')).toBe(
'https://example.com/myaccount/lazy1.jpg?auto=format&fit=max&w=1024 1x, https://example.com/myaccount/lazy1.jpg?auto=format&fit=max&w=2000 2x'
'https://example.com/myaccount/foo1.jpg?auto=format&fit=max&w=1024 1x, https://example.com/myaccount/foo1.jpg?auto=format&fit=max&w=2000 2x'
)
})
it('should not have loaded the second image immediately', async () => {
Expand Down Expand Up @@ -140,11 +123,11 @@ function lazyLoadingTests() {

await check(() => {
return browser.elementById('lazy-mid').getAttribute('src')
}, 'https://example.com/myaccount/lazy2.jpg?auto=format&fit=max&w=1024')
}, 'https://example.com/myaccount/foo2.jpg?auto=format&fit=max&w=1024')

await check(() => {
return browser.elementById('lazy-mid').getAttribute('srcset')
}, 'https://example.com/myaccount/lazy2.jpg?auto=format&fit=max&w=480 1x, https://example.com/myaccount/lazy2.jpg?auto=format&fit=max&w=1024 2x')
}, 'https://example.com/myaccount/foo2.jpg?auto=format&fit=max&w=480 1x, https://example.com/myaccount/foo2.jpg?auto=format&fit=max&w=1024 2x')
})
it('should not have loaded the third image after scrolling down', async () => {
expect(await browser.elementById('lazy-bottom').getAttribute('src')).toBe(
Expand All @@ -165,7 +148,7 @@ function lazyLoadingTests() {
)
await waitFor(200)
expect(await browser.elementById('lazy-bottom').getAttribute('src')).toBe(
'https://www.otherhost.com/lazy3.jpg'
'https://www.otherhost.com/foo3.jpg'
)
expect(
await browser.elementById('lazy-bottom').getAttribute('srcset')
Expand All @@ -189,77 +172,36 @@ function lazyLoadingTests() {
await waitFor(200)
expect(
await browser.elementById('lazy-without-attribute').getAttribute('src')
).toBe('https://example.com/myaccount/lazy4.jpg?auto=format&fit=max&w=1600')
).toBe('https://example.com/myaccount/foo4.jpg?auto=format&fit=max&w=2000')
expect(
await browser.elementById('lazy-without-attribute').getAttribute('srcset')
).toBe(
'https://example.com/myaccount/lazy4.jpg?auto=format&fit=max&w=1024 1x, https://example.com/myaccount/lazy4.jpg?auto=format&fit=max&w=1600 2x'
'https://example.com/myaccount/foo4.jpg?auto=format&fit=max&w=1024 1x, https://example.com/myaccount/foo4.jpg?auto=format&fit=max&w=1600 2x, https://example.com/myaccount/foo4.jpg?auto=format&fit=max&w=2000 3x'
)
})

it('should load the fifth image eagerly, without scrolling', async () => {
expect(await browser.elementById('eager-loading').getAttribute('src')).toBe(
'https://example.com/myaccount/lazy5.jpg?auto=format&fit=max&w=2000'
'https://example.com/myaccount/foo5.jpg?auto=format&fit=max&w=2000'
)
expect(
await browser.elementById('eager-loading').getAttribute('srcset')
).toBeTruthy()
})

it('should load the sixth image, which has lazyBoundary property after scrolling down', async () => {
expect(await browser.elementById('lazy-boundary').getAttribute('src')).toBe(
emptyImage
)
expect(
await browser.elementById('lazy-boundary').getAttribute('srcset')
).toBeFalsy()
let viewportHeight = await browser.eval(`window.innerHeight`)
let topOfBottomImage = await browser.eval(
`document.getElementById('lazy-boundary').parentElement.offsetTop`
)
let buffer = 500
await browser.eval(
`window.scrollTo(0, ${topOfBottomImage - (viewportHeight + buffer)})`
)
await waitFor(200)
expect(await browser.elementById('lazy-boundary').getAttribute('src')).toBe(
'https://example.com/myaccount/lazy6.jpg?auto=format&fit=max&w=1600'
)
expect(
await browser.elementById('lazy-boundary').getAttribute('srcset')
).toBe(
'https://example.com/myaccount/lazy6.jpg?auto=format&fit=max&w=1024 1x, https://example.com/myaccount/lazy6.jpg?auto=format&fit=max&w=1600 2x'
)
})
}

async function hasPreloadLinkMatchingUrl(url) {
const links = await browser.elementsByCss('link[rel=preload][as=image]')
for (const link of links) {
const imagesrcset = await link.getAttribute('imagesrcset')
const href = await link.getAttribute('href')
if (imagesrcset?.includes(url) || (!imagesrcset && href === url)) {
return true
}
}
return false
}

async function hasImagePreloadBeforeCSSPreload() {
const links = await browser.elementsByCss('link')
let foundImage = false
let foundMatch = false
for (const link of links) {
const rel = await link.getAttribute('rel')
if (rel === 'preload') {
const linkAs = await link.getAttribute('as')
if (linkAs === 'image') {
foundImage = true
} else if (linkAs === 'style' && foundImage) {
return true
}
const href = await link.getAttribute('href')
if (rel === 'preload' && href === url) {
foundMatch = true
break
}
}
return false
return foundMatch
}

describe('Image Component Tests', () => {
Expand All @@ -277,37 +219,34 @@ describe('Image Component Tests', () => {
browser = null
})
runTests()
it('should add a preload tag for a priority image', async () => {
it.skip('should add a preload tag for a priority image', async () => {
expect(
await hasPreloadLinkMatchingUrl(
'https://example.com/myaccount/withpriority.png?auto=format&fit=max&w=1024&q=60'
)
).toBe(true)
})
it('should add a preload tag for a priority image with preceding slash', async () => {
it.skip('should add a preload tag for a priority image with preceding slash', async () => {
expect(
await hasPreloadLinkMatchingUrl(
'https://example.com/myaccount/fooslash.jpg?auto=format&fit=max&w=1024'
)
).toBe(true)
})
it('should add a preload tag for a priority image, with arbitrary host', async () => {
it.skip('should add a preload tag for a priority image, with arbitrary host', async () => {
expect(
await hasPreloadLinkMatchingUrl(
'https://arbitraryurl.com/withpriority3.png'
)
).toBe(true)
})
it('should add a preload tag for a priority image, with quality', async () => {
it.skip('should add a preload tag for a priority image, with quality', async () => {
expect(
await hasPreloadLinkMatchingUrl(
'https://example.com/myaccount/withpriority.png?auto=format&fit=max&w=1024&q=60'
)
).toBe(true)
})
it('should not create any preload tags higher up the page than CSS preload tags', async () => {
expect(await hasImagePreloadBeforeCSSPreload()).toBe(false)
})
})
describe('Client-side Image Component Tests', () => {
beforeAll(async () => {
Expand All @@ -318,26 +257,13 @@ describe('Image Component Tests', () => {
browser = null
})
runTests()
// FIXME: this test
it.skip('should NOT add a preload tag for a priority image', async () => {
it('should NOT add a preload tag for a priority image', async () => {
expect(
await hasPreloadLinkMatchingUrl(
'https://example.com/myaccount/withpriorityclient.png?auto=format&fit=max'
)
).toBe(false)
})
it('should only be loaded once if `sizes` is set', async () => {
// Get all network requests
const resourceEntries = await browser.eval(
'window.performance.getEntries()'
)

// "test-sizes.jpg" should only occur once
const requests = resourceEntries.filter((entry) =>
entry.name.includes('test-sizes.jpg')
)
expect(requests.length).toBe(1)
})
describe('Client-side Errors', () => {
beforeAll(async () => {
await browser.eval(`(function() {
Expand Down

0 comments on commit d67b997

Please sign in to comment.