/*!
 * KoliBri - The accessible HTML-Standard
 */
import { expect } from "@playwright/test";
import { test } from "@stencil/playwright";
const testInputCharacterLimit = (componentName) => {
    test.describe('character limit', () => {
        test.describe('With _has-counter', () => {
            test('Should show current value length when no limits are applied', async ({ page }) => {
                await page.setContent(`<${componentName} _label="Input" _value="abc" _has-counter></${componentName}>`);
                await page.waitForChanges();
                await expect(page.getByTestId('input-counter')).toHaveText('3 Zeichen');
                await expect(page.getByTestId('input-counter-aria')).toHaveText('3 Zeichen');
            });
            test('Should show current value and max length when theres a max length and _max-length-behavior hard', async ({ page }) => {
                await page.setContent(`<${componentName} _label="Input" _value="abc" _max-length="10" _has-counter></${componentName}>`);
                await page.waitForChanges();
                await expect(page.getByTestId('input-counter')).toHaveText('3/10 Zeichen');
                await expect(page.getByTestId('input-counter-aria')).toHaveText('3 von 10 Zeichen');
            });
            test.describe('With _maxLengthBehaviour="soft"', () => {
                test(`should show the initial remaining characters`, async ({ page }) => {
                    await page.setContent(`<${componentName} _label="Input" _max-length="10" _has-counter _max-length-behavior="soft" _value="abc"></${componentName}>`);
                    await page.waitForChanges();
                    await expect(page.getByTestId('input-counter')).toHaveText('Es sind noch 7 Zeichen verfügbar.');
                    await expect(page.getByTestId('input-counter-aria')).toHaveText('Es sind noch 7 Zeichen verfügbar.');
                });
                test(`should update the remaining characters when typing`, async ({ page }) => {
                    await page.setContent(`<${componentName} _label="Input" _max-length="10" _has-counter _max-length-behavior="soft" _value="abc"></${componentName}>`);
                    await page.waitForChanges();
                    await page.locator('input,textarea').fill('abcdef');
                    await page.waitForTimeout(500);
                    await expect(page.getByTestId('input-counter')).toHaveText('Es sind noch 4 Zeichen verfügbar.');
                    await expect(page.getByTestId('input-counter-aria')).toHaveText('Es sind noch 4 Zeichen verfügbar.');
                });
                test('should render an alternative text and modifier class when the limit has been exceeded', async ({ page }) => {
                    await page.setContent(`<${componentName} _label="Input" _max-length="10" _has-counter _max-length-behavior="soft" _value="abc"></${componentName}>`);
                    await page.waitForChanges();
                    await page.locator('input,textarea').fill('a'.repeat(12));
                    await expect(page.getByTestId('input-counter')).toHaveText('Es sind 2 Zeichen zu viel.');
                    await expect(page.getByTestId('input-counter')).toHaveClass('kol-form-field__counter kol-form-field__counter--exceeded');
                    await expect(page.getByTestId('input-counter-aria')).toHaveText('Es sind 2 Zeichen zu viel.');
                });
                test(`should update the remaining characters in the aria-live region with a delay`, async ({ page }) => {
                    await page.setContent(`<${componentName} _label="Input" _max-length="10" _has-counter _max-length-behavior="soft" _value="abc"></${componentName}>`);
                    await page.waitForChanges();
                    const ariaCounter = page.getByTestId('input-counter-aria');
                    const initialText = await ariaCounter.textContent();
                    if (initialText !== 'Es sind noch 7 Zeichen verfügbar.') {
                        await expect(ariaCounter).toHaveText('Es sind noch 10 Zeichen verfügbar.');
                        await expect(ariaCounter).toHaveText('Es sind noch 7 Zeichen verfügbar.', { timeout: 1500 });
                    }
                });
            });
        });
        test.describe('FormFieldCharacterLimitHint', () => {
            test('Should render character limit hint when maxLength is set with soft behavior', async ({ page }) => {
                await page.setContent(`<${componentName} _label="Input"  _max-length="10" _max-length-behavior="soft" _value="abc"></${componentName}>`);
                await page.waitForChanges();
                const inputElement = page.locator('input,textarea');
                const hintElement = page.locator('[id*="character-limit-hint"]');
                await expect(hintElement).toBeAttached();
                await expect(hintElement).toHaveText('Es können bis zu 10 Zeichen eingegeben werden.');
                const hintId = await hintElement.getAttribute('id');
                await expect(inputElement).toHaveAttribute('aria-describedby', hintId);
            });
            test('Should render character limit hint when maxLength is set with hard behavior', async ({ page }) => {
                await page.setContent(`<${componentName} _label="Input"  _max-length="10" _value="abc"></${componentName}>`);
                await page.waitForChanges();
                const inputElement = page.locator('input,textarea');
                const hintElement = page.locator('[id*="character-limit-hint"]');
                await expect(hintElement).toBeAttached();
                await expect(hintElement).toHaveText('Es können bis zu 10 Zeichen eingegeben werden.');
                const hintId = await hintElement.getAttribute('id');
                await expect(inputElement).toHaveAttribute('aria-describedby', hintId);
            });
            test('Should not render character limit hint when no maxLength is set', async ({ page }) => {
                await page.setContent(`<${componentName} _label="Input"  _has-counter _value="abc"></${componentName}>`);
                await page.waitForChanges();
                const hintElement = page.locator('[id*="character-limit-hint"]');
                await expect(hintElement).not.toBeAttached();
            });
        });
    });
};
export { testInputCharacterLimit };
//# sourceMappingURL=input-character-limit.js.map
