test(cypress): fix Drilldown keyboard-nav flake and Tabs controlled-switch tests

Drilldown: park cursor in beforeEach, enter via menu.focus, fix stale
role="button" selector. Tabs: control panel switching via stateful wrapper,
drop obsolete React.createElement key spy.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: matyasf

cypress/component/Drilldown.cy.tsx

@@ -43,6 +43,10 @@ const renderOptions = (page: string) => {
 }
 
 describe('<Drilldown/>', () => {
+  beforeEach(() => {
+    cy.get('body').realMouseMove(0, 0, { position: 'bottomRight' })
+  })
+
   it('should disabled prop prevent option actions', () => {
     cy.mount(
       <Drilldown rootPageId="page0" disabled>
@@ -57,10 +61,6 @@ describe('<Drilldown/>', () => {
       </Drilldown>
     )
     cy.contains('Option-0').realClick()
-
-    // `disabled` prevents the option action, so clicking Option-0 must NOT
-    // navigate to its subPage — Option-1 (on page1) should never appear and
-    // we stay on page0.
     cy.contains('Option-0').should('be.visible')
     cy.contains('Option-1').should('not.exist')
   })
@@ -96,8 +96,7 @@ describe('<Drilldown/>', () => {
         </Drilldown.Page>
       </Drilldown>
     )
-    cy.get('body').realClick()
-    cy.get('body').realPress('Tab')
+    cy.get('div[role="menu"]').focus()
 
     cy.realPress('ArrowDown')
     cy.focused().should('have.id', 'option01')
@@ -109,12 +108,7 @@ describe('<Drilldown/>', () => {
     cy.focused().should('have.id', 'option01')
   })
 
-  // TODO(INSTUI): flaky under cypress-real-events keyboard navigation with
-  // retries:0. cy `.focus()` on the menu isn't honored by CDP key dispatch and
-  // `realClick`+`Tab` is non-deterministic. Needs the component's real focus
-  // model mapped (post-Tab focus target, how ArrowDown enters options) to make
-  // it reliably deterministic. Skipped pending that work.
-  it.skip('should prevent focus rotation in the drilldown with "false"', () => {
+  it('should prevent focus rotation in the drilldown with "false"', () => {
     cy.mount(
       <Drilldown rootPageId="page0" rotateFocus={false}>
         <Drilldown.Page id="page0">
@@ -123,8 +117,7 @@ describe('<Drilldown/>', () => {
         </Drilldown.Page>
       </Drilldown>
     )
-    cy.get('body').realClick()
-    cy.get('body').realPress('Tab')
+    cy.get('div[role="menu"]').focus()
 
     cy.realPress('ArrowDown')
     cy.focused().should('have.id', 'option01')
@@ -461,10 +454,7 @@ describe('<Drilldown/>', () => {
     cy.contains('Option01').should('be.visible')
   })
 
-  // TODO(INSTUI): flaky under cypress-real-events keyboard navigation with
-  // retries:0 (see the skipped focus-rotation test above). Skipped pending a
-  // deterministic real-events focus approach.
-  it.skip('should be able to navigate between options with up/down arrows', () => {
+  it('should be able to navigate between options with up/down arrows', () => {
     cy.mount(
       <Drilldown rootPageId="page0">
         <Drilldown.Page id="page0">
@@ -491,10 +481,7 @@ describe('<Drilldown/>', () => {
     cy.get('#opt_1').should('have.focus')
   })
 
-  // TODO(INSTUI): flaky under cypress-real-events keyboard navigation with
-  // retries:0 (see the skipped focus-rotation test above). Skipped pending a
-  // deterministic real-events focus approach.
-  it.skip('should be able to navigate forward between pages with right arrow', () => {
+  it('should be able to navigate forward between pages with right arrow', () => {
     cy.mount(
       <Drilldown rootPageId="page0">
         <Drilldown.Page id="page0" renderTitle={'Page 0'}>
@@ -532,7 +519,7 @@ describe('<Drilldown/>', () => {
     // next arrowDown should skip the header Title and focus on 'To Page 2' option
     cy.realPress('ArrowDown')
     cy.contains('[id^="DrilldownHeader-Title_"]', 'Page 1').should('be.visible')
-    cy.contains('[role="button"]', 'To Page 2').should('have.focus')
+    cy.get('#opt5').should('have.focus').and('have.text', 'To Page 2')
 
     // go to Page 2
     cy.realPress('ArrowRight')

cypress/component/Tabs.cy.tsx

@@ -24,58 +24,11 @@
 
 import React from 'react'
 import { Tabs } from '@instructure/ui/latest'
-import { expect } from 'chai'
 
 import '../support/component'
 import 'cypress-real-events'
 
 describe('<Tabs/>', () => {
-  // TODO(INSTUI): outdated approach — spies on React.createElement and inspects
-  // args for `key`, but under the automatic JSX runtime / emotion `jsx` pragma
-  // JSX no longer compiles to React.createElement (spy captures nothing), and
-  // `key` isn't exposed on props anyway. Needs a rewrite that asserts observable
-  // key-preservation behavior. Skipped pending that.
-  it.skip('should preserve Tab.Panel keys', () => {
-    const createElementSpy = cy.spy(React, 'createElement')
-    cy.mount(
-      <Tabs>
-        <Tabs.Panel renderTitle="foo" key="foo-key" />
-      </Tabs>
-    )
-
-    cy.wrap(createElementSpy)
-      .should('have.been.called')
-      .then((spy) => {
-        const createFooTabCall = spy
-          .getCalls()
-          .filter((call) => call.args[1]?.renderTitle === 'foo')[0]
-
-        expect(createFooTabCall.args[1].key).to.equal('foo-key')
-
-        // Set two child
-        cy.mount(
-          <Tabs>
-            <Tabs.Panel renderTitle="foo" key="foo-key" />
-            <Tabs.Panel renderTitle="bar" key="bar-key" />
-          </Tabs>
-        )
-
-        cy.wrap(createElementSpy)
-          .should('have.been.called')
-          .then((updatedSpy) => {
-            const createFooTabCall = updatedSpy
-              .getCalls()
-              .filter((call) => call.args[1]?.renderTitle === 'foo')[0]
-            const createBarTabCall = updatedSpy
-              .getCalls()
-              .filter((call) => call.args[1]?.renderTitle === 'bar')[0]
-
-            expect(createFooTabCall.args[1].key).to.equal('foo-key')
-            expect(createBarTabCall.args[1].key).to.equal('bar-key')
-          })
-      })
-  })
-
   it('should call onRequestTabChange with keyboard arrow keys', () => {
     const onChange = cy.stub()
 
@@ -117,27 +70,39 @@ describe('<Tabs/>', () => {
     cy.wrap(onChange).its('lastCall.args[1].index').should('equal', 1)
   })
 
-  // TODO(INSTUI): the tab click does not switch the panel under cypress-real-
-  // events (panel stays display:none after clicking the second tab; neither
-  // native .click() nor .realClick() switches it, and the tab exposes no
-  // aria-selected to assert against). Needs interaction/DOM investigation.
-  it.skip('should keep non-selected panel hidden when unmountOnExit is false', () => {
-    cy.mount(
-      <Tabs>
-        <Tabs.Panel renderTitle="First Tab" unmountOnExit={false}>
-          Tab 1 content
-        </Tabs.Panel>
-        <Tabs.Panel renderTitle="Second Tab">Tab 2 content</Tabs.Panel>
-      </Tabs>
-    )
+  it('should keep non-selected panel hidden when unmountOnExit is false', () => {
+    // Tabs is a controlled component: a tab click only fires onRequestTabChange,
+    // so the parent must own the selected index for the panel to actually switch.
+    const Example = () => {
+      const [selectedIndex, setSelectedIndex] = React.useState(0)
+      return (
+        <Tabs
+          onRequestTabChange={(_event: unknown, { index }: { index: number }) =>
+            setSelectedIndex(index)
+          }
+        >
+          <Tabs.Panel
+            renderTitle="First Tab"
+            isSelected={selectedIndex === 0}
+            unmountOnExit={false}
+          >
+            Tab 1 content
+          </Tabs.Panel>
+          <Tabs.Panel renderTitle="Second Tab" isSelected={selectedIndex === 1}>
+            Tab 2 content
+          </Tabs.Panel>
+        </Tabs>
+      )
+    }
+
+    cy.mount(<Example />)
 
     cy.get('[role="tabpanel"]').should('have.length', 2)
 
     cy.get('[role="tabpanel"]').eq(0).should('not.have.css', 'display', 'none')
     cy.get('[role="tabpanel"]').eq(1).should('have.css', 'display', 'none')
 
     cy.contains('[role="tab"]', 'Second Tab').click()
-    cy.wait(100)
     cy.get('[role="tabpanel"]').eq(1).should('not.have.css', 'display', 'none')
     cy.get('[role="tabpanel"]').eq(0).should('have.css', 'display', 'none')
   })