Import animation styles separate from general styles. (#2576)

* move animation CSS to its own import * try moving checkout in workflow * use fetch-depth 0 * typo and bash syntax * why is the github output not persisting between jobs? * simple change to test spec finder * inspect the output of the spec finder * have to checkout in the new jobs * try some workflow updates * format the speclist as array * echo the changed files * more git changes in ci * more flow fixes * pass the specs to the runner * bump wp-next version testing * add new e2e test for fos animation scripts * cleanup the workflow a bit * Update .github/workflows/test-e2e-cypress.yml Co-authored-by: JR Tashjian <[email protected]> * try making build coblocks an artifact * checkout repo first * download deps everywhere * Update .dev/tests/phpunit/includes/test-coblocks-block-assets.php Co-authored-by: Evan Herman <[email protected]> * Update .dev/tests/phpunit/includes/test-coblocks-block-assets.php Co-authored-by: Evan Herman <[email protected]> * Update .dev/tests/phpunit/includes/test-coblocks-block-assets.php Co-authored-by: Evan Herman <[email protected]> * Update .dev/tests/phpunit/includes/test-coblocks-block-assets.php Co-authored-by: Evan Herman <[email protected]> * Update .dev/tests/phpunit/includes/test-coblocks-block-assets.php Co-authored-by: Evan Herman <[email protected]> * Update .dev/tests/phpunit/includes/test-coblocks-block-assets.php Co-authored-by: Evan Herman <[email protected]> * Update .dev/tests/phpunit/includes/test-coblocks-block-assets.php Co-authored-by: Evan Herman <[email protected]> * revert build artifact attempts * fix use tripple equal operator --------- Co-authored-by: aledesma-godaddy <[email protected]> Co-authored-by: JR Tashjian <[email protected]> Co-authored-by: Evan Herman <[email protected]>
godaddy-wordpress · Nov 6, 2023 · f67902e · f67902e
1 parent c09e03f
commit f67902e
Show file tree

Hide file tree

Showing 10 changed files with 253 additions and 29 deletions.
diff --git 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
@@ -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 '<svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><circle class="inner-circle" cx="20" cy="20" r="8" stroke-width="8" stroke-dasharray="50.2655 50.2655" stroke-dashoffset="0"></circle></svg>' >> 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/docs/dev/test-override.md b/docs/dev/test-override.md
diff --git 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
@@ -10,7 +10,7 @@ import { createBlock } from '@wordpress/blocks';
 import { dispatch, select } from '@wordpress/data';
 
 /**
- * Block constants
+ * Block constants.
  */
 const { name } = metadata;