diff --git a/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-ios-ltr-Mobile-Chrome-linux.png index 2b9fab593f..486d4d4bb3 100644 Binary files a/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-ios-ltr-Mobile-Firefox-linux.png index 446911aaf6..e5772076ab 100644 Binary files a/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-ios-ltr-Mobile-Safari-linux.png index bfcc67e17d..2fda4e333b 100644 Binary files a/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-md-ltr-Mobile-Chrome-linux.png index 6a23386cbd..7fb29fdb09 100644 Binary files a/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-md-ltr-Mobile-Firefox-linux.png index 25f05cda7e..76745ebdbc 100644 Binary files a/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-md-ltr-Mobile-Safari-linux.png index 1626971902..c6b56926e2 100644 Binary files a/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/bottom-content/index.html b/core/src/components/textarea/test/bottom-content/index.html index 04de279bd2..773857bd6a 100644 --- a/core/src/components/textarea/test/bottom-content/index.html +++ b/core/src/components/textarea/test/bottom-content/index.html @@ -15,7 +15,7 @@ - + @@ -54,67 +47,120 @@

No Hint

- +
-

Helper Hint

- +

No Hint: Stacked

+
-

Error Hint

+

Helper Text

+ +
+ +
+

Helper Text: Stacked

+ +
+ +
+

Error Text

+ +
+ +
+

Error Text: Stacked

-

Custom Error Color

+

Error Text: Custom Color

+
+

Helper Text: Wrapping

+ + +
+

Counter

- +
-

Custom Counter

- +

Counter: Custom

+
-

Counter with Helper

- +

Counter: with Helper

+
-

Counter with Error

+

Counter: with Error

- + + + diff --git a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts index 79fcfc4cfa..7c7315c485 100644 --- a/core/src/components/textarea/test/bottom-content/textarea.e2e.ts +++ b/core/src/components/textarea/test/bottom-content/textarea.e2e.ts @@ -1,134 +1,209 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; -configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { - test.describe(title('textarea: bottom content'), () => { - test('should not render bottom content if no hint or counter is enabled', async ({ page }) => { - await page.setContent(``, config); +/** + * Functionality is the same across modes & directions + */ +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('textarea: bottom content functionality'), () => { + test('should not render bottom content if no hint is enabled', async ({ page }) => { + await page.setContent(``, config); const bottomEl = page.locator('ion-textarea .textarea-bottom'); await expect(bottomEl).toHaveCount(0); }); + test('helper text should be visible initially', async ({ page }) => { + await page.setContent( + ``, + config + ); + + const helperText = page.locator('ion-textarea .helper-text'); + const errorText = page.locator('ion-textarea .error-text'); + await expect(helperText).toBeVisible(); + await expect(helperText).toHaveText('Helper text'); + await expect(errorText).toBeHidden(); + }); + test('textarea should have an aria-describedby attribute when helper text is present', async ({ page }) => { + await page.setContent( + ``, + config + ); + + const textarea = page.locator('ion-textarea textarea'); + const helperText = page.locator('ion-textarea .helper-text'); + const helperTextId = await helperText.getAttribute('id'); + const ariaDescribedBy = await textarea.getAttribute('aria-describedby'); + + expect(ariaDescribedBy).toBe(helperTextId); + }); + test('error text should be visible when textarea is invalid', async ({ page }) => { + await page.setContent( + ``, + config + ); + + const helperText = page.locator('ion-textarea .helper-text'); + const errorText = page.locator('ion-textarea .error-text'); + await expect(helperText).toBeHidden(); + await expect(errorText).toBeVisible(); + await expect(errorText).toHaveText('Error text'); + }); + + test('textarea should have an aria-describedby attribute when error text is present', async ({ page }) => { + await page.setContent( + ``, + config + ); + + const textarea = page.locator('ion-textarea textarea'); + const errorText = page.locator('ion-textarea .error-text'); + const errorTextId = await errorText.getAttribute('id'); + const ariaDescribedBy = await textarea.getAttribute('aria-describedby'); + + expect(ariaDescribedBy).toBe(errorTextId); + }); + test('textarea should have aria-invalid attribute when textarea is invalid', async ({ page }) => { + await page.setContent( + ``, + config + ); + + const textarea = page.locator('ion-textarea textarea'); + + await expect(textarea).toHaveAttribute('aria-invalid'); + }); + test('textarea should not have aria-invalid attribute when textarea is valid', async ({ page }) => { + await page.setContent( + ``, + config + ); + + const textarea = page.locator('ion-textarea textarea'); + + await expect(textarea).not.toHaveAttribute('aria-invalid'); + }); + test('textarea should not have aria-describedby attribute when no hint or error text is present', async ({ + page, + }) => { + await page.setContent(``, config); + + const textarea = page.locator('ion-textarea textarea'); + + await expect(textarea).not.toHaveAttribute('aria-describedby'); + }); }); }); -configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { - test.describe(title('textarea: hint text'), () => { - test.describe('textarea: hint text functionality', () => { - test('helper text should be visible initially', async ({ page }) => { - await page.setContent( - ``, - config - ); +/** + * Rendering is different across modes + */ +configs({ modes: ['ios', 'md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('textarea: helper text rendering'), () => { + test('should not have visual regressions when rendering helper text', async ({ page }) => { + await page.setContent(``, config); - const helperText = page.locator('ion-textarea .helper-text'); - const errorText = page.locator('ion-textarea .error-text'); - await expect(helperText).toBeVisible(); - await expect(helperText).toHaveText('my helper'); - await expect(errorText).toBeHidden(); - }); - test('textarea should have an aria-describedby attribute when helper text is present', async ({ page }) => { - await page.setContent( - ``, - config - ); - - const textarea = page.locator('ion-textarea textarea'); - const helperText = page.locator('ion-textarea .helper-text'); - const helperTextId = await helperText.getAttribute('id'); - const ariaDescribedBy = await textarea.getAttribute('aria-describedby'); - - expect(ariaDescribedBy).toBe(helperTextId); - }); - test('error text should be visible when textarea is invalid', async ({ page }) => { - await page.setContent( - ``, - config - ); - - const helperText = page.locator('ion-textarea .helper-text'); - const errorText = page.locator('ion-textarea .error-text'); - await expect(helperText).toBeHidden(); - await expect(errorText).toBeVisible(); - await expect(errorText).toHaveText('my error'); - }); - test('error text should change when variable is customized', async ({ page }) => { - await page.setContent( - ` - - - `, - config - ); - - const errorText = page.locator('ion-textarea .error-text'); - await expect(errorText).toHaveScreenshot(screenshot(`textarea-error-custom-color`)); - }); - test('textarea should have an aria-describedby attribute when error text is present', async ({ page }) => { - await page.setContent( - ``, - config - ); - - const textarea = page.locator('ion-textarea textarea'); - const errorText = page.locator('ion-textarea .error-text'); - const errorTextId = await errorText.getAttribute('id'); - const ariaDescribedBy = await textarea.getAttribute('aria-describedby'); - - expect(ariaDescribedBy).toBe(errorTextId); - }); - test('textarea should have aria-invalid attribute when input is invalid', async ({ page }) => { - await page.setContent( - ``, - config - ); - - const textarea = page.locator('ion-textarea textarea'); - - await expect(textarea).toHaveAttribute('aria-invalid'); - }); - test('textarea should not have aria-invalid attribute when input is valid', async ({ page }) => { - await page.setContent( - ``, - config - ); - - const textarea = page.locator('ion-textarea textarea'); - - await expect(textarea).not.toHaveAttribute('aria-invalid'); - }); - test('textarea should not have aria-describedby attribute when no hint or error text is present', async ({ - page, - }) => { - await page.setContent(``, config); - - const textarea = page.locator('ion-textarea textarea'); - - await expect(textarea).not.toHaveAttribute('aria-describedby'); - }); + const bottomEl = page.locator('ion-textarea'); + await expect(bottomEl).toHaveScreenshot(screenshot(`textarea-helper-text`)); }); - test.describe('textarea: hint text rendering', () => { - test.describe('regular textareas', () => { - test('should not have visual regressions when rendering helper text', async ({ page }) => { - await page.setContent(``, config); + test('should not have visual regressions when rendering helper text with wrapping text', async ({ page }) => { + await page.setContent( + ``, + config + ); - const bottomEl = page.locator('ion-textarea .textarea-bottom'); - await expect(bottomEl).toHaveScreenshot(screenshot(`textarea-bottom-content-helper`)); - }); - test('should not have visual regressions when rendering error text', async ({ page }) => { - await page.setContent( - ``, - config - ); + const bottomEl = page.locator('ion-textarea'); + await expect(bottomEl).toHaveScreenshot(screenshot(`textarea-helper-text-wrapping`)); + }); + test('should not have visual regressions when rendering helper text with a stacked label', async ({ page }) => { + await page.setContent( + ``, + config + ); - const bottomEl = page.locator('ion-textarea .textarea-bottom'); - await expect(bottomEl).toHaveScreenshot(screenshot(`textarea-bottom-content-error`)); - }); - }); + const bottomEl = page.locator('ion-textarea'); + await expect(bottomEl).toHaveScreenshot(screenshot(`textarea-helper-text-stacked-label`)); + }); + }); + + test.describe(title('textarea: error text rendering'), () => { + test('should not have visual regressions when rendering error text', async ({ page }) => { + await page.setContent( + ``, + config + ); + + const bottomEl = page.locator('ion-textarea'); + await expect(bottomEl).toHaveScreenshot(screenshot(`textarea-error-text`)); + }); + test('should not have visual regressions when rendering error text with a stacked label', async ({ page }) => { + await page.setContent( + ``, + config + ); + + const bottomEl = page.locator('ion-textarea'); + await expect(bottomEl).toHaveScreenshot(screenshot(`textarea-error-text-stacked-label`)); + }); + }); +}); + +/** + * Customizing supporting text is the same across modes and directions + */ +configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('textarea: supporting text customization'), () => { + test('should not have visual regressions when rendering helper text with custom css', async ({ page }) => { + await page.setContent( + ` + + + `, + config + ); + + const helperText = page.locator('ion-textarea'); + await expect(helperText).toHaveScreenshot(screenshot(`textarea-helper-text-custom-css`)); + }); + test('should not have visual regressions when rendering error text with custom css', async ({ page }) => { + await page.setContent( + ` + + + `, + config + ); + + const errorText = page.locator('ion-textarea'); + await expect(errorText).toHaveScreenshot(screenshot(`textarea-error-text-custom-css`)); + }); + test('should not have visual regressions when rendering error text with a custom css variable', async ({ + page, + }) => { + await page.setContent( + ` + + + `, + config + ); + + const errorText = page.locator('ion-textarea'); + await expect(errorText).toHaveScreenshot(screenshot(`textarea-error-text-custom-css-var`)); }); }); }); @@ -139,7 +214,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co test('should not activate if maxlength is not specified even if bottom content is visible', async ({ page }) => { await page.setContent( ` - + `, config ); @@ -149,7 +224,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co test('default formatter should be used', async ({ page }) => { await page.setContent( ` - + `, config ); @@ -159,7 +234,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co test('custom formatter should be used when provided', async ({ page }) => { await page.setContent( ` - +