[Release] Stage to Main

.github/codeql/codeql-config.yml

@@ -6,3 +6,4 @@ paths-ignore:
   - 'tools/translation/**'
   - node_modules
   - libs/deps/mas
+  - libs/features/mas/dist

.github/workflows/run-mas-tests.yaml

@@ -34,13 +34,6 @@ jobs:
       - name: Upload commerce coverage to Codecov
         uses: codecov/codecov-action@v4
         with:
-          name: mas-commerce
+          name: mas
           token: ${{ secrets.CODECOV_TOKEN }}
-          files: libs/features/mas/commerce/coverage/lcov.info
-
-      - name: Upload web-components coverage to Codecov
-        uses: codecov/codecov-action@v4
-        with:
-          name: mas-web-components
-          token: ${{ secrets.CODECOV_TOKEN }}
-          files: libs/features/mas/web-components/coverage/lcov.info
+          files: libs/features/mas/coverage/lcov.info

.github/workflows/run-tests.yaml

@@ -22,6 +22,7 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
+        cache: 'npm'
 
     - name: Install dependencies
       run: npm install

.gitignore

@@ -11,4 +11,5 @@ logs/*
 test-html-results/
 test-results/
 test-a11y-results/
+tmp
 libs/navigation/dist/

.hlxignore

@@ -10,3 +10,4 @@ web-test-runner.config.mjs
 codecov.yaml
 libs/features/mas/*
 !libs/features/mas/docs
+!libs/features/mas/dist

README.md

@@ -74,6 +74,8 @@ npm run test:watch
 -----
 
 #### 1. Running Nala Tests
+Make sure you ran `npm run install` in the project root.
+You might need also to run `npx playwright install`.
 Nala tests are run using the `npm run nala <env> [options]` command:
 
 ```sh
@@ -91,8 +93,14 @@ npm run nala <env> [options]
   - config=<config-file>               # Configuration file (default: Playwright default)
   - project=<project-name>             # Project configuration (default: milo-live-chromium)
   - milolibs=<local|prod|feature|any|> # Milolibs?=<env> 
+```
 
+Examples:
+```
+npm run nala local test=masccd.test.js                # Run tests from masccd.test.js file on your local changes. Don't forget `aem up` before running.
+npm run nala MWPW-162385 owner='npeltier' @mas-ccd    # Run tests tagged as 'mas-ccd' in 'npeltier' fork on MWPW-162385 branch
 ```
+
 #### 2. Nala Help Command:
 To view examples of how to use Nala commands with various options, you can run
 ```sh

libs/blocks/merch-card-collection/merch-card-collection.js

@@ -1,3 +1,4 @@
+import '../merch/merch.js';
 import { overrideUrlOrigin } from '../../utils/helpers.js';
 import {
   createTag, decorateLinks, getConfig, loadBlock, loadStyle, localizeLink,
@@ -131,14 +132,8 @@ export function parsePreferences(elements) {
 }
 
 /** Retrieve cards from query-index  */
-async function fetchCardsData(config, type, el) {
+async function fetchCardsData(config, endpointElement, type, el) {
   let cardsData;
-  const usePreviewIndex = config.env.name === 'stage' && !window.location.host.includes('.live');
-  const endpointElement = el.querySelector(`a[href*="${usePreviewIndex ? PREVIEW_INDEX : PROD_INDEX}"]`)
-                            ?? el.querySelector(`a[href*="${PROD_INDEX}"]`);
-  if (!endpointElement) {
-    throw new Error('No query-index endpoint provided');
-  }
   el.querySelector(`a[href*="${PROD_INDEX}"]`)?.remove();
   el.querySelector(`a[href*="${PREVIEW_INDEX}"]`)?.remove();
   let queryIndexCardPath = localizeLink(endpointElement.getAttribute('href'), config);
@@ -185,28 +180,39 @@ export default async function init(el) {
   }
   const config = getConfig();
   const type = el.classList[1];
-  const cardsDataPromise = fetchCardsData(config, type, el);
-
-  const merchCardCollectionDep = import('../../deps/mas/merch-card-collection.js');
-  const polyfills = import('../merch/merch.js');
-  await polyfills;
-  let deps = [
-    polyfills,
-    merchCardCollectionDep,
-    import('../merch-card/merch-card.js'),
-    import('../../deps/mas/merch-card.js'),
-  ];
-
-  const { base, mep } = getConfig();
-  const merchStyles = new Promise((resolve) => {
-    loadStyle(`${base}/blocks/merch/merch.css`, resolve);
-  });
-  const merchCardStyles = new Promise((resolve) => {
-    loadStyle(`${base}/blocks/merch-card/merch-card.css`, resolve);
-  });
+
+  const usePreviewIndex = config.env.name === 'stage' && !window.location.host.includes('.live');
+  const endpointElement = el.querySelector(`a[href*="${usePreviewIndex ? PREVIEW_INDEX : PROD_INDEX}"]`)
+                            ?? el.querySelector(`a[href*="${PROD_INDEX}"]`);
+  if (!endpointElement) {
+    return fail(el, 'No query-index endpoint provided');
+  }
 
   let cardsData;
+  let deps;
+  let base;
+  let mep;
+  let merchStyles;
+  let merchCardStyles;
+  const merchCardCollectionDep = import(
+    '../../deps/mas/merch-card-collection.js'
+  );
   try {
+    const cardsDataPromise = fetchCardsData(config, endpointElement, type, el);
+    deps = [
+      merchCardCollectionDep,
+      import('../merch-card/merch-card.js'),
+      import('../../deps/mas/merch-card.js'),
+    ];
+
+    ({ base, mep } = config);
+    merchStyles = new Promise((resolve) => {
+      loadStyle(`${base}/blocks/merch/merch.css`, resolve);
+    });
+    merchCardStyles = new Promise((resolve) => {
+      loadStyle(`${base}/blocks/merch-card/merch-card.css`, resolve);
+    });
+
     cardsData = await cardsDataPromise;
   } catch (error) {
     return fail(el, error);
@@ -293,6 +299,9 @@ export default async function init(el) {
       literalEl.remove();
       if (slot) {
         slot.setAttribute('slot', LITERAL_SLOTS[index]);
+        if (LITERAL_SLOTS[index].toLowerCase().includes('result')) {
+          slot.setAttribute('aria-live', 'polite');
+        }
         index += 1;
       }
       literalSlots.push(slot);

libs/blocks/merch-card/merch-card.js

@@ -77,7 +77,7 @@
   try {
     const { base } = getConfig();
     const stylePromise = new Promise((resolve) => {
-      loadStyle(`${base}/blocks/mnemonic-list/mnemonic-list.css`, resolve);
+      loadStyle(`${base}/blocks/mnemonic-list/merch-mnemonic-list.css`, resolve);
     });
     const loadModule = import(`${base}/blocks/mnemonic-list/mnemonic-list.js`)
       .then(({ decorateMnemonicList }) => decorateMnemonicList(foreground));