Run the E2E tests as a user with the author role

.travis.yml

@@ -67,5 +67,9 @@ jobs:
     - stage: test
       env: WP_VERSION=latest
       script:
-        - npm install || exit 1
+        - ./bin/run-e2e-tests.sh || exit 1
+
+    - stage: test
+      env: WP_VERSION=latest E2E_ROLE=author
+      script:
         - ./bin/run-e2e-tests.sh || exit 1

bin/install-wordpress.sh

@@ -54,6 +54,13 @@ echo -e $(status_message "Installing WordPress...")
 # prevents permissions errors. See: https://github.com/WordPress/gutenberg/pull/8427#issuecomment-410232369
 docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm -u 33 $CLI core install --title="$SITE_TITLE" --admin_user=admin --admin_password=password [email protected] --skip-email --url=http://localhost:$HOST_PORT >/dev/null
 
+if [ "$E2E_ROLE" = "author" ]; then
+	# Create an additional author user for testsing.
+	docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm -u 33 $CLI user create author [email protected] --role=author --user_pass=authpass
+	# Assign the existing Hello World post to the author.
+	docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm -u 33 $CLI post update 1 --post_author=2 
+fi
+
 if [ "$WP_VERSION" == "latest" ]; then
 	# Check for WordPress updates, to make sure we're running the very latest version.
 	docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm -u 33 $CLI core update >/dev/null
@@ -69,3 +76,6 @@ fi
 # Activate Gutenberg.
 echo -e $(status_message "Activating Gutenberg...")
 docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm $CLI plugin activate gutenberg >/dev/null
+
+# Install a dummy favicon to avoid 404 errors.
+docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm $CONTAINER touch /var/www/html/favicon.ico

bin/run-e2e-tests.sh

@@ -7,5 +7,8 @@ cd "$(dirname "$0")/../"
 # Setup local environement
 ( ./bin/setup-local-env.sh )
 
-# Run the tests
-npm run test-e2e
+if [ "$E2E_ROLE" = "author" ]; then
+	WP_PASSWORD=authpass WP_USERNAME=author npm run test-e2e
+else
+	npm run test-e2e
+fi

packages/block-library/src/latest-posts/edit.js

@@ -17,6 +17,8 @@ import {
 	ToggleControl,
 	Toolbar,
 } from '@wordpress/components';
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
 import { __ } from '@wordpress/i18n';
 import { dateI18n, format, __experimentalGetSettings } from '@wordpress/date';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -27,15 +29,46 @@ import {
 } from '@wordpress/editor';
 import { withSelect } from '@wordpress/data';
 
+/**
+ * Module Constants
+ */
+const CATEGORIES_LIST_QUERY = {
+	per_page: 100,
+};
 const MAX_POSTS_COLUMNS = 6;
 
 class LatestPostsEdit extends Component {
 	constructor() {
 		super( ...arguments );
-
+		this.state = {
+			categoriesList: [],
+		};
 		this.toggleDisplayPostDate = this.toggleDisplayPostDate.bind( this );
 	}
 
+	componentWillMount() {
+		this.isStillMounted = true;
+		this.fetchRequest = apiFetch( {
+			path: addQueryArgs( `/wp/v2/categories`, CATEGORIES_LIST_QUERY ),
+		} ).then(
+			( categoriesList ) => {
+				if ( this.isStillMounted ) {
+					this.setState( { categoriesList } );
+				}
+			}
+		).catch(
+			() => {
+				if ( this.isStillMounted ) {
+					this.setState( { categoriesList: [] } );
+				}
+			}
+		);
+	}
+
+	componentWillUnmount() {
+		this.isStillMounted = false;
+	}
+
 	toggleDisplayPostDate() {
 		const { displayPostDate } = this.props.attributes;
 		const { setAttributes } = this.props;
@@ -44,7 +77,8 @@ class LatestPostsEdit extends Component {
 	}
 
 	render() {
-		const { attributes, categoriesList, setAttributes, latestPosts } = this.props;
+		const { attributes, setAttributes, latestPosts } = this.props;
+		const { categoriesList } = this.state;
 		const { displayPostDate, align, postLayout, columns, order, orderBy, categories, postsToShow } = attributes;
 
 		const inspectorControls = (
@@ -163,11 +197,7 @@ export default withSelect( ( select, props ) => {
 		orderby: orderBy,
 		per_page: postsToShow,
 	}, ( value ) => ! isUndefined( value ) );
-	const categoriesListQuery = {
-		per_page: 100,
-	};
 	return {
 		latestPosts: getEntityRecords( 'postType', 'post', latestPostsQuery ),
-		categoriesList: getEntityRecords( 'taxonomy', 'category', categoriesListQuery ),
 	};
 } )( LatestPostsEdit );

test/e2e/specs/change-detection.test.js

@@ -91,11 +91,11 @@ describe( 'Change detection', () => {
 	it( 'Should prompt to confirm unsaved changes for autosaved draft for non-content fields', async () => {
 		await page.type( '.editor-post-title__input', 'Hello World' );
 
-		// Toggle post as sticky (not persisted for autosave).
+		// Toggle post as needing review (not persisted for autosave).
 		await ensureSidebarOpened();
 
-		const postStickyToggleButton = ( await page.$x( "//label[contains(text(), 'Stick to the Front Page')]" ) )[ 0 ];
-		await postStickyToggleButton.click( 'button' );
+		const postPendingReviewButton = ( await page.$x( "//label[contains(text(), 'Pending Review')]" ) )[ 0 ];
+		await postPendingReviewButton.click( 'button' );
 
 		// Force autosave to occur immediately.
 		await Promise.all( [

test/e2e/specs/templates.test.js

@@ -9,6 +9,8 @@ import {
 	pressWithModifier,
 	visitAdmin,
 	clickBlockAppender,
+	switchToAdminUser,
+	switchToTestUser,
 } from '../support/utils';
 import { activatePlugin, deactivatePlugin } from '../support/plugins';
 
@@ -60,12 +62,15 @@ describe( 'templates', () => {
 		const STANDARD_FORMAT_VALUE = '0';
 
 		async function setPostFormat( format ) {
+			// To set the post format, we need to be the admin user.
+			await switchToAdminUser();
 			await visitAdmin( 'options-writing.php' );
 			await page.select( '#default_post_format', format );
-			return Promise.all( [
+			await Promise.all( [
 				page.waitForNavigation(),
 				page.click( '#submit' ),
 			] );
+			await switchToTestUser();
 		}
 
 		beforeAll( async () => await setPostFormat( 'image' ) );
@@ -93,9 +98,13 @@ describe( 'templates', () => {
 		} );
 
 		it( 'should not populate new page with default block for format', async () => {
+			// This test always needs to run as the admin user, because other roles can't create pages.
+			// It can't be skipped, because then it failed because of not testing the snapshot.
+			await switchToAdminUser();
 			await newPost( { postType: 'page' } );
 
 			expect( await getEditedPostContent() ).toMatchSnapshot();
+			await switchToTestUser();
 		} );
 	} );
 } );

test/e2e/support/plugins.js

@@ -1,7 +1,7 @@
 /**
  * Node dependencies
  */
-import { visitAdmin } from './utils';
+import { visitAdmin, switchToAdminUser, switchToTestUser } from './utils';
 
 /**
  * Install a plugin from the WP.org repository.
@@ -10,9 +10,11 @@ import { visitAdmin } from './utils';
  * @param {string?} searchTerm If the plugin is not findable by its slug use an alternative term to search.
  */
 export async function installPlugin( slug, searchTerm ) {
+	await switchToAdminUser();
 	await visitAdmin( 'plugin-install.php?s=' + encodeURIComponent( searchTerm || slug ) + '&tab=search&type=term' );
 	await page.click( '.install-now[data-slug="' + slug + '"]' );
 	await page.waitForSelector( '.activate-now[data-slug="' + slug + '"]' );
+	await switchToTestUser();
 }
 
 /**
@@ -21,9 +23,11 @@ export async function installPlugin( slug, searchTerm ) {
  * @param {string} slug Plugin slug.
  */
 export async function activatePlugin( slug ) {
+	await switchToAdminUser();
 	await visitAdmin( 'plugins.php' );
 	await page.click( 'tr[data-slug="' + slug + '"] .activate a' );
 	await page.waitForSelector( 'tr[data-slug="' + slug + '"] .deactivate a' );
+	await switchToTestUser();
 }
 
 /**
@@ -32,9 +36,11 @@ export async function activatePlugin( slug ) {
  * @param {string} slug Plugin slug.
  */
 export async function deactivatePlugin( slug ) {
+	await switchToAdminUser();
 	await visitAdmin( 'plugins.php' );
 	await page.click( 'tr[data-slug="' + slug + '"] .deactivate a' );
 	await page.waitForSelector( 'tr[data-slug="' + slug + '"] .delete a' );
+	await switchToTestUser();
 }
 
 /**
@@ -43,6 +49,7 @@ export async function deactivatePlugin( slug ) {
  * @param {string} slug Plugin slug.
  */
 export async function uninstallPlugin( slug ) {
+	await switchToAdminUser();
 	await visitAdmin( 'plugins.php' );
 	const confirmPromise = new Promise( ( resolve ) => {
 		page.once( 'dialog', () => resolve() );
@@ -52,4 +59,5 @@ export async function uninstallPlugin( slug ) {
 		page.click( 'tr[data-slug="' + slug + '"] .delete a' ),
 	] );
 	await page.waitForSelector( 'tr[data-slug="' + slug + '"].deleted' );
+	await switchToTestUser();
 }

test/e2e/support/setup-test-framework.js

@@ -116,6 +116,12 @@ function observeConsoleLogging() {
 			return;
 		}
 
+		// Viewing posts on the front end can result in this error, which
+		// has nothing to do with Gutenberg.
+		if ( text.includes( 'net::ERR_UNKNOWN_URL_SCHEME' ) ) {
+			return;
+		}
+
 		const logFunction = OBSERVED_CONSOLE_MESSAGE_TYPES[ type ];
 
 		// Disable reason: We intentionally bubble up the console message

test/e2e/support/utils.js

@@ -9,10 +9,15 @@ import { URL } from 'url';
  */
 import { times, castArray } from 'lodash';
 
+const WP_ADMIN_USER = {
+	username: 'admin',
+	password: 'password',
+};
+
 const {
 	WP_BASE_URL = 'http://localhost:8889',
-	WP_USERNAME = 'admin',
-	WP_PASSWORD = 'password',
+	WP_USERNAME = WP_ADMIN_USER.username,
+	WP_PASSWORD = WP_ADMIN_USER.password,
 } = process.env;
 
 /**
@@ -76,16 +81,44 @@ async function goToWPPath( WPPath, query ) {
 	await page.goto( getUrl( WPPath, query ) );
 }
 
-async function login() {
-	await page.type( '#user_login', WP_USERNAME );
-	await page.type( '#user_pass', WP_PASSWORD );
+async function login( username = WP_USERNAME, password = WP_PASSWORD ) {
+	await page.focus( '#user_login' );
+	await pressWithModifier( META_KEY, 'a' );
+	await page.type( '#user_login', username );
+	await page.focus( '#user_pass' );
+	await pressWithModifier( META_KEY, 'a' );
+	await page.type( '#user_pass', password );
 
 	await Promise.all( [
 		page.waitForNavigation(),
 		page.click( '#wp-submit' ),
 	] );
 }
 
+/**
+ * Switches the current user to the admin user (if the user
+ * running the test is not already the admin user).
+ */
+export async function switchToAdminUser() {
+	if ( WP_USERNAME === WP_ADMIN_USER.username ) {
+		return;
+	}
+	await goToWPPath( 'wp-login.php' );
+	await login( WP_ADMIN_USER.username, WP_ADMIN_USER.password );
+}
+
+/**
+ * Switches the current user to whichever user we should be
+ * running the tests as (if we're not already that user).
+ */
+export async function switchToTestUser() {
+	if ( WP_USERNAME === WP_ADMIN_USER.username ) {
+		return;
+	}
+	await goToWPPath( 'wp-login.php' );
+	await login();
+}
+
 export async function visitAdmin( adminPath, query ) {
 	await goToWPPath( join( 'wp-admin', adminPath ), query );