From ae9debffb682ece93727b585f37e75d44c1662bf Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Wed, 2 Nov 2022 16:19:46 +0000 Subject: [PATCH] Switch element to defining content within ShadowDOM --- src/relative-time-element.ts | 9 ++- test/local-time.js | 18 ++--- test/relative-time.js | 134 +++++++++++++++++------------------ test/time-ago.js | 24 +++---- test/time-until.js | 18 ++--- 5 files changed, 104 insertions(+), 99 deletions(-) diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts index 6238b3e..e87f94e 100644 --- a/src/relative-time-element.ts +++ b/src/relative-time-element.ts @@ -256,6 +256,11 @@ export default class RelativeTimeElement extends HTMLElement implements Intl.Dat this.datetime = value?.toISOString() || '' } + constructor() { + super() + if (!this.shadowRoot) this.attachShadow({mode: 'open'}) + } + connectedCallback(): void { this.update() } @@ -273,7 +278,7 @@ export default class RelativeTimeElement extends HTMLElement implements Intl.Dat } update() { - const oldText: string = this.textContent || '' + const oldText: string = this.shadowRoot!.textContent || '' const oldTitle: string = this.getAttribute('title') || '' let newTitle: string = oldTitle let newText: string = oldText @@ -288,7 +293,7 @@ export default class RelativeTimeElement extends HTMLElement implements Intl.Dat newText = this.getFormattedDate(now) || '' if (newText) { - this.textContent = newText + this.shadowRoot!.textContent = newText } if (newText !== oldText || newTitle !== oldTitle) { diff --git a/test/local-time.js b/test/local-time.js index 8a4a3b5..a70934d 100644 --- a/test/local-time.js +++ b/test/local-time.js @@ -62,14 +62,14 @@ suite('local-time', function () { test('ignores contents if datetime attribute is missing', function () { const time = document.createElement('local-time') time.setAttribute('year', 'numeric') - assert.equal(time.textContent, '') + assert.equal(time.shadowRoot.textContent, '') }) test('sets formatted contents to format attribute', function () { const time = document.createElement('local-time') time.setAttribute('datetime', '1970-01-01T00:00:00.000Z') time.setAttribute('year', 'numeric') - assert.include(['1969', '1970'], time.textContent) + assert.include(['1969', '1970'], time.shadowRoot.textContent) }) test('updates format when attributes change', function () { @@ -77,10 +77,10 @@ suite('local-time', function () { time.setAttribute('datetime', '1970-01-01T00:00:00.000Z') time.setAttribute('year', 'numeric') - assert.include(['1969', '1970'], time.textContent) + assert.include(['1969', '1970'], time.shadowRoot.textContent) time.setAttribute('year', '2-digit') - assert.include(['69', '70'], time.textContent) + assert.include(['69', '70'], time.shadowRoot.textContent) }) test('sets formatted contents when parsed element is upgraded', function () { @@ -89,7 +89,7 @@ suite('local-time', function () { if ('CustomElements' in window) { window.CustomElements.upgradeSubtree(root) } - assert.include(['1969', '1970'], root.children[0].textContent) + assert.include(['1969', '1970'], root.children[0].shadowRoot.textContent) }) ;('Intl' in window ? test : test.skip)('displays time zone name', function () { const root = document.createElement('div') @@ -98,8 +98,8 @@ suite('local-time', function () { if ('CustomElements' in window) { window.CustomElements.upgradeSubtree(root) } - assert.match(root.children[0].textContent, /^\d{1,2} (\w+([+-]\d+)?)$/) - assert.equal(root.children[0].textContent, '0 GMT+4') + assert.match(root.children[0].shadowRoot.textContent, /^\d{1,2} (\w+([+-]\d+)?)$/) + assert.equal(root.children[0].shadowRoot.textContent, '0 GMT+4') }) test('updates time zone when the `time-zone-name` attribute changes', function () { @@ -109,10 +109,10 @@ suite('local-time', function () { el.setAttribute('time-zone-name', 'short') fixture.appendChild(el) - assert.equal(el.textContent, '1/1/1970, GMT+4') + assert.equal(el.shadowRoot.textContent, '1/1/1970, GMT+4') el.setAttribute('time-zone-name', 'long') - assert.equal(el.textContent, '1/1/1970, Gulf Standard Time') + assert.equal(el.shadowRoot.textContent, '1/1/1970, Gulf Standard Time') }) }) diff --git a/test/relative-time.js b/test/relative-time.js index 313441b..3c39f9f 100644 --- a/test/relative-time.js +++ b/test/relative-time.js @@ -47,112 +47,112 @@ suite('relative-time', function () { const now = new Date(Date.now() - 3 * 60 * 60 * 24 * 1000).toISOString() const time = document.createElement('relative-time') time.setAttribute('datetime', now) - assert.equal(time.textContent, '3 days ago') + assert.equal(time.shadowRoot.textContent, '3 days ago') }) test('rewrites from now future datetime to days from now', function () { const now = new Date(Date.now() + 3 * 60 * 60 * 24 * 1000).toISOString() const time = document.createElement('relative-time') time.setAttribute('datetime', now) - assert.equal(time.textContent, 'in 3 days') + assert.equal(time.shadowRoot.textContent, 'in 3 days') }) test('rewrites from now past datetime to yesterday', function () { const now = new Date(Date.now() - 1 * 60 * 60 * 24 * 1000).toISOString() const time = document.createElement('relative-time') time.setAttribute('datetime', now) - assert.equal(time.textContent, 'yesterday') + assert.equal(time.shadowRoot.textContent, 'yesterday') }) test('rewrites from now past datetime to hours ago', function () { const now = new Date(Date.now() - 3 * 60 * 60 * 1000).toISOString() const time = document.createElement('relative-time') time.setAttribute('datetime', now) - assert.equal(time.textContent, '3 hours ago') + assert.equal(time.shadowRoot.textContent, '3 hours ago') }) test('rewrites from now future datetime to minutes from now', function () { const now = new Date(Date.now() + 3 * 60 * 60 * 1000).toISOString() const time = document.createElement('relative-time') time.setAttribute('datetime', now) - assert.equal(time.textContent, 'in 3 hours') + assert.equal(time.shadowRoot.textContent, 'in 3 hours') }) test('rewrites from now past datetime to an hour ago', function () { const now = new Date(Date.now() - 1 * 60 * 60 * 1000).toISOString() const time = document.createElement('relative-time') time.setAttribute('datetime', now) - assert.equal(time.textContent, '1 hour ago') + assert.equal(time.shadowRoot.textContent, '1 hour ago') }) test('rewrites from now past datetime to minutes ago', function () { const now = new Date(Date.now() - 3 * 60 * 1000).toISOString() const time = document.createElement('relative-time') time.setAttribute('datetime', now) - assert.equal(time.textContent, '3 minutes ago') + assert.equal(time.shadowRoot.textContent, '3 minutes ago') }) test('rewrites from now future datetime to minutes from now', function () { const now = new Date(Date.now() + 3 * 60 * 1000).toISOString() const time = document.createElement('relative-time') time.setAttribute('datetime', now) - assert.equal(time.textContent, 'in 3 minutes') + assert.equal(time.shadowRoot.textContent, 'in 3 minutes') }) test('rewrites from now past datetime to a minute ago', function () { const now = new Date(Date.now() - 1 * 60 * 1000).toISOString() const time = document.createElement('relative-time') time.setAttribute('datetime', now) - assert.equal(time.textContent, '1 minute ago') + assert.equal(time.shadowRoot.textContent, '1 minute ago') }) test('rewrites a few seconds ago to now', function () { const now = new Date().toISOString() const time = document.createElement('relative-time') time.setAttribute('datetime', now) - assert.equal(time.textContent, 'now') + assert.equal(time.shadowRoot.textContent, 'now') }) test('rewrites a few seconds from now to now', function () { const now = new Date().toISOString() const time = document.createElement('relative-time') time.setAttribute('datetime', now) - assert.equal(time.textContent, 'now') + assert.equal(time.shadowRoot.textContent, 'now') }) test('displays future times as now', function () { const now = new Date(Date.now() + 3 * 1000).toISOString() const time = document.createElement('relative-time') time.setAttribute('datetime', now) - assert.equal(time.textContent, 'now') + assert.equal(time.shadowRoot.textContent, 'now') }) test('displays yesterday', function () { const now = new Date(Date.now() - 60 * 60 * 24 * 1000).toISOString() const time = document.createElement('relative-time') time.setAttribute('datetime', now) - assert.equal(time.textContent, 'yesterday') + assert.equal(time.shadowRoot.textContent, 'yesterday') }) test('displays a day from now', function () { const now = new Date(Date.now() + 60 * 60 * 24 * 1000).toISOString() const time = document.createElement('relative-time') time.setAttribute('datetime', now) - assert.equal(time.textContent, 'tomorrow') + assert.equal(time.shadowRoot.textContent, 'tomorrow') }) test('displays 2 days ago', function () { const now = new Date(Date.now() - 2 * 60 * 60 * 24 * 1000).toISOString() const time = document.createElement('relative-time') time.setAttribute('datetime', now) - assert.equal(time.textContent, '2 days ago') + assert.equal(time.shadowRoot.textContent, '2 days ago') }) test('displays 2 days from now', function () { const now = new Date(Date.now() + 2 * 60 * 60 * 24 * 1000).toISOString() const time = document.createElement('relative-time') time.setAttribute('datetime', now) - assert.equal(time.textContent, 'in 2 days') + assert.equal(time.shadowRoot.textContent, 'in 2 days') }) suite('[threshold]', function () { @@ -161,7 +161,7 @@ suite('relative-time', function () { const time = document.createElement('relative-time') time.setAttribute('lang', 'en-US') time.setAttribute('datetime', now) - assert.match(time.textContent, /on [A-Z][a-z]{2} \d{1,2}/) + assert.match(time.shadowRoot.textContent, /on [A-Z][a-z]{2} \d{1,2}/) }) test('switches to dates after 30 future days with default threshold', function () { @@ -169,7 +169,7 @@ suite('relative-time', function () { const time = document.createElement('relative-time') time.setAttribute('lang', 'en-US') time.setAttribute('datetime', now) - assert.match(time.textContent, /on [A-Z][a-z]{2} \d{1,2}/) + assert.match(time.shadowRoot.textContent, /on [A-Z][a-z]{2} \d{1,2}/) }) test('switches to dates after 1 day with P1D threshold', function () { @@ -178,7 +178,7 @@ suite('relative-time', function () { time.setAttribute('lang', 'en-US') time.setAttribute('threshold', 'P1D') time.setAttribute('datetime', now) - assert.match(time.textContent, /on [A-Z][a-z]{2} \d{1,2}/) + assert.match(time.shadowRoot.textContent, /on [A-Z][a-z]{2} \d{1,2}/) }) test('switches to dates after 30 future days with default threshold', function () { @@ -186,7 +186,7 @@ suite('relative-time', function () { const time = document.createElement('relative-time') time.setAttribute('lang', 'en-US') time.setAttribute('datetime', now) - assert.match(time.textContent, /on [A-Z][a-z]{2} \d{1,2}/) + assert.match(time.shadowRoot.textContent, /on [A-Z][a-z]{2} \d{1,2}/) }) test('switches to dates after 30 future days with P1D threshold', function () { @@ -195,7 +195,7 @@ suite('relative-time', function () { time.setAttribute('lang', 'en-US') time.setAttribute('threshold', 'P1D') time.setAttribute('datetime', now) - assert.match(time.textContent, /on [A-Z][a-z]{2} \d{1,2}/) + assert.match(time.shadowRoot.textContent, /on [A-Z][a-z]{2} \d{1,2}/) }) test('uses `prefix` attribute to customise prefix', function () { @@ -204,7 +204,7 @@ suite('relative-time', function () { time.setAttribute('prefix', 'will happen by') time.setAttribute('lang', 'en-US') time.setAttribute('datetime', now) - assert.match(time.textContent, /will happen by [A-Z][a-z]{2} \d{1,2}/) + assert.match(time.shadowRoot.textContent, /will happen by [A-Z][a-z]{2} \d{1,2}/) }) test('uses `prefix` attribute to customise prefix as empty string', function () { @@ -213,22 +213,22 @@ suite('relative-time', function () { time.setAttribute('prefix', '') time.setAttribute('lang', 'en-US') time.setAttribute('datetime', now) - assert.match(time.textContent, /[A-Z][a-z]{2} \d{1,2}/) + assert.match(time.shadowRoot.textContent, /[A-Z][a-z]{2} \d{1,2}/) }) }) test('ignores malformed dates', function () { const time = document.createElement('relative-time') - time.textContent = 'Jun 30' + time.shadowRoot.textContent = 'Jun 30' time.setAttribute('datetime', 'bogus') - assert.equal(time.textContent, 'Jun 30') + assert.equal(time.shadowRoot.textContent, 'Jun 30') }) test('ignores blank dates', function () { const time = document.createElement('relative-time') - time.textContent = 'Jun 30' + time.shadowRoot.textContent = 'Jun 30' time.setAttribute('datetime', '') - assert.equal(time.textContent, 'Jun 30') + assert.equal(time.shadowRoot.textContent, 'Jun 30') }) test('ignores removed dates', function () { @@ -236,10 +236,10 @@ suite('relative-time', function () { const now = new Date().toISOString() time.setAttribute('datetime', now) - assert.equal(time.textContent, 'now') + assert.equal(time.shadowRoot.textContent, 'now') time.removeAttribute('datetime') - assert.equal(time.textContent, 'now') + assert.equal(time.shadowRoot.textContent, 'now') }) test('sets relative contents when parsed element is upgraded', function () { @@ -249,24 +249,24 @@ suite('relative-time', function () { if ('CustomElements' in window) { window.CustomElements.upgradeSubtree(root) } - assert.equal(root.children[0].textContent, 'now') + assert.equal(root.children[0].shadowRoot.textContent, 'now') }) test('allows for use of custom formats', function () { const time = document.createElement('relative-time') - time.textContent = 'Jun 30' + time.shadowRoot.textContent = 'Jun 30' time.setAttribute('datetime', '2022-01-10T12:00:00') time.setAttribute('format', '%Y') - assert.equal(time.textContent, '2022') + assert.equal(time.shadowRoot.textContent, '2022') }) test('ignores blank formats', function () { const time = document.createElement('relative-time') - time.textContent = 'Jun 30' + time.shadowRoot.textContent = 'Jun 30' time.setAttribute('datetime', '2022-01-10T12:00:00') time.setAttribute('lang', 'en-US') time.setAttribute('format', '') - assert.equal(time.textContent, 'on Jan 10') + assert.equal(time.shadowRoot.textContent, 'on Jan 10') }) const esLangSupport = (function () { @@ -303,7 +303,7 @@ suite('relative-time', function () { const time = document.createElement('relative-time') time.setAttribute('tense', 'past') time.setAttribute('datetime', now) - assert.equal(time.textContent, '10 years ago') + assert.equal(time.shadowRoot.textContent, '10 years ago') }) test('rewrites from now past datetime to minutes ago', function () { @@ -311,7 +311,7 @@ suite('relative-time', function () { const time = document.createElement('relative-time') time.setAttribute('tense', 'past') time.setAttribute('datetime', now) - assert.equal(time.textContent, '3 minutes ago') + assert.equal(time.shadowRoot.textContent, '3 minutes ago') }) test('rewrites a few seconds ago to now', function () { @@ -319,7 +319,7 @@ suite('relative-time', function () { const time = document.createElement('relative-time') time.setAttribute('tense', 'past') time.setAttribute('datetime', now) - assert.equal(time.textContent, 'now') + assert.equal(time.shadowRoot.textContent, 'now') }) test('displays future times as now', function () { @@ -327,7 +327,7 @@ suite('relative-time', function () { const time = document.createElement('relative-time') time.setAttribute('tense', 'past') time.setAttribute('datetime', now) - assert.equal(time.textContent, 'now') + assert.equal(time.shadowRoot.textContent, 'now') }) test('sets relative contents when parsed element is upgraded', function () { @@ -337,7 +337,7 @@ suite('relative-time', function () { if ('CustomElements' in window) { window.CustomElements.upgradeSubtree(root) } - assert.equal(root.children[0].textContent, 'now') + assert.equal(root.children[0].shadowRoot.textContent, 'now') }) test('rewrites from now past datetime to months ago', function () { @@ -345,7 +345,7 @@ suite('relative-time', function () { const time = document.createElement('relative-time') time.setAttribute('tense', 'past') time.setAttribute('datetime', now) - assert.equal(time.textContent, '3 months ago') + assert.equal(time.shadowRoot.textContent, '3 months ago') }) test('rewrites relative-time datetimes < 18 months as "months ago"', function () { @@ -354,7 +354,7 @@ suite('relative-time', function () { const timeElement = document.createElement('relative-time') timeElement.setAttribute('tense', 'past') timeElement.setAttribute('datetime', then) - assert.equal(timeElement.textContent, '15 months ago') + assert.equal(timeElement.shadowRoot.textContent, '15 months ago') }) test('rewrites relative-time datetimes >= 18 months as "years ago"', function () { @@ -363,7 +363,7 @@ suite('relative-time', function () { const timeElement = document.createElement('relative-time') timeElement.setAttribute('tense', 'past') timeElement.setAttribute('datetime', then) - assert.equal(timeElement.textContent, '2 years ago') + assert.equal(timeElement.shadowRoot.textContent, '2 years ago') }) test('micro formats years', function () { @@ -372,7 +372,7 @@ suite('relative-time', function () { time.setAttribute('tense', 'past') time.setAttribute('datetime', now) time.setAttribute('format', 'micro') - assert.equal(time.textContent, '10y') + assert.equal(time.shadowRoot.textContent, '10y') }) test('micro formats future times', function () { @@ -381,7 +381,7 @@ suite('relative-time', function () { time.setAttribute('tense', 'past') time.setAttribute('datetime', now) time.setAttribute('format', 'micro') - assert.equal(time.textContent, '1m') + assert.equal(time.shadowRoot.textContent, '1m') }) test('micro formats hours', function () { @@ -390,7 +390,7 @@ suite('relative-time', function () { time.setAttribute('tense', 'past') time.setAttribute('datetime', now) time.setAttribute('format', 'micro') - assert.equal(time.textContent, '1h') + assert.equal(time.shadowRoot.textContent, '1h') }) test('micro formats days', function () { @@ -399,7 +399,7 @@ suite('relative-time', function () { time.setAttribute('tense', 'past') time.setAttribute('datetime', now) time.setAttribute('format', 'micro') - assert.equal(time.textContent, '1d') + assert.equal(time.shadowRoot.textContent, '1d') }) }) @@ -409,7 +409,7 @@ suite('relative-time', function () { const time = document.createElement('relative-time') time.setAttribute('tense', 'future') time.setAttribute('datetime', now) - assert.equal(time.textContent, 'in 10 years') + assert.equal(time.shadowRoot.textContent, 'in 10 years') }) test('rewrites from now future datetime to minutes ago', function () { @@ -417,7 +417,7 @@ suite('relative-time', function () { const time = document.createElement('relative-time') time.setAttribute('tense', 'future') time.setAttribute('datetime', now) - assert.equal(time.textContent, 'in 3 minutes') + assert.equal(time.shadowRoot.textContent, 'in 3 minutes') }) test('rewrites a few seconds from now to now', function () { @@ -425,7 +425,7 @@ suite('relative-time', function () { const time = document.createElement('relative-time') time.setAttribute('tense', 'future') time.setAttribute('datetime', now) - assert.equal(time.textContent, 'now') + assert.equal(time.shadowRoot.textContent, 'now') }) test('displays past times as now', function () { @@ -433,7 +433,7 @@ suite('relative-time', function () { const time = document.createElement('relative-time') time.setAttribute('tense', 'future') time.setAttribute('datetime', now) - assert.equal(time.textContent, 'now') + assert.equal(time.shadowRoot.textContent, 'now') }) test('sets relative contents when parsed element is upgraded', function () { @@ -443,7 +443,7 @@ suite('relative-time', function () { if ('CustomElements' in window) { window.CustomElements.upgradeSubtree(root) } - assert.equal(root.children[0].textContent, 'now') + assert.equal(root.children[0].shadowRoot.textContent, 'now') }) test('micro formats years', function () { @@ -452,7 +452,7 @@ suite('relative-time', function () { time.setAttribute('tense', 'future') time.setAttribute('datetime', now) time.setAttribute('format', 'micro') - assert.equal(time.textContent, '10y') + assert.equal(time.shadowRoot.textContent, '10y') }) test('micro formats past times', function () { @@ -461,7 +461,7 @@ suite('relative-time', function () { time.setAttribute('tense', 'future') time.setAttribute('datetime', now) time.setAttribute('format', 'micro') - assert.equal(time.textContent, '1m') + assert.equal(time.shadowRoot.textContent, '1m') }) test('micro formats hours', function () { @@ -470,7 +470,7 @@ suite('relative-time', function () { time.setAttribute('tense', 'future') time.setAttribute('datetime', now) time.setAttribute('format', 'micro') - assert.equal(time.textContent, '1h') + assert.equal(time.shadowRoot.textContent, '1h') }) test('micro formats days', function () { @@ -479,7 +479,7 @@ suite('relative-time', function () { time.setAttribute('tense', 'future') time.setAttribute('datetime', now) time.setAttribute('format', 'micro') - assert.equal(time.textContent, '1d') + assert.equal(time.shadowRoot.textContent, '1d') }) }) @@ -493,7 +493,7 @@ suite('relative-time', function () { time.setAttribute('month', 'short') time.setAttribute('year', 'numeric') - assert.include(['Dec 31, 1969', '31 Dec 1969', 'Jan 1, 1970', '1 Jan 1970'], time.textContent) + assert.include(['Dec 31, 1969', '31 Dec 1969', 'Jan 1, 1970', '1 Jan 1970'], time.shadowRoot.textContent) }) test('getFormattedDate with empty year attribute', function () { @@ -505,7 +505,7 @@ suite('relative-time', function () { time.setAttribute('day', 'numeric') time.setAttribute('month', 'short') - assert.include(['Dec 31', '31 Dec', 'Jan 1', '1 Jan'], time.textContent) + assert.include(['Dec 31', '31 Dec', 'Jan 1', '1 Jan'], time.shadowRoot.textContent) }) test('getFormattedDate with only time attributes', function () { @@ -532,7 +532,7 @@ suite('relative-time', function () { time.setAttribute('year', 'numeric') time.setAttribute('threshold', '0') time.setAttribute('prefix', '') - assert.equal(time.textContent, '') + assert.equal(time.shadowRoot.textContent, '') }) test('can provide just year', function () { @@ -543,7 +543,7 @@ suite('relative-time', function () { time.setAttribute('year', 'numeric') time.setAttribute('threshold', '0') time.setAttribute('prefix', '') - assert.include(['1969', '1970'], time.textContent) + assert.include(['1969', '1970'], time.shadowRoot.textContent) }) test('updates format when attributes change', function () { @@ -555,10 +555,10 @@ suite('relative-time', function () { time.setAttribute('month', '') time.setAttribute('year', 'numeric') - assert.include(['1969', '1970'], time.textContent) + assert.include(['1969', '1970'], time.shadowRoot.textContent) time.setAttribute('year', '2-digit') - assert.include(['69', '70'], time.textContent) + assert.include(['69', '70'], time.shadowRoot.textContent) }) test('sets formatted contents when parsed element is upgraded', function () { @@ -568,7 +568,7 @@ suite('relative-time', function () { if ('CustomElements' in window) { window.CustomElements.upgradeSubtree(root) } - assert.include(['1969', '1970'], root.children[0].textContent) + assert.include(['1969', '1970'], root.children[0].shadowRoot.textContent) }) ;('Intl' in window ? test : test.skip)('displays time zone name', function () { const root = document.createElement('div') @@ -577,8 +577,8 @@ suite('relative-time', function () { if ('CustomElements' in window) { window.CustomElements.upgradeSubtree(root) } - assert.match(root.children[0].textContent, /^\d{1,2} (\w+([+-]\d+)?)$/) - assert.equal(root.children[0].textContent, '0 GMT+4') + assert.match(root.children[0].shadowRoot.textContent, /^\d{1,2} (\w+([+-]\d+)?)$/) + assert.equal(root.children[0].shadowRoot.textContent, '0 GMT+4') }) test('updates time zone when the `time-zone-name` attribute changes', function () { @@ -592,11 +592,11 @@ suite('relative-time', function () { el.setAttribute('prefix', '') fixture.appendChild(el) - assert.equal(el.textContent, '1/1/1970, GMT+4') + assert.equal(el.shadowRoot.textContent, '1/1/1970, GMT+4') el.setAttribute('time-zone-name', 'long') - assert.equal(el.textContent, '1/1/1970, Gulf Standard Time') + assert.equal(el.shadowRoot.textContent, '1/1/1970, Gulf Standard Time') }) }) @@ -723,7 +723,7 @@ suite('relative-time', function () { time.setAttribute('tense', tense) time.setAttribute('datetime', datetime) time.setAttribute('format', format) - assert.equal(time.textContent, expected) + assert.equal(time.shadowRoot.textContent, expected) }) } }) diff --git a/test/time-ago.js b/test/time-ago.js index 7728f27..01ef85c 100644 --- a/test/time-ago.js +++ b/test/time-ago.js @@ -35,28 +35,28 @@ suite('time-ago', function () { const now = new Date(Date.now() - 10 * 365 * 24 * 60 * 60 * 1000).toISOString() const time = document.createElement('time-ago') time.setAttribute('datetime', now) - assert.equal(time.textContent, '10 years ago') + assert.equal(time.shadowRoot.textContent, '10 years ago') }) test('rewrites from now past datetime to minutes ago', function () { const now = new Date(Date.now() - 3 * 60 * 1000).toISOString() const time = document.createElement('time-ago') time.setAttribute('datetime', now) - assert.equal(time.textContent, '3 minutes ago') + assert.equal(time.shadowRoot.textContent, '3 minutes ago') }) test('rewrites a few seconds ago to now', function () { const now = new Date().toISOString() const time = document.createElement('time-ago') time.setAttribute('datetime', now) - assert.equal(time.textContent, 'now') + assert.equal(time.shadowRoot.textContent, 'now') }) test('displays future times as now', function () { const now = new Date(Date.now() + 3 * 1000).toISOString() const time = document.createElement('time-ago') time.setAttribute('datetime', now) - assert.equal(time.textContent, 'now') + assert.equal(time.shadowRoot.textContent, 'now') }) test('sets relative contents when parsed element is upgraded', function () { @@ -66,14 +66,14 @@ suite('time-ago', function () { if ('CustomElements' in window) { window.CustomElements.upgradeSubtree(root) } - assert.equal(root.children[0].textContent, 'now') + assert.equal(root.children[0].shadowRoot.textContent, 'now') }) test('rewrites from now past datetime to months ago', function () { const now = new Date(Date.now() - 3 * 30 * 24 * 60 * 60 * 1000).toISOString() const time = document.createElement('time-ago') time.setAttribute('datetime', now) - assert.equal(time.textContent, '3 months ago') + assert.equal(time.shadowRoot.textContent, '3 months ago') }) test('rewrites time-ago datetimes < 18months as "months ago"', function () { @@ -81,7 +81,7 @@ suite('time-ago', function () { const then = new Date(2018, 9, 1).toISOString() const timeElement = document.createElement('time-ago') timeElement.setAttribute('datetime', then) - assert.equal(timeElement.textContent, '15 months ago') + assert.equal(timeElement.shadowRoot.textContent, '15 months ago') }) test('rewrites time-ago datetimes >= 18 months as "years ago"', function () { @@ -89,7 +89,7 @@ suite('time-ago', function () { const then = new Date(2018, 6, 1).toISOString() const timeElement = document.createElement('time-ago') timeElement.setAttribute('datetime', then) - assert.equal(timeElement.textContent, '2 years ago') + assert.equal(timeElement.shadowRoot.textContent, '2 years ago') }) test('micro formats years', function () { @@ -97,7 +97,7 @@ suite('time-ago', function () { const time = document.createElement('time-ago') time.setAttribute('datetime', now) time.setAttribute('format', 'micro') - assert.equal(time.textContent, '10y') + assert.equal(time.shadowRoot.textContent, '10y') }) test('micro formats future times', function () { @@ -105,7 +105,7 @@ suite('time-ago', function () { const time = document.createElement('time-ago') time.setAttribute('datetime', now) time.setAttribute('format', 'micro') - assert.equal(time.textContent, '1m') + assert.equal(time.shadowRoot.textContent, '1m') }) test('micro formats hours', function () { @@ -113,7 +113,7 @@ suite('time-ago', function () { const time = document.createElement('time-ago') time.setAttribute('datetime', now) time.setAttribute('format', 'micro') - assert.equal(time.textContent, '1h') + assert.equal(time.shadowRoot.textContent, '1h') }) test('micro formats days', function () { @@ -121,6 +121,6 @@ suite('time-ago', function () { const time = document.createElement('time-ago') time.setAttribute('datetime', now) time.setAttribute('format', 'micro') - assert.equal(time.textContent, '1d') + assert.equal(time.shadowRoot.textContent, '1d') }) }) diff --git a/test/time-until.js b/test/time-until.js index affbbda..83b940d 100644 --- a/test/time-until.js +++ b/test/time-until.js @@ -6,28 +6,28 @@ suite('time-until', function () { const now = new Date(Date.now() + 10 * 365 * 24 * 60 * 60 * 1000).toISOString() const time = document.createElement('time-until') time.setAttribute('datetime', now) - assert.equal(time.textContent, 'in 10 years') + assert.equal(time.shadowRoot.textContent, 'in 10 years') }) test('rewrites from now future datetime to minutes ago', function () { const now = new Date(Date.now() + 3 * 60 * 1000).toISOString() const time = document.createElement('time-until') time.setAttribute('datetime', now) - assert.equal(time.textContent, 'in 3 minutes') + assert.equal(time.shadowRoot.textContent, 'in 3 minutes') }) test('rewrites a few seconds from now to now', function () { const now = new Date().toISOString() const time = document.createElement('time-until') time.setAttribute('datetime', now) - assert.equal(time.textContent, 'now') + assert.equal(time.shadowRoot.textContent, 'now') }) test('displays past times as now', function () { const now = new Date(Date.now() + 3 * 1000).toISOString() const time = document.createElement('time-until') time.setAttribute('datetime', now) - assert.equal(time.textContent, 'now') + assert.equal(time.shadowRoot.textContent, 'now') }) test('sets relative contents when parsed element is upgraded', function () { @@ -37,7 +37,7 @@ suite('time-until', function () { if ('CustomElements' in window) { window.CustomElements.upgradeSubtree(root) } - assert.equal(root.children[0].textContent, 'now') + assert.equal(root.children[0].shadowRoot.textContent, 'now') }) test('micro formats years', function () { @@ -45,7 +45,7 @@ suite('time-until', function () { const time = document.createElement('time-until') time.setAttribute('datetime', now) time.setAttribute('format', 'micro') - assert.equal(time.textContent, '10y') + assert.equal(time.shadowRoot.textContent, '10y') }) test('micro formats past times', function () { @@ -53,7 +53,7 @@ suite('time-until', function () { const time = document.createElement('time-until') time.setAttribute('datetime', now) time.setAttribute('format', 'micro') - assert.equal(time.textContent, '1m') + assert.equal(time.shadowRoot.textContent, '1m') }) test('micro formats hours', function () { @@ -61,7 +61,7 @@ suite('time-until', function () { const time = document.createElement('time-until') time.setAttribute('datetime', now) time.setAttribute('format', 'micro') - assert.equal(time.textContent, '1h') + assert.equal(time.shadowRoot.textContent, '1h') }) test('micro formats days', function () { @@ -69,6 +69,6 @@ suite('time-until', function () { const time = document.createElement('time-until') time.setAttribute('datetime', now) time.setAttribute('format', 'micro') - assert.equal(time.textContent, '1d') + assert.equal(time.shadowRoot.textContent, '1d') }) })