Merge branch 'main' into preview-variable-widgets

.github/workflows/nodejs.yml

@@ -2,8 +2,6 @@ name: Node CI
 
 on:
   push:
-    branches:
-      - main
   pull_request:
     types: [opened, synchronize, reopened]
 
@@ -28,73 +26,37 @@ jobs:
       matrix:
         os: [macos-latest, windows-latest, ubuntu-latest]
         node-version: [18.x, 20.x]
+      fail-fast: true
     if: ${{ needs.changes.outputs.cms == 'true' }}
     steps:
       - uses: actions/checkout@v3
-      - name: Use Node.js {{ matrix.node-version }}
+      - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
           check-latest: true
+          cache: 'npm'
       - name: log versions
         run: node --version && npm --version && yarn --version
-      - name: install dependecies
-        run: npm install
+      - name: install dependencies
+        run: npm ci
       - name: run unit tests
         run: npm run test:ci
-        env:
-          CI: true
-          NODE_OPTIONS: --max-old-space-size=4096
       - name: build demo site
         run: npm run build:demo
+      - name: run e2e tests
+        if: matrix.os == 'ubuntu-latest' && matrix.node-version == '20.x'
+        run: npm run test:e2e:run-ci
         env:
-          NODE_OPTIONS: --max-old-space-size=4096
-      - uses: actions/upload-artifact@master
-        with:
-          name: dev-test-website-${{ runner.os }}-${{ matrix.node-version }}
-          path: dev-test
-
-  e2e-with-cypress:
-    needs: [changes, build]
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [18.x, 20.x]
-      fail-fast: false
-
-    if: ${{ needs.changes.outputs.cms == 'true' }}
-    steps:
-      - uses: actions/checkout@v3
-      - name: Use Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-          check-latest: true
-      - uses: actions/download-artifact@master
-        with:
-          name: dev-test-website-${{ runner.os }}-18.x
-          path: dev-test
-      - name: npm install
-        run: |
-          node --version
-          npm --version
-          yarn --version
-          npm install
-      - name: e2e test
-        run: |
-          npm run test:e2e:run-ci
-        env:
-          IS_FORK: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == true }}
+          IS_FORK: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == true || github.repository_owner != 'decaporg' }}
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           NODE_OPTIONS: --max-old-space-size=4096
-          MACHINE_COUNT: 2
-          MACHINE_INDEX: ${{ matrix.node-version }}
           TZ: Europe/Amsterdam
       - uses: actions/upload-artifact@v3
-        if: ${{ always() }}
+        if: matrix.os == 'ubuntu-latest' && matrix.node-version == '20.x' && failure()
         with:
-          name: cypress-results-${{ matrix.node-version }}
+          name: cypress-results
           path: |
             cypress/screenshots
             cypress/videos
+

babel.config.js

@@ -42,7 +42,7 @@ const svgo = {
 function presets() {
   return [
     '@babel/preset-react',
-    '@babel/preset-env',
+    ['@babel/preset-env', isESM ? { modules: false } : {}],
     [
       '@emotion/babel-preset-css-prop',
       {

cypress/e2e/editorial_workflow_spec_test_backend.js

@@ -207,17 +207,16 @@ describe('Test Backend Editorial Workflow', () => {
     login();
 
     inSidebar(() => cy.contains('a', 'Pages').click());
-    inSidebar(() => cy.contains('a', 'Directory'));
+    inSidebar(() => cy.contains('a', /^Directory$/));
     inGrid(() => cy.contains('a', 'Root Page'));
-    inGrid(() => cy.contains('a', 'Directory'));
 
-    inSidebar(() => cy.contains('a', 'Directory').click());
+    inSidebar(() => cy.contains('a', /^Directory$/).click());
 
-    inGrid(() => cy.contains('a', 'Sub Directory'));
-    inGrid(() => cy.contains('a', 'Another Sub Directory'));
+    inSidebar(() => cy.contains('a', /^Sub Directory$/));
+    inSidebar(() => cy.contains('a', 'Another Sub Directory'));
 
-    inSidebar(() => cy.contains('a', 'Sub Directory').click());
-    inGrid(() => cy.contains('a', 'Nested Directory'));
+    inSidebar(() => cy.contains('a', /^Sub Directory$/).click());
+    inSidebar(() => cy.contains('a', 'Nested Directory'));
     cy.url().should(
       'eq',
       'http://localhost:8080/#/collections/pages/filter/directory/sub-directory',
@@ -233,21 +232,17 @@ describe('Test Backend Editorial Workflow', () => {
     login();
 
     inSidebar(() => cy.contains('a', 'Pages').click());
-    inSidebar(() => cy.contains('a', 'Directory').click());
-    inGrid(() => cy.contains('a', 'Another Sub Directory').click());
-
-    cy.url().should(
-      'eq',
-      'http://localhost:8080/#/collections/pages/entries/directory/another-sub-directory/index',
-    );
+    inSidebar(() => cy.contains('a', /^Directory$/).click());
+    inSidebar(() => cy.contains('a', 'Another Sub Directory').click());
+    inGrid(() => cy.contains('a', 'Another Sub Directory'));
   });
 
   it(`can create a new entry with custom path`, () => {
     login();
 
     inSidebar(() => cy.contains('a', 'Pages').click());
-    inSidebar(() => cy.contains('a', 'Directory').click());
-    inSidebar(() => cy.contains('a', 'Sub Directory').click());
+    inSidebar(() => cy.contains('a', /^Directory$/).click());
+    inSidebar(() => cy.contains('a', /^Sub Directory$/).click());
     cy.contains('a', 'New Page').click();
 
     cy.get('[id^="path-field"]').should('have.value', 'directory/sub-directory');
@@ -262,18 +257,18 @@ describe('Test Backend Editorial Workflow', () => {
     publishEntryInEditor(publishTypes.publishNow);
     exitEditor();
 
-    inGrid(() => cy.contains('a', 'New Path Title'));
-    inSidebar(() => cy.contains('a', 'Directory').click());
-    inSidebar(() => cy.contains('a', 'Directory').click());
+    inSidebar(() => cy.contains('a', 'New Path Title'));
+    inSidebar(() => cy.contains('a', /^Directory$/).click());
+    inSidebar(() => cy.contains('a', /^Directory$/).click());
     inGrid(() => cy.contains('a', 'New Path Title').should('not.exist'));
   });
 
   it(`can't create an entry with an existing path`, () => {
     login();
 
     inSidebar(() => cy.contains('a', 'Pages').click());
-    inSidebar(() => cy.contains('a', 'Directory').click());
-    inSidebar(() => cy.contains('a', 'Sub Directory').click());
+    inSidebar(() => cy.contains('a', /^Directory$/).click());
+    inSidebar(() => cy.contains('a', /^Sub Directory$/).click());
 
     cy.contains('a', 'New Page').click();
     cy.get('[id^="title-field"]').type('New Path Title');
@@ -292,7 +287,8 @@ describe('Test Backend Editorial Workflow', () => {
     login();
 
     inSidebar(() => cy.contains('a', 'Pages').click());
-    inGrid(() => cy.contains('a', 'Directory').click());
+    inSidebar(() => cy.contains('a', /^Directory$/).click());
+    inGrid(() => cy.contains('a', /^Directory$/).click());
 
     cy.get('[id^="path-field"]').should('have.value', 'directory');
     cy.get('[id^="path-field"]').clear();
@@ -310,7 +306,7 @@ describe('Test Backend Editorial Workflow', () => {
 
     inSidebar(() => cy.contains('a', 'New Directory').click());
 
-    inGrid(() => cy.contains('a', 'Sub Directory'));
-    inGrid(() => cy.contains('a', 'Another Sub Directory'));
+    inSidebar(() => cy.contains('a', /^Sub Directory$/));
+    inSidebar(() => cy.contains('a', 'Another Sub Directory'));
   });
 });

cypress/e2e/markdown_widget_code_block_spec.js

@@ -77,7 +77,8 @@ function codeBlock(content) {
     <div>
       <div></div>
       <div>
-        <div><label>Code Block</label>
+        <div>
+          <div><label>Code Block</label></div>
           <div><button><span><svg>
                   <path></path>
                 </svg></span></button>

cypress/run.mjs

@@ -2,40 +2,40 @@ import execa from 'execa';
 import { globby } from 'globby';
 
 async function runCypress() {
+  const args = ['run', '--browser', 'chrome', '--headless'];
+
+  const specs = await globby(['cypress/e2e/*spec*.js']);
+  if (specs.length === 0) {
+    console.log('No test files found in cypress/e2e/*spec*.js');
+    process.exit(1);
+  }
+
   if (process.env.IS_FORK === 'true') {
     const machineIndex = parseInt(process.env.MACHINE_INDEX);
     const machineCount = parseInt(process.env.MACHINE_COUNT);
-    const specs = await globby(['cypress/integration/*spec*.js']);
     const specsPerMachine = Math.floor(specs.length / machineCount);
     const start = (machineIndex - 1) * specsPerMachine;
     const machineSpecs =
       machineIndex === machineCount
         ? specs.slice(start)
         : specs.slice(start, start + specsPerMachine);
 
-    await execa(
-      'cypress',
-      ['run', '--browser', 'chrome', '--headless', '--spec', machineSpecs.join(',')],
-      { stdio: 'inherit', preferLocal: true },
-    );
+    args.push('--spec', machineSpecs.join(','));
   } else {
-    await execa(
-      'cypress',
-      [
-        'run',
-        '--browser',
-        'chrome',
-        '--headless',
-        '--record',
-        '--parallel',
-        '--ci-build-id',
-        process.env.GITHUB_SHA,
-        '--group',
-        'GitHub CI',
-      ],
-      { stdio: 'inherit', preferLocal: true },
+    args.push(
+      '--record',
+      '--parallel',
+      '--ci-build-id',
+      process.env.GITHUB_SHA,
+      '--group',
+      'GitHub CI',
+      '--spec',
+      specs.join(','),
     );
   }
+
+  console.log('Running Cypress with args:', args.join(' '));
+  await execa('cypress', args, { stdio: 'inherit', preferLocal: true });
 }
 
 runCypress();

cypress/support/e2e.js

@@ -26,3 +26,9 @@ addMatchImageSnapshotCommand({
 Cypress.on('uncaught:exception', () => false);
 
 import './commands';
+
+afterEach(function () {
+  if (this.currentTest.state === 'failed') {
+    Cypress.runner.stop();
+  }
+});

cypress/utils/steps.js

@@ -69,6 +69,7 @@ function assertColorOn(cssProperty, color, opts) {
     } else {
       (opts.scope ? opts.scope : cy)
         .contains('label', opts.label)
+        .parents()
         .next()
         .should(assertion);
     }
@@ -518,23 +519,31 @@ function validateNestedListFields() {
   cy.contains('button', 'hotel locations').click();
   cy.contains('button', 'cities').click();
   cy.contains('label', 'City')
+    .parents()
     .next()
+    .first()
     .type('Washington DC');
   cy.contains('label', 'Number of Hotels in City')
+    .parents()
     .next()
+    .first()
     .type('5');
   cy.contains('button', 'city locations').click();
 
   // add second city list item
   cy.contains('button', 'cities').click();
   cy.contains('label', 'Cities')
+    .parents()
     .next()
+    .first()
     .find('div[class*=SortableListItem]')
     .eq(2)
     .as('secondCitiesListControl');
   cy.get('@secondCitiesListControl')
     .contains('label', 'City')
+    .parents()
     .next()
+    .first()
     .type('Boston');
   cy.get('@secondCitiesListControl')
     .contains('button', 'city locations')
@@ -561,21 +570,25 @@ function validateNestedListFields() {
 
   // list control aliases
   cy.contains('label', 'Hotel Locations')
+    .parents()
     .next()
     .find('div[class*=SortableListItem]')
     .first()
     .as('hotelLocationsListControl');
   cy.contains('label', 'Cities')
+    .parents()
     .next()
     .find('div[class*=SortableListItem]')
     .eq(0)
     .as('firstCitiesListControl');
   cy.contains('label', 'City Locations')
+    .parents()
     .next()
     .find('div[class*=SortableListItem]')
     .eq(0)
     .as('firstCityLocationsListControl');
   cy.contains('label', 'Cities')
+    .parents()
     .next()
     .find('div[class*=SortableListItem]')
     .eq(3)
@@ -589,7 +602,9 @@ function validateNestedListFields() {
   assertListControlErrorStatus([colorError, colorError], '@secondCityLocationsListControl');
 
   cy.contains('label', 'Hotel Name')
+    .parents()
     .next()
+    .first()
     .type('The Ritz Carlton');
   cy.contains('button', 'Save').click();
   assertNotification(notifications.error.missingField);
@@ -598,12 +613,20 @@ function validateNestedListFields() {
   // fill out rest of form and save
   cy.get('@secondCitiesListControl')
     .contains('label', 'Number of Hotels in City')
+    .parents()
+    .next()
+    .first()
     .type(3);
   cy.get('@secondCitiesListControl')
     .contains('label', 'Hotel Name')
+    .parents()
+    .next()
+    .first()
     .type('Grand Hyatt');
   cy.contains('label', 'Country')
+    .parents()
     .next()
+    .first()
     .type('United States');
   flushClockAndSave();
   assertNotification(notifications.saved);

nx.json

@@ -1,10 +1,12 @@
 {
   "targetDefaults": {
     "build:esm": {
-      "cache": true
+      "cache": true,
+      "dependsOn": ["^build:esm"]
     },
     "build": {
-      "cache": true
+      "cache": true,
+      "dependsOn": ["^build"]
     }
   },
   "namedInputs": {