From 3848221e37743034a1551e1fbc88abf975f8e4f5 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Mon, 9 Dec 2019 14:38:40 -0800 Subject: [PATCH] tests --- .../report/html/renderer/details-renderer.js | 19 +++- .../html/renderer/details-renderer-test.js | 86 ++++++++++++++----- 2 files changed, 81 insertions(+), 24 deletions(-) diff --git a/lighthouse-core/report/html/renderer/details-renderer.js b/lighthouse-core/report/html/renderer/details-renderer.js index fb95e519f914..28381200ad5a 100644 --- 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 index 9458094536c8..30a73a755421 100644 --- 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')); }); }); });