Merge branch 'main' into feat--google-breadcrumbs

.github/workflows/build-and-deploy.yaml

@@ -18,7 +18,7 @@ jobs:
       region: ${{ steps.resolve-env.outputs.region }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Determine environment-specific variables
         id: resolve-env
         run: |
@@ -40,7 +40,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup node
         uses: actions/setup-node@v3

.github/workflows/code-quality.yaml

@@ -15,24 +15,24 @@ jobs:
   sonarcloud-server:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
-          fetch-depth: 0  # Shallow clones should be disabled for a better relevancy of analysis
+          fetch-depth: 0 # Shallow clones should be disabled for a better relevancy of analysis
 
       - name: SonarCloud Scan
-        uses: SonarSource/sonarcloud-github-action@v1.9.1
+        uses: SonarSource/sonarcloud-github-action@v2.0.2
         with:
           projectBaseDir: apps/server
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}  # Needed to get PR information, if any
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Needed to get PR information, if any
           SONAR_TOKEN: ${{ secrets.SONAR_TOKEN_SERVER }}
 
   sonarcloud-web:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
-          fetch-depth: 0  # Shallow clones should be disabled for a better relevancy of analysis
+          fetch-depth: 0 # Shallow clones should be disabled for a better relevancy of analysis
 
       - name: Setup node
         uses: actions/setup-node@v3
@@ -59,9 +59,9 @@ jobs:
         run: yarn --frozen-lockfile
 
       - name: SonarCloud Scan
-        uses: SonarSource/sonarcloud-github-action@v1.9.1
+        uses: SonarSource/sonarcloud-github-action@v2.0.2
         with:
           projectBaseDir: apps/web
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}  # Needed to get PR information, if any
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Needed to get PR information, if any
           SONAR_TOKEN: ${{ secrets.SONAR_TOKEN_WEB }}

.github/workflows/conventional-pr-name.yml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup node
         uses: actions/setup-node@v3

.github/workflows/e2e-tests.yaml

@@ -3,7 +3,10 @@ name: e2e-tests
 on:
   workflow_dispatch:
   pull_request:
-    types: [ opened, synchronize, reopened, ready_for_review ]
+    types: [opened, synchronize, reopened, ready_for_review]
+  push:
+    branches:
+      - main
 
 permissions:
   contents: read
@@ -15,7 +18,7 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup node
         uses: actions/setup-node@v3

.github/workflows/initial-setup.yaml

@@ -20,7 +20,7 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
 

.github/workflows/lint.yml

@@ -18,7 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup node
         uses: actions/setup-node@v3

.github/workflows/run-lhci-test.yml

@@ -17,7 +17,7 @@ jobs:
     if: github.event.pull_request.draft == false
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup node
         uses: actions/setup-node@v3

.github/workflows/unit-tests.yaml

@@ -0,0 +1,47 @@
+name: unit-tests
+
+on:
+  workflow_dispatch:
+#  push:
+#    branches:
+#      - develop
+#  pull_request:
+#    types: [opened, synchronize, reopened, ready_for_review]
+
+jobs:
+  unit-tests:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20.5'
+          cache: 'yarn'
+          registry-url: "https://npm.pkg.github.com"
+
+      - name: Set yarn version
+        run: |
+          yarn set version stable
+          yarn set version 3.6.3
+
+      - name: Setup .yarnrc.yml
+        run: |
+          yarn config set nodeLinker node-modules
+          yarn config set npmScopes.plentymarkets.npmRegistryServer "https://npm.pkg.github.com"
+          yarn config set npmScopes.plentymarkets.npmAlwaysAuth true
+          yarn config set npmScopes.plentymarkets.npmAuthToken $NODE_AUTH_TOKEN
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Install Dependencies
+        run: yarn --frozen-lockfile
+
+      - name: Build packages
+        run: yarn build
+
+      - name: Run tests
+        run: yarn test

apps/server/package.json

@@ -10,13 +10,15 @@
     "lint:fix": "eslint . --ext .ts --fix"
   },
   "dependencies": {
-    "@vue-storefront/middleware": "3.4.0",
-    "consola": "^2.15.3",
-    "nodemon": "^2.0.19",
+    "@vue-storefront/middleware": "3.5.1",
+    "consola": "^3.0.0",
+    "nodemon": "^3.0.0",
     "ts-node-dev": "^2.0.0"
   },
   "devDependencies": {
     "@types/cors": "^2.8.13",
-    "@types/express": "^4.17.13"
+    "@types/express": "^4.17.13",
+    "eslint": "^8.50.0",
+    "eslint-plugin-prettier": "5.0.0"
   }
 }

apps/web/__tests__/support/pageObjects/CategoryObject.ts

@@ -0,0 +1,9 @@
+
+export class CategoryPageObject {
+  get filterClickShouldReloadCategory() {
+    cy.intercept('http://localhost:8181/plentysystems/getFacet').as('getFacet');
+    cy.getByTestId('category-filter-0').first().click();
+    cy.wait('@getFacet').its('response.statusCode').should('eq', 200)
+    return this;
+  }
+}

apps/web/__tests__/support/pageObjects/MyAccountPageObject.ts

@@ -0,0 +1,72 @@
+import { paths } from "../../../utils/paths";
+
+export class MyAccountPageObject {
+  get accountDropdownListItem () {
+    return cy.get(`a[href="${paths.account}"]`)
+  }
+
+  clickTopBarMyAccountLink() {
+    cy.getByTestId('account-dropdown-button').should('exist').click();
+
+    this.accountDropdownListItem
+      .should('exist')
+      .contains('My Account').click();
+
+    cy.url().should('contain', paths.account);
+  }
+
+  checkAllSections() {
+    cy.contains('Account Settings').should('exist');
+    cy.contains('Personal Data').should('exist');
+    cy.contains('Billing Details').should('exist');
+    cy.contains('Shipping Details').should('exist');
+    cy.contains('Orders & Returns').should('exist');
+    cy.contains('My Orders').should('exist');
+    cy.contains('Returns').should('exist');
+    cy.contains('Logout').should('exist');
+
+    return this;
+  }
+
+  personalDataSection() {
+    cy.get('a').contains('Personal Data').click();
+    cy.url().should('contain', paths.accountPersonalData);
+    cy.contains('Your name').should('exist');
+    cy.contains('Contact information').should('exist');
+    cy.contains('Your password').should('exist');
+
+    return this;
+  }
+
+  billingDetailsSection() {
+    cy.get('a').contains('Billing Details').click();
+    cy.url().should('contain', paths.accountBillingDetails);
+    cy.contains('Billing address').should('exist');
+
+    return this;
+  }
+
+  shippingDetailsSection() {
+    cy.get('a').contains('Shipping Details').click();
+    cy.url().should('contain', paths.accountShippingDetails);
+    cy.contains('Shipping address').should('exist');
+
+    return this;
+  }
+
+  myOrdersSection() {
+    cy.get('a').contains('My Orders').click();
+    cy.url().should('contain', paths.accountMyOrders);
+    cy.contains("Details").should('exist');
+
+    return this;
+  }
+
+  returnsSection() {
+    cy.get('a').contains('Returns').click();
+    cy.url().should('contain', paths.accountReturns);
+    cy.contains("You haven’t shopped with us yet").should('exist');
+
+    return this;
+  }
+}

apps/web/__tests__/test/smoke/cartPage.cy.ts

@@ -1,15 +1,15 @@
-import { paths } from '../../../utils/paths';
 import { CartPageObject } from '../../support/pageObjects/CartPageObject';
 import { HomePageObject } from '../../support/pageObjects/HomePageObject';
 import { ProductListPageObject } from '../../support/pageObjects/ProductListPageObject';
+import { paths } from '../../../utils/paths';
 
 const cart = new CartPageObject();
 const homePage = new HomePageObject();
 const productListPage = new ProductListPageObject();
 
 describe('Smoke: Cart Page', () => {
   it('[smoke] Add items to cart and display it', () => {
-    cy.visitAndHydrate(paths.home);
+    cy.visit(paths.home);
 
     homePage.goToCategory();
     productListPage.addToCart()

apps/web/__tests__/test/smoke/categoryPage.cy.ts

@@ -0,0 +1,13 @@
+import { CategoryPageObject } from '../../support/pageObjects/CategoryObject';
+
+const category = new CategoryPageObject();
+
+describe('Smoke: Category Page', () => {
+  it('[smoke] Category filters should trigger a product data reload', () => {
+    // We should configure the system so that the first category is set up with filters. 
+    // This way we are independet from the language and the url.
+    cy.visitAndHydrate('/c/living-room');
+
+    category.filterClickShouldReloadCategory;
+  })
+});

apps/web/__tests__/test/smoke/checkoutPage.cy.ts

@@ -1,8 +1,8 @@
-import { paths } from '../../../utils/paths';
 import { CartPageObject } from '../../support/pageObjects/CartPageObject';
 import { CheckoutPageObject } from '../../support/pageObjects/CheckoutPageObject';
 import { HomePageObject } from '../../support/pageObjects/HomePageObject';
 import { ProductListPageObject } from '../../support/pageObjects/ProductListPageObject';
+import { paths } from '../../../utils/paths';
 
 const checkout = new CheckoutPageObject();
 const cart = new CartPageObject();

apps/web/__tests__/test/smoke/homePage.cy.ts

@@ -1,5 +1,5 @@
-import { paths } from '../../../utils/paths';
 import { HomePageObject } from '../../support/pageObjects/HomePageObject';
+import { paths } from '../../../utils/paths';
 
 const homePage = new HomePageObject();
 

apps/web/__tests__/test/smoke/myAccountPage.cy.ts

@@ -0,0 +1,24 @@
+import { paths } from '../../../utils/paths';
+import { MyAccountPageObject } from '../../support/pageObjects/MyAccountPageObject';
+
+const myAccount = new MyAccountPageObject();
+
+describe('my account', () => {
+  // it('going to my account from header', () => {
+  //   cy.visitAndHydrate(paths.home);
+  //
+  //   myAccount.clickTopBarMyAccountLink();
+  // });
+  //
+  // it('checking my account section', () => {
+  //   cy.visitAndHydrate(paths.account);
+  //
+  //   myAccount
+  //     .checkAllSections()
+  //     .personalDataSection()
+  //     .billingDetailsSection()
+  //     .shippingDetailsSection()
+  //     .myOrdersSection()
+  //     .returnsSection();
+  // });
+});

apps/web/components/AccountData/AccountData.vue

@@ -11,9 +11,9 @@
     </div>
   </div>
 </template>
-<script lang="ts" setup>
+<script setup lang="ts">
 import { SfButton } from '@storefront-ui/vue';
-import { AccountDataProps } from './types';
+import type { AccountDataProps } from '~/components/AccountData/types';
 
 withDefaults(defineProps<AccountDataProps>(), {
   showEditButton: false,

apps/web/components/AccountData/__tests__/AccountData.spec.ts

@@ -3,8 +3,13 @@ import AccountData from '~/components/AccountData/AccountData.vue';
 
 describe('<AccountData />', () => {
   it('should render component', () => {
-    const { getByTestId } = mount(AccountData);
+    const { getByTestId } = mount(AccountData, {
+      props: {
+        header: 'Header',
+        buttonText: 'Button Text'
+      }
+    });
 
-    expect(getByTestId('account-data'));    
+    expect(getByTestId('account-data'));
   });
-});
+});

apps/web/components/AccountForms/AccountFormsName.vue

@@ -18,13 +18,14 @@
     </div>
   </form>
 </template>
-<script lang="ts" setup>
+<script setup lang="ts">
 import { SfButton, SfInput } from '@storefront-ui/vue';
 import type { AccountFormsNameProps } from '~/components/AccountForms/types';
 
 const props = defineProps<AccountFormsNameProps>();
-const { firstName, lastName } = toRefs(props);
 defineEmits(['on-save', 'on-cancel']);
+
+const { firstName, lastName } = toRefs(props);
 const userData = ref({
   firstName: firstName?.value ?? '',
   lastName: lastName?.value ?? '',