fix(core/workflow-steps): update step position after first rendering (#…

…459)

Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>

packages/core/component-doc.json

@@ -9576,13 +9576,18 @@
       "docs": "",
       "docsTags": [],
       "encapsulation": "scoped",
-      "dependents": [],
+      "dependents": [
+        "my-component"
+      ],
       "dependencies": [
         "ix-icon"
       ],
       "dependencyGraph": {
         "ix-workflow-step": [
           "ix-icon"
+        ],
+        "my-component": [
+          "ix-workflow-step"
         ]
       },
       "props": [
@@ -9734,9 +9739,15 @@
       "docs": "",
       "docsTags": [],
       "encapsulation": "scoped",
-      "dependents": [],
+      "dependents": [
+        "my-component"
+      ],
       "dependencies": [],
-      "dependencyGraph": {},
+      "dependencyGraph": {
+        "my-component": [
+          "ix-workflow-steps"
+        ]
+      },
       "props": [
         {
           "name": "clickable",
@@ -9837,8 +9848,19 @@
       "docsTags": [],
       "encapsulation": "scoped",
       "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {},
+      "dependencies": [
+        "ix-workflow-steps",
+        "ix-workflow-step"
+      ],
+      "dependencyGraph": {
+        "my-component": [
+          "ix-workflow-steps",
+          "ix-workflow-step"
+        ],
+        "ix-workflow-step": [
+          "ix-icon"
+        ]
+      },
       "props": [],
       "methods": [],
       "events": [],

packages/core/src/components/my-component/my-component.tsx

@@ -15,6 +15,12 @@ import { Component, h, Host } from '@stencil/core';
 })
 export class MyComponent {
   render() {
-    return <Host></Host>;
+    return (
+      <Host>
+        <ix-workflow-steps>
+          <ix-workflow-step></ix-workflow-step>
+        </ix-workflow-steps>
+      </Host>
+    );
   }
 }

packages/core/src/components/workflow-steps/test/workflow-steps.spec.ts

@@ -0,0 +1,94 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { newSpecPage } from '@stencil/core/testing';
+import { WorkflowStep } from '../..//workflow-step/workflow-step';
+import { WorkflowSteps } from '../workflow-steps';
+import { createMutationObserver } from './../../utils/mutation-observer';
+
+jest.mock('./../../utils/mutation-observer');
+
+describe('workflow-steps', () => {
+  let observerCallback: Function;
+
+  beforeEach(async () => {
+    //@ts-ignore
+    createMutationObserver = jest.fn((callback) => {
+      observerCallback = callback;
+      return {
+        observe: jest.fn(),
+      };
+    });
+  });
+
+  it('should render steps', async () => {
+    const page = await newSpecPage({
+      components: [WorkflowSteps, WorkflowStep],
+      html: `<ix-workflow-steps>
+      <ix-workflow-steps>`,
+    });
+
+    const step = document.createElement('ix-workflow-step');
+    page.root.querySelector('ix-workflow-steps').append(step);
+
+    observerCallback([{ type: 'childList' }]);
+
+    await page.waitForChanges();
+    expect(step).toEqualAttributes({
+      position: 'last',
+      selected: true,
+    });
+  });
+
+  it('should re-render workflow steps', async () => {
+    const page = await newSpecPage({
+      components: [WorkflowSteps, WorkflowStep],
+      html: `<ix-workflow-steps>
+      <ix-workflow-steps>`,
+    });
+
+    const step = document.createElement('ix-workflow-step');
+    const step1 = document.createElement('ix-workflow-step');
+    const step2 = document.createElement('ix-workflow-step');
+    page.root.querySelector('ix-workflow-steps').append(step);
+    page.root.querySelector('ix-workflow-steps').append(step1);
+
+    observerCallback([{ type: 'childList' }]);
+    await page.waitForChanges();
+
+    expect(step).toEqualAttributes({
+      position: 'first',
+      selected: true,
+    });
+
+    expect(step1).toEqualAttributes({
+      position: 'last',
+      selected: false,
+    });
+
+    page.root.querySelector('ix-workflow-steps').append(step2);
+    observerCallback([{ type: 'childList' }]);
+    await page.waitForChanges();
+
+    expect(step).toEqualAttributes({
+      position: 'first',
+      selected: true,
+    });
+
+    expect(step1).toEqualAttributes({
+      position: 'undefined',
+      selected: false,
+    });
+
+    expect(step2).toEqualAttributes({
+      position: 'last',
+      selected: false,
+    });
+  });
+});

packages/core/src/components/workflow-steps/workflow-steps.tsx

@@ -20,6 +20,7 @@ import {
   Host,
   Prop,
 } from '@stencil/core';
+import { createMutationObserver } from '../utils/mutation-observer';
 
 @Component({
   tag: 'ix-workflow-steps',
@@ -65,27 +66,48 @@ export class WorkflowSteps {
     });
   }
 
-  componentDidRender() {
-    const steps = this.getSteps();
-
+  styling() {
+    let steps = this.getSteps();
     steps.forEach((element, index) => {
-      element.setAttribute(
-        'vertical',
-        this.vertical === true ? 'true' : 'false'
-      );
-      element.setAttribute(
-        'clickable',
-        this.clickable === true ? 'true' : 'false'
-      );
+      element.setAttribute('vertical', this.vertical ? 'true' : 'false');
+      element.setAttribute('clickable', this.clickable ? 'true' : 'false');
       element.setAttribute(
         'selected',
         this.selectedIndex === index ? 'true' : 'false'
       );
       if (index === 0) element.setAttribute('position', 'first');
       if (index === steps.length - 1) element.setAttribute('position', 'last');
+      if (index > 0 && index < steps.length - 1)
+        element.setAttribute('position', 'undefined');
     });
   }
 
+  private observer: MutationObserver;
+
+  componentDidLoad() {
+    const slotDiv = this.hostElement.querySelector('.steps');
+
+    this.observer = createMutationObserver((mutations) => {
+      for (let mutation of mutations) {
+        if (mutation.type === 'childList') {
+          this.styling();
+        }
+      }
+    });
+
+    this.observer.observe(slotDiv, { childList: true });
+  }
+
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+
+  componentDidRender() {
+    this.styling();
+  }
+
   componentWillRender() {
     const steps = this.getSteps();
     steps.forEach((element, index) => {
@@ -103,14 +125,6 @@ export class WorkflowSteps {
         element.setAttribute('selected', 'true');
         this.stepSelected.emit(index);
       });
-      // const isEnabled = element.getAttribute('first');
-      // if(isEnabled){
-
-      // }
-      // console.log(isEnabled)
-      // const isDisabled = element.getAttribute('disabled') !== null;
-      // if (!isDisabled) element.addEventListener('click', () => '');
-      //element.addEventListener('mousedown', event => this.clicked(element, index));
     });
   }