chore(demo-cypress): mock fonts to fix flaky Cypress tests (#9765)

taiga-family · Nov 20, 2024 · 432a486 · 432a486
1 parent e5aa261
commit 432a486
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 23 deletions.
diff --git a/projects/demo-cypress/src/fixtures/manrope-fonts.ttf b/projects/demo-cypress/src/fixtures/manrope-fonts.ttf
diff --git 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
@@ -67,6 +67,10 @@ export class Test implements OnInit {
 }
 
 describe('InputPhoneInternational', () => {
+    beforeEach(() => {
+        cy.viewport(400, 300);
+    });
+
     describe('Count form control updates', () => {
         let control!: FormControl<string>;
 
@@ -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 {