Product Gallery > Pager block: Add E2E tests for the block (https://github.com/woocommerce/woocommerce-blocks/pull/11001)

* Add e2e tests for Pager block

* Fix e2e tests for Product Gallery Pager

* Fix e2e tests

plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-pager/settings.tsx

@@ -59,7 +59,7 @@ export const ProductGalleryPagerBlockSettings = ( {
 
 	return (
 		<PanelBody
-			className="wc-block-editor-product-gallery-large-image-next-previous-settings"
+			className="wc-block-editor-product-gallery-pager-settings"
 			title={ __( 'Pager', 'woo-gutenberg-products-block' ) }
 		>
 			<ToggleGroupControl

plugins/woocommerce-blocks/assets/js/blocks/product-gallery/style.scss

@@ -186,13 +186,13 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset));
 	padding: 0;
 }
 
-.wc-block-product-gallery-pager__item {
+.wc-block-product-gallery-pager__pager-item {
 	@include font-size(regular);
 	color: $gray-600;
 	cursor: pointer;
 }
 
-.wc-block-woocommerce-product-gallery__pager-item--is-active {
+.wc-block-product-gallery-pager__pager-item--is-active {
 	font-weight: bold;
 	color: $black;
 }

plugins/woocommerce-blocks/src/BlockTypes/ProductGalleryPager.php

@@ -48,8 +48,13 @@ class ProductGalleryPager extends AbstractBlock {
 	 * @return string Rendered block type output.
 	 */
 	protected function render( $attributes, $content, $block ) {
+		$pager_display_mode = $block->context['pagerDisplayMode'] ?? '';
+
+		if ( 'off' === $pager_display_mode ) {
+			return null;
+		}
+
 		$number_of_thumbnails = $block->context['thumbnailsNumberOfThumbnails'] ?? 0;
-		$pager_display_mode   = $block->context['pagerDisplayMode'] ?? '';
 		$classname            = $attributes['className'] ?? '';
 		$wrapper_attributes   = get_block_wrapper_attributes( array( 'class' => trim( $classname ) ) );
 		$post_id              = $block->context['postId'] ?? '';
@@ -109,9 +114,9 @@ class ProductGalleryPager extends AbstractBlock {
 
 			$is_first_pager_item = 0 === $key;
 			$pager_item          = sprintf(
-				'<li class="wc-block-product-gallery-pager__item %2$s">%1$s</li>',
+				'<li class="wc-block-product-gallery-pager__pager-item %2$s">%1$s</li>',
 				'dots' === $pager_display_mode ? $this->get_dot_icon( $is_first_pager_item ) : $key + 1,
-				$is_first_pager_item ? 'wc-block-woocommerce-product-gallery__pager-item--is-active' : ''
+				$is_first_pager_item ? 'wc-block-product-gallery-pager__pager-item--is-active' : ''
 			);
 			$p                   = new \WP_HTML_Tag_Processor( $pager_item );
 
@@ -129,7 +134,7 @@ class ProductGalleryPager extends AbstractBlock {
 					'actions.woocommerce.handleSelectImage'
 				);
 				$p->set_attribute(
-					'data-wc-class--wc-block-woocommerce-product-gallery__pager-item--is-active',
+					'data-wc-class--wc-block-product-gallery-pager__pager-item--is-active',
 					'selectors.woocommerce.isSelected'
 				);
 				$html .= $p->get_updated_html();

plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-pager/product-gallery-pager.block_theme.side_effects.spec.ts

@@ -0,0 +1,217 @@
+/**
+ * External dependencies
+ */
+import { test as base, expect } from '@woocommerce/e2e-playwright-utils';
+
+/**
+ * Internal dependencies
+ */
+
+import { ProductGalleryPage } from '../../product-gallery.page';
+
+const blockData = {
+	name: 'woocommerce/product-gallery-pager',
+	selectors: {
+		frontend: {
+			pagerBlock:
+				'div[data-block-name="woocommerce/product-gallery-pager"]',
+			pagerListContainer: 'ul.wc-block-product-gallery-pager__pager',
+			pagerListItem: '.wc-block-product-gallery-pager__pager-item',
+		},
+		editor: {
+			settings: {
+				pagerSettingsContainer:
+					'.wc-block-editor-product-gallery-pager-settings',
+				displayModeOffOption: 'button[data-value=off]',
+				displayModeDotsOption: 'button[data-value=dots]',
+				displayModeDigitsOption: 'button[data-value=digits]',
+			},
+		},
+	},
+	slug: 'single-product',
+	productPage: '/product/hoodie/',
+};
+
+const test = base.extend< { pageObject: ProductGalleryPage } >( {
+	pageObject: async ( { page, editor, frontendUtils, editorUtils }, use ) => {
+		const pageObject = new ProductGalleryPage( {
+			page,
+			editor,
+			frontendUtils,
+			editorUtils,
+		} );
+		await use( pageObject );
+	},
+} );
+
+test.describe( `${ blockData.name }`, () => {
+	test.beforeEach( async ( { requestUtils, admin, editorUtils, editor } ) => {
+		await requestUtils.deleteAllTemplates( 'wp_template' );
+		await requestUtils.deleteAllTemplates( 'wp_template_part' );
+		await admin.visitSiteEditor( {
+			postId: `woocommerce/woocommerce//${ blockData.slug }`,
+			postType: 'wp_template',
+		} );
+		await editorUtils.enterEditMode();
+		await editor.openDocumentSettingsSidebar();
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllTemplates( 'wp_template' );
+		await requestUtils.deleteAllTemplates( 'wp_template_part' );
+	} );
+
+	test( 'Renders Product Gallery Pager block on the editor and frontend side', async ( {
+		page,
+		editorUtils,
+		pageObject,
+	} ) => {
+		await pageObject.addProductGalleryBlock( { cleanContent: true } );
+
+		const block = await pageObject.getMainImageBlock( {
+			page: 'editor',
+		} );
+
+		await expect( block ).toBeVisible();
+
+		await editorUtils.saveTemplate();
+
+		await page.goto( blockData.productPage, {
+			waitUntil: 'commit',
+		} );
+
+		const blockFrontend = await pageObject.getMainImageBlock( {
+			page: 'frontend',
+		} );
+
+		await expect( blockFrontend ).toBeVisible();
+	} );
+
+	test.describe( `Block Settings`, () => {
+		test( 'correctly hides the block when display mode is set to "Off"', async ( {
+			page,
+			editor,
+			pageObject,
+		} ) => {
+			await pageObject.addProductGalleryBlock( { cleanContent: true } );
+			await (
+				await pageObject.getPagerBlock( {
+					page: 'editor',
+				} )
+			 ).click();
+			await editor.openDocumentSettingsSidebar();
+
+			await page
+				.locator(
+					blockData.selectors.editor.settings.pagerSettingsContainer
+				)
+				.locator(
+					blockData.selectors.editor.settings.displayModeOffOption
+				)
+				.click();
+
+			await editor.saveSiteEditorEntities();
+
+			await page.goto( blockData.productPage, {
+				waitUntil: 'commit',
+			} );
+
+			const pagerBlock = await page
+				.locator( blockData.selectors.frontend.pagerBlock )
+				.isVisible();
+
+			expect( pagerBlock ).toBe( false );
+		} );
+
+		test( 'display pages as dot icons when display mode is set to "Dots"', async ( {
+			page,
+			editor,
+			pageObject,
+		} ) => {
+			await pageObject.addProductGalleryBlock( { cleanContent: true } );
+			await (
+				await pageObject.getPagerBlock( {
+					page: 'editor',
+				} )
+			 ).click();
+			await editor.openDocumentSettingsSidebar();
+
+			await page
+				.locator(
+					blockData.selectors.editor.settings.pagerSettingsContainer
+				)
+				.locator(
+					blockData.selectors.editor.settings.displayModeDotsOption
+				)
+				.click();
+
+			await editor.saveSiteEditorEntities();
+
+			await page.goto( blockData.productPage, {
+				waitUntil: 'domcontentloaded',
+			} );
+
+			const pagerBlock = await page
+				.locator( blockData.selectors.frontend.pagerBlock )
+				.nth( 0 )
+				.isVisible();
+
+			expect( pagerBlock ).toBe( true );
+
+			const dotIconsAmount = await page
+				.locator( blockData.selectors.frontend.pagerListContainer )
+				.nth( 0 )
+				.locator( 'svg' )
+				.count();
+
+			expect( dotIconsAmount ).toEqual( 3 );
+		} );
+
+		test( 'display pages as numbers when display mode is set to "Digits"', async ( {
+			page,
+			editor,
+			pageObject,
+		} ) => {
+			await pageObject.addProductGalleryBlock( { cleanContent: true } );
+			await (
+				await pageObject.getPagerBlock( {
+					page: 'editor',
+				} )
+			 ).click();
+			await editor.openDocumentSettingsSidebar();
+
+			await page
+				.locator(
+					blockData.selectors.editor.settings.pagerSettingsContainer
+				)
+				.locator(
+					blockData.selectors.editor.settings.displayModeDigitsOption
+				)
+				.click();
+
+			await editor.saveSiteEditorEntities();
+
+			await page.goto( blockData.productPage, {
+				waitUntil: 'domcontentloaded',
+			} );
+
+			const pagerBlock = await page
+				.locator( blockData.selectors.frontend.pagerBlock )
+				.nth( 0 )
+				.isVisible();
+
+			expect( pagerBlock ).toBe( true );
+
+			const pages = await page
+				.locator( blockData.selectors.frontend.pagerListContainer )
+				.nth( 0 )
+				.locator( blockData.selectors.frontend.pagerListItem )
+				.all();
+
+			expect( pages.length ).toEqual( 3 );
+			await expect( pages[ 0 ] ).toHaveText( '1' );
+			await expect( pages[ 1 ] ).toHaveText( '2' );
+			await expect( pages[ 2 ] ).toHaveText( '3' );
+		} );
+	} );
+} );

plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/product-gallery.page.ts

@@ -122,6 +122,18 @@ export class ProductGalleryPage {
 		return this.editorUtils.getBlockByName( blockName );
 	}
 
+	async getPagerBlock( { page }: { page: 'frontend' | 'editor' } ) {
+		const blockName = 'woocommerce/product-gallery-pager';
+		if ( page === 'frontend' ) {
+			return (
+				await this.frontendUtils.getBlockByName( blockName )
+			 ).filter( {
+				has: this.page.locator( ':visible' ),
+			} );
+		}
+		return this.editorUtils.getBlockByName( blockName );
+	}
+
 	async getBlock( { page }: { page: 'frontend' | 'editor' } ) {
 		const blockName = 'woocommerce/product-gallery';
 		if ( page === 'frontend' ) {