From 5b2df0c4d4e35a7224ac70cef22a1b89fef4a222 Mon Sep 17 00:00:00 2001 From: matthiashader <144090716+matthiashader@users.noreply.github.com> Date: Tue, 7 May 2024 13:30:43 +0200 Subject: [PATCH] fix(core/event-list): event-list-items not selectabe in chrome (#1230) Co-authored-by: Daniel Leroux --- .changeset/large-oranges-float.md | 5 ++ packages/core/playwright-ct.config.ts | 1 + .../src/components/event-list/event-list.tsx | 51 +++++++------- .../event-list/test/event-list.ct.ts | 70 +++++++++++++++++++ .../event-list/test/event-list.spec.tsx | 62 ---------------- 5 files changed, 103 insertions(+), 86 deletions(-) create mode 100644 .changeset/large-oranges-float.md create mode 100644 packages/core/src/components/event-list/test/event-list.ct.ts diff --git a/.changeset/large-oranges-float.md b/.changeset/large-oranges-float.md new file mode 100644 index 0000000000..e79408b719 --- /dev/null +++ b/.changeset/large-oranges-float.md @@ -0,0 +1,5 @@ +--- +'@siemens/ix': patch +--- + +fix(core/event-list): event-list-items not selectabe in chrome diff --git a/packages/core/playwright-ct.config.ts b/packages/core/playwright-ct.config.ts index 755d907210..59ba8c6da3 100644 --- a/packages/core/playwright-ct.config.ts +++ b/packages/core/playwright-ct.config.ts @@ -28,6 +28,7 @@ const config: PlaywrightTestConfig = { }, }, ], + retries: 2, }; export default config; diff --git a/packages/core/src/components/event-list/event-list.tsx b/packages/core/src/components/event-list/event-list.tsx index 6d3b467c79..e4a87d43c2 100644 --- a/packages/core/src/components/event-list/event-list.tsx +++ b/packages/core/src/components/event-list/event-list.tsx @@ -10,6 +10,7 @@ import { Component, Element, h, Host, Prop, Watch } from '@stencil/core'; import { createMutationObserver } from '../utils/mutation-observer'; import { convertToRemString } from '../utils/rwd.util'; +import anime from 'animejs'; @Component({ tag: 'ix-event-list', @@ -102,22 +103,25 @@ export class EventList { item.style.setProperty('--event-list-item-height', height); } - private triggerFadeOut(): Promise { - if (!this.animated) { - return Promise.resolve(); - } + private triggerFadeOut(): Promise { + return new Promise((resolve) => { + if (!this.animated) { + resolve(); + } - const keyframes = [ - { - opacity: 1, - easing: 'ease-in', - }, - { opacity: 0 }, - ]; - const listElement = this.hostElement.shadowRoot.querySelector('ul'); - return listElement.animate(keyframes, { - duration: EventList.fadeOutDuration, - }).finished; + const keyframes = [{ opacity: 1, easing: 'easeInSine' }, { opacity: 0 }]; + + const listElement = this.hostElement.shadowRoot.querySelector('ul'); + + anime({ + targets: listElement, + opacity: keyframes, + duration: EventList.fadeOutDuration, + complete: () => { + resolve(); + }, + }); + }); } private triggerFadeIn() { @@ -129,16 +133,15 @@ export class EventList { listItems.forEach((e, i) => { const delay = i * 80; const offset = delay / (delay + EventList.fadeInDuration); - const keyframes = [ - { opacity: 0 }, - { opacity: 0, easing: 'ease-out', offset }, - { opacity: 1 }, - ]; - const options = { + anime({ + targets: e, + offset: offset, duration: EventList.fadeInDuration + delay, - iterations: 1, - }; - e.animate(keyframes, options); + opacity: [0, 1], + easing: 'easeInOutSine', + delay: delay, + autoplay: true, + }); }); } diff --git a/packages/core/src/components/event-list/test/event-list.ct.ts b/packages/core/src/components/event-list/test/event-list.ct.ts new file mode 100644 index 0000000000..6c6eff8869 --- /dev/null +++ b/packages/core/src/components/event-list/test/event-list.ct.ts @@ -0,0 +1,70 @@ +/* + * 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. + */ + +/* + * 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 'jest'; +import { test } from '@utils/test'; +import { expect } from '@playwright/test'; + +test('renders', async ({ mount, page }) => { + await mount(` + + Text 1 + Text 2 + Text 3 + Text 4 + + `); + + const eventList = page.locator('ix-event-list'); + await expect(eventList).toHaveClass(/hydrated/); +}); + +test('check if items still clickable', async ({ mount, page }) => { + await mount(` + + Text 1 + Text 2 + Text 3 + Text 4 + + `); + + await page.waitForTimeout(500); + const firstEventListItem = page.locator('ix-event-list-item').first(); + const secondEventListItem = page.locator('ix-event-list-item').nth(1); + const thirdEventListItem = page.locator('ix-event-list-item').last(); + + const clickCountHandle = await page.evaluateHandle(() => { + return { count: 0 }; + }); + + await firstEventListItem.evaluate((eventListItem, clickCountHandle) => { + eventListItem.addEventListener('click', () => { + clickCountHandle.count++; + }); + }, clickCountHandle); + + await firstEventListItem.click(); + await secondEventListItem.click(); + await thirdEventListItem.click(); + + //Check if still clickable + await firstEventListItem.click(); + expect((await clickCountHandle.jsonValue()).count).toBe(2); + + clickCountHandle.dispose(); +}); diff --git a/packages/core/src/components/event-list/test/event-list.spec.tsx b/packages/core/src/components/event-list/test/event-list.spec.tsx index 0f03b2fd72..513c9cdc0a 100644 --- a/packages/core/src/components/event-list/test/event-list.spec.tsx +++ b/packages/core/src/components/event-list/test/event-list.spec.tsx @@ -72,66 +72,4 @@ describe('event-list', () => { `); }); - - it('animated', async () => { - const page = await newSpecPage({ - components: [EventList], - html: '
', - }); - - const eventList = page.doc.createElement('ix-event-list'); - const eventListItem = page.doc.createElement('ix-event-list-item'); - - eventListItem.animate = jest.fn(); - - eventList.appendChild(eventListItem); - page.root.appendChild(eventList); - - await page.waitForChanges(); - - expect(eventListItem.animate).toHaveBeenCalled(); - - expect(page.root).toEqualHtml(` - - -
    - -
- - - - `); - }); - - it('not animated', async () => { - const page = await newSpecPage({ - components: [EventList], - html: '
', - }); - - const eventList = page.doc.createElement('ix-event-list'); - eventList.animated = false; - - const eventListItem = page.doc.createElement('ix-event-list-item'); - - eventListItem.animate = jest.fn(); - - eventList.appendChild(eventListItem); - page.root.appendChild(eventList); - - await page.waitForChanges(); - - expect(eventListItem.animate).not.toHaveBeenCalled(); - - expect(page.root).toEqualHtml(` - - -
    - -
- - - - `); - }); });