TabPanel: Refactor unit tests in prep for controlled component updates

packages/components/CHANGELOG.md

@@ -9,6 +9,7 @@
 ### Internal
 
 -   `CircularOptionPicker`: Convert to TypeScript ([#47937](https://github.com/WordPress/gutenberg/pull/47937)).
+-   `TabPanel`: Improve unit test in preparation for controlled component updates ([#48086](https://github.com/WordPress/gutenberg/pull/48086)).
 
 ## 23.4.0 (2023-02-15)
 

packages/components/src/tab-panel/stories/index.tsx

@@ -3,16 +3,25 @@
  */
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 
+/**
+ * WordPress dependencies
+ */
+import { link, more, wordpress } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
 import TabPanel from '..';
+import Popover from '../../popover';
+import { Provider as SlotFillProvider } from '../../slot-fill';
 
 const meta: ComponentMeta< typeof TabPanel > = {
 	title: 'Components/TabPanel',
 	component: TabPanel,
 	parameters: {
+		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
 	},
 };
 export default meta;
@@ -55,3 +64,35 @@ DisabledTab.args = {
 		},
 	],
 };
+
+const SlotFillTemplate: ComponentStory< typeof TabPanel > = ( props ) => {
+	return (
+		<SlotFillProvider>
+			<TabPanel { ...props } />
+			{ /* @ts-expect-error The 'Slot' component hasn't been typed yet. */ }
+			<Popover.Slot />
+		</SlotFillProvider>
+	);
+};
+
+export const WithTabIconsAndTooltips = SlotFillTemplate.bind( {} );
+WithTabIconsAndTooltips.args = {
+	children: ( tab ) => <p>Selected tab: { tab.title }</p>,
+	tabs: [
+		{
+			name: 'tab1',
+			title: 'Tab 1',
+			icon: wordpress,
+		},
+		{
+			name: 'tab2',
+			title: 'Tab 2',
+			icon: link,
+		},
+		{
+			name: 'tab3',
+			title: 'Tab 3',
+			icon: more,
+		},
+	],
+};