core(image-aspect-ratio): pass audit when no images are missized (#3552)

also add smoke test for image-aspect-ratio
GoogleChrome · Oct 13, 2017 · 62e4b74 · 62e4b74
1 parent ecbbc38
commit 62e4b74
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 15 deletions.
diff --git a/lighthouse-cli/test/fixtures/dobetterweb/dbw_tester.html b/lighthouse-cli/test/fixtures/dobetterweb/dbw_tester.html
@@ -116,6 +116,12 @@ <h2>Do better web tester page</h2>
 
 </template>
 
+<!-- FAIL(image-aspect-ratio): image is naturally 480x318 -->
+<img src="lighthouse-480x318.jpg" width="480" height="57">
+<!-- PASS(image-aspect-ratio) -->
+<img src="lighthouse-480x318.jpg" width="480" height="318">
+
+
 <!-- Some websites overwrite the original Error object. The captureJSCallUsage function
   relies on the native Error object and prepareStackTrace from V8. When overwriting the stack
   property the e.stack inside the gatherer won't be in the correct format

diff --git a/lighthouse-cli/test/fixtures/dobetterweb/lighthouse-480x318.jpg b/lighthouse-cli/test/fixtures/dobetterweb/lighthouse-480x318.jpg
diff --git a/lighthouse-cli/test/smokehouse/dobetterweb/dbw-expectations.js b/lighthouse-cli/test/smokehouse/dobetterweb/dbw-expectations.js
@@ -36,13 +36,13 @@ module.exports = [
         extendedInfo: {
           value: {
             results: {
-              length: 14,
+              length: 15,
             },
           },
         },
         details: {
           items: {
-            length: 14,
+            length: 15,
           },
         },
       },
@@ -185,6 +185,19 @@ module.exports = [
           },
         },
       },
+      'image-aspect-ratio': {
+        score: false,
+        details: {
+          items: {
+            0: {
+              2: {
+                text: /^480 x 57/,
+              },
+            },
+            length: 1,
+          },
+        },
+      },
     },
   }, {
     initialUrl: 'http://localhost:10200/dobetterweb/domtester.html?smallDOM',

diff --git a/lighthouse-core/audits/image-aspect-ratio.js b/lighthouse-core/audits/image-aspect-ratio.js
@@ -95,7 +95,7 @@ class ImageAspectRatio extends Audit {
     ];
 
     return {
-      rawValue: results.length,
+      rawValue: results.length === 0,
       debugString,
       details: Audit.makeTableDetails(headings, results),
     };

diff --git a/lighthouse-core/test/audits/image-aspect-ratio-test.js b/lighthouse-core/test/audits/image-aspect-ratio-test.js
@@ -5,7 +5,7 @@
  */
 'use strict';
 
-const Audit = require('../../audits/image-aspect-ratio.js');
+const ImageAspectRatioAudit = require('../../audits/image-aspect-ratio.js');
 const assert = require('assert');
 
 /* eslint-env mocha */
@@ -27,7 +27,7 @@ describe('Images: aspect-ratio audit', () => {
   function testImage(condition, data) {
     const description = `identifies when an image ${condition}`;
     it(description, () => {
-      const result = Audit.audit({
+      const result = ImageAspectRatioAudit.audit({
         ImageUsage: [
           generateImage(
             {width: data.clientSize[0], height: data.clientSize[1]},
@@ -38,12 +38,13 @@ describe('Images: aspect-ratio audit', () => {
         ],
       });
 
-      assert.equal(result.rawValue, data.listed ? 1 : 0);
+      assert.strictEqual(result.rawValue, data.rawValue, 'rawValue does not match');
+      assert.strictEqual(result.debugString, data.debugString, 'debugString does not match');
     });
   }
 
   testImage('is much larger than natural aspect ratio', {
-    listed: true,
+    rawValue: false,
     clientSize: [800, 500],
     naturalSize: [200, 200],
     props: {
@@ -53,7 +54,7 @@ describe('Images: aspect-ratio audit', () => {
   });
 
   testImage('is a css image and much larger than natural aspect ratio', {
-    listed: false,
+    rawValue: true,
     clientSize: [],
     naturalSize: [200, 200],
     props: {
@@ -63,7 +64,7 @@ describe('Images: aspect-ratio audit', () => {
   });
 
   testImage('is larger than natural aspect ratio', {
-    listed: true,
+    rawValue: false,
     clientSize: [400, 300],
     naturalSize: [200, 200],
     props: {
@@ -73,7 +74,7 @@ describe('Images: aspect-ratio audit', () => {
   });
 
   testImage('uses object-fit and is much smaller than natural aspect ratio', {
-    listed: false,
+    rawValue: true,
     clientSize: [200, 200],
     naturalSize: [800, 500],
     props: {
@@ -83,7 +84,7 @@ describe('Images: aspect-ratio audit', () => {
   });
 
   testImage('is much smaller than natural aspect ratio', {
-    listed: true,
+    rawValue: false,
     clientSize: [200, 200],
     naturalSize: [800, 500],
     props: {
@@ -93,7 +94,7 @@ describe('Images: aspect-ratio audit', () => {
   });
 
   testImage('is smaller than natural aspect ratio', {
-    listed: true,
+    rawValue: false,
     clientSize: [200, 200],
     naturalSize: [400, 300],
     props: {
@@ -103,7 +104,7 @@ describe('Images: aspect-ratio audit', () => {
   });
 
   testImage('aspect ratios match', {
-    listed: false,
+    rawValue: true,
     clientSize: [100, 100],
     naturalSize: [300, 300],
     props: {
@@ -112,13 +113,24 @@ describe('Images: aspect-ratio audit', () => {
     },
   });
 
-  testImage('has invalid sizing information', {
-    listed: false,
+  testImage('has no display sizing information', {
+    rawValue: true,
     clientSize: [0, 0],
     naturalSize: [100, 100],
     props: {
       isCss: false,
       usesObjectFit: false,
     },
   });
+
+  testImage('has invalid natural sizing information', {
+    rawValue: true,
+    debugString: 'Invalid image sizing information https://google.com/logo.png',
+    clientSize: [100, 100],
+    naturalSize: [0, 0],
+    props: {
+      isCss: false,
+      usesObjectFit: false,
+    },
+  });
 });