From 94e193d60ba8de0890a2b267331b7561f280729b Mon Sep 17 00:00:00 2001 From: f1ames Date: Tue, 28 May 2024 14:50:45 +0200 Subject: [PATCH] Adjust tests to NIM built demos. --- .gitignore | 1 + tests/cypress/e2e/test_demos.cy.js | 46 +++++++++++++++++++++------ tests/cypress/fixtures/example.json | 5 --- tests/cypress/support/commands.js | 25 --------------- tests/cypress/support/e2e.js | 20 ------------ tests/scripts/build-and-test-demos.sh | 44 +++++++++++++++++++------ 6 files changed, 71 insertions(+), 70 deletions(-) create mode 100644 .gitignore delete mode 100644 tests/cypress/fixtures/example.json delete mode 100644 tests/cypress/support/commands.js delete mode 100644 tests/cypress/support/e2e.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ec2a80e --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +builds \ No newline at end of file diff --git a/tests/cypress/e2e/test_demos.cy.js b/tests/cypress/e2e/test_demos.cy.js index a90b907..a8e4658 100644 --- a/tests/cypress/e2e/test_demos.cy.js +++ b/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 ); + } ); + } + } ) + } ); } ) diff --git a/tests/cypress/fixtures/example.json b/tests/cypress/fixtures/example.json deleted file mode 100644 index 02e4254..0000000 --- a/tests/cypress/fixtures/example.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name": "Using fixtures to represent data", - "email": "hello@cypress.io", - "body": "Fixtures are a great way to mock data for responses to routes" -} diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js deleted file mode 100644 index 66ea16e..0000000 --- a/tests/cypress/support/commands.js +++ /dev/null @@ -1,25 +0,0 @@ -// *********************************************** -// This example commands.js shows you how to -// create various custom commands and overwrite -// existing commands. -// -// For more comprehensive examples of custom -// commands please read more here: -// https://on.cypress.io/custom-commands -// *********************************************** -// -// -// -- This is a parent command -- -// Cypress.Commands.add('login', (email, password) => { ... }) -// -// -// -- This is a child command -- -// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) -// -// -// -- This is a dual command -- -// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... }) -// -// -// -- This will overwrite an existing command -- -// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) \ No newline at end of file diff --git a/tests/cypress/support/e2e.js b/tests/cypress/support/e2e.js deleted file mode 100644 index 0e7290a..0000000 --- a/tests/cypress/support/e2e.js +++ /dev/null @@ -1,20 +0,0 @@ -// *********************************************************** -// This example support/e2e.js is processed and -// loaded automatically before your test files. -// -// This is a great place to put global configuration and -// behavior that modifies Cypress. -// -// You can change the location of this file or turn off -// automatically serving support files with the -// 'supportFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/configuration -// *********************************************************** - -// Import commands.js using ES2015 syntax: -import './commands' - -// Alternatively you can use CommonJS syntax: -// require('./commands') \ No newline at end of file diff --git a/tests/scripts/build-and-test-demos.sh b/tests/scripts/build-and-test-demos.sh index d2363ca..b23a683 100755 --- a/tests/scripts/build-and-test-demos.sh +++ b/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..." + 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 + 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