add Promise support to the built-in observable property creators

electrovir · Jul 27, 2023 · 7b47035 · 7b47035
1 parent 8395822
commit 7b47035
Show file tree

Hide file tree

Showing 4 changed files with 225 additions and 59 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "16.0.1",
+    "version": "16.0.2",
     "keywords": [
         "custom",
         "web",
@@ -39,15 +39,15 @@
         "test:types": "tsc --noEmit"
     },
     "dependencies": {
-        "@augment-vir/browser": "^15.6.1",
-        "@augment-vir/common": "^15.6.1",
+        "@augment-vir/browser": "^16.0.0",
+        "@augment-vir/common": "^16.0.0",
         "lit": "2.7.6",
         "lit-css-vars": "^2.0.3",
         "object-shape-tester": "^0.4.0"
     },
     "devDependencies": {
-        "@augment-vir/browser-testing": "^15.6.1",
-        "@augment-vir/node-js": "^15.6.1",
+        "@augment-vir/browser-testing": "^16.0.0",
+        "@augment-vir/node-js": "^16.0.0",
         "@istanbuljs/nyc-config-typescript": "^1.0.2",
         "@open-wc/testing": "^3.2.0",
         "@types/chai": "^4.3.5",
@@ -77,7 +77,7 @@
         "ts-node": "^10.9.1",
         "type-fest": "^4.0.0",
         "typescript": "~5.1.6",
-        "virmator": "^7.2.5",
+        "virmator": "^7.3.0",
         "vite": "^4.4.7",
         "vite-tsconfig-paths": "^4.2.0"
     },

diff --git a/src/declarative-element/properties/observable-property/create-observable-property.test.ts b/src/declarative-element/properties/observable-property/create-observable-property.test.ts
@@ -1,7 +1,12 @@
-import {randomBoolean} from '@augment-vir/browser';
+import {randomBoolean, randomInteger} from '@augment-vir/browser';
 import {assertTypeOf, typedAssertInstanceOf} from '@augment-vir/browser-testing';
+import {createDeferredPromiseWrapper} from '@augment-vir/common';
 import {assert, fixture as renderFixture, waitUntil} from '@open-wc/testing';
 import {createObservablePropertyWithSetter, defineElement, html} from '../../..';
+import {
+    createObservablePropertyWithIntervalUpdate,
+    createObservablePropertyWithUpdater,
+} from './create-observable-property';
 
 describe(createObservablePropertyWithSetter.name, () => {
     it('should cause re-renders', async () => {
@@ -121,3 +126,116 @@ describe(createObservablePropertyWithSetter.name, () => {
         });
     });
 });
+
+describe(createObservablePropertyWithUpdater.name, () => {
+    it('has proper types', () => {
+        const asyncObservableProperty = createObservablePropertyWithUpdater({
+            initInput: undefined,
+            async updateCallback() {
+                return Promise.resolve(5);
+            },
+        });
+
+        assertTypeOf(asyncObservableProperty.latestResolvedValue).toEqualTypeOf<
+            number | undefined
+        >();
+        assertTypeOf(asyncObservableProperty.value).toEqualTypeOf<number | Promise<number>>();
+
+        const syncObservableProperty = createObservablePropertyWithUpdater({
+            initInput: undefined,
+            updateCallback() {
+                return 5;
+            },
+        });
+
+        assertTypeOf(syncObservableProperty.latestResolvedValue).toEqualTypeOf<number>();
+        assertTypeOf(syncObservableProperty.value).toEqualTypeOf<number>();
+    });
+
+    it('updates .value with a promise and then the resolved value', async () => {
+        const value = randomInteger({min: 0, max: 100});
+
+        const asyncObservableProperty = createObservablePropertyWithUpdater({
+            initInput: undefined,
+            async updateCallback() {
+                return await Promise.resolve(value);
+            },
+        });
+
+        assert.instanceOf(asyncObservableProperty.value, Promise);
+        assert.isUndefined(asyncObservableProperty.latestResolvedValue);
+
+        await asyncObservableProperty.value;
+
+        assert.strictEqual(asyncObservableProperty.value, value);
+        assert.strictEqual(asyncObservableProperty.latestResolvedValue, value);
+    });
+
+    it('never uses promises when the updater is synchronous', () => {
+        const value = randomInteger({min: 0, max: 100});
+
+        const asyncObservableProperty = createObservablePropertyWithUpdater({
+            initInput: undefined,
+            updateCallback() {
+                return value;
+            },
+        });
+
+        assert.strictEqual(asyncObservableProperty.value, value);
+        assert.strictEqual(asyncObservableProperty.latestResolvedValue, value);
+    });
+});
+
+describe(createObservablePropertyWithIntervalUpdate.name, () => {
+    it('uses promises when the updater is async', async () => {
+        const deferredPromiseWrapper = createDeferredPromiseWrapper<number>();
+        const value = randomInteger({min: 0, max: 100});
+        let updateCount = 0;
+
+        const asyncObservableProperty = createObservablePropertyWithIntervalUpdate({
+            initInput: undefined,
+            async updateCallback() {
+                updateCount++;
+                return deferredPromiseWrapper.promise;
+            },
+            intervalMs: 100,
+        });
+
+        assert.instanceOf(asyncObservableProperty.value, Promise);
+        assert.isUndefined(asyncObservableProperty.latestResolvedValue);
+
+        await waitUntil(() => updateCount >= 2);
+
+        assert.instanceOf(asyncObservableProperty.value, Promise);
+        assert.isUndefined(asyncObservableProperty.latestResolvedValue);
+
+        deferredPromiseWrapper.resolve(value);
+
+        await asyncObservableProperty.value;
+
+        assert.strictEqual(asyncObservableProperty.value, value);
+        assert.strictEqual(asyncObservableProperty.latestResolvedValue, value);
+    });
+
+    it('does not use promises when the updater is sync', async () => {
+        const value = randomInteger({min: 0, max: 100});
+        let updateCount = 0;
+
+        const asyncObservableProperty = createObservablePropertyWithIntervalUpdate({
+            initInput: undefined,
+            updateCallback() {
+                updateCount++;
+                return value + updateCount;
+            },
+            intervalMs: 100,
+        });
+
+        assert.strictEqual(asyncObservableProperty.value, value + updateCount);
+        assert.strictEqual(asyncObservableProperty.latestResolvedValue, value + updateCount);
+
+        await waitUntil(() => updateCount >= 2);
+
+        assert.strictEqual(asyncObservableProperty.value, value + updateCount);
+        assert.strictEqual(asyncObservableProperty.latestResolvedValue, value + updateCount);
+    });
+});