Merge pull request #1775 from Codeinwp/dev/e2e-tests

[Rock] Add more E2E tests

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

@@ -0,0 +1,81 @@
+/**
+ * WordPress dependencies
+ */
+import { test, expect } from '@wordpress/e2e-test-utils-playwright';
+
+test.describe( 'Accordion Block', () => {
+	test.beforeEach( async({ admin }) => {
+		await admin.createNewPost();
+	});
+
+	test( 'can be created by typing "/accordion"', async({ editor, page }) => {
+
+		// Create a Progress Block with the slash block shortcut.
+		await page.click( 'role=button[name="Add default block"i]' );
+		await page.keyboard.type( '/accordion' );
+		await page.keyboard.press( 'Enter' );
+
+		const blocks = await editor.getBlocks();
+		const hasAccordion = blocks.some( ( block ) => 'themeisle-blocks/accordion' === block.name );
+
+		expect( hasAccordion ).toBeTruthy();
+	});
+
+
+	test( 'check if it has content by default', 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 );
+	});
+
+	test( 'add new item via button', async({ editor, page }) => {
+		await editor.insertBlock({
+			name: 'themeisle-blocks/accordion'
+		});
+
+		let accordionBlock = ( await editor.getBlocks() ).find( ( block ) => 'themeisle-blocks/accordion' === block.name );
+
+		const { clientId } = accordionBlock;
+		const currentAccordionItems = accordionBlock.innerBlocks.length;
+
+		await page.click( `#block-${clientId}` );
+		await page.getByRole( 'button', { name: 'Select Accordion' }).click();
+
+		await page.getByRole( 'button', { name: 'Add Accordion Item' }).click();
+
+		accordionBlock = ( await editor.getBlocks() ).find( ( block ) => 'themeisle-blocks/accordion' === block.name );
+
+		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

@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+import { test, expect } from '@wordpress/e2e-test-utils-playwright';
+
+test.describe( 'Countdown Block', () => {
+	test.beforeEach( async({ admin }) => {
+		await admin.createNewPost();
+	});
+
+	test( 'can be created by typing "/countdown"', async({ editor, page }) => {
+
+		// Create a Progress Block with the slash block shortcut.
+		await page.click( 'role=button[name="Add default block"i]' );
+		await page.keyboard.type( '/countdown' );
+		await page.keyboard.press( 'Enter' );
+
+		const blocks = await editor.getBlocks();
+		const hasCountdown = blocks.some( ( block ) => 'themeisle-blocks/countdown' === block.name );
+
+		expect( hasCountdown ).toBeTruthy();
+	});
+
+	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();
+
+		await page.getByLabel( 'Day' ).fill( '17' );
+		await page.getByRole( 'combobox', { name: 'Month' }).selectOption( 'August' );
+		await page.getByLabel( 'Year' ).fill( '2030' );
+
+		await page.getByLabel( 'Year' ).press( 'Enter' );
+
+		// 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/form.spec.js

@@ -171,7 +171,7 @@ test.describe( 'Form Block', () => {
 				attributes: {
 					label: 'File Field Test',
 					helpText: 'This is a help text',
-					allowedFileTypes: [ 'text/plain' ]
+					allowedFileTypes: [ 'text/plain', 'image/*' ]
 				}
 			}
 		] });
@@ -196,7 +196,29 @@ test.describe( 'Form Block', () => {
 
 		expect( fileInput ).toBeTruthy();
 
-		// TODO: load a file and check if it is uploaded
+		// This is a base64 representation of a 1x1 red pixel in PNG format
+		const base64Image = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAA1JREFUCNdjYGBgYAAAAAUAAXhP/o8AAAAASUVORK5CYII=';
+
+		await page.locator( 'input[type="file"]' ).setInputFiles(
+			{
+				name: 'test.png',
+				mimeType: 'image/png',
+				buffer: Buffer.from( base64Image, 'base64' )
+			}
+		);
+
+		await page.waitForTimeout( 5000 );
+
+		// Click the submit button
+		await page.getByRole( 'button', { name: 'Submit' }).click();
+
+		await page.waitForTimeout( 1000 );
+
+		// Check if Success message div is visible
+		const successMsg = page.locator( 'div' ).filter({ hasText: /^Success$/ });
+
+		expect( await successMsg.isVisible() ).toBeTruthy();
+
 	});
 
 	test( 'redirect to a page after form submission', async({ page, editor, browser }) => {

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

@@ -0,0 +1,103 @@
+/**
+ * WordPress dependencies
+ */
+import { test, expect } from '@wordpress/e2e-test-utils-playwright';
+
+test.describe( 'Section Block', () => {
+	test.beforeEach( async({ admin }) => {
+		await admin.createNewPost();
+	});
+
+	test( 'can be created by typing "/section"', async({ editor, page }) => {
+
+		// Create a Progress Block with the slash block shortcut.
+		await page.click( 'role=button[name="Add default block"i]' );
+		await page.keyboard.type( '/section' );
+		await page.keyboard.press( 'Enter' );
+
+		const blocks = await editor.getBlocks();
+		const hasSection = blocks.some( ( block ) => 'themeisle-blocks/advanced-columns' === block.name );
+
+		expect( hasSection ).toBeTruthy();
+	});
+
+	test( 'can be created by typing "/section" and choose Single Column', async({ editor, page }) => {
+
+		// Create a Progress Block with the slash block shortcut.
+		await page.click( 'role=button[name="Add default block"i]' );
+		await page.keyboard.type( '/section' );
+		await page.keyboard.press( 'Enter' );
+
+		const hasSection = ( await editor.getBlocks() ).some( ( block ) => 'themeisle-blocks/advanced-columns' === block.name );
+
+		expect( hasSection ).toBeTruthy();
+
+		await page.getByRole( 'button', { name: 'Single column' }).click();
+
+		const blocks = await editor.getBlocks();
+
+		const sectionBlock = blocks.find( ( block ) => 'themeisle-blocks/advanced-columns' === block.name );
+
+		// Check if w have a column in innerBlocks
+		expect( sectionBlock.innerBlocks.length ).toBe( 1 );
+	});
+
+	test( 'add new column', async({ editor, page }) => {
+		await editor.insertBlock({
+			name: 'themeisle-blocks/advanced-columns',
+			innerBlocks: [
+				{
+					name: 'themeisle-blocks/advanced-column'
+				}
+			]
+		});
+
+		let sectionBlock = ( await editor.getBlocks() ).find( ( block ) => 'themeisle-blocks/advanced-columns' === block.name );
+
+		const { clientId } = sectionBlock;
+
+		await page.click( `#block-${clientId}` );
+
+		const columnController = page.getByRole( 'spinbutton', { name: 'Columns' });
+
+		await columnController.click();
+
+		// Press the up arrow one time
+		await columnController.press( 'ArrowUp' );
+
+		sectionBlock = ( await editor.getBlocks() ).find( ( block ) => 'themeisle-blocks/advanced-columns' === block.name );
+
+		expect( sectionBlock.innerBlocks.length ).toBe( 2 );
+	});
+
+	test( 'delete one column', async({ editor, page }) => {
+		await editor.insertBlock({
+			name: 'themeisle-blocks/advanced-columns',
+			innerBlocks: [
+				{
+					name: 'themeisle-blocks/advanced-column'
+				},
+				{
+					name: 'themeisle-blocks/advanced-column'
+				}
+			]
+		});
+
+		let sectionBlock = ( await editor.getBlocks() ).find( ( block ) => 'themeisle-blocks/advanced-columns' === block.name );
+
+		const { clientId } = sectionBlock;
+
+		await page.click( `#block-${clientId}` );
+
+		const columnController = page.getByRole( 'spinbutton', { name: 'Columns' });
+
+		await columnController.click();
+
+		// Press the up arrow one time
+		await columnController.press( 'ArrowDown' );
+
+		sectionBlock = ( await editor.getBlocks() ).find( ( block ) => 'themeisle-blocks/advanced-columns' === block.name );
+
+		expect( sectionBlock.innerBlocks.length ).toBe( 1 );
+	});
+});