Merge pull request #224 from Galooshi/fix-srcset-preload

Fix grabbing urls from srcset attributes

packages/happo-target-firefox/src/__tests__/getUrlsFromSrcset-test.js

@@ -0,0 +1,43 @@
+import getUrlsFromSrcset from '../getUrlsFromSrcset';
+
+it('handles invalid values', () => {
+  expect(getUrlsFromSrcset('      ')).toEqual([]);
+});
+
+it('handles single urls without descriptor', () => {
+  expect(getUrlsFromSrcset('/foo.png')).toEqual(['/foo.png']);
+});
+
+it('handles single urls with commas', () => {
+  expect(getUrlsFromSrcset('/foo,40,50.png')).toEqual(['/foo,40,50.png']);
+});
+
+it('handles single urls with a width descriptor', () => {
+  expect(getUrlsFromSrcset('http://foo.com/foo.png 200w')).toEqual(['http://foo.com/foo.png']);
+});
+
+it('handles single urls with a pixel density descriptor', () => {
+  expect(getUrlsFromSrcset('http://foo.com/foo.png 1.2x')).toEqual(['http://foo.com/foo.png']);
+});
+
+it('strips whitespace', () => {
+  expect(getUrlsFromSrcset(`
+    /foo.png`)).toEqual(['/foo.png']);
+});
+
+it('handles multiple urls', () => {
+  expect(getUrlsFromSrcset('/foo.png 200w,/bar.png 400w')).toEqual(['/foo.png', '/bar.png']);
+});
+
+it('handles multiple urls with commas', () => {
+  expect(getUrlsFromSrcset('http://foo.com/foo,40,50 200w,/bar,20.png 400w')).toEqual(['http://foo.com/foo,40,50', '/bar,20.png']);
+});
+
+it('handles multiple urls with whitespace', () => {
+  expect(getUrlsFromSrcset(`
+  http://foo.com/foo,40,50 200w,
+  /bar,20.png         400w
+
+
+  `)).toEqual(['http://foo.com/foo,40,50', '/bar,20.png']);
+});

packages/happo-target-firefox/src/getUrlsFromSrcset.js

@@ -0,0 +1,10 @@
+const SRCSET_ITEM = /([^\s]+)(\s+[0-9.]+[wx])?(,?\s*)/g;
+
+export default function getUrlsFromSrcset(value) {
+  const result = [];
+  let match;
+  while (match = SRCSET_ITEM.exec(value)) { // eslint-disable-line no-cond-assign
+    result.push(match[1]);
+  }
+  return result;
+}

packages/happo-target-firefox/src/waitForImagesToRender.js

@@ -1,4 +1,5 @@
 import findBackgroundImageUrls from './findBackgroundImageUrls';
+import getUrlsFromSrcset from './getUrlsFromSrcset';
 
 export function waitForImageToLoad(url) {
   return new Promise((resolve, reject) => {
@@ -23,10 +24,7 @@ export default function waitForImagesToRender() {
         return;
       }
 
-      srcset.split(/,\s*/).forEach((entry) => {
-        const [url] = entry.split(' ');
-        promises.push(waitForImageToLoad(url));
-      });
+      promises.push(...getUrlsFromSrcset(srcset).map(waitForImageToLoad));
     });
 
     Array.prototype.slice.call(document.body.querySelectorAll('*'))