diff --git a/core/src/components/textarea/test/a11y/textarea.e2e.ts b/core/src/components/textarea/test/a11y/textarea.e2e.ts new file mode 100644 index 00000000000..9af227e3df0 --- /dev/null +++ b/core/src/components/textarea/test/a11y/textarea.e2e.ts @@ -0,0 +1,30 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('textarea: a11y', () => { + test('does not set a default aria-labelledby when there is not a neighboring ion-label', async ({ page }) => { + await page.setContent(``); + + await page.setIonViewport(); + + const textarea = page.locator('ion-textarea textarea'); + const ariaLabelledBy = await textarea.getAttribute('aria-labelledby'); + + expect(ariaLabelledBy).toBe(null); + }); + + test('set a default aria-labelledby when a neighboring ion-label exist', async ({ page }) => { + await page.setContent(` + + A11y Test + + + `); + + const label = page.locator('ion-label'); + const textarea = page.locator('ion-textarea textarea'); + const ariaLabelledBy = await textarea.getAttribute('aria-labelledby'); + + expect(ariaLabelledBy).toBe(await label.getAttribute('id')); + }); +}); diff --git a/core/src/components/textarea/test/a11y/textarea.spec.ts b/core/src/components/textarea/test/a11y/textarea.spec.ts deleted file mode 100644 index e55cd7e3bf1..00000000000 --- a/core/src/components/textarea/test/a11y/textarea.spec.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { newSpecPage } from '@stencil/core/testing'; - -import { Item } from '../../../item/item'; -import { Label } from '../../../label/label'; -import { Textarea } from '../../textarea'; - -describe('Textarea a11y', () => { - it('does not set a default aria-labelledby when there is not a neighboring ion-label', async () => { - const page = await newSpecPage({ - components: [Textarea, Item, Label], - html: ``, - }); - - const ariaLabelledBy = page.body.querySelector('ion-textarea textarea').getAttribute('aria-labelledby'); - expect(ariaLabelledBy).toBe(null); - }); - - it('set a default aria-labelledby when a neighboring ion-label exists', async () => { - const page = await newSpecPage({ - components: [Textarea, Item, Label], - html: ` - A11y Test - - `, - }); - - const label = page.body.querySelector('ion-label'); - const ariaLabelledBy = page.body.querySelector('ion-textarea textarea').getAttribute('aria-labelledby'); - expect(ariaLabelledBy).toBe(label.id); - }); -}); diff --git a/core/src/components/textarea/test/autogrow/e2e.ts b/core/src/components/textarea/test/autogrow/e2e.ts deleted file mode 100644 index 62a0ce11333..00000000000 --- a/core/src/components/textarea/test/autogrow/e2e.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('textarea: autogrow', async () => { - const page = await newE2EPage({ - url: '/src/components/textarea/test/autogrow?ionic:_testing=true', - }); - - const compares = []; - - compares.push(await page.compareScreenshot()); - - await page.waitForTimeout(250); - compares.push(await page.compareScreenshot('value changed')); - - for (const compare of compares) { - expect(compare).toMatchScreenshot(); - } -}); diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts b/core/src/components/textarea/test/autogrow/textarea.e2e.ts new file mode 100644 index 00000000000..a7280fba64e --- /dev/null +++ b/core/src/components/textarea/test/autogrow/textarea.e2e.ts @@ -0,0 +1,50 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('textarea: autogrow', () => { + test.skip('should not have visual regressions', async ({ page }) => { + await page.goto(`/src/components/textarea/test/autogrow`); + + await page.waitForChanges(); + + await page.setIonViewport(); + + expect(await page.screenshot()).toMatchSnapshot(`textarea-autogrow-diff-${page.getSnapshotSettings()}.png`); + }); + + test('should grow when typing', async ({ page }) => { + await page.setContent( + ` + + + + + + + + + ` + ); + + const textarea = await page.waitForSelector('ion-textarea'); + + await textarea.click(); + + await textarea.type('Now, this is a story all about how'); + + await page.setIonViewport(); + + expect(await textarea.screenshot()).toMatchSnapshot(`textarea-autogrow-initial-${page.getSnapshotSettings()}.png`); + + await textarea.type( + [ + `\nMy life got flipped-turned upside down`, + `And I'd like to take a minute`, + `Just sit right there`, + `I'll tell you how I became the prince of a town called Bel-Air`, + ].join('\n') + ); + + expect(await textarea.screenshot()).toMatchSnapshot(`textarea-autogrow-after-${page.getSnapshotSettings()}.png`); + }); +}); diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..e975612a5cb Binary files /dev/null and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..0d539fa50b2 Binary files /dev/null and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..a68b9ca51e7 Binary files /dev/null and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..2c063ff13d5 Binary files /dev/null and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..9c9ea93fc26 Binary files /dev/null and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..834264fbba1 Binary files /dev/null and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..9731890f1f8 Binary files /dev/null and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..b750e70e7a0 Binary files /dev/null and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..3f29ca5c72d Binary files /dev/null and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..ee7dc4a4337 Binary files /dev/null and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..c982adf9fcb Binary files /dev/null and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..b8c07ca29b7 Binary files /dev/null and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..b5f75c98ba7 Binary files /dev/null and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..395ac811576 Binary files /dev/null and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..788edc53eb9 Binary files /dev/null and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..7def97d1e73 Binary files /dev/null and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..1d09274e78d Binary files /dev/null and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..5840a7d76ec Binary files /dev/null and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..d897ef88dd6 Binary files /dev/null and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..26a31054995 Binary files /dev/null and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..ffc0d250d14 Binary files /dev/null and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..39d32695f77 Binary files /dev/null and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..bb3a353a19e Binary files /dev/null and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..04ade3e70cb Binary files /dev/null and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/basic/e2e.ts b/core/src/components/textarea/test/basic/e2e.ts deleted file mode 100644 index 246573c29dc..00000000000 --- a/core/src/components/textarea/test/basic/e2e.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('textarea: basic', async () => { - const page = await newE2EPage({ - url: '/src/components/textarea/test/basic?ionic:_testing=true', - }); - - const compares = []; - - compares.push(await page.compareScreenshot()); - - await page.waitForTimeout(250); - compares.push(await page.compareScreenshot('value changed')); - - for (const compare of compares) { - expect(compare).toMatchScreenshot(); - } -}); diff --git a/core/src/components/textarea/test/basic/index.html b/core/src/components/textarea/test/basic/index.html index 34abfaf6896..30352e0310e 100644 --- a/core/src/components/textarea/test/basic/index.html +++ b/core/src/components/textarea/test/basic/index.html @@ -45,7 +45,7 @@ Floating Label - + @@ -68,10 +68,11 @@ - + +
@@ -88,11 +89,6 @@