diff --git a/projects/demo-cypress/src/fixtures/manrope-fonts.ttf b/projects/demo-cypress/src/fixtures/manrope-fonts.ttf new file mode 100644 index 000000000000..1b77c2efc2cd Binary files /dev/null and b/projects/demo-cypress/src/fixtures/manrope-fonts.ttf differ diff --git a/projects/demo-cypress/src/support/component.ts b/projects/demo-cypress/src/support/component.ts index 0aa20ea468e6..a42a435b5e32 100644 --- a/projects/demo-cypress/src/support/component.ts +++ b/projects/demo-cypress/src/support/component.ts @@ -15,8 +15,19 @@ declare global { } } -export const stableMount: typeof mount = (component, config) => - mount(component, { +export const stableMount: typeof mount = (component, config) => { + cy.intercept( + {method: 'GET', resourceType: 'font', url: 'https://fonts.gstatic.com/**'}, + { + // Specify `null` as the encoding in order to read the file as a `Buffer` https://docs.cypress.io/api/commands/fixture#Encoding + fixture: 'manrope-fonts.ttf,null', + headers: { + devNotes: 'Mocked by Cypress', + }, + }, + ); + + return mount(component, { ...config, providers: [...(config?.providers || []), NG_EVENT_PLUGINS], }).then((mountResponse) => @@ -29,5 +40,6 @@ export const stableMount: typeof mount = (component, config) => return mountResponse.fixture.whenStable().then(() => mountResponse); }), ); +}; Cypress.Commands.add('mount', stableMount); diff --git a/projects/demo-cypress/src/tests/input-phone-international.cy.ts b/projects/demo-cypress/src/tests/input-phone-international.cy.ts index d30189390dc3..0171bfd490bd 100644 --- a/projects/demo-cypress/src/tests/input-phone-international.cy.ts +++ b/projects/demo-cypress/src/tests/input-phone-international.cy.ts @@ -67,6 +67,10 @@ export class Test implements OnInit { } describe('InputPhoneInternational', () => { + beforeEach(() => { + cy.viewport(400, 300); + }); + describe('Count form control updates', () => { let control!: FormControl; @@ -151,6 +155,8 @@ describe('InputPhoneInternational', () => { it('Initially empty textfield => select new country => no form control emits', () => { cy.get('tui-input-phone-international').click('left'); + cy.compareSnapshot('phone-18n-dropdown'); + selectCountry('Kazakhstan'); cy.get('@textfield').should('be.focused').should('have.value', '+7 '); @@ -249,30 +255,13 @@ describe('InputPhoneInternational', () => { cy.wait(1); cy.get('@textfield').should('have.value', '+7 777 777-7777'); + cy.get('tui-input-phone-international').compareSnapshot({ + name: 'phone-18n-formatted-value', + cypressScreenshotOptions: {padding: 8}, + }); }); }); }); - - describe('debug screenshot testing', () => { - beforeEach(() => { - cy.viewport(400, 300); - - cy.mount(Test, { - componentProperties: { - countryIsoCode: 'US', - }, - }); - }); - - it('entire page', () => { - cy.get('tui-input-phone-international').click('left'); - cy.compareSnapshot('entire-page'); - }); - - it('only textfield', () => { - cy.get('tui-input-phone-international').compareSnapshot('only-textfield'); - }); - }); }); function initAliases(wrapperSelector: string): void {