Skip to content

Commit

Permalink
Fix tests and fallback image
Browse files Browse the repository at this point in the history
  • Loading branch information
@styfle
styfle committed Oct 26, 2020
1 parent b37983a commit a2df7f6
Show file tree
Hide file tree
Showing 5 changed files with 26 additions and 21 deletions.
16 changes: 12 additions & 4 deletions packages/next/client/image.tsx
View file
Expand Up @@ -42,7 +42,6 @@ const {
domains: configDomains,
} = imageData
configSizes.sort((a, b) => a - b) // smallest to largest
const largestSize = configSizes[configSizes.length - 1]

let cachedObserver: IntersectionObserver
const IntersectionObserver =
Expand Down Expand Up @@ -83,12 +82,21 @@ function getObserver(): IntersectionObserver | undefined {
function computeSrc(
src: string,
unoptimized: boolean,
width: number | undefined,
quality?: string
): string {
if (unoptimized) {
return src
}
return callLoader({ src, width: largestSize, quality })
let widths = configSizes
if (typeof width === 'number') {
widths = configSizes.filter((size) => size <= width)
if (widths.length === 0) {
widths = [configSizes[0]]
}
}
const largest = widths[widths.length - 1]
return callLoader({ src, width: largest, quality })
}

type CallLoaderProps = {
Expand Down Expand Up @@ -156,7 +164,7 @@ function generatePreload({
<link
rel="preload"
as="image"
href={computeSrc(src, unoptimized, quality)}
href={computeSrc(src, unoptimized, width, quality)}
// @ts-ignore: imagesrcset and imagesizes not yet in the link element type
imagesrcset={generateSrcSet({ src, unoptimized, width, quality })}
imagesizes={sizes}
Expand Down Expand Up @@ -287,7 +295,7 @@ export default function Image({
}

// Generate attribute values
const imgSrc = computeSrc(src, unoptimized, quality)
const imgSrc = computeSrc(src, unoptimized, widthInt, quality)
const imgSrcSet = generateSrcSet({
src,
width: widthInt,
Expand Down
2 changes: 1 addition & 1 deletion test/integration/image-component/basic/next.config.js
View file
@@ -1,6 +1,6 @@
module.exports = {
images: {
sizes: [480, 1024, 1600],
sizes: [480, 1024, 1600, 2000],
path: 'https://example.com/myaccount/',
loader: 'imgix',
},
Expand Down
1 change: 0 additions & 1 deletion test/integration/image-component/basic/pages/index.js
View file
Expand Up @@ -39,7 +39,6 @@ const Page = () => {
width={300}
height={400}
/>
<Image id="priority-image" priority src="withpriority.png" />
<Image
id="priority-image"
priority
Expand Down
4 changes: 2 additions & 2 deletions test/integration/image-component/basic/pages/lazy.js
View file
Expand Up @@ -35,15 +35,15 @@ const Lazy = () => {
id="lazy-without-attribute"
src="foo4.jpg"
height={400}
width={300}
width={1500}
></Image>
<div style={{ height: '2000px' }}></div>
<Image
id="eager-loading"
src="foo5.jpg"
loading="eager"
height={400}
width={300}
width={2500}
></Image>
</div>
)
Expand Down
24 changes: 11 additions & 13 deletions test/integration/image-component/basic/test/index.test.js
View file
Expand Up @@ -33,13 +33,13 @@ function runTests() {
})
it('should modify src with the loader', async () => {
expect(await browser.elementById('basic-image').getAttribute('src')).toBe(
'https://example.com/myaccount/foo.jpg?auto=format&w=1600&q=60'
'https://example.com/myaccount/foo.jpg?auto=format&w=480&q=60'
)
})
it('should correctly generate src even if preceding slash is included in prop', async () => {
expect(
await browser.elementById('preceding-slash-image').getAttribute('src')
).toBe('https://example.com/myaccount/fooslash.jpg?auto=format&w=1600')
).toBe('https://example.com/myaccount/fooslash.jpg?auto=format&w=480')
})
it('should add a srcset based on the loader', async () => {
expect(
Expand All @@ -49,9 +49,7 @@ function runTests() {
it('should add a srcset even with preceding slash in prop', async () => {
expect(
await browser.elementById('preceding-slash-image').getAttribute('srcset')
).toBe(
'https://example.com/myaccount/fooslash.jpg?auto=format&w=480 480w, https://example.com/myaccount/fooslash.jpg?auto=format&w=1024 1024w'
)
).toBe('https://example.com/myaccount/fooslash.jpg?auto=format&w=480 480w')
})
it('should support the unoptimized attribute', async () => {
expect(
Expand All @@ -68,7 +66,7 @@ function runTests() {
function lazyLoadingTests() {
it('should have loaded the first image immediately', async () => {
expect(await browser.elementById('lazy-top').getAttribute('src')).toBe(
'https://example.com/myaccount/foo1.jpg?auto=format&w=1600'
'https://example.com/myaccount/foo1.jpg?auto=format&w=1024'
)
expect(await browser.elementById('lazy-top').getAttribute('srcset')).toBe(
'https://example.com/myaccount/foo1.jpg?auto=format&w=480 480w, https://example.com/myaccount/foo1.jpg?auto=format&w=1024 1024w'
Expand Down Expand Up @@ -99,7 +97,7 @@ function lazyLoadingTests() {

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

await check(() => {
return browser.elementById('lazy-mid').getAttribute('srcset')
Expand Down Expand Up @@ -148,17 +146,17 @@ function lazyLoadingTests() {
await waitFor(200)
expect(
await browser.elementById('lazy-without-attribute').getAttribute('src')
).toBe('https://example.com/myaccount/foo4.jpg?auto=format&w=1600')
).toBe('https://example.com/myaccount/foo4.jpg?auto=format&w=1024')
expect(
await browser.elementById('lazy-without-attribute').getAttribute('srcset')
).toBe(
'https://example.com/myaccount/foo4.jpg?auto=format&w=480&q=60 480w, https://example.com/myaccount/foo4.jpg?auto=format&w=1024&q=60 1024w, https://example.com/myaccount/foo4.jpg?auto=format&w=1600&q=60 1600w'
'https://example.com/myaccount/foo4.jpg?auto=format&w=480 480w, https://example.com/myaccount/foo4.jpg?auto=format&w=1024 1024w'
)
})

it('should load the fifth image eagerly, without scrolling', async () => {
expect(await browser.elementById('eager-loading').getAttribute('src')).toBe(
'https://example.com/myaccount/foo5.jpg?auto=format&w=1600'
'https://example.com/myaccount/foo5.jpg?auto=format&w=2000'
)
expect(
await browser.elementById('eager-loading').getAttribute('srcset')
Expand Down Expand Up @@ -198,14 +196,14 @@ describe('Image Component Tests', () => {
it('should add a preload tag for a priority image', async () => {
expect(
await hasPreloadLinkMatchingUrl(
'https://example.com/myaccount/withpriority.png?auto=format&w=1600'
'https://example.com/myaccount/withpriority.png?auto=format&w=480&q=60'
)
).toBe(true)
})
it('should add a preload tag for a priority image with preceding slash', async () => {
expect(
await hasPreloadLinkMatchingUrl(
'https://example.com/myaccount/fooslash.jpg?auto=format&w=1600'
'https://example.com/myaccount/fooslash.jpg?auto=format&w=480'
)
).toBe(true)
})
Expand All @@ -219,7 +217,7 @@ describe('Image Component Tests', () => {
it('should add a preload tag for a priority image, with quality', async () => {
expect(
await hasPreloadLinkMatchingUrl(
'https://example.com/myaccount/withpriority.png?auto=format&w=1600&q=60'
'https://example.com/myaccount/withpriority.png?auto=format&w=480&q=60'
)
).toBe(true)
})
Expand Down

0 comments on commit a2df7f6

Please sign in to comment.