Merge ea72ddf into f48b3b7

assets/src/media-selector/collections/images-collection.js

@@ -63,9 +63,7 @@ const ImagesCollection = wp.media.model.Attachments.extend( {
 		// checking if we're still mirroring that collection when
 		// the request resolves.
 		mirroring.more( options ).done( () => {
-			if ( this === attachments.mirroring ) {
-				deferred.resolveWith( this );
-			}
+			deferred.resolveWith( this );
 
 			// Used for the search results and unsplash view.
 			attachments.trigger( 'attachments:received', this );

assets/src/media-selector/views/images-browser.js

@@ -158,12 +158,14 @@ const ImagesBrowser = wp.media.view.AttachmentsBrowser.extend( {
 					noItemsView.$el.removeClass( 'hidden' );
 				} else {
 					noItemsView.$el.addClass( 'hidden' );
+					noItemsView.$el.addClass( 'show' );
 				}
 				view.toolbar.get( 'spinner' ).hide();
 				view.showError();
 			} );
 		} else {
 			noItemsView.$el.addClass( 'hidden' );
+			noItemsView.$el.addClass( 'show' );
 			view.toolbar.get( 'spinner' ).hide();
 			view.showError();
 		}

php/class-settings.php

@@ -494,7 +494,7 @@ public function settings_section_render() {
 	public function access_key_render() {
 		$options = get_option( 'unsplash_settings' );
 		?>
-		<input type='password' class="widefat" name='unsplash_settings[access_key]' aria-describedby="unsplash-key-description" value='<?php echo esc_attr( isset( $options['access_key'] ) ? $options['access_key'] : '' ); ?>'>
+		<input type='password' class="widefat" id='unsplash_access_key' name='unsplash_settings[access_key]' aria-describedby="unsplash-key-description" value='<?php echo esc_attr( isset( $options['access_key'] ) ? $options['access_key'] : '' ); ?>'>
 		<p class="description" id="unsplash-key-description"><?php esc_html_e( 'Only use if you have an API key to manually enter for authentication.', 'unsplash' ); ?></p>
 		<?php
 	}

tests/e2e/config/bootstrap.js

@@ -122,25 +122,32 @@ async function runAxeTestsForBlockEditor() {
 		// See: https://github.com/WordPress/gutenberg/pull/15018.
 		disabledRules: [
 			'aria-allowed-role',
+			'aria-allowed-attr',
 			'aria-hidden-focus',
 			'aria-input-field-name',
+			'aria-toggle-field-name',
 			'aria-valid-attr-value',
 			'button-name',
 			'color-contrast',
 			'dlitem',
+			'page-has-heading-one',
 			'duplicate-id',
 			'label',
+			'landmark-one-main',
 			'link-name',
-			'list',
 			'listitem',
-			'page-has-heading-one',
 			'region',
 		],
 		exclude: [
 			// Ignores elements created by metaboxes.
 			'.edit-post-layout__metaboxes',
 			// Ignores elements created by TinyMCE.
 			'.mce-container',
+			// These properties were not included in the 1.1 spec
+			// through error, they should be allowed on role="row":
+			// https://github.com/w3c/aria/issues/558
+			'[role="treegrid"] [aria-posinset]',
+			'[role="treegrid"] [aria-setsize]',
 		],
 	} );
 }
@@ -161,7 +168,7 @@ beforeAll( async () => {
 		height: 948,
 	} );
 	await page.setDefaultNavigationTimeout( 10000 );
-	await page.setDefaultTimeout( 10000 );
+	await page.setDefaultTimeout( 20000 );
 } );
 
 // eslint-disable-next-line jest/require-top-level-describe

tests/e2e/constants.js

@@ -0,0 +1,5 @@
+export const UNSPLASH_LIBRARY_BUTTON = '#menu-item-unsplash';
+export const UNSPLASH_LIBRARY_SEARCH_INPUT = '#unsplash-search-input';
+export const UNSPLASH_CONTRAINER = '.unsplash-browser .attachments';
+export const UNSPLASH_MODAL = '.media-modal';
+export const UNSPLASH_NO_RESULTS = '.unsplash-browser .no-media';

tests/e2e/specs/admin/admin.spec.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { visitAdminPage } from '@wordpress/e2e-test-utils';
+import { clickSelector } from '../../utils';
+
+const inputSelector = '#unsplash_access_key';
+const btnSelect = '#submit.button-primary';
+
+describe( 'Settings', () => {
+	beforeEach( async () => {
+		await visitAdminPage( 'options-general.php', 'page=unsplash' );
+		await page.evaluate( selector => {
+			document.querySelector( selector ).value = '';
+		}, inputSelector );
+		await clickSelector( btnSelect );
+		await page.waitForNavigation();
+	} );
+
+	afterEach( async () => {
+		await visitAdminPage( 'options-general.php', 'page=unsplash' );
+		await page.evaluate( selector => {
+			document.querySelector( selector ).value = '';
+		}, inputSelector );
+		await clickSelector( btnSelect );
+		await page.waitForNavigation();
+	} );
+
+	it( 'page input exist', async () => {
+		// Wait input tab.
+		await expect( page ).toMatchElement( inputSelector );
+	} );
+
+	it( 'Valid key the input exist', async () => {
+		await page.focus( inputSelector );
+		await page.keyboard.type( 'valid-key' );
+		await clickSelector( btnSelect );
+		await page.waitForNavigation();
+
+		const NO_RESULTS = '.notice-error.notice-unsplash';
+		await page.waitForSelector( NO_RESULTS );
+		await expect( page ).toMatchElement( NO_RESULTS );
+	} );
+} );

tests/e2e/specs/classic/editor.spec.js

@@ -2,7 +2,23 @@
  * WordPress dependencies
  */
 import { visitAdminPage } from '@wordpress/e2e-test-utils';
-import { activatePlugin, clickButton, deactivatePlugin } from '../../utils';
+
+/**
+ * Internal dependencies
+ */
+import {
+	activatePlugin,
+	clickButton,
+	deactivatePlugin,
+	clickSelector,
+} from '../../utils';
+import {
+	UNSPLASH_LIBRARY_BUTTON,
+	UNSPLASH_LIBRARY_SEARCH_INPUT,
+	UNSPLASH_CONTRAINER,
+	UNSPLASH_MODAL,
+	UNSPLASH_NO_RESULTS,
+} from '../../constants';
 
 describe( 'Classic editor', () => {
 	beforeAll( async () => {
@@ -15,13 +31,55 @@ describe( 'Classic editor', () => {
 
 	beforeEach( async () => {
 		await visitAdminPage( 'post-new.php', {} );
+		await clickButton( 'Add Media' );
+		await page.waitForSelector( UNSPLASH_MODAL, {
+			visible: true,
+		} );
+		await clickSelector( UNSPLASH_LIBRARY_BUTTON );
 	} );
 
 	it( 'should the tab exist', async () => {
-		await clickButton( 'Add Media' );
-		await page.waitForSelector( '.media-modal' );
-		await page.waitForSelector( '#menu-item-unsplash' );
 		// Wait unsplash tab.
-		await expect( page ).toMatchElement( '#menu-item-unsplash' );
+		await expect( page ).toMatchElement( UNSPLASH_LIBRARY_BUTTON );
+	} );
+
+	it( 'Search: results found', async () => {
+		await page.waitForSelector( UNSPLASH_LIBRARY_SEARCH_INPUT );
+		await page.focus( UNSPLASH_LIBRARY_SEARCH_INPUT );
+		await page.keyboard.type( 'WordPress' );
+		await page.waitForSelector( UNSPLASH_CONTRAINER );
+		await expect( page ).toMatchElement( UNSPLASH_CONTRAINER );
+	} );
+
+	it( 'Search: no results found', async () => {
+		await page.waitForSelector( UNSPLASH_LIBRARY_SEARCH_INPUT );
+		await page.focus( UNSPLASH_LIBRARY_SEARCH_INPUT );
+		await page.keyboard.type( 'dsfdsfs' );
+		await page.waitForSelector( UNSPLASH_NO_RESULTS, {
+			visible: true,
+		} );
+		await expect( page ).toMatchElement( UNSPLASH_NO_RESULTS );
+	} );
+
+	it( 'insert image', async () => {
+		await page.waitForSelector( UNSPLASH_CONTRAINER );
+		const btnSelector =
+			UNSPLASH_CONTRAINER + ' .unsplash-attachment:first-of-type';
+		await clickSelector( btnSelector );
+		const btnSelect = '.media-button-insert';
+		await clickSelector( btnSelect );
+		await page.waitForSelector( UNSPLASH_MODAL, {
+			visible: false,
+		} );
+		await page.waitFor( 5000 );
+		const imgClass = 'size-large';
+		// Switch to HTML mode
+		await expect( page ).toClick( '#content-html' );
+
+		const textEditorContent = await page.$eval(
+			'.wp-editor-area',
+			element => element.value
+		);
+		expect( textEditorContent ).toContain( imgClass );
 	} );
 } );

tests/e2e/specs/classic/featured-image.spec.js

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { visitAdminPage } from '@wordpress/e2e-test-utils';
+
+/**
+ * Internal dependencies
+ */
+import { activatePlugin, clickSelector, deactivatePlugin } from '../../utils';
+import {
+	UNSPLASH_CONTRAINER,
+	UNSPLASH_LIBRARY_BUTTON,
+	UNSPLASH_MODAL,
+} from '../../constants';
+
+const MEDIA_LIBRARY_BUTTON = '#set-post-thumbnail';
+
+describe( 'Classic editor', () => {
+	beforeAll( async () => {
+		await activatePlugin( 'classic-editor' );
+	} );
+
+	afterAll( async () => {
+		await deactivatePlugin( 'classic-editor' );
+	} );
+
+	beforeEach( async () => {
+		await visitAdminPage( 'post-new.php', {} );
+		await page.waitForSelector( MEDIA_LIBRARY_BUTTON );
+		await page.click( MEDIA_LIBRARY_BUTTON );
+		await page.waitForSelector( UNSPLASH_MODAL, {
+			visible: true,
+		} );
+		await page.waitForSelector( UNSPLASH_LIBRARY_BUTTON );
+	} );
+
+	it( 'should the tab exist', async () => {
+		// Click the media library button and wait for tab.
+		await expect( page ).toMatchElement( UNSPLASH_LIBRARY_BUTTON );
+	} );
+
+	it( 'select image', async () => {
+		await page.waitForSelector( UNSPLASH_CONTRAINER );
+		const btnSelector =
+			UNSPLASH_CONTRAINER + ' .unsplash-attachment:first-of-type';
+		await clickSelector( btnSelector );
+		const btnSelect = '.media-button-select';
+		await clickSelector( btnSelect );
+		await page.waitForSelector( UNSPLASH_MODAL, {
+			visible: false,
+		} );
+		const blockClass = '.size-post-thumbnail';
+		await page.waitForSelector( blockClass );
+		await expect( page ).toMatchElement( blockClass );
+	} );
+} );

tests/e2e/specs/gutenberg/cover-block.spec.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { createNewPost, insertBlock } from '@wordpress/e2e-test-utils';
+
+/**
+ * Internal dependencies
+ */
+import { clickButton, deactivatePlugin } from '../../utils';
+import { UNSPLASH_LIBRARY_BUTTON, UNSPLASH_MODAL } from '../../constants';
+
+describe( 'Cover Block', () => {
+	beforeAll( async () => {
+		await deactivatePlugin( 'classic-editor' );
+	} );
+
+	beforeEach( async () => {
+		await createNewPost( {} );
+	} );
+
+	it( 'should the tab exist', async () => {
+		// Insert cover block.
+		await insertBlock( 'Cover' );
+
+		// Click the media library button and wait for tab.
+		await clickButton( 'Media Library' );
+		await page.waitForSelector( UNSPLASH_MODAL, {
+			visible: true,
+		} );
+		await page.waitForSelector( UNSPLASH_LIBRARY_BUTTON );
+		await expect( page ).toMatchElement( UNSPLASH_LIBRARY_BUTTON );
+	} );
+} );

tests/e2e/specs/gutenberg/featured-image.spec.js

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { createNewPost } from '@wordpress/e2e-test-utils';
+
+/**
+ * Internal dependencies
+ */
+import { clickButton, deactivatePlugin, clickSelector } from '../../utils';
+import {
+	UNSPLASH_CONTRAINER,
+	UNSPLASH_LIBRARY_BUTTON,
+	UNSPLASH_MODAL,
+} from '../../constants';
+/**
+ * Tests the notices for the featured image.
+ */
+describe( 'Featured Image', () => {
+	beforeAll( async () => {
+		await deactivatePlugin( 'classic-editor' );
+	} );
+
+	beforeEach( async () => {
+		await createNewPost();
+		await clickButton( 'Document' );
+		await clickButton( 'Featured image' );
+		await clickButton( 'Set featured image' );
+		await page.waitForSelector( UNSPLASH_MODAL, {
+			visible: true,
+		} );
+	} );
+
+	it( 'select image', async () => {
+		await page.waitForSelector( UNSPLASH_LIBRARY_BUTTON );
+		await clickSelector( UNSPLASH_LIBRARY_BUTTON );
+		await page.waitForSelector( UNSPLASH_CONTRAINER, {
+			visible: true,
+		} );
+		const btnSelector =
+			UNSPLASH_CONTRAINER + ' .unsplash-attachment:first-of-type';
+		await clickSelector( btnSelector );
+		const btnSelect = '.media-button-select';
+		await clickSelector( btnSelect );
+		await page.waitForSelector( UNSPLASH_MODAL, {
+			visible: false,
+		} );
+		const blockClass = '.editor-post-featured-image__preview';
+		await page.waitForSelector( blockClass );
+		await expect( page ).toMatchElement( blockClass );
+	} );
+} );

tests/e2e/specs/gutenberg/gallery-block.spec.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { createNewPost, insertBlock } from '@wordpress/e2e-test-utils';
+
+/**
+ * Internal dependencies
+ */
+import { clickButton, deactivatePlugin } from '../../utils';
+import { UNSPLASH_LIBRARY_BUTTON, UNSPLASH_MODAL } from '../../constants';
+
+describe( 'Image Block', () => {
+	beforeAll( async () => {
+		await deactivatePlugin( 'classic-editor' );
+	} );
+
+	beforeEach( async () => {
+		await createNewPost( {} );
+
+		// Insert image block.
+		await insertBlock( 'Gallery' );
+
+		// Click the media library button and wait for tab.
+		await clickButton( 'Media Library' );
+		await page.waitForSelector( UNSPLASH_MODAL, {
+			visible: true,
+		} );
+	} );
+
+	it( 'should the tab not exist', async () => {
+		await expect( page ).not.toMatchElement( UNSPLASH_LIBRARY_BUTTON );
+	} );
+} );