From 0f934321ed49649f80cc2db1de6f9b1844afe412 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kristj=C3=A1n=20Oddsson?= <koddsson@gmail.com>
Date: Wed, 5 May 2021 15:00:09 +0100
Subject: [PATCH 1/3] Add test for `time-zone-name` attribute

---
 test/local-time.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/test/local-time.js b/test/local-time.js
index 425ab45..7c8a4f9 100644
--- a/test/local-time.js
+++ b/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+1')
+  })
+
+  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+1')
+
+    el.setAttribute('time-zone-name', 'long')
+
+    assert.equal(el.textContent, '1/1/1970, GMT+01:00')
   })
 })

From f0c47d7e5fe8b935b6a8519ae34abd74c69fe898 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kristj=C3=A1n=20Oddsson?= <koddsson@gmail.com>
Date: Wed, 5 May 2021 15:00:22 +0100
Subject: [PATCH 2/3] Add `time-zone-name` to observed attributes list

---
 src/extended-time-element.ts | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/extended-time-element.ts b/src/extended-time-element.ts
index d78a057..4da7c58 100644
--- a/src/extended-time-element.ts
+++ b/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 {

From 0ee29682f78592520fc8098e23b9f5389f3c0565 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kristj=C3=A1n=20Oddsson?= <koddsson@gmail.com>
Date: Thu, 6 May 2021 09:55:51 +0100
Subject: [PATCH 3/3] Pin the browser timezone to a specific timezone

This is useful since developers (and CI) will run these tests in
different timezones.
---
 package.json       | 2 +-
 test/local-time.js | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index c0d43b3..87dc30f 100644
--- a/package.json
+++ b/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",
diff --git a/test/local-time.js b/test/local-time.js
index 7c8a4f9..c5f36d4 100644
--- a/test/local-time.js
+++ b/test/local-time.js
@@ -95,7 +95,7 @@ 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+1')
+    assert.equal(root.children[0].textContent, '0 GMT+4')
   })
 
   test('updates time zone when the `time-zone-name` attribute changes', function () {
@@ -104,10 +104,10 @@ suite('local-time', function () {
     el.setAttribute('time-zone-name', 'short')
 
     fixture.appendChild(el)
-    assert.equal(el.textContent, '1/1/1970, GMT+1')
+    assert.equal(el.textContent, '1/1/1970, GMT+4')
 
     el.setAttribute('time-zone-name', 'long')
 
-    assert.equal(el.textContent, '1/1/1970, GMT+01:00')
+    assert.equal(el.textContent, '1/1/1970, Gulf Standard Time')
   })
 })