Upgrade of translation libraries and related (#1616)

* upgraded NextJS to fix dependabot vulnerability warnings

* fixed linter and formatting

* reverted next to 13.4.12, updated MUI and translation libraries

* upgraded playwright to latest

* fixed language change and corrected decimal separators

* forced resolution for postcss and zod to fix security recommendations

* added locale for tests to fix decimal separator mixups

* donation amount changed to integer to avoid language specific decimal separators

* upgraded node to v20

* fixing the docker build context to use the already checked out code from github checkout action

.github/workflows/tests.yml

@@ -32,6 +32,7 @@ jobs:
           GHOST_API_URL: https://blog.podkrepi.bg
           GHOST_CONTENT_KEY: ${{ secrets.GHOST_CONTENT_KEY }}
         with:
+          context: .
           push: false
           target: runner
           build-args: |

Dockerfile

@@ -1,6 +1,6 @@
 # Build target dependencies #
 ###########################
-FROM node:16-alpine3.16 AS base
+FROM node:20-alpine AS base
 WORKDIR /app
 ARG NODE_ENV=production
 ENV PATH=/app/node_modules/.bin:$PATH \

e2e/package.json

@@ -11,8 +11,8 @@
     "test": "tests"
   },
   "dependencies": {
-    "@playwright/test": "1.30.0",
-    "playwright": "1.30.0"
+    "@playwright/test": "^1.38.1",
+    "playwright": "^1.38.1"
   },
   "keywords": [],
   "author": "",

e2e/pages/web-pages/header.page.ts

@@ -50,6 +50,11 @@ export class HeaderPage extends BasePage {
     language: LanguagesEnum,
   ): Promise<void> {
     await this.waitForElementToBePresentedBySelector(this.toolbarCommonButtonsSelector)
+
+    //first switch to the desired language
+    await this.changeLanguageToBe(language)
+
+    //then find the item to click on
     if (language === LanguagesEnum.BG) {
       await this.clickElement(this.toolbarCommonButtonsSelector, { hasText: navTextBg })
     } else if (language === LanguagesEnum.EN) {
@@ -128,9 +133,10 @@ export class HeaderPage extends BasePage {
 
   /**
    * Click on the language header button to change the page language
-   * @param {LanguagesEnum} languageParam
+   * @param {LanguagesEnum} language
    */
-  async changeanguageHeaderButtonToBe(languageParam: LanguagesEnum): Promise<void> {
-    await this.clickHeaderNavLink(LanguagesEnum.BG, LanguagesEnum.EN, languageParam)
+  async changeLanguageToBe(language: LanguagesEnum): Promise<void> {
+    const localeButton = this.page.getByTestId('locale-button')
+    if ((await localeButton.innerText()) === language) await localeButton.click()
   }
 }

e2e/tests/regression/donation-flow/anon-donation-custom.spec.ts

@@ -7,6 +7,7 @@ import { DonationPage } from '../../../pages/web-pages/campaigns/donation.page'
 import { bgDonationRegions } from '../../../data/enums/donation-regions.enum'
 import { StripeCheckoutPage } from '../../../pages/web-pages/external/stripe-checkout.page'
 import { anonDonationTestData } from '../../../data/support-page-tests.data'
+import { LanguagesEnum } from '../../../data/enums/languages.enum'
 
 // This spec contains E2E tests related to anonymous donation flow - custom amount
 // The tests are dependent, the whole describe should be runned
@@ -24,6 +25,8 @@ test.describe.serial(
     const otherAmountText = bgLocalizationOneTimeDonation['first-step'].other
     const bgCardIncludeFeesText = bgLocalizationOneTimeDonation['third-step']['card-include-fees']
 
+    test.use({ locale: 'bg-BG' }) //this is to ensure decimal separator is correctly expected
+
     test.beforeAll(async ({ browser }) => {
       page = await browser.newPage()
       homepage = new HomePage(page)
@@ -34,6 +37,7 @@ test.describe.serial(
       // For local executions use method navigateToLocalhostHomepage();
       // await homepage.navigateToLocalhostHomepage();
       await homepage.navigateToEnvHomepage()
+      await headerPage.changeLanguageToBe(LanguagesEnum.BG)
     })
 
     test.afterAll(async () => {
@@ -58,29 +62,29 @@ test.describe.serial(
         .soft(await donationPage.isSelectAmountStepActive(), 'Select Amount step is not active.')
         .toBeTruthy()
       await donationPage.selectRadioButtonByLabelText([otherAmountText])
-      await donationPage.fillOtherAmountInputField('7.50')
+      await donationPage.fillOtherAmountInputField('75')
       await donationPage.setDonationRegionFromTheDropdown(bgDonationRegions.EUROPE)
       await donationPage.selectCheckboxByLabelText([bgCardIncludeFeesText])
       // Expected pattern:
       // За вашия превод от {totalChargedAmountText} лв., таксата на Stripe ще е {feeAmountText} лв., а кампанията ще получи {donationAmountText} лв.
       const totalChargedAmountText = await donationPage.getTotalChargedAmountsAsText()
       const feeAmountText = await donationPage.getFeeAmountsAsText()
       const donationAmountText = await donationPage.getDonationAmountsAsText()
-      expect.soft(totalChargedAmountText).toEqual('8,10 лв.')
-      expect.soft(feeAmountText).toEqual('0,60 лв.')
-      expect(donationAmountText).toEqual('7,50 лв.')
+      expect.soft(totalChargedAmountText).toEqual('76,42 лв.')
+      expect.soft(feeAmountText).toEqual('1,42 лв.')
+      expect(donationAmountText).toEqual('75,00 лв.')
     })
 
     test('The total charge, fee tax and donation amount are recalculated correctly when the donation amount is changed', async () => {
-      await donationPage.fillOtherAmountInputField('12.90')
+      await donationPage.fillOtherAmountInputField('120')
       // Expected pattern:
       // За вашия превод от {totalChargedAmountText} лв., таксата на Stripe ще е {feeAmountText} лв., а кампанията ще получи {donationAmountText} лв.
       const totalChargedAmountText = await donationPage.getTotalChargedAmountsAsText()
       const feeAmountText = await donationPage.getFeeAmountsAsText()
       const donationAmountText = await donationPage.getDonationAmountsAsText()
-      expect.soft(totalChargedAmountText).toEqual('13,56 лв.')
-      expect.soft(feeAmountText).toEqual('0,66 лв.')
-      expect(donationAmountText).toEqual('12,90 лв.')
+      expect.soft(totalChargedAmountText).toEqual('121,96 лв.')
+      expect.soft(feeAmountText).toEqual('1,96 лв.')
+      expect(donationAmountText).toEqual('120,00 лв.')
     })
 
     test('The user is able to fill in e-mail for anonymous donation', async () => {
@@ -107,7 +111,7 @@ test.describe.serial(
       const actualStripeEmail = await stripeCheckoutPage.getReadonlyEmailText()
       expect
         .soft(stripeTotalAmount, 'The Stripe total donation amount is not correct.')
-        .toContain('13.56')
+        .toContain('121,96')
       expect(actualStripeEmail, 'The user e-mail is not sent correctly to Stripe.').toEqual(
         testEmail,
       )

e2e/tests/regression/donation-flow/anon-donation-fixed.spec.ts

@@ -34,7 +34,7 @@ test.describe.serial(
       // For local executions use method navigateToLocalhostHomepage();
       // await homepage.navigateToLocalhostHomepage();
       await homepage.navigateToEnvHomepage()
-      await headerPage.changeanguageHeaderButtonToBe(LanguagesEnum.EN)
+      await headerPage.changeLanguageToBe(LanguagesEnum.EN)
     })
 
     test.afterAll(async () => {