Migrate 'user-interface-document' demo to NIM.

ckeditor · May 29, 2024 · c4d95b3 · c4d95b3
1 parent 6620511
commit c4d95b3
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 293 deletions.
diff --git a/tests/cypress/e2e/test_demos.cy.js b/tests/cypress/e2e/test_demos.cy.js
@@ -1,5 +1,5 @@
 describe( 'Test CKEditor 5 demo', () => {
-  const demosNIMBuilt = [
+  const allDemos = [
     'ai-assistant',
     'feature-rich',
     'headless',
@@ -15,13 +15,14 @@ describe( 'Test CKEditor 5 demo', () => {
     'user-interface-bottom-toolbar',
     'user-interface-button-grouping',
     'user-interface-classic',
+    'user-interface-document',
     'user-interface-inline',
     'wproofreader',
   ];
 
-  demosNIMBuilt.forEach( demo => {
-    it( `Testing demo: ${ demo } (NIM built)`, () => {
-      const URL = `http://localhost:9002/${ demo }.html`;
+  allDemos.forEach( demo => {
+    it( `Testing demo: ${ demo }`, () => {
+      const URL = `http://localhost:9001/${ demo }.html`;
 
       cy.visit( URL );
 
@@ -47,26 +48,4 @@ describe( 'Test CKEditor 5 demo', () => {
       }
     } )
   } );
-
-  const demosLegacyBuilt = [
-    'user-interface-document',
-  ];
-
-  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 );
-        } );
-      }
-    } )
-  } );
-} )
+} );
diff --git a/tests/scripts/build-and-test-demos.sh b/tests/scripts/build-and-test-demos.sh
@@ -17,45 +17,34 @@ for DIR in "$DEMOS_PATH"/* ; do
         cd "$DIR" || exit
 
         # Install packages
-        echo "Installing dependencies for $DEMO_NAME"
+        echo "Installing dependencies for $DEMO_NAME."
         yarn > /dev/null 2>&1
 
         # Build demo
-        echo "Building demo: $DEMO_NAME"
-
-        if [[ -f "webpack.config.js" ]]; then
-            # - Use legacy webpack build if webpack config present
-            echo "Using webpack build..."
-            yarn build-dev > /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
+        echo "Building demo: $DEMO_NAME."
+        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
 done
 
 echo "Samples building completed."
 
 # Start the server
-echo "Starting up the server for legacy-built samples."
+echo "Starting up the server."
 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 || exit
 yarn run cy:test-demos
 
 if [ ! $? -eq 0 ]; then
-    echo "Some tests failed."
+    echo "Some tests failed!"
     ERROR=1
 fi
 

diff --git a/user-interface-document/README.md b/user-interface-document/README.md
@@ -23,5 +23,5 @@ cd ckeditor5-demos/user-interface-document && yarn
 3. Start the demo:
 
 ```shell
-yarn start
+yarn dev
 ```
diff --git a/user-interface-document/index.html b/user-interface-document/index.html
@@ -136,6 +136,6 @@ <h2 style="text-align: center">Welcome letter</h2>
 		</div>
 
 		<script src="https://cdn.ckbox.io/CKBox/2.0.0/ckbox.js"></script>
-		<script src="./dist/main.js"></script>
+		<script type="module" src="index.ts"></script>
 	</body>
 </html>