diff --git a/.cspell.json b/.cspell.json index f8fe164e1cee..661231eaf98e 100644 --- a/.cspell.json +++ b/.cspell.json @@ -37,7 +37,8 @@ "replicants", "tuiiconbutton", "hitbox", - "domcontentloaded" + "domcontentloaded", + "filechooser" ], "ignoreRegExpList": ["\\(https?://.*?\\)", "\\/{1}.+\\/{1}", "\\%2F.+", "\\%2C.+", "\\ɵ.+", "\\ыва.+"], "overrides": [ diff --git a/projects/demo-cypress/cypress/tests/kit/input-files/input-files.cy.ts b/projects/demo-cypress/cypress/tests/kit/input-files/input-files.cy.ts deleted file mode 100644 index 4e5034ee9ada..000000000000 --- a/projects/demo-cypress/cypress/tests/kit/input-files/input-files.cy.ts +++ /dev/null @@ -1,61 +0,0 @@ -describe('InputFiles', () => { - describe('supports dynamic change of i18n for errors', () => { - it('Wrong file type', () => { - cy.viewport(800, 500); - cy.tuiVisit('/components/input-files/API?accept=application/pdf', { - skipExpectUrl: true, - hideNavigation: false, - hideLanguageSwitcher: false, - }); - - cy.get('[tuiInputFiles]').selectFile('cypress/fixtures/stubs/web-api.svg'); - - cy.get('#demo-content tui-file') - .should('contain.text', 'Wrong file type') - .matchImageSnapshot('01-01-input-files-[english]-wrong-file-type'); - - cy.tuiSetLanguage('dutch'); - - cy.get('#demo-content tui-file') - .should('contain.text', 'Verkeerd bestandsformaat') - .matchImageSnapshot('01-02-input-files-[dutch]-wrong-file-type'); - }); - - it('File is too large', () => { - cy.viewport(850, 500); - cy.tuiVisit('/components/input-files/API?accept=image/*&maxFileSize=2000', { - skipExpectUrl: true, - hideNavigation: false, - hideLanguageSwitcher: false, - }); - - cy.get('[tuiInputFiles]').selectFile('cypress/fixtures/stubs/web-api.svg'); - - cy.get('#demo-content tui-file') - .contains(/File is too large 2 Ki?B/) - .matchImageSnapshot('02-01-input-files-[english]-file-too-large'); - - cy.tuiSetLanguage('dutch'); - - cy.get('#demo-content tui-file') - .contains(/Bestandsgrootte overschreden 2 Ki?B/) - .matchImageSnapshot('02-02-input-files-[dutch]-file-too-large'); - }); - - it('Link text is too long', () => { - cy.viewport(550, 500); - cy.tuiVisit( - '/components/input-files/API?tuiMode=null&link=Select%20a%20file%20with%20a%20too%20long%20name.%20Long%20filename.%20Very%20long%20filename', - { - skipExpectUrl: true, - hideNavigation: false, - hideLanguageSwitcher: false, - }, - ); - - cy.get('[tuiInputFiles]').matchImageSnapshot( - '03-01-input-files-link-text-too-long', - ); - }); - }); -}); diff --git a/projects/demo-playwright/tests/kit/input-files/input-files.spec.ts b/projects/demo-playwright/tests/kit/input-files/input-files.spec.ts new file mode 100644 index 000000000000..14465fd642b9 --- /dev/null +++ b/projects/demo-playwright/tests/kit/input-files/input-files.spec.ts @@ -0,0 +1,50 @@ +import {TuiDocumentationApiPagePO, tuiGoto} from '@demo-playwright/utils'; +import {expect, Locator, test} from '@playwright/test'; +import {join} from 'path'; + +test.describe('InputFiles', () => { + let example: Locator; + + test.beforeEach(({page}) => { + example = new TuiDocumentationApiPagePO(page).apiPageExample; + }); + + ['english', 'dutch', 'russian'].forEach(language => + test(`Wrong file type (i18n: ${language})`, async ({page}) => { + await tuiGoto(page, '/components/input-files/API?accept=application/pdf', { + language, + }); + + await example + .locator('[tuiInputFiles]') + .setInputFiles(join(__dirname, '../../../stubs/web-api.svg')); + await expect(example).toHaveScreenshot(`01-${language}-input-files.png`); + }), + ); + + ['english', 'dutch', 'russian'].forEach(language => + test(`File is too large (i18n: ${language})`, async ({page}) => { + await tuiGoto( + page, + '/components/input-files/API?accept=image/*&maxFileSize=2000', + {language}, + ); + await example + .locator('[tuiInputFiles]') + .setInputFiles(join(__dirname, '../../../stubs/web-api.svg')); + await expect(example).toHaveScreenshot(`02-${language}-input-files.png`); + }), + ); + + test('Link text is too long', async ({page}) => { + await page.setViewportSize({width: 550, height: 500}); + await tuiGoto( + page, + '/components/input-files/API?link=Select%20a%20file%20with%20a%20too%20long%20name.%20Long%20filename.%20Very%20long%20filename', + ); + await example + .locator('[tuiInputFiles]') + .setInputFiles(join(__dirname, '../../../stubs/web-api.svg')); + await expect(example).toHaveScreenshot('03-input-files.png'); + }); +}); diff --git a/projects/demo-playwright/utils/goto.ts b/projects/demo-playwright/utils/goto.ts index 2b9f029a0bc6..a4ff21fa2635 100644 --- a/projects/demo-playwright/utils/goto.ts +++ b/projects/demo-playwright/utils/goto.ts @@ -5,6 +5,7 @@ import {tuiWaitForFonts} from './wait-for-fonts'; interface TuiGotoOptions extends NonNullable[1]> { date?: Date; + language?: string; hideHeader?: boolean; enableNightMode?: boolean; hideVersionManager?: boolean; @@ -20,6 +21,7 @@ export async function tuiGoto( enableNightMode = false, hideVersionManager = false, hideLanguageSwitcher = false, + language, ...playwrightGotoOptions }: TuiGotoOptions = {}, ): ReturnType { @@ -36,6 +38,13 @@ export async function tuiGoto( ); } + if (language) { + await page.addInitScript( + lang => globalThis.localStorage.setItem('tuiLanguage', lang), + language, + ); + } + await tuiMockDate(page, date); const response = await page.goto(url, playwrightGotoOptions);