Skip to content

Commit

Permalink
fix(core/workflow-steps): update step position after first rendering (#…
Browse files Browse the repository at this point in the history
…459)

Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>
  • Loading branch information
goncalosard and danielleroux committed Mar 27, 2023
1 parent 0d18866 commit 715d50d
Show file tree
Hide file tree
Showing 4 changed files with 161 additions and 25 deletions.
32 changes: 27 additions & 5 deletions packages/core/component-doc.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand Down Expand Up @@ -9734,9 +9739,15 @@
"docs": "",
"docsTags": [],
"encapsulation": "scoped",
"dependents": [],
"dependents": [
"my-component"
],
"dependencies": [],
"dependencyGraph": {},
"dependencyGraph": {
"my-component": [
"ix-workflow-steps"
]
},
"props": [
{
"name": "clickable",
Expand Down Expand Up @@ -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": [],
Expand Down
8 changes: 7 additions & 1 deletion packages/core/src/components/my-component/my-component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
}
Original file line number Diff line number Diff line change
@@ -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,
});
});
});
52 changes: 33 additions & 19 deletions packages/core/src/components/workflow-steps/workflow-steps.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
Host,
Prop,
} from '@stencil/core';
import { createMutationObserver } from '../utils/mutation-observer';

@Component({
tag: 'ix-workflow-steps',
Expand Down Expand Up @@ -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) => {
Expand All @@ -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));
});
}

Expand Down

0 comments on commit 715d50d

Please sign in to comment.