@limetech/lime-web-components 4.54.1 → 4.54.2

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.54.2](https://github.com/Lundalogik/lime-web-components/compare/v4.54.1...v4.54.2) (2022-09-23)
+
+
+### Bug Fixes
+
+* **testing:** inject component states in connectedCallback ([4606839](https://github.com/Lundalogik/lime-web-components/commit/4606839a9ac0ed106e2d9352e243a270b21450b2))
+
+
+
+
+
 ## [4.54.1](https://github.com/Lundalogik/lime-web-components/compare/v4.54.0...v4.54.1) (2022-09-23)
 
 **Note:** Version bump only for package @limetech/lime-web-components

package/dist/es5/testing/component-testing.js

@@ -8,8 +8,11 @@ var componentInstances = new WeakMap();
 var originalHooks = new WeakMap();
 var destroyFunctions = new WeakMap();
 function createComponent(component, page, config) {
-    componentConfigs.set(component.prototype, config);
-    extendLifecycleHook(component.prototype, 'componentWillLoad', initComponent);
+    componentConfigs.set(component.prototype, {
+        config: config,
+        initialized: false,
+    });
+    extendLifecycleHook(component.prototype, 'connectedCallback', initComponent);
     var element = page.doc.createElement(config.tag);
     var props = config.props || {};
     var listeners = config.listeners || {};
@@ -44,9 +47,15 @@ exports.setState = setState;
 function initComponent() {
     var element = (0, core_1.getElement)(this);
     componentInstances.set(element, this);
-    var config = componentConfigs.get(this.constructor.prototype);
-    if (config === null || config === void 0 ? void 0 : config.state) {
+    var componentState = componentConfigs.get(this.constructor.prototype);
+    var initialized = componentState.initialized;
+    var config = componentState.config;
+    if (!initialized && config.state) {
         setState(element, config.state);
+        componentConfigs.set(this.constructor.prototype, {
+            config: config,
+            initialized: true,
+        });
     }
 }
 function extendLifecycleHook(component, name, hook) {

package/dist/es5/testing/component-testing.spec.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TestDummy = void 0;
+var tslib_1 = require("tslib");
+var core_1 = require("@stencil/core");
+var testing_1 = require("@stencil/core/testing");
+var component_testing_1 = require("./component-testing");
+var TestDummy = (function () {
+    function TestDummy() {
+        this.injectedState = false;
+        this.expectedState = true;
+    }
+    TestDummy.prototype.connectedCallback = function () {
+        expect(this.injectedState).toEqual(this.expectedState);
+    };
+    TestDummy.prototype.disconnectedCallback = function () {
+        this.expectedState = false;
+        this.injectedState = false;
+    };
+    TestDummy.prototype.render = function () {
+        return 'Lime Test Dummy';
+    };
+    tslib_1.__decorate([
+        (0, core_1.Prop)()
+    ], TestDummy.prototype, "platform", void 0);
+    tslib_1.__decorate([
+        (0, core_1.Prop)()
+    ], TestDummy.prototype, "context", void 0);
+    tslib_1.__decorate([
+        (0, core_1.State)()
+    ], TestDummy.prototype, "injectedState", void 0);
+    TestDummy = tslib_1.__decorate([
+        (0, core_1.Component)({
+            tag: 'lime-test-dummy',
+            shadow: true,
+        })
+    ], TestDummy);
+    return TestDummy;
+}());
+exports.TestDummy = TestDummy;
+var component;
+var page;
+var platform = {};
+var context = { limetype: null, id: null };
+var componentConfig = {
+    tag: 'lime-test-dummy',
+    state: {
+        injectedState: true,
+    },
+    props: {
+        context: context,
+        platform: platform,
+    },
+};
+beforeEach(function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+    return tslib_1.__generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4, (0, testing_1.newSpecPage)({ components: [TestDummy] })];
+            case 1:
+                page = _a.sent();
+                component = (0, component_testing_1.createComponent)(TestDummy, page, componentConfig);
+                return [4, page.waitForChanges()];
+            case 2:
+                _a.sent();
+                return [2];
+        }
+    });
+}); });
+describe('creating a component', function () {
+    it('is successful', function () {
+        expect(component).toEqualHtml("\n        <lime-test-dummy>\n          <mock:shadow-root>\n            Lime Test Dummy\n          </mock:shadow-root>\n        </lime-test-dummy>");
+    });
+    it('injects state only once', function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var parent;
+        return tslib_1.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    parent = component.parentElement;
+                    component.remove();
+                    parent.appendChild(component);
+                    return [4, page.waitForChanges()];
+                case 1:
+                    _a.sent();
+                    return [2];
+            }
+        });
+    }); });
+});

package/dist/testing/component-testing.js

@@ -13,8 +13,11 @@ const destroyFunctions = new WeakMap();
  * @returns {HTMLElement} the component
  */
 export function createComponent(component, page, config) {
-    componentConfigs.set(component.prototype, config);
-    extendLifecycleHook(component.prototype, 'componentWillLoad', initComponent);
+    componentConfigs.set(component.prototype, {
+        config: config,
+        initialized: false,
+    });
+    extendLifecycleHook(component.prototype, 'connectedCallback', initComponent);
     const element = page.doc.createElement(config.tag);
     const props = config.props || {};
     const listeners = config.listeners || {};
@@ -59,7 +62,7 @@ export function setState(component, state) {
 /**
  * Init a component that is under test
  *
- * This is called just before the `componentWillLoad` lifecycle hook
+ * This is called just before the `connectedCallback` lifecycle hook
  * of the component and is a good place to save the component instance
  * and set the initial state
  *
@@ -68,9 +71,15 @@ export function setState(component, state) {
 function initComponent() {
     const element = getElement(this);
     componentInstances.set(element, this);
-    const config = componentConfigs.get(this.constructor.prototype);
-    if (config === null || config === void 0 ? void 0 : config.state) {
+    const componentState = componentConfigs.get(this.constructor.prototype);
+    const initialized = componentState.initialized;
+    const config = componentState.config;
+    if (!initialized && config.state) {
         setState(element, config.state);
+        componentConfigs.set(this.constructor.prototype, {
+            config: config,
+            initialized: true,
+        });
     }
 }
 /**

package/dist/testing/component-testing.spec.d.ts

@@ -0,0 +1,10 @@
+import { LimeWebComponent, LimeWebComponentContext, LimeWebComponentPlatform } from '../core';
+export declare class TestDummy implements LimeWebComponent {
+    platform: LimeWebComponentPlatform;
+    context: LimeWebComponentContext;
+    private injectedState;
+    private expectedState;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): string;
+}

package/dist/testing/component-testing.spec.js

@@ -0,0 +1,71 @@
+import { __decorate } from "tslib";
+import { Component, Prop, State } from '@stencil/core';
+import { newSpecPage } from '@stencil/core/testing';
+import { createComponent } from './component-testing';
+let TestDummy = class TestDummy {
+    constructor() {
+        this.injectedState = false;
+        this.expectedState = true;
+    }
+    connectedCallback() {
+        expect(this.injectedState).toEqual(this.expectedState);
+    }
+    disconnectedCallback() {
+        this.expectedState = false;
+        this.injectedState = false;
+    }
+    render() {
+        return 'Lime Test Dummy';
+    }
+};
+__decorate([
+    Prop()
+], TestDummy.prototype, "platform", void 0);
+__decorate([
+    Prop()
+], TestDummy.prototype, "context", void 0);
+__decorate([
+    State()
+], TestDummy.prototype, "injectedState", void 0);
+TestDummy = __decorate([
+    Component({
+        tag: 'lime-test-dummy',
+        shadow: true,
+    })
+], TestDummy);
+export { TestDummy };
+let component;
+let page;
+const platform = {};
+const context = { limetype: null, id: null };
+const componentConfig = {
+    tag: 'lime-test-dummy',
+    state: {
+        injectedState: true,
+    },
+    props: {
+        context: context,
+        platform: platform,
+    },
+};
+beforeEach(async () => {
+    page = await newSpecPage({ components: [TestDummy] });
+    component = createComponent(TestDummy, page, componentConfig);
+    await page.waitForChanges();
+});
+describe('creating a component', () => {
+    it('is successful', () => {
+        expect(component).toEqualHtml(`
+        <lime-test-dummy>
+          <mock:shadow-root>
+            Lime Test Dummy
+          </mock:shadow-root>
+        </lime-test-dummy>`);
+    });
+    it('injects state only once', async () => {
+        const parent = component.parentElement;
+        component.remove();
+        parent.appendChild(component);
+        await page.waitForChanges();
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-web-components",
-  "version": "4.54.1",
+  "version": "4.54.2",
   "author": "Lime Technologies",
   "homepage": "https://github.com/Lundalogik/lime-web-components",
   "license": "Apache-2.0",
@@ -51,5 +51,5 @@
   "peerDependencies": {
     "@stencil/core": "^2.17.1"
   },
-  "gitHead": "4b82a12b6d6fc9a8c8c1494e7bb3701b6fe8a7c2"
+  "gitHead": "13613b1b5a0b22a21cd574f5050391e403a315c3"
 }