chore: add content check for e2e

src/blocks/test/e2e/blocks/accordion.spec.js

@@ -51,4 +51,31 @@ test.describe( 'Accordion Block', () => {
 
 		expect( accordionBlock.innerBlocks.length ).toBeGreaterThan( currentAccordionItems );
 	});
+
+	test( 'show/hide with default content', async({ editor, page }) => {
+		await editor.insertBlock({
+			name: 'themeisle-blocks/accordion'
+		});
+
+		let accordionBlock = ( await editor.getBlocks() ).find( ( block ) => 'themeisle-blocks/accordion' === block.name );
+
+		expect( accordionBlock.innerBlocks.length ).toBeGreaterThan( 0 );
+
+		const postId = await editor.publishPost();
+
+		await page.goto( `/?p=${postId}` );
+
+		// No tabs should be opened by default
+		expect( await page.getByRole( 'paragraph' ).filter({ hasText: 'This is a placeholder tab content. It is important to have the necessary informa' }).isVisible() ).toBeFalsy();
+
+		// Open the first tab
+		await page.locator( 'summary' ).filter({ hasText: 'Accordion title 1' }).click();
+
+		expect( await page.getByRole( 'paragraph' ).filter({ hasText: 'This is a placeholder tab content. It is important to have the necessary informa' }).isVisible() ).toBeTruthy();
+
+		// Close the first tab
+		await page.locator( 'summary' ).filter({ hasText: 'Accordion title 1' }).click();
+
+		expect( await page.getByRole( 'paragraph' ).filter({ hasText: 'This is a placeholder tab content. It is important to have the necessary informa' }).isVisible() ).toBeFalsy();
+	});
 });

src/blocks/test/e2e/blocks/countdown.spec.js

@@ -21,12 +21,13 @@ test.describe( 'Countdown Block', () => {
 		expect( hasCountdown ).toBeTruthy();
 	});
 
-	test( 'select a data', async({ editor, page }) => {
+	test( 'select a data and check the rendering', async({ editor, page }) => {
 		await editor.insertBlock({
 			name: 'themeisle-blocks/countdown'
 		});
 
 		let countdownBlock = ( await editor.getBlocks() ).find( ( block ) => 'themeisle-blocks/countdown' === block.name );
+		const otterId = countdownBlock.attributes.id;
 
 		await page.getByRole( 'button', { name: 'Select Date' }).click();
 
@@ -38,5 +39,37 @@ test.describe( 'Countdown Block', () => {
 
 		// If everything is ok, the day label text should be changed to "Days".
 		await expect( page.getByText( 'Days' ) ).toBeVisible();
+
+		await page.locator( '.editor-styles-wrapper' ).click();
+		const postId = await editor.publishPost();
+
+		await page.goto( `/?p=${postId}` );
+
+		expect( ( await page.$eval( `#${otterId}`, ( el ) => el.getAttribute( 'data-date' ) ) ).startsWith( '2030-08-17' ) ).toBeTruthy();
+
+		// If everything is ok, the day label text should be changed to "Days".
+		await expect( page.getByText( 'Days' ) ).toBeVisible();
+
+		// Capture the current value of the seconds.
+		const currentValue = await page.locator( '.otter-countdown__display-area' )
+			.filter({
+				hasText: 'Seconds'
+			})
+			.locator( '.otter-countdown__value' )
+			.innerHTML();
+
+		// Wait for 1 second for the seconds to change.
+		await page.waitForTimeout( 1000 );
+
+		// Capture the new value of the seconds.
+		const newValue = await page.locator( '.otter-countdown__display-area' )
+			.filter({
+				hasText: 'Seconds'
+			})
+			.locator( '.otter-countdown__value' )
+			.innerHTML();
+
+		// Check if the new value is different from the old one.
+		expect( currentValue ).not.toEqual( newValue );
 	});
 });

src/blocks/test/e2e/blocks/slider.spec.js

@@ -93,4 +93,45 @@ test.describe( 'Slider Block', () => {
 
 		await expect( page.locator( 'div:nth-child(2) > figure > .wp-block-themeisle-blocks-slider-item' ) ).toBeVisible();
 	});
+
+	test( 'check frontend rendering and interaction', async({ page, editor }) => {
+		const images = [
+			{
+				id: uploadedMedia.id,
+				url: uploadedMedia.source_url,
+				alt: uploadedMedia.alt_text
+			}
+		];
+
+		images.push( images[ 0 ]);
+		images.push( images[ 0 ]);
+		images.push( images[ 0 ]);
+
+		await editor.insertBlock({
+			name: 'themeisle-blocks/slider',
+			attributes: {
+				images: images
+			}
+		});
+
+		const postId = await editor.publishPost();
+
+		await page.goto( `/?p=${postId}` );
+
+		expect( await page.locator( '.wp-block-themeisle-blocks-slider img' ).count() ).toBe( 4 );
+
+		await page.waitForTimeout( 500 );
+
+		let hasError = false;
+		page.on( 'console', msg => {
+			if ( 'error' === msg.type() ) {
+				hasError = true;
+			}
+		});
+
+		await page.locator( '.glide__arrows > button:nth-child(2)' ).click({ clickCount: 3 });
+
+		// There should be no errors in the console after clicking the next button.
+		expect( hasError ).toBeFalsy();
+	});
 });

src/blocks/test/e2e/blocks/tabs.spec.js

@@ -48,4 +48,24 @@ test.describe( 'Tabs Block', () => {
 
 		expect( tabBlock.innerBlocks.length ).toBeGreaterThan( currentTabsItems );
 	});
+
+	test( 'change tab with the default content', async({ editor, page }) => {
+		await editor.insertBlock({
+			name: 'themeisle-blocks/tabs'
+		});
+
+		let tabBlock = ( await editor.getBlocks() ).find( ( block ) => 'themeisle-blocks/tabs' === block.name );
+
+		expect( tabBlock.innerBlocks.length ).toBeGreaterThan( 0 );
+
+		const postId = await editor.publishPost();
+
+		await page.goto( `/?p=${postId}` );
+
+		await page.getByRole( 'tab', { name: 'Tab 2' }).click();
+
+		await expect( page.locator( '.wp-block-themeisle-blocks-tabs__header_item' ).filter({ hasText: /^Tab 2$/ }).first() ).toHaveClass( /active/ );
+
+		expect( await page.getByRole( 'paragraph' ).filter({ hasText: 'This is just a placeholder to help you visualize how the content is displayed in' }).isVisible() ).toBeTruthy();
+	});
 });