Adjust tests to NIM built demos.

.gitignore

@@ -0,0 +1 @@
+builds

tests/cypress/e2e/test_demos.cy.js

@@ -1,34 +1,33 @@
 describe( 'Test CKEditor 5 demo', () => {
-  const defaultDemos = [ 
-    'feature-rich',
+  const demosNIMBuilt = [
+    'ai-assistant',
     'headless',
     'internationalization',
     'markdown',
     'mobile',
-    'source-code-editing',
+    'paste-from-office-enhanced',
     'user-interface-balloon',
     'user-interface-balloon-block',
     'user-interface-bottom-toolbar',
     'user-interface-button-grouping',
     'user-interface-classic',
-    'user-interface-document',
     'user-interface-inline'
-  ]
+  ];
 
-  defaultDemos.forEach( demo => {
-    it( `Testing demo: ${ demo }`, () => {
-      const URL = `http://localhost:9001/${ demo }/`;
+  demosNIMBuilt.forEach( demo => {
+    it( `Testing demo: ${ demo } (NIM built)`, () => {
+      const URL = `http://localhost:9002/${ demo }.html`;
 
       cy.visit( URL );
 
       if ( demo == 'mobile' ) {
         cy.get( 'iframe' ).then( $iframe => {
           const doc = $iframe.contents();
-          
+
           // Check if the editor initialized properly.
           doc.get( '.ck-editor__editable' );
         } )
-        
+
         return;
       }
 
@@ -43,4 +42,31 @@ describe( 'Test CKEditor 5 demo', () => {
       }
     } )
   } );
+
+  const demosLegacyBuilt = [
+    'feature-rich',
+    'mathtype',
+    'source-code-editing',
+    'productivity-pack',
+    'user-interface-document',
+    'wproofreader',
+  ];
+
+  demosLegacyBuilt.forEach( demo => {
+    it( `Testing demo: ${ demo } (webpack legacy built)`, () => {
+      const URL = `http://localhost:9001/${ demo }/`;
+
+      cy.visit( URL );
+
+      // Check if the editor initialized properly.
+      cy.get( '.ck-editor__editable' );
+
+      // Check if images loaded properly.
+      if ( Cypress.$( 'img' ).length > 0 ) {
+        cy.get( 'img' ).each( $img => {
+          expect( $img[ 0 ].naturalWidth ).to.be.above( 0 );
+        } );
+      }
+    } )
+  } );
 } )

tests/cypress/support/commands.js

@@ -22,4 +22,4 @@
 //
 //
 // -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

tests/cypress/support/e2e.js

@@ -17,4 +17,4 @@
 import './commands'
 
 // Alternatively you can use CommonJS syntax:
-// require('./commands')
+// require('./commands')

tests/scripts/build-and-test-demos.sh

@@ -2,21 +2,43 @@
 
 # Set error variable
 ERROR=0
+DEMOS_PATH=$(pwd)
 
-DEMOS_PATH=`pwd`
+# Prepare tmp dirs
+rm -rf builds
+mkdir -p builds
+mkdir -p builds/assets
 
 # Prepare the environment: install dependencies and build samples
-for DIR in $DEMOS_PATH/* ; do
-    if [[ -d "$DIR" && ! "$DIR" = "$DEMOS_PATH/tests" ]]; then
-        DEMO_NAME=$(echo $DIR | awk -F '/' '{print $NF}')
+for DIR in "$DEMOS_PATH"/* ; do
+    if [[ -d "$DIR" && ! "$DIR" = "$DEMOS_PATH/tests" && ! "$DIR" = "$DEMOS_PATH/builds" ]]; then
+        DEMO_NAME=$(echo "$DIR" | awk -F '/' '{print $NF}')
         # Navigate to the demo directory
-        cd $DIR
+        cd "$DIR" || exit
+
         # Install packages
         echo "Installing dependencies for $DEMO_NAME"
         yarn > /dev/null 2>&1
+
         # Build demo
         echo "Building demo: $DEMO_NAME"
-        npx webpack --mode development > /dev/null
+
+        if [[ -f "webpack.config.js" ]]; then
+            # - Use legacy webpack build if webpack config present
+            echo "Using webpack build..."
+            npx webpack --mode development > /dev/null
+        else
+            # - Build with yarn + vite and move files to common dir
+            echo "Using vite build..."
+            yarn build > /dev/null
+            cp "$DIR/dist/index.html" "$DEMOS_PATH/builds/$DEMO_NAME.html"
+            cp -R "$DIR/dist/assets" "$DEMOS_PATH/builds/"
+
+            # Copy additional file from `mobile` demo
+            if [[ -f "mobile-iframe.html" ]]; then
+                cp "$DIR/dist/mobile-iframe.html" "$DEMOS_PATH/builds/mobile-iframe.html"
+            fi
+        fi
 
         if [ ! $? -eq 0 ]; then
             echo "Building failed: $DEMO_NAME"
@@ -28,16 +50,18 @@ done
 echo "Samples building completed."
 
 # Start the server
-echo "Starting up the server."
+echo "Starting up the server for legacy-built samples."
 http-server $DEMOS_PATH -p 9001 -s &
+echo "Starting up the server for NIM-built samples."
+http-server "$DEMOS_PATH/builds/" -p 9002 -s &
 
 # Start tests
-cd $DEMOS_PATH/tests
+cd "$DEMOS_PATH"/tests || exit
 yarn run cy:test-demos
 
 if [ ! $? -eq 0 ]; then
-        echo "Some tests failed."
-        ERROR=1
+    echo "Some tests failed."
+    ERROR=1
 fi
 
 if [ $ERROR -eq 1 ]; then