tests

GoogleChrome · Dec 9, 2019 · 3848221 · 3848221
1 parent d73c056
commit 3848221
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 24 deletions.
diff --git a/lighthouse-core/report/html/renderer/details-renderer.js b/lighthouse-core/report/html/renderer/details-renderer.js
@@ -304,11 +304,21 @@ class DetailsRenderer {
     }
 
     return tableLike.headings.map(heading => {
+      let multi;
+      if (heading.multi) {
+        multi = {
+          key: heading.multi.key,
+          valueType: heading.multi.itemType,
+          displayUnit: heading.displayUnit,
+          granularity: heading.granularity,
+        };
+      }
+
       return {
         key: heading.key,
         label: heading.text,
         valueType: heading.itemType,
-        multi: heading.multi,
+        multi,
         displayUnit: heading.displayUnit,
         granularity: heading.granularity,
       };
@@ -373,8 +383,11 @@ class DetailsRenderer {
 
         if (heading.multi) {
           const multiHeading = {
-            ...heading,
-            ...heading.multi,
+            key: heading.multi.key,
+            valueType: heading.multi.valueType || heading.valueType,
+            granularity: heading.multi.granularity || heading.granularity,
+            displayUnit: heading.multi.displayUnit || heading.displayUnit,
+            label: '',
           };
           const multiElement = this._renderMultiValue(row, multiHeading);
           if (multiElement) valueFragment.appendChild(multiElement);

diff --git a/lighthouse-core/test/report/html/renderer/details-renderer-test.js b/lighthouse-core/test/report/html/renderer/details-renderer-test.js
@@ -548,7 +548,7 @@ describe('DetailsRenderer', () => {
         // itemType is overriden by code object
         headings: [{key: 'content', itemType: 'url', text: 'Heading'}],
         items: [
-          {content: {type: 'code', value: 'code object'}},
+          {content: {type: 'code', value: 'https://codeobject.com'}},
           {content: 'https://example.com'},
         ],
       };
@@ -560,7 +560,7 @@ describe('DetailsRenderer', () => {
       const codeEl = itemElements[0].firstChild;
       assert.equal(codeEl.localName, 'pre');
       assert.ok(codeEl.classList.contains('lh-code'));
-      assert.equal(codeEl.textContent, 'code object');
+      assert.equal(codeEl.textContent, 'https://codeobject.com');
 
       // Second item uses the heading's specified type for the column.
       const urlEl = itemElements[1].firstChild;
@@ -570,32 +570,76 @@ describe('DetailsRenderer', () => {
       assert.equal(urlEl.textContent, 'https://example.com');
     });
 
-    describe('multi', () => {
-      it('renders multiple', () => {
+    describe('multiple values', () => {
+      it('renders', () => {
         const details = {
           type: 'table',
-          headings: [{key: 'url', itemType: 'url', multi: {key: 'source', itemType: 'code'}}],
+          headings: [{key: 'url', itemType: 'url', multi: {key: 'sources', itemType: 'code'}}],
           items: [
-            {url: 'https://www.example.com', multi: {type: 'multi', source: ['a', 'b']}},
+            {url: 'https://www.example.com', sources: ['a', 'b', 'c']},
+          ],
+        };
+
+        const el = renderer.render(details);
+        const columnElement = el.querySelector('td.lh-table-column--url');
+
+        // First element is the url.
+        const codeEl = columnElement.firstChild;
+        assert.equal(codeEl.localName, 'div');
+        assert.ok(codeEl.classList.contains('lh-text__url'));
+        assert.equal(codeEl.textContent, 'https://www.example.com');
+
+        // Second element lists the multiple values.
+        const multiValuesEl = columnElement.children[1];
+        assert.equal(multiValuesEl.localName, 'div');
+        assert.ok(multiValuesEl.classList.contains('lh-multi-values'));
+
+        const multiValueEls = multiValuesEl.querySelectorAll('.lh-multi-value-entry');
+        assert.equal(multiValueEls[0].textContent, 'a');
+        assert.ok(multiValueEls[0].classList.contains('lh-code'));
+        assert.equal(multiValueEls[1].textContent, 'b');
+        assert.ok(multiValueEls[1].classList.contains('lh-code'));
+        assert.equal(multiValueEls[2].textContent, 'c');
+        assert.ok(multiValueEls[2].classList.contains('lh-code'));
+      });
+
+      it('renders, uses heading properties as fallback', () => {
+        const details = {
+          type: 'table',
+          headings: [{key: 'url', itemType: 'url', multi: {key: 'sources'}}],
+          items: [
+            {
+              url: 'https://www.example.com',
+              sources: [
+                'https://www.a.com',
+                {type: 'code', value: 'https://www.b.com'},
+                'https://www.c.com',
+              ],
+            },
           ],
         };
 
         const el = renderer.render(details);
-        console.log(el.innerHTML);
-        const itemElements = el.querySelectorAll('td.lh-table-column--url');
-
-        // First item's value uses its own type.
-        const codeEl = itemElements[0].firstChild;
-        assert.equal(codeEl.localName, 'pre');
-        assert.ok(codeEl.classList.contains('lh-code'));
-        assert.equal(codeEl.textContent, 'code object');
-
-        // Second item uses the heading's specified type for the column.
-        const urlEl = itemElements[1].firstChild;
-        assert.equal(urlEl.localName, 'div');
-        assert.ok(urlEl.classList.contains('lh-text__url'));
-        assert.equal(urlEl.title, 'https://example.com');
-        assert.equal(urlEl.textContent, 'https://example.com');
+        const columnElement = el.querySelector('td.lh-table-column--url');
+
+        // First element is the url.
+        const codeEl = columnElement.firstChild;
+        assert.equal(codeEl.localName, 'div');
+        assert.ok(codeEl.classList.contains('lh-text__url'));
+        assert.equal(codeEl.textContent, 'https://www.example.com');
+
+        // Second element lists the multiple values.
+        const multiValuesEl = columnElement.children[1];
+        assert.equal(multiValuesEl.localName, 'div');
+        assert.ok(multiValuesEl.classList.contains('lh-multi-values'));
+
+        const multiValueEls = multiValuesEl.querySelectorAll('.lh-multi-value-entry');
+        assert.equal(multiValueEls[0].textContent, 'https://www.a.com');
+        assert.ok(multiValueEls[0].classList.contains('lh-text__url'));
+        assert.equal(multiValueEls[1].textContent, 'https://www.b.com');
+        assert.ok(multiValueEls[1].classList.contains('lh-code'));
+        assert.equal(multiValueEls[2].textContent, 'https://www.c.com');
+        assert.ok(multiValueEls[2].classList.contains('lh-text__url'));
       });
     });
   });