xmlui 0.10.13 → 0.10.15

package/dist/scripts/src/components/AppState/AppState.spec.js

@@ -0,0 +1,268 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../testing/fixtures");
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+(0, fixtures_1.test)("initializes with default props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <Fragment>
+      <AppState id="appState" />
+      <Text testId="stateValue">|{JSON.stringify(appState.value)}|</Text>
+    </Fragment>
+  `);
+    // AppState should initialize with default bucket and display the correct value
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toHaveText("||");
+}));
+(0, fixtures_1.test)("initializes with initial state value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <Fragment>
+      <AppState id="appState" initialValue="{{ mode: true }}"/>
+      <Text testId="stateValue">|{appState.value.mode}|</Text>
+    </Fragment>
+  `);
+    // AppState should initialize with default bucket and display the correct value
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toHaveText("|true|");
+}));
+(0, fixtures_1.test)("initializes with provided bucket name and no initial value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+    yield initTestBed(`
+    <Fragment>
+      <AppState id="appState" bucket="settings" />
+      <Text testId="stateValue">|{JSON.stringify(appState.value)}|</Text>
+    </Fragment>
+  `);
+    // AppState should initialize with default bucket and display the correct value
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toHaveText("||");
+}));
+(0, fixtures_1.test)("initializes with bucket name and initial state value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <Fragment>
+      <AppState id="appState" bucket="settings" initialValue="{{ mode: true }}"/>
+      <Text testId="stateValue">|{appState.value.mode}|</Text>
+    </Fragment>
+  `);
+    // AppState should initialize with default bucket and display the correct value
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toHaveText("|true|");
+}));
+(0, fixtures_1.test)("updates state using the update API", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <Fragment>
+      <AppState id="appState" initialValue="{{ counter: 0 }}" />
+      <Button testId="updateBtn" onClick="appState.update({ counter: appState.value.counter + 1 })">
+        Increment
+      </Button>
+      <Text testId="stateValue">{JSON.stringify(appState.value)}</Text>
+    </Fragment>
+  `);
+    // Check initial state
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toHaveText('{"counter":0}');
+    // Update state by clicking button
+    yield page.getByTestId("updateBtn").click();
+    // Check updated state
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toHaveText('{"counter":1}');
+}));
+(0, fixtures_1.test)("updates state using the update API (using backet name)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <Fragment>
+      <AppState id="appState" bucket="settings" initialValue="{{ counter: 0 }}" />
+      <Button testId="updateBtn" onClick="appState.update({ counter: appState.value.counter + 1 })">
+        Increment
+      </Button>
+      <Text testId="stateValue">{JSON.stringify(appState.value)}</Text>
+    </Fragment>
+  `);
+    // Check initial state
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toHaveText('{"counter":0}');
+    // Update state by clicking button
+    yield page.getByTestId("updateBtn").click();
+    // Check updated state
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toHaveText('{"counter":1}');
+}));
+// =============================================================================
+// STATE SHARING TESTS
+// =============================================================================
+(0, fixtures_1.test)("shares state between multiple instances with the default bucket", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+    yield initTestBed(`
+    <Fragment>
+      <AppState id="appState1" initialValue="{{ counter: 0 }}" />
+      <AppState id="appState2" />
+      <Button testId="updateBtn" onClick="appState1.update({ counter: appState1.value.counter + 1 })">
+        Increment
+      </Button>
+      <Text testId="stateValue1">{JSON.stringify(appState1.value)}</Text>
+      <Text testId="stateValue2">{JSON.stringify(appState2.value)}</Text>
+    </Fragment>
+  `);
+    // Check initial state in both instances
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue1")).toHaveText('{"counter":0}');
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue2")).toHaveText('{"counter":0}');
+    // Update state through first instance
+    yield page.getByTestId("updateBtn").click();
+    // Both instances should reflect the change
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue1")).toHaveText('{"counter":1}');
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue2")).toHaveText('{"counter":1}');
+}));
+(0, fixtures_1.test)("shares state between multiple instances with a specific bucket", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+    yield initTestBed(`
+    <Fragment>
+      <AppState id="appState1" initialValue="{{ counter: 0 }}" bucket="bucket1" />
+      <AppState id="appState2" bucket="bucket1" />
+      <Button testId="updateBtn" onClick="appState1.update({ counter: appState1.value.counter + 1 })">
+        Increment
+      </Button>
+      <Text testId="stateValue1">{JSON.stringify(appState1.value)}</Text>
+      <Text testId="stateValue2">{JSON.stringify(appState2.value)}</Text>
+    </Fragment>
+  `);
+    // Check initial state in both instances
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue1")).toHaveText('{"counter":0}');
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue2")).toHaveText('{"counter":0}');
+    // Update state through first instance
+    yield page.getByTestId("updateBtn").click();
+    // Both instances should reflect the change
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue1")).toHaveText('{"counter":1}');
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue2")).toHaveText('{"counter":1}');
+}));
+(0, fixtures_1.test)("maintains separate states for different buckets", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <Fragment>
+      <AppState id="appState1" initialValue="{{ counter: 0 }}" bucket="bucket1" />
+      <AppState id="appState2" initialValue="{{ counter: 0 }}" bucket="bucket2" />
+      <Button testId="updateBtn" onClick="appState1.update({ counter: appState1.value.counter + 1 })">
+        Increment
+      </Button>
+      <Text testId="stateValue1">{JSON.stringify(appState1.value)}</Text>
+      <Text testId="stateValue2">{JSON.stringify(appState2.value)}</Text>
+    </Fragment>
+  `);
+    // Check initial state in both instances
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue1")).toHaveText('{"counter":0}');
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue2")).toHaveText('{"counter":0}');
+    // Update state through first instance
+    yield page.getByTestId("updateBtn").click();
+    // Only the first instance should reflect the change
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue1")).toHaveText('{"counter":1}');
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue2")).toHaveText('{"counter":0}');
+}));
+// =============================================================================
+// EDGE CASE TESTS
+// =============================================================================
+(0, fixtures_1.test)("handles undefined initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <Fragment>
+      <AppState ref="appState" initialValue="{undefined}" />
+      <Text testId="stateValue">|{JSON.stringify(appState.value)}|</Text>
+    </Fragment>
+  `);
+    // Should not throw error with undefined initialValue
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toHaveText("||");
+}));
+(0, fixtures_1.test)("handles complex nested state updates correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <Fragment>
+      <AppState
+        id="appState"
+        initialValue="{{ user: { name: 'John', profile: { age: 30, roles: ['admin'] } } }}"
+      />
+      <Button testId="updateBtn" 
+        onClick="appState.update({ 
+          user: { ...appState.value.user, 
+          profile: { ...appState.value.user.profile, age: 31 } } 
+        })">
+        Update Age
+      </Button>
+      <Text testId="stateValue">{JSON.stringify(appState.value)}</Text>
+    </Fragment>
+  `);
+    // Check initial state
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toContainText('"age":30');
+    // Update nested property
+    yield page.getByTestId("updateBtn").click();
+    // Check updated nested property
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toContainText('"age":31');
+    // Check other properties remain unchanged
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toContainText('"name":"John"');
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toContainText('"roles":["admin"]');
+}));
+// =============================================================================
+// PERFORMANCE TESTS
+// =============================================================================
+(0, fixtures_1.test)("handles multiple rapid state updates efficiently", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <Fragment var.clickCount="{0}">
+      <AppState id="appState" initialValue="{{ counter: 0 }}" />
+      <Button 
+        testId="updateBtn" 
+        onClick="appState.update({ counter: appState.value.counter + 1 }); clickCount = clickCount + 1;">
+        Increment
+      </Button>
+      <Text testId="stateValue">{JSON.stringify(appState.value)}</Text>
+      <Text testId="clickCount">{clickCount}</Text>
+    </Fragment>
+  `);
+    // Perform multiple rapid clicks
+    for (let i = 0; i < 5; i++) {
+        yield page.getByTestId("updateBtn").click();
+    }
+    // Verify click count
+    yield (0, fixtures_1.expect)(page.getByTestId("clickCount")).toHaveText("5");
+    // Verify state was updated correctly
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toContainText('{"counter":5}');
+}));
+// =============================================================================
+// INTEGRATION TESTS
+// =============================================================================
+(0, fixtures_1.test)("integrates with other components that consume app state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+    // TODO: review these Copilot-created tests
+    yield initTestBed(`
+    <Fragment>
+      <AppState id="appState" initialValue="{{ theme: 'light', fontSize: 14 }}" />
+      <Fragment var.currentTheme="initial">
+        <Button testId="themeBtn" onClick="currentTheme = appState.value.theme">
+          Get Theme
+        </Button>
+        <Text testId="themeValue">{currentTheme}</Text>
+      </Fragment>
+    </Fragment>
+  `);
+    // Get the theme value by clicking button
+    yield page.getByTestId("themeBtn").click();
+    // Check that the value was correctly retrieved from AppState
+    yield (0, fixtures_1.expect)(page.getByTestId("themeValue")).toHaveText("light");
+}));
+(0, fixtures_1.test)("works correctly when wrapped in conditional rendering", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+    // TODO: review these Copilot-created tests
+    yield initTestBed(`
+    <Fragment var.showState="{false}">
+      <Fragment when="{showState}">
+        <Text>AppState is visible</Text>
+        <AppState id="appState" initialValue="{{ visible: true }}" />
+      </Fragment>
+      <Button testId="toggleBtn" onClick="showState = !showState">Toggle AppState</Button>
+      <Text testId="visibilityStatus">{appState.value.visible ? 'Visible' : 'Hidden'}</Text>
+    </Fragment>
+  `);
+    // Initially the AppState component should be rendered
+    yield (0, fixtures_1.expect)(page.getByTestId("visibilityStatus")).toHaveText("Hidden");
+    // Toggle the component's visibility
+    yield page.getByTestId("toggleBtn").click();
+    yield (0, fixtures_1.expect)(page.getByTestId("visibilityStatus")).toHaveText("Visible");
+    // Toggle it back: The AppState component is hidden, but the state is still remain
+    // there. It should work this way.
+    yield page.getByTestId("toggleBtn").click();
+    yield (0, fixtures_1.expect)(page.getByTestId("visibilityStatus")).toHaveText("Visible");
+}));

package/dist/scripts/src/components/AppState/AppStateNative.js

@@ -7,7 +7,7 @@ const AppStateContext_1 = require("../../components/App/AppStateContext");
 exports.defaultProps = {
     bucket: "default",
 };
-function AppState({ bucket = exports.defaultProps.bucket, updateState, initialValue, registerComponentApi, }) {
+function AppState({ bucket = exports.defaultProps.bucket, updateState, initialValue, registerComponentApi, onDidUpdate, }) {
     const registerAppState = (0, AppStateContext_1.useAppStateContextPart)((value) => value.registerAppState);
     const update = (0, AppStateContext_1.useAppStateContextPart)((value) => value.update);
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
@@ -18,11 +18,35 @@ function AppState({ bucket = exports.defaultProps.bucket, updateState, initialVa
     const value = (0, AppStateContext_1.useAppStateContextPart)((value) => value.appState[bucket]);
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         updateState({ value });
-    }, [updateState, value]);
+        // Fire the didUpdate event when value changes
+        if (onDidUpdate) {
+            onDidUpdate({ bucket, value, previousValue: undefined }); // Note: previousValue tracking could be added if needed
+        }
+    }, [updateState, value, onDidUpdate, bucket]);
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         registerComponentApi({
             update: (patch) => update(bucket, patch),
+            appendToList: (key, id) => {
+                const currentState = value || {};
+                const currentArray = currentState[key] || [];
+                // Only add if the id doesn't already exist in the array
+                if (!currentArray.includes(id)) {
+                    const newArray = [...currentArray, id];
+                    update(bucket, { [key]: newArray });
+                }
+            },
+            removeFromList: (key, id) => {
+                const currentState = value || {};
+                const currentArray = currentState[key] || [];
+                const newArray = currentArray.filter((item) => item !== id);
+                update(bucket, { [key]: newArray });
+            },
+            listIncludes: (key, id) => {
+                const currentState = value || {};
+                const currentArray = currentState[key] || [];
+                return currentArray.includes(id);
+            },
         });
-    }, [bucket, registerComponentApi, update]);
+    }, [bucket, registerComponentApi, update, value]);
     return null;
 }