update unit tests

WordPress · Jan 17, 2024 · 5e00e7e · 5e00e7e
1 parent 37d040c
commit 5e00e7e
Showing 1 changed file with 55 additions and 44 deletions.
diff --git a/packages/components/src/tabs/test/index.tsx b/packages/components/src/tabs/test/index.tsx
@@ -1172,37 +1172,79 @@ describe( 'Tabs', () => {
 				).not.toBeInTheDocument();
 			} );
 		} );
-
-		describe( 'When `selectOnMove` is `true`', () => {
-			it( 'should automatically select a newly focused tab', async () => {
-				render( <ControlledTabs tabs={ TABS } selectedTabId="beta" /> );
-
-				await press.Tab();
+		describe( 'When `selectedId` is changed by the controlling component', () => {
+			it( 'should automatically update focus if the selected tab already had focus', async () => {
+				const { rerender } = render(
+					<ControlledTabs
+						tabs={ TABS }
+						selectedTabId="beta"
+						selectOnMove={ false }
+					/>
+				);
 
 				// Tab key should focus the currently selected tab, which is Beta.
+				await press.Tab();
 				expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
 				expect( await getSelectedTab() ).toHaveFocus();
 
-				// Arrow keys should select and move focus to the next tab.
-				await press.ArrowRight();
+				rerender(
+					<ControlledTabs
+						tabs={ TABS }
+						selectedTabId="gamma"
+						selectOnMove={ false }
+					/>
+				);
+
+				// When the selected tab is changed, it should automatically receive focus.
 				expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
 				expect( await getSelectedTab() ).toHaveFocus();
 			} );
-			it( 'should automatically update focus when the selected tab is changed by the controlling component', async () => {
+			it( 'should not automatically update focus if the selected tab was not already focused', async () => {
 				const { rerender } = render(
-					<ControlledTabs tabs={ TABS } selectedTabId="beta" />
+					<ControlledTabs
+						tabs={ TABS }
+						selectedTabId="beta"
+						selectOnMove={ false }
+					/>
 				);
 
+				expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
+
 				// Tab key should focus the currently selected tab, which is Beta.
 				await press.Tab();
-				expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
 				expect( await getSelectedTab() ).toHaveFocus();
+				// Arrow left to focus Alpha, which is not the currently
+				// selected tab
+				await press.ArrowLeft();
 
 				rerender(
-					<ControlledTabs tabs={ TABS } selectedTabId="gamma" />
+					<ControlledTabs
+						tabs={ TABS }
+						selectedTabId="gamma"
+						selectOnMove={ false }
+					/>
 				);
 
-				// When the selected tab is changed, it should automatically receive focus.
+				// When the selected tab is changed, it should not automatically receive focus.
+				expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
+				expect(
+					screen.getByRole( 'tab', { name: 'Alpha' } )
+				).toHaveFocus();
+			} );
+		} );
+
+		describe( 'When `selectOnMove` is `true`', () => {
+			it( 'should automatically select a newly focused tab', async () => {
+				render( <ControlledTabs tabs={ TABS } selectedTabId="beta" /> );
+
+				await press.Tab();
+
+				// Tab key should focus the currently selected tab, which is Beta.
+				expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
+				expect( await getSelectedTab() ).toHaveFocus();
+
+				// Arrow keys should select and move focus to the next tab.
+				await press.ArrowRight();
 				expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
 				expect( await getSelectedTab() ).toHaveFocus();
 			} );
@@ -1247,37 +1289,6 @@ describe( 'Tabs', () => {
 				await press.Enter();
 				expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			} );
-			it( 'should not automatically update focus when the selected tab is changed by the controlling component', async () => {
-				const { rerender } = render(
-					<ControlledTabs
-						tabs={ TABS }
-						selectedTabId="beta"
-						selectOnMove={ false }
-					/>
-				);
-
-				expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
-
-				// Tab key should focus the currently selected tab, which is Beta.
-				await press.Tab();
-				await waitFor( async () =>
-					expect( await getSelectedTab() ).toHaveFocus()
-				);
-
-				rerender(
-					<ControlledTabs
-						tabs={ TABS }
-						selectedTabId="gamma"
-						selectOnMove={ false }
-					/>
-				);
-
-				// When the selected tab is changed, it should not automatically receive focus.
-				expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
-				expect(
-					screen.getByRole( 'tab', { name: 'Beta' } )
-				).toHaveFocus();
-			} );
 		} );
 	} );
 	it( 'should associate each `Tab` with the correct `TabPanel`, even if they are not rendered in the same order', async () => {