Merge pull request #1063 from Parsely/update/make-content-heper-panel…

…s-collapsible

build/content-helper.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-data', 'wp-edit-post', 'wp-element', 'wp-i18n', 'wp-plugins', 'wp-url'), 'version' => 'd75ceaabb6f180b1790f');
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-data', 'wp-edit-post', 'wp-element', 'wp-i18n', 'wp-plugins', 'wp-url'), 'version' => '041725ee5f7b861eb957');

src/blocks/content-helper/content-helper.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Panel, PanelBody, PanelHeader } from '@wordpress/components';
+import { Panel, PanelBody } from '@wordpress/components';
 import { PluginSidebar } from '@wordpress/edit-post';
 import { registerPlugin } from '@wordpress/plugins';
 
@@ -15,10 +15,11 @@ import LeafIcon from '../shared/components/leaf-icon';
 const BLOCK_PLUGIN_ID = 'wp-parsely-block-editor-sidebar';
 
 const renderSidebar = () => (
-	<PluginSidebar icon={ <LeafIcon /> } name="wp-parsely-content-helper" className="wp-parsely-content-helper" title="Parse.ly">
+	<PluginSidebar icon={ <LeafIcon /> } name="wp-parsely-content-helper" className="wp-parsely-content-helper" title={ __( 'Parse.ly Content Helper', 'wp-parsely' ) }>
 		<Panel>
-			<PanelHeader>{ __( 'Parse.ly Content Helper (Beta)', 'wp-parsely' ) }</PanelHeader>
-			<PanelBody><PostList /></PanelBody>
+			<PanelBody title={ __( 'Top-performing related posts', 'wp-parsely' ) } initialOpen={ false }>
+				<PostList />
+			</PanelBody>
 		</Panel>
 	</PluginSidebar>
 );

tests/e2e/specs/blocks/content-helper/errors.spec.js

@@ -37,14 +37,4 @@ describe( 'Content Helper', () => {
 
 		expect( await getContentHelperMessage() ).toMatch( 'Error: A Parse.ly API Secret must be set in site options to use this endpoint' );
 	} );
-
-	/**
-	 * Verifies that the Content Helper will display an error when the API is
-	 * not accessible.
-	 */
-	it( 'Should display an error when the Parse.ly API is not accessible', async () => {
-		await setSiteKeys( 'blog.parsely.com', 'test' );
-
-		expect( await getContentHelperMessage( null, null, true ) ).toMatch( 'WordPress Error: You are probably offline.' );
-	} );
 } );

tests/e2e/specs/blocks/content-helper/filters.spec.js

@@ -83,6 +83,6 @@ describe( 'Content Helper filters', () => {
 	it( 'Should work correctly when a taxonomy is added from within the WordPress Post Editor', async () => {
 		const categoryName = 'Parse.ly Tips';
 
-		expect( await getContentHelperMessage( categoryName, null, false, 2000 ) ).toMatch( `Top-performing posts in the category "${ categoryName }".` );
+		expect( await getContentHelperMessage( categoryName, null, 2000 ) ).toMatch( `Top-performing posts in the category "${ categoryName }".` );
 	} );
 } );

tests/e2e/specs/blocks/content-helper/top-bar-icon.spec.js

@@ -15,7 +15,7 @@ import {
 } from '../../../utils';
 
 // Selectors.
-const pluginButton = 'button[aria-label="Parse.ly"]';
+const pluginButton = 'button[aria-label="Parse.ly Content Helper"]';
 
 /**
  * Tests for the Content Helper's top bar icon.

tests/e2e/utils.js

@@ -94,21 +94,19 @@ export const insertRecordIntoTaxonomy = async ( recordName, taxonomyType ) => {
  * Gets the message returned by the Content Helper according to the various
  * conditions passed to the function.
  *
- * @param {string}  category Name of the category to select in the Post Editor.
- * @param {string}  tag      Name of the tag to select in the Post Editor.
- * @param {boolean} offline  Emulate being offline during the operation.
- * @param {number}  timeout  Milliseconds to wait after category/tag selection.
+ * @param {string} category Name of the category to select in the Post Editor.
+ * @param {string} tag      Name of the tag to select in the Post Editor.
+ * @param {number} timeout  Milliseconds to wait after category/tag selection.
  * @return {Promise<string>} The message returned by the Content Helper.
  */
-export const getContentHelperMessage = async ( category = null, tag = null, offline = false, timeout = 500 ) => {
+export const getContentHelperMessage = async ( category = null, tag = null, timeout = 500 ) => {
 	// Selectors
 	const addCategoryButton = 'button.components-button.editor-post-taxonomies__hierarchical-terms-add.is-link';
-	const pluginButton = 'button[aria-label="Parse.ly"]';
+	const pluginButton = 'button[aria-label="Parse.ly Content Helper"]';
 	const contentHelperMessage = '.wp-parsely-content-helper div.components-panel__body.is-opened > p';
 
 	// Run basic operations.
 	await createNewPost();
-	await page.setOfflineMode( offline );
 	await ensureSidebarOpened();
 	await page.waitForTimeout( 1000 );
 
@@ -142,15 +140,15 @@ export const getContentHelperMessage = async ( category = null, tag = null, offl
 	// Show the Content Helper and get the displayed message.
 	await page.waitForSelector( pluginButton );
 	await page.click( pluginButton );
+	const topRelatedPostsButton = await findSidebarPanelToggleButtonWithTitle( 'Top-performing related posts' );
+	await topRelatedPostsButton.click();
 	await page.waitForSelector( contentHelperMessage );
 	await page.waitForFunction( // Wait for Content Helper message to appear.
 		'document.querySelector("' + contentHelperMessage + '").innerText.length > 0',
 		{ polling: 'mutation', timeout: 5000 }
 	);
 	const text = await page.$eval( contentHelperMessage, ( element ) => element.textContent );
 
-	await page.setOfflineMode( false );
-
 	return text;
 };