Merge pull request #520 from xwp/feature/477-e2e-tests

Feature/477 e2e tests

Author: ravichdev

.env.dist

@@ -8,3 +8,6 @@ MYSQL_PASSWORD=wordpress
 WP_VERSION=5.6
 WP_DB_USER=wordpress
 WP_DB_PASSWORD=wordpress
+
+# PHP
+PHP_VERSION=php7.4-apache

.travis.yml

@@ -102,6 +102,26 @@ jobs:
         - sudo chown -R travis:travis tests node_modules # ensure coverage folder can be created
         - npm run test:e2e:coveralls
 
+    - name: E2E tests with Docker (7.3, WordPress 5.2)
+      php: "7.3"
+      env: NODE_ENV=teste2e PHP_VERSION=php7.3-apache WP_VERSION=5.2
+      before_install:
+        - unset PUPPETEER_SKIP_CHROMIUM_DOWNLOAD
+        - nvm install
+        - nvm use
+        - set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
+      before_script:
+        - sudo service mysql stop
+        - echo "Running E2E tests"
+      script:
+        - npm run env:start
+        - docker-compose exec wordpress bash -c "chown -R www-data:www-data /var/www/html/wp-content/" # ensure WP folders have correct permissions
+        - docker-compose exec mysql bash -c "chown -R mysql:mysql /var/lib/mysql"
+        - npm run wp -- wp core install --title=WordPress --admin_user=admin --admin_password=password --admin_email=admin@example.com --skip-email --url=http://localhost:8088
+        - npm run wp -- wp plugin activate material-design
+        - sudo chown -R travis:travis tests node_modules
+        - npm run test:e2e
+
     - name: JS unit tests (7.4, WordPress latest, with code coverage)
       php: "7.4"
       env: COVERALLS_REPO_TOKEN=$CR_TOKEN

assets/importer/demo-content.xml

@@ -150,11 +150,11 @@ const Gallery = ( {
 				}
 
 				return (
+					// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
 					<li
 						key={ i }
 						className="mdc-image-list__item"
 						style={ itemStyles }
-						role="presentation"
 						onClick={ () => onSelect( image.id ) }
 						onKeyDown={ event => onKeyDown( event, image.id ) }
 					>

assets/src/block-editor/blocks/image-list/components/gallery.js

@@ -13,8 +13,9 @@
 # limitations under the License.
 
 ARG WP_VERSION
+ARG PHP_VERSION
 
-FROM wordpress:${WP_VERSION}-php7.4-apache
+FROM wordpress:${WP_VERSION}-${PHP_VERSION}
 
 ENV NODE_VERSION 10.18.1
 ENV YARN_VERSION 1.21.1

bin/local-dev/wordpress/Dockerfile

@@ -13,8 +13,6 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-
-source .env
 source ./bin/includes.sh
 
 printf "Starting up containers ..."

bin/start.sh

@@ -35,6 +35,7 @@ services:
       context: ./bin/local-dev/wordpress
       args:
         WP_VERSION: ${WP_VERSION}
+        PHP_VERSION: ${PHP_VERSION}
     depends_on:
       - mysql
     ports:

docker-compose.yml

@@ -130,7 +130,7 @@ function observeConsoleLogging() {
 async function removeBeforeunloadEvents() {
 	await page.setRequestInterception( true );
 	await page.on( 'request', async request => {
-		if ( request.url().includes( 'dist/editor.js' ) ) {
+		if ( request.url().match( /dist\/editor(\.min)?\.js/ ) ) {
 			fetch( request.url() )
 				.then( response => response.text() )
 				.then( response => {

package-lock.json

@@ -19,6 +19,9 @@
  */
 import { createNewPost, ensureSidebarOpened } from '@wordpress/e2e-test-utils';
 
+/**
+ * Internal dependencies
+ */
 import { insertBlockByKeyword, selectBlockByName } from '../../../../utils';
 
 describe( 'blocks: material/list', () => {
@@ -141,26 +144,26 @@ describe( 'blocks: material/list', () => {
 		expect( await page.$$( '.mdc-list-item' ) ).toHaveLength( 1 );
 
 		await primary.click();
-		await page.keyboard.type( 'List Item 1' );
-		await primary.press( 'Enter' );
-		await page.keyboard.type( 'List Item 2' );
-		await primary.press( 'Enter' );
-		await page.keyboard.type( 'List Item 3' );
+		await page.keyboard.type( 'List Item 1', { delay: 50 } );
+		await primary.press( 'Enter', { delay: 50 } );
+		await page.keyboard.type( 'List Item 2', { delay: 50 } );
+		await primary.press( 'Enter', { delay: 50 } );
+		await page.keyboard.type( 'List Item 3', { delay: 50 } );
 
 		expect( await page.$$( '.mdc-list-item' ) ).toHaveLength( 3 );
 
 		let items = await page.$$( '.mdc-list-item__primary-text' );
 
 		await items[ 1 ].click();
-		await primary.press( 'Home' );
-		await primary.press( 'Backspace' );
+		await primary.press( 'Home', { delay: 50 } );
+		await primary.press( 'Backspace', { delay: 50 } );
 
 		expect( await page.$$( '.mdc-list-item' ) ).toHaveLength( 2 );
 		expect(
 			await page.evaluate( el => el.innerText.trim(), primary )
 		).toStrictEqual( 'List Item 1List Item 2' );
 
-		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Enter', { delay: 50 } );
 
 		items = await page.$$( '.mdc-list-item__primary-text' );
 		expect( await page.$$( '.mdc-list-item' ) ).toHaveLength( 3 );
@@ -190,9 +193,9 @@ describe( 'blocks: material/list', () => {
 		); // wait until all the list items are updated.
 
 		await primary.click();
-		await page.keyboard.type( 'List Item 1' );
-		await primary.press( 'Enter' );
-		await page.keyboard.type( 'Secondary Text 1' );
+		await page.keyboard.type( 'List Item 1', { delay: 50 } );
+		await primary.press( 'Enter', { delay: 50 } );
+		await page.keyboard.type( 'Secondary Text 1', { delay: 50 } );
 
 		const [ secondary ] = await page.$$( '.mdc-list-item__secondary-text' );
 
@@ -203,14 +206,14 @@ describe( 'blocks: material/list', () => {
 			await page.evaluate( el => el.innerText.trim(), secondary )
 		).toStrictEqual( 'Secondary Text 1' );
 
-		await primary.press( 'Home' );
-		await primary.press( 'Backspace' );
+		await primary.press( 'Home', { delay: 50 } );
+		await primary.press( 'Backspace', { delay: 50 } );
 
 		expect(
 			await page.evaluate( el => el.innerText.trim(), primary )
 		).toStrictEqual( 'List Item 1Secondary Text 1' );
 
-		await primary.press( 'Enter' );
+		await primary.press( 'Enter', { delay: 50 } );
 
 		expect(
 			await page.evaluate( el => el.innerText.trim(), primary )
@@ -235,23 +238,23 @@ describe( 'blocks: material/list', () => {
 		); // wait until all the list items are updated.
 
 		await primary.click();
-		await page.keyboard.type( 'List Item 1' );
-		await primary.press( 'Enter' );
-		await page.keyboard.type( 'Secondary Text 1' );
-		await primary.press( 'Enter' );
+		await page.keyboard.type( 'List Item 1', { delay: 50 } );
+		await primary.press( 'Enter', { delay: 50 } );
+		await page.keyboard.type( 'Secondary Text 1', { delay: 50 } );
+		await primary.press( 'Enter', { delay: 50 } );
 
-		await page.keyboard.type( 'List Item 2' );
-		await primary.press( 'Enter' );
-		await page.keyboard.type( 'Secondary Text 2' );
+		await page.keyboard.type( 'List Item 2', { delay: 50 } );
+		await primary.press( 'Enter', { delay: 50 } );
+		await page.keyboard.type( 'Secondary Text 2', { delay: 50 } );
 
 		expect( await page.$$( '.mdc-list-item' ) ).toHaveLength( 2 );
 
 		let items = await page.$$( '.mdc-list-item__primary-text' );
 		let secondaryItems = await page.$$( '.mdc-list-item__secondary-text' );
 
 		await items[ 1 ].click();
-		await primary.press( 'Home' );
-		await primary.press( 'Backspace' );
+		await primary.press( 'Home', { delay: 50 } );
+		await primary.press( 'Backspace', { delay: 50 } );
 
 		expect( await page.$$( '.mdc-list-item' ) ).toHaveLength( 1 );
 		expect(
@@ -261,7 +264,7 @@ describe( 'blocks: material/list', () => {
 			await page.evaluate( el => el.innerText.trim(), secondaryItems[ 0 ] )
 		).toStrictEqual( 'Secondary Text 1List Item 2 Secondary Text 2' );
 
-		await primary.press( 'Enter' );
+		await primary.press( 'Enter', { delay: 50 } );
 
 		expect( await page.$$( '.mdc-list-item' ) ).toHaveLength( 2 );