From c2c5a42171a756e6900f8e919ee50cb3fa4805db Mon Sep 17 00:00:00 2001 From: Adrian Schmidt Date: Tue, 2 Apr 2024 10:39:19 +0200 Subject: [PATCH] test(icon): add tests for limel-icon --- src/components/icon/icon.e2e.ts | 54 +++ src/icons/angle_left.svg | 599 +------------------------------- src/icons/angle_right.svg | 599 +------------------------------- 3 files changed, 68 insertions(+), 1184 deletions(-) create mode 100644 src/components/icon/icon.e2e.ts diff --git a/src/components/icon/icon.e2e.ts b/src/components/icon/icon.e2e.ts new file mode 100644 index 0000000000..78cb2760f6 --- /dev/null +++ b/src/components/icon/icon.e2e.ts @@ -0,0 +1,54 @@ +import { E2EPage, newE2EPage } from '@stencil/core/testing'; + +describe('limel-icon', () => { + let page: E2EPage; + + beforeEach(async () => { + page = await newE2EPage(); + }); + + it('renders correctly with a provided icon name', async () => { + await page.setContent(''); + await page.waitForChanges(); + + const svgElement = await page.find('limel-icon >>> svg'); + expect(svgElement).toBeTruthy(); + }); + + it('does not render an icon when name is not provided', async () => { + await page.setContent(''); + await page.waitForChanges(); + + const svgElement = await page.find('limel-icon >>> svg'); + expect(svgElement).toBeFalsy(); + }); + + it('updates the icon when the name prop changes', async () => { + await page.setContent(''); + await page.waitForChanges(); + + // Get the title of the initially loaded SVG + let titleElement = await page.find('limel-icon >>> svg title'); + expect(titleElement.textContent).toEqual('Angle Left'); + + // Update the name prop to change the icon + const element = await page.find('limel-icon'); + element.setProperty('name', 'angle_right'); + await page.waitForChanges(); + + // Get the title of the updated SVG + titleElement = await page.find('limel-icon >>> svg title'); + expect(titleElement.textContent).toEqual('Angle Right'); + }); + + it('renders with a badge when the badge and size props are provided', async () => { + await page.setContent( + '', + ); + await page.waitForChanges(); + + // Note: This test assumes there is a CSS class or structure change when a badge is applied. Adjust the selector accordingly. + const badgeElement = await page.find('limel-icon[badge]'); + expect(badgeElement).toBeTruthy(); + }); +}); diff --git a/src/icons/angle_left.svg b/src/icons/angle_left.svg index fb750a2cca..a6edd711cc 100644 --- a/src/icons/angle_left.svg +++ b/src/icons/angle_left.svg @@ -1,593 +1,8 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + image/svg+xmlOpenclipart + + Angle Left + + + diff --git a/src/icons/angle_right.svg b/src/icons/angle_right.svg index fb750a2cca..d0a8ab7d35 100644 --- a/src/icons/angle_right.svg +++ b/src/icons/angle_right.svg @@ -1,593 +1,8 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + image/svg+xmlOpenclipart + + Angle Right + + +