Web Vitals | Optimize Performance

Author: kvestus

.github/workflows/build.yml

@@ -8,7 +8,7 @@ on:
 
 jobs:
   build:
-    timeout-minutes: 3
+    timeout-minutes: 5
     runs-on: ubuntu-latest
     container:
       image: cypress/browsers:node18.12.0-chrome106-ff106

README.md

@@ -74,10 +74,7 @@ Check out the live demo of the app at https://languages-learner.web.app/
 
 ## Preview (Mobile)
 
-[//]: # (![preview-dictionary-page-mobile](public/preview-dictionary-page-mobile.png))
-
-[//]: # (![preview-profile-page-mobile](public/preview-profile-page-mobile.png))
 <p align="center">
-  <img src="public/preview-dictionary-page-mobile.png" alt="preview-dictionary-page-mobile" width="200" style="margin-right: 20px;">
-  <img src="public/preview-profile-page-mobile.png" alt="preview-profile-page-mobile" width="200">
+  <img src="src/assets/images/preview-dictionary-page-mobile.webp" alt="preview-dictionary-page-mobile" width="200" style="margin-right: 20px;">
+  <img src="src/assets/images/preview-profile-page-mobile.webp" alt="preview-profile-page-mobile" width="200">
 </p>

cypress/e2e/auth.cy.ts

@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 
-import { elSelector, withLang } from '@@/cypress/utils'
+import { withLang } from '@@/cypress/utils'
 import { EDataTest, EDataTestClass } from '@/enums/EDataTest'
 
 describe('user sign-in, sign-up and logout', () => {
@@ -20,9 +20,12 @@ describe('user sign-in, sign-up and logout', () => {
         cy
             .el(EDataTest.landing_sign_in_button).click()
             // To make close button unfocused
-            .elByClass(EDataTestClass.app_card_content).should('be.visible').click()
+            .elByClass(EDataTestClass.app_dialog).should('be.visible').click()
             .get('html').toMatchSnapshot('Sign in modal')
-            .get(`${elSelector(EDataTest.authentication_modal)} .n-base-close`).click()
+            .elByClass(EDataTestClass.app_dialog).within(() => {
+                cy.elByClass(EDataTestClass.app_close_button).click()
+            })
+
 
             .authWithoutSession()
             .elByClass(EDataTestClass.app_notifications).should('be.visible').and('contain', 'successful_authorization')
@@ -53,7 +56,9 @@ describe('user sign-in, sign-up and logout', () => {
             .toMatchSnapshotForEl(EDataTestClass.app_notifications, 'Sign in error notification')
         cy
             .el(EDataTest.authentication_modal_error).should('be.visible').contains(errorMessageInvalidEmail)
-            .get(`${elSelector(EDataTest.authentication_modal)} .n-base-close`).click()
+            .elByClass(EDataTestClass.app_dialog).within(() => {
+                cy.elByClass(EDataTestClass.app_close_button).click()
+            })
 
         cy.authWithoutSession({
             username: '',
@@ -68,7 +73,9 @@ describe('user sign-in, sign-up and logout', () => {
             .and('contain', errorMessageInvalidEmail)
         cy
             .el(EDataTest.authentication_modal_error).should('be.visible').contains(errorMessageInvalidEmail)
-            .get(`${elSelector(EDataTest.authentication_modal)} .n-base-close`).click()
+            .elByClass(EDataTestClass.app_dialog).within(() => {
+                cy.elByClass(EDataTestClass.app_close_button).click()
+            })
 
         cy.authWithoutSession({
             username: '[email protected]',
@@ -83,7 +90,9 @@ describe('user sign-in, sign-up and logout', () => {
             .and('contain', errorMessageInvalidCredential)
         cy
             .el(EDataTest.authentication_modal_error).should('be.visible').contains(errorMessageInvalidCredential)
-            .get(`${elSelector(EDataTest.authentication_modal)} .n-base-close`).click()
+            .elByClass(EDataTestClass.app_dialog).within(() => {
+                cy.elByClass(EDataTestClass.app_close_button).click()
+            })
 
         cy.authWithoutSession({
             username: '[email protected]',
@@ -98,16 +107,20 @@ describe('user sign-in, sign-up and logout', () => {
             .and('contain', errorMessageMissingPassword)
         cy
             .el(EDataTest.authentication_modal_error).should('be.visible').contains(errorMessageMissingPassword)
-            .get(`${elSelector(EDataTest.authentication_modal)} .n-base-close`).click()
+            .elByClass(EDataTestClass.app_dialog).within(() => {
+                cy.elByClass(EDataTestClass.app_close_button).click()
+            })
     })
 
     it('should display sign-up error for existing use', () => {
         cy
             .el(EDataTest.landing_sign_up_button).click()
             // To make close button unfocused
-            .elByClass(EDataTestClass.app_card_content).should('be.visible').click()
+            .elByClass(EDataTestClass.app_dialog).should('be.visible').click()
             .get('html').toMatchSnapshot('Sign up modal')
-            .get(`${elSelector(EDataTest.authentication_modal)} .n-base-close`).click()
+            .elByClass(EDataTestClass.app_dialog).within(() => {
+                cy.elByClass(EDataTestClass.app_close_button).click()
+            })
 
             .authWithoutSession({
                 ...(Cypress.env('testUser') ?? {}),

cypress/snapshots/base/auth.cy.ts/[Desktop] [1100x660] Sign in error notification.png

@@ -8,6 +8,7 @@
       <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
       <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png" />
       <link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png" />
+      <link rel="preconnect" href="https://firestore.googleapis.com" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
     <title>Languages Learner</title>
   </head>