Add E2E test that the Classic Template can be replaced with the block…

…ified version

tests/e2e/specs/backend/site-editing-templates.test.js

@@ -124,6 +124,14 @@ const SELECTORS = {
 		templateActions:
 			'[aria-label="Templates list - Content"] [aria-label="Actions"]',
 	},
+	blockifiedTemplateBlocks: {
+		storeNotices: '.wc-block-store-notices',
+		// TODO: Uncomment and add selector when Breadcrumb block becomes available
+		// breadcrumbs: '',
+		productResultsCount: '.wc-block-product-results-count',
+		catalogSorting: '.wc-block-catalog-sorting',
+		products: '.wp-block-query',
+	},
 };
 
 const CUSTOMIZED_STRING = 'My awesome customization';
@@ -319,6 +327,33 @@ describe( 'Store Editing Templates', () => {
 				timeout: DEFAULT_TIMEOUT,
 			} );
 		} );
+
+		it( 'should allow the user to blockify the Classic Template', async () => {
+			const {
+				storeNotices,
+				productResultsCount,
+				catalogSorting,
+				products,
+			} = SELECTORS.blockifiedTemplateBlocks;
+			const { productArchive } = SELECTORS.blocks;
+
+			await goToTemplateEditor( {
+				postId: 'woocommerce/woocommerce//archive-product',
+			} );
+
+			await expect( page ).toClick( 'button', {
+				text: 'Upgrade to Products block',
+			} );
+
+			await expect( page ).not.toMatchElement( productArchive );
+
+			await expect( page ).toMatchElement( storeNotices );
+			// TODO: Uncomment when Breadcrumb block becomes available
+			// await expect( page ).toMatchElement( breadcrumbs );
+			await expect( page ).toMatchElement( productResultsCount );
+			await expect( page ).toMatchElement( catalogSorting );
+			await expect( page ).toMatchElement( products );
+		} );
 	} );
 
 	describe( 'Product by Category block template', () => {