diff --git a/core/src/components/label/test/basic/label.e2e.ts b/core/src/components/label/test/basic/label.e2e.ts index 1deda110544..dbb19a54767 100644 --- a/core/src/components/label/test/basic/label.e2e.ts +++ b/core/src/components/label/test/basic/label.e2e.ts @@ -61,3 +61,81 @@ configs().forEach(({ title, screenshot, config }) => { }); }); }); + +/** + * This behavior does not vary across modes/directions. + */ +configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('label: inner content'), () => { + test.beforeEach(async ({ page }) => { + await page.setContent( + ` + Initial + `, + config + ); + }); + + test('should render content set with innerHTML', async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/31433', + }); + + const label = page.locator('ion-label'); + + await label.evaluate((el: HTMLIonLabelElement) => { + el.innerHTML = 'test'; + // Changing a prop forces a re-render, which is when the content was hidden + el.color = 'primary'; + }); + await page.waitForChanges(); + + await expect(label).toBeVisible(); + await expect(label).toHaveText('test'); + await expect(label.locator('strong')).toBeVisible(); + }); + + test('should render content set with innerText', async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/31433', + }); + + const label = page.locator('ion-label'); + + await label.evaluate((el: HTMLIonLabelElement) => { + el.innerText = 'test'; + el.color = 'primary'; + }); + await page.waitForChanges(); + + await expect(label).toBeVisible(); + await expect(label).toHaveText('test'); + }); + + test('should keep content set with innerHTML across multiple re-renders', async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/31433', + }); + + const label = page.locator('ion-label'); + + await label.evaluate((el: HTMLIonLabelElement) => { + el.innerHTML = 'first'; + el.color = 'primary'; + }); + await page.waitForChanges(); + + await label.evaluate((el: HTMLIonLabelElement) => { + el.innerHTML = 'second'; + el.color = 'secondary'; + }); + await page.waitForChanges(); + + await expect(label).toBeVisible(); + await expect(label).toHaveText('second'); + }); + }); +});