diff --git a/.dev/tests/phpunit/includes/test-coblocks-block-assets.php b/.dev/tests/phpunit/includes/test-coblocks-block-assets.php index cde0b260867..fce2bd001ce 100644 --- a/.dev/tests/phpunit/includes/test-coblocks-block-assets.php +++ b/.dev/tests/phpunit/includes/test-coblocks-block-assets.php @@ -99,6 +99,24 @@ public function test_editor_assets_scripts() { $this->coblocks_block_assets->editor_assets(); $this->assertTrue( array_key_exists( 'coblocks-editor', $wp_scripts->registered ) ); + + $path = dirname( __FILE__ ) . '/../../../../dist/coblocks-*.js'; + $files = glob( $path ); + + foreach( $files as $file ) { + $dist_script = pathinfo( $file, PATHINFO_FILENAME ); + + if ( $dist_script === 'coblocks-plugin-deactivation' ) { + $this->assertFalse( array_key_exists( $dist_script, $wp_scripts->registered ) ); + continue; + } + + if ( $dist_script === 'coblocks-extensions' ) { + $dist_script = 'coblocks-editor'; + } + + $this->assertTrue( array_key_exists( $dist_script, $wp_scripts->registered ) ); + } } /** @@ -154,6 +172,7 @@ public function test_block_assets_loaded_with_coblocks_block() { do_action( 'enqueue_block_assets' ); $this->assertContains( 'coblocks-frontend', $wp_styles->queue ); + $this->assertContains( 'coblocks-animation', $wp_styles->queue ); // Should have animation } public function test_block_assets_loaded_with_any_reusable_block() { @@ -212,7 +231,11 @@ public function test_block_assets_loaded_with_core_image_block() { $this->coblocks_block_assets->block_assets(); do_action( 'enqueue_block_assets' ); + // Core blocks should also have coblocks-animation. $this->assertContains( 'coblocks-frontend', $wp_styles->queue ); + $this->assertContains( 'coblocks-animation', $wp_styles->queue ); + $this->assertContains( 'coblocks-extensions', $wp_styles->queue ); + } public function test_typography_styles_loaded_with_core_button_block() { @@ -235,7 +258,10 @@ public function test_typography_styles_loaded_with_core_button_block() { $this->coblocks_block_assets->block_assets(); do_action( 'enqueue_block_assets' ); + // Core blocks should also have coblocks-animation. $this->assertContains( 'coblocks-frontend', $wp_styles->queue ); + $this->assertContains( 'coblocks-animation', $wp_styles->queue ); + $this->assertContains( 'coblocks-extensions', $wp_styles->queue ); } public function test_typography_styles_loaded_with_core_cover_block() { @@ -258,7 +284,10 @@ public function test_typography_styles_loaded_with_core_cover_block() { $this->coblocks_block_assets->block_assets(); do_action( 'enqueue_block_assets' ); + // Core blocks should also have coblocks-animation. $this->assertContains( 'coblocks-frontend', $wp_styles->queue ); + $this->assertContains( 'coblocks-animation', $wp_styles->queue ); + $this->assertContains( 'coblocks-extensions', $wp_styles->queue ); } public function test_typography_styles_loaded_with_core_heading_block() { @@ -281,7 +310,10 @@ public function test_typography_styles_loaded_with_core_heading_block() { $this->coblocks_block_assets->block_assets(); do_action( 'enqueue_block_assets' ); + // Core blocks should also have coblocks-animation. $this->assertContains( 'coblocks-frontend', $wp_styles->queue ); + $this->assertContains( 'coblocks-animation', $wp_styles->queue ); + $this->assertContains( 'coblocks-extensions', $wp_styles->queue ); } public function test_typography_styles_loaded_with_core_list_block() { @@ -304,7 +336,10 @@ public function test_typography_styles_loaded_with_core_list_block() { $this->coblocks_block_assets->block_assets(); do_action( 'enqueue_block_assets' ); + // Core blocks should also have coblocks-animation. $this->assertContains( 'coblocks-frontend', $wp_styles->queue ); + $this->assertContains( 'coblocks-animation', $wp_styles->queue ); + $this->assertContains( 'coblocks-extensions', $wp_styles->queue ); } public function test_typography_styles_loaded_with_core_paragraph_block() { @@ -327,7 +362,10 @@ public function test_typography_styles_loaded_with_core_paragraph_block() { $this->coblocks_block_assets->block_assets(); do_action( 'enqueue_block_assets' ); + // Core blocks should also have coblocks-animation. $this->assertContains( 'coblocks-frontend', $wp_styles->queue ); + $this->assertContains( 'coblocks-animation', $wp_styles->queue ); + $this->assertContains( 'coblocks-extensions', $wp_styles->queue ); } public function test_typography_styles_loaded_with_core_pullquote_block() { @@ -350,7 +388,10 @@ public function test_typography_styles_loaded_with_core_pullquote_block() { $this->coblocks_block_assets->block_assets(); do_action( 'enqueue_block_assets' ); + // Core blocks should also have coblocks-animation. $this->assertContains( 'coblocks-frontend', $wp_styles->queue ); + $this->assertContains( 'coblocks-animation', $wp_styles->queue ); + $this->assertContains( 'coblocks-extensions', $wp_styles->queue ); } public function test_typography_styles_loaded_with_core_quote_block() { @@ -373,6 +414,9 @@ public function test_typography_styles_loaded_with_core_quote_block() { $this->coblocks_block_assets->block_assets(); do_action( 'enqueue_block_assets' ); + // Core blocks should also have coblocks-animation. $this->assertContains( 'coblocks-frontend', $wp_styles->queue ); + $this->assertContains( 'coblocks-animation', $wp_styles->queue ); + $this->assertContains( 'coblocks-extensions', $wp_styles->queue ); } } diff --git a/.github/workflows/test-e2e-cypress.yml b/.github/workflows/test-e2e-cypress.yml index 463c6b0eb5d..5b1b2e3b850 100644 --- a/.github/workflows/test-e2e-cypress.yml +++ b/.github/workflows/test-e2e-cypress.yml @@ -28,7 +28,163 @@ on: required: false jobs: - test_cypress_e2e: + setup-matrix: + runs-on: ubuntu-latest + outputs: + matrix: ${{ steps.setup-spec-matrix.outputs.matrix }} + steps: + - name: Checkout + uses: actions/checkout@v3 + with: + fetch-depth: 0 + + - name: Setup Spec Matrix + id: setup-spec-matrix + run: | + changed_files=$(git diff --name-only --diff-filter=ADMR ${{ github.event.before }} origin/master) + spec_list=() + + for line in $changed_files; do + if [[ "$line" =~ src/(blocks|extensions|componets).* ]]; then # If changed file is within our tested paths. + + changed_path=$(echo $line | cut -d'/' -f3) # Get the main path of the changed file, e.g. author, food-and-drinks, lightbox. + + found_specs=$(find . -type f -name "*.cypress.js") # Find real spec files. + pattern="/src/(blocks|extensions|components)/${changed_path}/" # Changed files pattern to match against. + + for spec in $found_specs; do + if [[ $spec =~ $pattern ]]; then + + # Remove the path from the spec. + spec=$(echo $spec | sed 's:.*/::') + + # Build spec list for cypress run. + spec_list+="'${spec}'," + + fi + done + + fi + done + + # All changes processed. Format string for cypress run. + # Remove trailing comma from spec_list. + updated_string=$(echo $spec_list | sed 's/,$//' ) + + # Wrap list in brackets for GH workflow matrix. + wrapped_string="[$updated_string]" + + # Save the matrix array to the output. + echo "Testing against the following specs:" + echo $wrapped_string + echo "matrix=$wrapped_string" >> "$GITHUB_OUTPUT" + + test_cypress_e2e_changed_files: + needs: setup-matrix + if: github.event_name == 'pull_request' && needs.setup-matrix.outputs.matrix != '[]' + name: E2E Test - Changed Files + runs-on: ubuntu-latest + strategy: + fail-fast: false + matrix: + spec: ${{ fromJson(needs.setup-matrix.outputs.matrix) }} + + + steps: + - name: Checkout + uses: actions/checkout@v3 + + - name: Setup wp-env + uses: godaddy-wordpress/setup-wp-env@v1 + with: + core: ${{ inputs.wpVersion }} + phpVersion: ${{ inputs.phpVersion }} + plugins: '["."]' + themes: '["https://downloads.wordpress.org/theme/go.zip"]' + + - name: Setup Node + uses: actions/setup-node@v3 + with: + node-version-file: '.nvmrc' + cache: 'yarn' + + - name: Install dependencies + run: | + composer install --prefer-dist --optimize-autoloader & + yarn install --immutable + + - name: Build plugin + run: | + npx grunt build + # moving the built directory to this location means no dev files in tests-container. + mv ./build/coblocks $(wp-env install-path)/${{ inputs.installPath }}/wp-content/plugins/ + + - name: Prepare Theme + run: | + if [ "$theme_url" = "https://downloads.wordpress.org/theme/go.zip" ]; then + cd $(wp-env install-path)/go + else + cd $(wp-env install-path)/${{ inputs.installPath }}/wp-content/themes/twentytwentythree + fi + mkdir -p coblocks/icons + echo '' >> coblocks/icons/custom.svg + + - name: Prepare tests + run: | + WP_CORE_VERSION=$(wp-env run cli wp core version) + echo "WP_CORE_VERSION=${WP_CORE_VERSION}" >> $GITHUB_ENV + wp-env run tests-cli wp post generate --count=5 + wp-env run cli wp post generate --count=5 + wp-env run cli wp option update permalink_structure '/%postname%' + if [ "${{ inputs.theme }}" = "https://downloads.wordpress.org/theme/go.zip" ]; then + wp-env run tests-cli wp theme activate go + fi + + # Only create a new post if running the migrated specs + - name: Create post and get ID + if: matrix.spec == 'alert.cypress.js' || matrix.spec == 'author.cypress.js' + run: | + # Generate application-password to use with WP REST API. + app_password=$(wp-env run tests-cli wp user application-password create admin gha-password --porcelain) + + # Retrieve post content from fixture. + post_content=$(cat .dev/tests/cypress/fixtures/${{matrix.spec}}.html) + echo $post_content + + # Create a post using the REST API and parse the postId from the response. + postId=$(curl -s -X POST 'http://localhost:8889/?rest_route=/wp/v2/posts' --data-urlencode "title=${{matrix.spec}}" --data-raw "content=$post_content" --data-urlencode "status=publish" --user "admin:$app_password"| jq '.id') + + # Save the postId to the output. + echo "postId=$postId" >> $GITHUB_OUTPUT + id: create-post + + # Only retrieve the post ID if running the first spec + - name: Save post ID to file + if: matrix.spec == 'alert.cypress.js' || matrix.spec == 'author.cypress.js' + run: | + path="$GITHUB_WORKSPACE/.dev/tests/cypress/fixtures/${{matrix.spec}}.json" + touch "$path" + echo "{\"${{matrix.spec}}\": \"$(echo "${{ steps.create-post.outputs.postId }}")\"}" > "$path" + + - name: Run tests + run: | + CYPRESS_SPEC=$(find ./src/* -name ${{ matrix.spec }} -type f) + echo '{"wpUsername":"admin","wpPassword":"password","testURL":"http://localhost:8889"}' | jq . > cypress.env.json + ./node_modules/.bin/cypress verify + ./node_modules/.bin/cypress run --browser ${{ inputs.browser }} --spec $CYPRESS_SPEC + + - name: Upload failure video + if: ${{ failure() }} + uses: actions/upload-artifact@v3 + with: + name: ${{ matrix.spec }}-fail.mp4 + path: ./.dev/tests/cypress/videos/${{ matrix.spec }}.mp4 + retention-days: 1 + + + test_cypress_e2e_full: + if: github.event_name == 'push' + needs: setup-matrix name: E2E Test runs-on: ubuntu-latest strategy: @@ -83,7 +239,6 @@ jobs: - padding-controls.cypress.js - settings-modal-control.cypress.js - steps: - name: Checkout uses: actions/checkout@v3 @@ -96,7 +251,6 @@ jobs: plugins: '["."]' themes: '["https://downloads.wordpress.org/theme/go.zip"]' - - name: Setup Node uses: actions/setup-node@v3 with: diff --git a/.github/workflows/test-wp-next.yml b/.github/workflows/test-wp-next.yml index c9193799ef5..dcf17981215 100644 --- a/.github/workflows/test-wp-next.yml +++ b/.github/workflows/test-wp-next.yml @@ -21,8 +21,8 @@ jobs: if: needs.check_if_released.outputs.should_run_workflow == 'true' runs-on: ubuntu-latest outputs: - # Should be current latest WP Next release on `wordpress.org`. eg: `https://wordpress.org/wordpress-6.4-RC2.zip` - wp_next: "https://wordpress.org/wordpress-6.4-RC2.zip" + # Should be current latest WP Next release on `wordpress.org`. eg: `https://wordpress.org/wordpress-6.4-RC3.zip` + wp_next: "https://wordpress.org/wordpress-6.4-RC3.zip" steps: - run: echo "Setting WP Next Constant" @@ -34,7 +34,7 @@ jobs: uses: ./.github/workflows/test-e2e-cypress.yml with: wpVersion: ${{ needs.set_constant.outputs.wp_next }} - installPath: "tests-wordpress-6.4-RC2" + installPath: "tests-wordpress-6.4-RC3" theme: "https://downloads.wordpress.org/theme/go.zip" concurrency: group: chrome-wp-next diff --git a/docs/dev/test-override.md b/docs/dev/test-override.md deleted file mode 100644 index 293cfd1c921..00000000000 --- a/docs/dev/test-override.md +++ /dev/null @@ -1,11 +0,0 @@ -# Run All Tests Override -CoBlocks tests are setup to perform a check against changed files to determine which tests should run. There are situations where the existing configuration should be disabled such as when making sweeping changes, or when updating software versions. CoBlocks now supports the ability to force Continuous Integration to run all tests based on branch naming convention. - -To force all tests your branch must contain the string - -**`run-all-tests`** - -Here are a few example branch names: -- 'try/wordpress-rc2-**run-all-tests**' -- 'enhance/major-things-**run-all-tests**' -- 'fix/bugs-**run-all-tests**' \ No newline at end of file diff --git a/includes/class-coblocks-block-assets.php b/includes/class-coblocks-block-assets.php index 09bc7720e0c..07ee52a4695 100644 --- a/includes/class-coblocks-block-assets.php +++ b/includes/class-coblocks-block-assets.php @@ -133,7 +133,11 @@ public function block_assets() { return; } - // Styles. + /** + * Check the `test-coblocks-block-assets.php` file. + * Registered scripts should show for specific blocks that need them. + * For example the Core blocks all use `coblocks-animation` style + * */ $name = 'style-coblocks-1'; $filepath = 'dist/' . $name; $asset_file = $this->get_asset_file( $filepath ); @@ -157,6 +161,18 @@ public function block_assets() { $asset_file['dependencies'], $asset_file['version'], ); + + $name = 'style-coblocks-animation'; + $filepath = 'dist/' . $name; + $asset_file = $this->get_asset_file( $filepath ); + $rtl = ! is_rtl() ? '' : '-rtl'; + + wp_enqueue_style( + 'coblocks-animation', + COBLOCKS_PLUGIN_URL . $filepath . $rtl . '.css', + $asset_file['dependencies'], + $asset_file['version'], + ); } /** @@ -200,7 +216,7 @@ public function editor_assets() { } wp_register_script( - 'coblocks-editor', + 'coblocks-editor', // 'coblocks-extensions' COBLOCKS_PLUGIN_URL . $filepath . '.js', array_merge( $asset_file['dependencies'], array( 'wp-api' ) ), $asset_file['version'], diff --git a/src/blocks/author/index.js b/src/blocks/author/index.js index 4a558e699ea..1c973877546 100644 --- a/src/blocks/author/index.js +++ b/src/blocks/author/index.js @@ -10,7 +10,7 @@ import { createBlock } from '@wordpress/blocks'; import { dispatch, select } from '@wordpress/data'; /** - * Block constants + * Block constants. */ const { name } = metadata; diff --git a/src/extensions/animation/test/settings-modal-control.cypress.js b/src/extensions/animation/test/settings-modal-control.cypress.js index f7ac3764741..9029b087802 100644 --- a/src/extensions/animation/test/settings-modal-control.cypress.js +++ b/src/extensions/animation/test/settings-modal-control.cypress.js @@ -4,10 +4,6 @@ import { ANIMATION_FEATURE_ENABLED_KEY, } from '../constants'; -before( () => { - helpers.addBlockToPost( 'core/cover', true ); -} ); - describe( 'Settings Modal: Animation feature', () => { beforeEach( () => { // Reset settings. @@ -16,6 +12,10 @@ describe( 'Settings Modal: Animation feature', () => { [ ANIMATION_FEATURE_ENABLED_KEY ]: true, } ); } ); + } ); + + it( 'can turn off all animation settings', () => { + helpers.addBlockToPost( 'core/cover', true ); cy.get( '.edit-post-visual-editor .wp-block[data-type="core/cover"]' ).first().click(); @@ -23,13 +23,7 @@ describe( 'Settings Modal: Animation feature', () => { cy.get( '.interface-interface-skeleton__header .edit-post-more-menu .components-button' + ', .interface-interface-skeleton__header .interface-more-menu-dropdown .components-button' ).click(); cy.get( '.components-menu-item__button,.components-button' ).contains( 'Editor settings' ).click(); - } ); - afterEach( () => { - cy.get( '.components-modal__header button[aria-label*="Close"]' ).click(); - } ); - - it( 'can turn off all animation settings', () => { cy.get( '.components-coblocks-animation-toggle' ).should( 'exist' ); cy.get( '.coblocks-settings-modal' ).contains( 'Animation controls' ).click(); @@ -37,5 +31,29 @@ describe( 'Settings Modal: Animation feature', () => { cy.get( '.components-coblocks-animation-toggle' ).should( 'not.exist' ); cy.get( '.coblocks-settings-modal' ).contains( 'Animation controls' ).click(); + + cy.get( '.components-modal__header button[aria-label*="Close"]' ).click(); + } ); + + it( 'functions with only core blocks on page', () => { + helpers.addBlockToPost( 'core/paragraph', true ); + + helpers.selectBlock( 'core/paragraph' ); + + cy.get( '.components-coblocks-animation-toggle' ).should( 'exist' ); + + cy.get( 'p[data-type="core/paragraph"]' ).first().type( 'Test Animation' ); + + helpers.savePage(); + + helpers.checkForBlockErrors( 'core/paragraph' ); + + helpers.viewPage(); + + // Ensure that on Front of the site, the animation script and styles are loaded. + cy.get( 'script[id="coblocks-animation-js"]' ); + cy.get( 'link[id="coblocks-animation-css"]' ); + + helpers.editPage(); } ); } ); diff --git a/src/styles/coblocks-animation.scss b/src/styles/coblocks-animation.scss new file mode 100644 index 00000000000..0028e8d5bae --- /dev/null +++ b/src/styles/coblocks-animation.scss @@ -0,0 +1,4 @@ + +@import "node_modules/@wordpress/base-styles/variables"; +@import "../extensions/animation/styles/editor.scss"; +@import "../extensions/animation/styles/style.scss"; diff --git a/src/styles/index.scss b/src/styles/index.scss index 5b29fcdf56a..8c985565172 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -23,7 +23,6 @@ // @import "../extensions/**/editor.scss"; @import "../extensions/advanced-controls/styles/editor.scss"; -@import "../extensions/animation/styles/editor.scss"; @import "../extensions/button-controls/styles/editor.scss"; @import "../extensions/coblocks-labs/styles/editor.scss"; @import "../extensions/image-crop/styles/editor.scss"; diff --git a/src/styles/style.scss b/src/styles/style.scss index 167a03409c6..a018bef5f8b 100644 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -21,7 +21,6 @@ // @import "../extensions/**/style.scss"; @import "../extensions/advanced-controls/styles/style.scss"; -@import "../extensions/animation/styles/style.scss"; @import "../extensions/block-patterns/styles/style.scss"; @import "../extensions/button-controls/styles/style.scss"; @import "../extensions/button-styles/styles/style.scss"; diff --git a/webpack.config.js b/webpack.config.js index 60032fcbc68..6fd72a40fff 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -40,6 +40,7 @@ module.exports = { ...coblocksChunks, 'coblocks-extensions': path.resolve( process.cwd(), 'src/extensions.js' ), 'coblocks-plugin-deactivation': path.resolve( process.cwd(), 'src/components/coblocks-deactivate-modal/index.js' ), + 'style-coblocks-animation': path.resolve( process.cwd(), 'src/styles/coblocks-animation.scss' ), ...scripts.reduce( ( memo, script ) => { memo[ `js/${ script }` ] = path.resolve( process.cwd(), 'src', 'js', `${ script }.js` );