tests(font-size): add test for attributing styles to node

lighthouse-core/gather/gatherers/seo/font-size.js

@@ -211,7 +211,7 @@ async function fetchSourceRule(driver, node) {
 
 /**
  * @param {Driver} driver
- * @param {LH.Artifacts.FontSize.DomNodeWithParent} textNode text node
+ * @param {LH.Artifacts.FontSize.DomNodeWithParent} textNode
  * @returns {Promise<?NodeFontData>}
  */
 async function fetchComputedFontSize(driver, textNode) {

lighthouse-core/test/audits/seo/font-size-test.js

@@ -8,7 +8,10 @@
 const FontSizeAudit = require('../../../audits/seo/font-size.js');
 const assert = require('assert');
 
-const URL = 'https://example.com';
+const URL = {
+  requestedUrl: 'https://example.com',
+  finalUrl: 'https://example.com',
+};
 const validViewport = 'width=device-width';
 
 /* eslint-env jest */
@@ -234,4 +237,54 @@ describe('SEO: Font size audit', () => {
     expect(auditResult.score).toBe(1);
     expect(auditResult.notApplicable).toBe(true);
   });
+
+  describe('attributes source location', () => {
+    async function runFontSizeAuditWithSingleFailingStyle(style, nodeProperties) {
+      const artifacts = {
+        URL: {finalUrl: 'http://www.example.com'},
+        MetaElements: makeMetaElements(validViewport),
+        FontSize: {
+          analyzedFailingNodesData: [
+            {textLength: 1, fontSize: 1, node: {nodeId: 1, ...nodeProperties}, cssRule: style},
+          ],
+        },
+        TestedAsMobileDevice: true,
+      };
+      const auditResult = await FontSizeAudit.audit(artifacts, getFakeContext());
+      expect(auditResult.details.items).toHaveLength(1);
+      return auditResult;
+    }
+
+    it('to inline node stylesheet', async () => {
+      const auditResult = await runFontSizeAuditWithSingleFailingStyle({
+        type: 'Inline',
+      }, {
+        parentNode: {attributes: ['id', 'my-parent']},
+        localName: 'p',
+        attributes: ['class', 'my-p'],
+      });
+
+      expect(auditResult.details.items[0].selector).toMatchObject({
+        type: 'node',
+        selector: '#my-parent',
+        snippet: '<p class="my-p">',
+      });
+    });
+
+    it('to attributes node stylesheet', async () => {
+      const auditResult = await runFontSizeAuditWithSingleFailingStyle({
+        type: 'Attributes',
+      }, {
+        parentNode: {attributes: ['id', 'my-parent']},
+        localName: 'font',
+        attributes: ['size', '10px'],
+      });
+
+      expect(auditResult.details.items[0].selector).toMatchObject({
+        type: 'node',
+        selector: '#my-parent',
+        snippet: '<font size="10px">',
+      });
+    });
+  });
 });

types/artifacts.d.ts

@@ -241,6 +241,7 @@ declare global {
         failingTextLength: number;
         visitedTextLength: number;
         analyzedFailingTextLength: number;
+        /** Elements that contain a text node that failed size criteria. */
         analyzedFailingNodesData: Array<{
           fontSize: number;
           textLength: number;