Merge pull request #148 from github/observe-time-zone-name-attribute

Observe time zone name attribute

package.json

@@ -16,7 +16,7 @@
     "build": "tsc && rollup -c",
     "prepublishOnly": "npm run build",
     "pretest": "npm run build",
-    "test": "karma start ./test/karma.config.cjs",
+    "test": "TZ=Asia/Dubai karma start ./test/karma.config.cjs",
     "postpublish": "npm publish --ignore-scripts --@github:registry='https://npm.pkg.github.com'"
   },
   "prettier": "@github/prettier-config",

src/extended-time-element.ts

@@ -4,7 +4,20 @@ const datetimes = new WeakMap()
 
 export default class ExtendedTimeElement extends HTMLElement {
   static get observedAttributes(): string[] {
-    return ['datetime', 'day', 'format', 'lang', 'hour', 'minute', 'month', 'second', 'title', 'weekday', 'year']
+    return [
+      'datetime',
+      'day',
+      'format',
+      'lang',
+      'hour',
+      'minute',
+      'month',
+      'second',
+      'title',
+      'weekday',
+      'year',
+      'time-zone-name'
+    ]
   }
 
   connectedCallback(): void {

test/local-time.js

@@ -1,4 +1,14 @@
 suite('local-time', function () {
+  let fixture
+  suiteSetup(() => {
+    fixture = document.createElement('div')
+    document.body.appendChild(fixture)
+  })
+
+  teardown(() => {
+    fixture.innerHTML = ''
+  })
+
   test('null getFormattedDate when datetime missing', function () {
     const time = document.createElement('local-time')
     time.setAttribute('format', '%Y-%m-%dT%H:%M:%SZ')
@@ -85,5 +95,19 @@ suite('local-time', function () {
       window.CustomElements.upgradeSubtree(root)
     }
     assert.match(root.children[0].textContent, /^\d{1,2} (\w+([+-]\d+)?)$/)
+    assert.equal(root.children[0].textContent, '0 GMT+4')
+  })
+
+  test('updates time zone when the `time-zone-name` attribute changes', function () {
+    const el = document.createElement('local-time')
+    el.setAttribute('datetime', '1970-01-01T00:00:00.000-08:00')
+    el.setAttribute('time-zone-name', 'short')
+
+    fixture.appendChild(el)
+    assert.equal(el.textContent, '1/1/1970, GMT+4')
+
+    el.setAttribute('time-zone-name', 'long')
+
+    assert.equal(el.textContent, '1/1/1970, Gulf Standard Time')
   })
 })