Merge 7113fe9 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]',
 		],
 	} );
 }
@@ -160,8 +167,8 @@ beforeAll( async () => {
 		width: 1680,
 		height: 948,
 	} );
-	await page.setDefaultNavigationTimeout( 10000 );
-	await page.setDefaultTimeout( 10000 );
+	await page.setDefaultNavigationTimeout( 15000 );
+	await page.setDefaultTimeout( 15000 );
 } );
 
 // eslint-disable-next-line jest/require-top-level-describe

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

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { visitAdminPage } from '@wordpress/e2e-test-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 page.evaluate( selector => {
+			document.querySelector( selector ).click();
+		}, btnSelect );
+		await page.waitForNavigation();
+	} );
+
+	afterEach( async () => {
+		await visitAdminPage( 'options-general.php', 'page=unsplash' );
+		await page.evaluate( selector => {
+			document.querySelector( selector ).value = '';
+		}, inputSelector );
+		await page.evaluate( selector => {
+			document.querySelector( selector ).click();
+		}, 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 page.evaluate( selector => {
+			document.querySelector( selector ).click();
+		}, 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

@@ -15,13 +15,55 @@ describe( 'Classic editor', () => {
 
 	beforeEach( async () => {
 		await visitAdminPage( 'post-new.php', {} );
-	} );
-
-	it( 'should the tab exist', async () => {
 		await clickButton( 'Add Media' );
 		await page.waitForSelector( '.media-modal' );
 		await page.waitForSelector( '#menu-item-unsplash' );
+	} );
+
+	it( 'should the tab exist', async () => {
 		// Wait unsplash tab.
 		await expect( page ).toMatchElement( '#menu-item-unsplash' );
 	} );
+
+	it( 'Search: results found', async () => {
+		await page.waitForSelector( '#unsplash-search-input' );
+		await page.keyboard.type( 'WordPress' );
+		const CONTAINER = '.unsplash-browser .attachments';
+		await page.waitForSelector( CONTAINER );
+		await expect( page ).toMatchElement( CONTAINER );
+	} );
+
+	it( 'Search: no results found', async () => {
+		await page.waitForSelector( '#unsplash-search-input' );
+		await page.keyboard.type( 'dsfdsfs' );
+
+		const NO_RESULTS = '.unsplash-browser .show';
+		await page.waitForSelector( NO_RESULTS );
+		await expect( page ).toMatchElement( NO_RESULTS );
+	} );
+
+	it( 'insert image', async () => {
+		const CONTAINER = '.unsplash-browser .attachments';
+		await page.waitForSelector( CONTAINER );
+		const btnSelector =
+			'.unsplash-browser .attachments .unsplash-attachment:first-of-type';
+		await page.waitForSelector( btnSelector );
+		await page.evaluate( selector => {
+			document.querySelector( selector ).click();
+		}, btnSelector );
+		const btnSelect = '.media-button-insert';
+		await page.evaluate( selector => {
+			document.querySelector( selector ).click();
+		}, btnSelect );
+		await page.waitFor( 2000 );
+		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,31 @@
+/**
+ * WordPress dependencies
+ */
+import { visitAdminPage } from '@wordpress/e2e-test-utils';
+import { activatePlugin, deactivatePlugin } from '../../utils';
+
+describe( 'Classic editor', () => {
+	beforeAll( async () => {
+		await activatePlugin( 'classic-editor' );
+	} );
+
+	afterAll( async () => {
+		await deactivatePlugin( 'classic-editor' );
+	} );
+
+	beforeEach( async () => {
+		await visitAdminPage( 'post-new.php', {} );
+	} );
+
+	it( 'should the tab exist', async () => {
+		const MEDIA_LIBRARY_BUTTON = '#set-post-thumbnail';
+		const UNSPLASH_LIBRARY_BUTTON = '#menu-item-unsplash';
+
+		// Click the media library button and wait for tab.
+		await page.waitForSelector( MEDIA_LIBRARY_BUTTON );
+		await page.click( MEDIA_LIBRARY_BUTTON );
+		await page.waitForSelector( '.media-modal' );
+		await page.waitForSelector( UNSPLASH_LIBRARY_BUTTON );
+		await expect( page ).toMatchElement( UNSPLASH_LIBRARY_BUTTON );
+	} );
+} );

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

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { createNewPost, insertBlock } from '@wordpress/e2e-test-utils';
+import { clickButton } from '../../utils';
+
+describe( 'Cover Block', () => {
+	beforeEach( async () => {
+		await createNewPost( {} );
+	} );
+
+	it( 'should the tab exist', async () => {
+		const UNSPLASH_LIBRARY_BUTTON = '#menu-item-unsplash';
+
+		// Insert cover block.
+		await insertBlock( 'Cover' );
+
+		// Click the media library button and wait for tab.
+		await clickButton( 'Media Library' );
+		await page.waitForSelector( '.media-modal' );
+		await page.waitForSelector( UNSPLASH_LIBRARY_BUTTON );
+		await expect( page ).toMatchElement( UNSPLASH_LIBRARY_BUTTON );
+	} );
+} );

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

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { createNewPost } from '@wordpress/e2e-test-utils';
+import { clickButton } from '../../utils';
+
+/**
+ * Tests the notices for the featured image.
+ */
+describe( 'Featured Image', () => {
+	beforeEach( async () => {
+		await createNewPost();
+		await clickButton( 'Document' );
+		await clickButton( 'Featured image' );
+		await clickButton( 'Set featured image' );
+	} );
+
+	it( 'should the tab exist', async () => {
+		const UNSPLASH_LIBRARY_BUTTON = '#menu-item-unsplash';
+		await page.waitForSelector( '.media-modal' );
+		await page.waitForSelector( UNSPLASH_LIBRARY_BUTTON );
+		await expect( page ).toMatchElement( UNSPLASH_LIBRARY_BUTTON );
+	} );
+} );

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

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { createNewPost, insertBlock } from '@wordpress/e2e-test-utils';
+import { clickButton } from '../../utils';
+
+const UNSPLASH_LIBRARY_BUTTON = '#menu-item-unsplash';
+
+describe( 'Image Block', () => {
+	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( '.media-modal' );
+	} );
+
+	it( 'should the tab not exist', async () => {
+		await expect( page ).not.toMatchElement( UNSPLASH_LIBRARY_BUTTON );
+	} );
+} );

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

@@ -4,24 +4,56 @@
 import { createNewPost, insertBlock } from '@wordpress/e2e-test-utils';
 import { clickButton } from '../../utils';
 
+const UNSPLASH_LIBRARY_BUTTON = '#menu-item-unsplash';
+
 describe( 'Image Block', () => {
 	beforeEach( async () => {
 		await createNewPost( {} );
-	} );
-
-	it( 'should the tab exist', async () => {
-		const MEDIA_LIBRARY_BUTTON = '.wp-block-image .components-button';
-		const UNSPLASH_LIBRARY_BUTTON = '#menu-item-unsplash';
 
 		// Insert image block.
 		await insertBlock( 'Image' );
 
 		// Click the media library button and wait for tab.
-		await page.waitForSelector( MEDIA_LIBRARY_BUTTON );
-		await page.click( MEDIA_LIBRARY_BUTTON );
-		await clickButton( 'Library' );
+		await clickButton( 'Media Library' );
 		await page.waitForSelector( '.media-modal' );
 		await page.waitForSelector( UNSPLASH_LIBRARY_BUTTON );
+	} );
+
+	it( 'should the tab exist', async () => {
 		await expect( page ).toMatchElement( UNSPLASH_LIBRARY_BUTTON );
 	} );
+
+	it( 'Search: results found', async () => {
+		await page.waitForSelector( '#unsplash-search-input' );
+		await page.keyboard.type( 'WordPress' );
+		const CONTAINER = '.unsplash-browser .attachments';
+		await page.waitForSelector( CONTAINER );
+		await expect( page ).toMatchElement( CONTAINER );
+	} );
+
+	it( 'Search: no results found', async () => {
+		await page.waitForSelector( '#unsplash-search-input' );
+		await page.keyboard.type( 'dsfdsfs' );
+		const NO_RESULTS = '.unsplash-browser .show';
+		await page.waitForSelector( NO_RESULTS );
+		await expect( page ).toMatchElement( NO_RESULTS );
+	} );
+
+	it( 'insert image', async () => {
+		const CONTAINER = '.unsplash-browser .attachments';
+		await page.waitForSelector( CONTAINER );
+		const btnSelector =
+			'.unsplash-browser .attachments .unsplash-attachment:first-of-type';
+		await page.waitForSelector( btnSelector );
+		await page.evaluate( selector => {
+			document.querySelector( selector ).click();
+		}, btnSelector );
+		const btnSelect = '.media-button-select';
+		await page.evaluate( selector => {
+			document.querySelector( selector ).click();
+		}, btnSelect );
+		const blockClass = '.wp-block-image';
+		await page.waitForSelector( blockClass );
+		await expect( page ).toMatchElement( blockClass );
+	} );
 } );

tests/phpunit/php/class-test-settings.php

@@ -694,7 +694,7 @@ public function test_access_key_render() {
 		$this->settings->access_key_render();
 		$input = ob_get_clean();
 
-		$expected = "\t\t<input type='password' class=\"widefat\" name='unsplash_settings[access_key]' aria-describedby=\"unsplash-key-description\" value=''>\n\t\t";
+		$expected = "\t\t<input type='password' class=\"widefat\" id='unsplash_access_key' name='unsplash_settings[access_key]' aria-describedby=\"unsplash-key-description\" value=''>\n\t\t";
 
 		$this->assertContains( $expected, $input );
 	}