Add tests

Author: styfle

test/integration/image-component/default/pages/blurry-placeholder.js

@@ -8,7 +8,7 @@ export default function Page() {
       <Image
         priority
         id="blurry-placeholder"
-        src="/test.jpg"
+        src="/test.ico"
         width="400"
         height="400"
         placeholder="blur"
@@ -19,7 +19,7 @@ export default function Page() {
 
       <Image
         id="blurry-placeholder-with-lazy"
-        src="/test.jpg"
+        src="/test.bmp"
         width="400"
         height="400"
         placeholder="blur"

test/integration/image-component/default/pages/invalid-placeholder-blur.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import Image from 'next/image'
+
+const Page = () => {
+  return (
+    <div>
+      <Image id="invalid-placeholder-blur" src="/test.png" placeholder="blur" />
+    </div>
+  )
+}
+
+export default Page

test/integration/image-component/default/pages/small-img-import.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import Image from 'next/image'
+import Small from '../public/small.jpg'
+
+const Page = () => {
+  return (
+    <div>
+      <Image id="small-img-import" src={Small} placeholder="blur" />
+    </div>
+  )
+}
+
+export default Page

test/integration/image-component/default/public/small.jpg

@@ -484,6 +484,27 @@ function runTests(mode) {
         'Failed to parse src "//assets.example.com/img.jpg" on `next/image`, protocol-relative URL (//) must be changed to an absolute URL (http:// or https://)'
       )
     })
+
+    it('should show invalid placeholder when blurDataUrl is missing', async () => {
+      const browser = await webdriver(appPort, '/invalid-placeholder-blur')
+
+      expect(await hasRedbox(browser)).toBe(true)
+      expect(await getRedboxHeader(browser)).toContain(
+        `Image with src "/test.png" has "placeholder='blur'" property but is missing the "blurDataURL" property.`
+      )
+    })
+
+    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'))
+        .map((log) => log.message)
+        .join('\n')
+      expect(await hasRedbox(browser)).toBe(false)
+      expect(warnings).toMatch(
+        /Image with src (.*)jpg(.*) is smaller than 40x40. Consider removing(.*)/gm
+      )
+    })
   }
 
   it('should correctly ignore prose styles', async () => {