diff --git a/packages/components/src/progressive-disclosure-panel/test/index.js b/packages/components/src/progressive-disclosure-panel/test/index.js
index 3fff561a758a8..866aa1305e3fa 100644
--- a/packages/components/src/progressive-disclosure-panel/test/index.js
+++ b/packages/components/src/progressive-disclosure-panel/test/index.js
@@ -7,15 +7,9 @@ import { render, screen, fireEvent } from '@testing-library/react';
* Internal dependencies
*/
import ProgressiveDisclosurePanel from '../';
-
-// Represents a child provided to the panel such as a block support control.
-const MockControl = ( { children } ) =>
{ children }
;
+import PanelItem from '../item';
const resetAll = jest.fn();
-const hasValue = jest.fn().mockImplementation( ( props ) => {
- // Use fudged attribute to determine existence of value for testing.
- return props.attributes.value;
-} );
// Default props for the progressive disclosure panel.
const defaultProps = {
@@ -27,7 +21,9 @@ const defaultProps = {
// Default props for an enabled control to be rendered within panel.
const controlProps = {
attributes: { value: true },
- hasValue,
+ hasValue: jest.fn().mockImplementation( () => {
+ return !! controlProps.attributes.value;
+ } ),
label: 'Example',
onDeselect: jest.fn().mockImplementation( () => {
controlProps.attributes.value = undefined;
@@ -39,7 +35,9 @@ const controlProps = {
// the panel.
const altControlProps = {
attributes: { value: false },
- hasValue,
+ hasValue: jest.fn().mockImplementation( () => {
+ return !! altControlProps.attributes.value;
+ } ),
label: 'Alt',
onDeselect: jest.fn(),
onSelect: jest.fn(),
@@ -49,14 +47,19 @@ const altControlProps = {
const getPanel = ( container ) =>
container.querySelector( '.components-progressive-disclosure-panel' );
-// Renders a default progressive disclosure panel including a child that
-// is being conditionally disabled.
+// Renders a default progressive disclosure panel including children that are
+// not to be represented within the panel's menu.
const renderPanel = () => {
return render(
{ false && Hidden
}
- Example control
- Alt control
+
+ Example control
+
+
+ Alt control
+
+ Visible
);
};
@@ -88,30 +91,56 @@ describe( 'ProgressiveDisclosurePanel', () => {
// This covers case where children prop is not an array.
const { container } = render(
- { false && Should not show }
+ { false && Should not show }
);
expect( getPanel( container ) ).not.toBeInTheDocument();
} );
- it( 'should not render when all children have been filtered out', () => {
+ it( 'should not render when there are no progressive panel items', () => {
const { container } = render(
- { false && Should not show }
- { false && Not shown either }
+ { false && Should not show }
+ { false && Not shown either }
+ Visible but insignificant
);
expect( getPanel( container ) ).not.toBeInTheDocument();
} );
- it( 'should render panel when at least one child', () => {
+ it( 'should render panel when at least one panel item as child', () => {
const { container } = renderPanel();
expect( getPanel( container ) ).toBeInTheDocument();
} );
+ it( 'should render non panel item child', () => {
+ renderPanel();
+
+ const nonPanelItem = screen.queryByText( 'Visible' );
+
+ expect( nonPanelItem ).toBeInTheDocument();
+ } );
+
+ it( 'should render child flagged as default control even without value', () => {
+ render(
+
+
+ Example control
+
+
+ Alt control
+
+
+ );
+
+ const altControl = screen.getByText( 'Alt control' );
+
+ expect( altControl ).toBeInTheDocument();
+ } );
+
it( 'should render display options menu', () => {
renderPanel();
diff --git a/packages/components/src/progressive-disclosure-panel/title.js b/packages/components/src/progressive-disclosure-panel/title.js
index 7f29f80d002e5..636ed67a872e2 100644
--- a/packages/components/src/progressive-disclosure-panel/title.js
+++ b/packages/components/src/progressive-disclosure-panel/title.js
@@ -33,7 +33,7 @@ const ProgressiveDisclosurePanelTitle = ( props ) => {