Merge branch 'master' into 193-review-textinput

packages/components/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v18.2.5 (Mon Jun 19 2023)
+
+#### 🐛 Bug Fix
+
+- 160 e2e tests [#197](https://github.com/Infineon/infineon-design-system-stencil/pull/197) ([email protected] [@verena-ifx](https://github.com/verena-ifx))
+
+#### Authors: 2
+
+- [@verena-ifx](https://github.com/verena-ifx)
+- verena-ifx ([email protected])
+
+---
+
 # v18.2.4 (Fri Jun 16 2023)
 
 #### 🐛 Bug Fix

packages/components/package.json

@@ -27,14 +27,13 @@
     "loader/"
   ],
   "scripts": {
-    "dev:storybook": "start-storybook -p 6262",
+    "test": "stencil test --e2e --max-workers=2",
+    "build:storybook": "npm run build:stencil && storybook build",
+    "build:stencil": "stencil build --docs",
+    "dev:storybook": "storybook dev -p 6262",
     "dev:stencil": "stencil build --watch",
     "index": "stencil build --serve --watch --dev",
-    "dev": "run-p dev:stencil dev:storybook",
-    "test": "stencil test --e2e --reporters=default --reporters=jest-github-actions-reporter",
-    "build:storybook": "npm run build:stencil && build-storybook",
-    "build:stencil": "stencil build --docs",
-    "copy:loader": "node utils/copy-loader.js"
+    "dev": "run-p dev:stencil dev:storybook"
   },
   "dependencies": {
     "@infineon/design-system-tokens": "^2.0.1",
@@ -93,4 +92,4 @@
     ]
   },
   "license": "MIT"
-}
+}

packages/components/src/components/alert/alert.e2e.ts

@@ -0,0 +1,43 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('ifx-alert', () => {
+
+  it('should render', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-alert></ifx-alert>');
+
+    const element = await page.find('ifx-alert');
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('should set the correct color', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-alert color="success"></ifx-alert>');
+
+    const element = await page.find('ifx-alert');
+    const color = await element.getProperty('color');
+
+    expect(color).toBe('success');
+  });
+
+  it('should set the correct icon', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-alert icon="cinfo24"></ifx-alert>');
+
+    const element = await page.find('ifx-alert');
+    const icon = await element.getProperty('icon');
+
+    expect(icon).toBe('cinfo24');
+  });
+
+  it('should display the correct icon', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-alert icon="cinfo24"></ifx-alert>');
+
+    const iconElement = await page.find('ifx-alert >>> .icon-wrapper > ifx-icon');
+    const iconProp = await iconElement.getProperty('icon');
+
+    expect(iconProp).toBe('cinfo24');
+  });
+
+});

packages/components/src/components/badge/badge.e2e.ts

@@ -0,0 +1,27 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('ifx-badge', () => {
+
+  it('should render', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-badge></ifx-badge>');
+
+    const element = await page.find('ifx-badge');
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('should display slotted content', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-badge>Test content</ifx-badge>');
+
+    const badgeContent = await page.evaluate(() => {
+      const badge = document.querySelector('ifx-badge');
+      const slot = badge.shadowRoot.querySelector('slot');
+      const nodes = slot.assignedNodes();
+      return nodes[0].textContent;
+    });
+
+    expect(badgeContent).toBe('Test content');
+  });
+
+});

packages/components/src/components/button/button.e2e.ts

@@ -0,0 +1,57 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('ifx-button', () => {
+
+  it('should render', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-button></ifx-button>');
+
+    const element = await page.find('ifx-button');
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('should display slotted content', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-button>Button Text</ifx-button>');
+
+    const buttonText = await page.evaluate(() => {
+      const button = document.querySelector('ifx-button');
+      const slot = button.shadowRoot.querySelector('slot');
+      const nodes = slot.assignedNodes();
+      return nodes[0].textContent;
+    });
+
+    expect(buttonText).toBe('Button Text');
+  });
+
+  it('should set correct variant', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-button variant="outline"></ifx-button>');
+
+    const element = await page.find('ifx-button');
+    const variant = await element.getProperty('variant');
+
+    expect(variant).toBe('outline');
+  });
+
+  it('should set correct color', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-button color="danger"></ifx-button>');
+
+    const element = await page.find('ifx-button');
+    const color = await element.getProperty('color');
+
+    expect(color).toBe('danger');
+  });
+
+  it('should set correct size', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-button size="s"></ifx-button>');
+
+    const element = await page.find('ifx-button');
+    const size = await element.getProperty('size');
+
+    expect(size).toBe('s');
+  });
+
+});

packages/components/src/components/card/card-headline/card-headline.e2e.ts

@@ -0,0 +1,28 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('ifx-card-headline', () => {
+
+  it('should render', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-card-headline></ifx-card-headline>');
+
+    const element = await page.find('ifx-card-headline');
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('should display slotted content', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent('<ifx-card-headline>Test content</ifx-card-headline>');
+
+    const headlineContent = await page.evaluate(() => {
+      const headline = document.querySelector('ifx-card-headline');
+      const slot = headline.shadowRoot.querySelector('slot');
+      const nodes = slot.assignedNodes();
+      return nodes[0].textContent;
+    }).catch(e => console.error(e));
+
+    expect(headlineContent).toBe('Test content');
+  });
+
+});

packages/components/src/components/card/card-headline/card-headline.tsx

@@ -12,17 +12,23 @@ export class CardHeadline {
   @Prop({ mutable: true }) hasDesc: boolean;
 
   componentWillLoad() {
-    const isHorizontal = this.el.closest('ifx-card').shadowRoot.querySelector('.card').className.includes('horizontal')
-    if (isHorizontal) {
-      this.direction = 'horizontal'
-    }
+    const cardElement = this.el.closest('ifx-card');
+
+    if (cardElement) {
+      const cardClass = cardElement.shadowRoot.querySelector('.card')?.className;
 
-    let desc = this.el.closest('ifx-card').querySelector('ifx-card-text')
-    if (desc) {
-      this.hasDesc = true;
+      if (cardClass && cardClass.includes('horizontal')) {
+        this.direction = 'horizontal'
+      }
+
+      const desc = cardElement.querySelector('ifx-card-text');
+      if (desc) {
+        this.hasDesc = true;
+      }
     }
   }
 
+
   render() {
     return (
       <div class={`card__headline-wrapper ${this.hasDesc ? 'withDesc' : ""}`}>

packages/components/src/components/card/card-overline/card-overline.e2e.ts

@@ -0,0 +1,26 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('ifx-card-overline', () => {
+
+  it('should render', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-card-overline></ifx-card-overline>');
+
+    const element = await page.find('ifx-card-overline');
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('should display slotted content', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-card-overline>Card Overline</ifx-card-overline>');
+
+    const cardOverlineText = await page.evaluate(() => {
+      const cardOverline = document.querySelector('ifx-card-overline');
+      const slot = cardOverline.shadowRoot.querySelector('slot');
+      const nodes = slot.assignedNodes();
+      return nodes[0].textContent;
+    });
+
+    expect(cardOverlineText).toBe('Card Overline');
+  });
+});

packages/components/src/components/card/card.e2e.ts

@@ -0,0 +1,33 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('ifx-card', () => {
+
+  it('should render', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-card></ifx-card>');
+
+    const element = await page.find('ifx-card');
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('should set correct direction', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-card direction="horizontal"></ifx-card>');
+
+    const element = await page.find('ifx-card');
+    const direction = await element.getProperty('direction');
+
+    expect(direction).toBe('horizontal');
+  });
+
+  it('should set correct alignment', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-card alignment="center"></ifx-card>');
+
+    const element = await page.find('ifx-card');
+    const alignment = await element.getProperty('alignment');
+
+    expect(alignment).toBe('center');
+  });
+
+});

packages/components/src/components/checkbox/checkbox.e2e.ts

@@ -0,0 +1,39 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('ifx-checkbox', () => {
+  it('should render', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-checkbox></ifx-checkbox>');
+
+    const element = await page.find('ifx-checkbox');
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('should display slotted content', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-checkbox>Test content</ifx-checkbox>');
+
+    const labelContent = await page.evaluate(() => {
+      const checkbox = document.querySelector('ifx-checkbox');
+      const slot = checkbox.shadowRoot.querySelector('slot');
+      const nodes = slot.assignedNodes();
+      return nodes[0].textContent;
+    });
+
+    expect(labelContent).toBe('Test content');
+  });
+
+  it('should emit ifxChange event when clicked', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-checkbox></ifx-checkbox>');
+
+    const checkbox = await page.find('ifx-checkbox');
+    const ifxChange = await checkbox.spyOnEvent('ifxChange');
+
+    const checkboxWrapper = await page.find('ifx-checkbox >>> .checkbox__wrapper');
+    await checkboxWrapper.click();
+
+    expect(ifxChange).toHaveReceivedEvent();
+  });
+
+});

packages/components/src/components/checkbox/checkbox.tsx

@@ -12,7 +12,6 @@ export class Checkbox {
   @Prop() value: boolean = false;
   @Prop() error: boolean = false;
   @Prop() name: string = '';
-  @State() hasSlot: boolean = true;
   @State() internalValue: boolean;
   @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;
 
@@ -30,13 +29,6 @@ export class Checkbox {
     }
   }
 
-  componentDidUpdate() {
-    const slot = this.el.innerHTML;
-    if (slot) {
-      this.hasSlot = true;
-    } else this.hasSlot = false;
-  }
-
   handleKeydown(event) {
     // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key
     if (event.keyCode === 32 || event.keyCode === 13) {
@@ -49,8 +41,14 @@ export class Checkbox {
     this.internalValue = this.value;
   }
 
-
   render() {
+    const slot = this.el.innerHTML;
+    let hasSlot = false;
+
+    if (slot) {
+      hasSlot = true;
+    }
+
     return (
       <div class="checkbox__container">
         <input type="checkbox" hidden
@@ -71,11 +69,11 @@ export class Checkbox {
         ${this.error ? 'error' : ""}`}>
           {this.internalValue && <ifx-icon icon="check-12"></ifx-icon>}
         </div>
-        {this.hasSlot &&
+        {hasSlot &&
           <div id="label" class={`label ${this.error ? 'error' : ""} ${this.disabled ? 'disabled' : ""} `} onClick={this.handleCheckbox.bind(this)}>
             <slot />
           </div>}
       </div>
     );
   }
-}
+}