test: fix Tray test and other small fixes

Author: matyasf

cypress/component/DateInput.cy.tsx

@@ -617,27 +617,29 @@ describe('<DateInput/>', () => {
 
         cy.get('table').should('be.visible')
 
-        cy.contains('button', dayForSelect)
-          .should('be.enabled')
-          .click()
-          .wait(500)
-
-        cy.get('input')
-          .invoke('val')
-          .then((inputValue) => {
-            const inputValueRTLFree = removeRtlMarkers(inputValue)
-            const hasCorrectDirection =
-              (textDirection === 'rtl') === hasRtlMarkers(inputValue as string)
-
-            cy.wrap(hasCorrectDirection).should('be.true')
-            cy.wrap(inputValueRTLFree).should('equal', expectedFormattedValue)
-            cy.wrap(onChange).should(
-              'have.been.calledWith',
-              Cypress.sinon.match.any,
-              expectedOnChangeValue,
-              expectedDateIsoString
-            )
-          })
+        cy.contains('button', dayForSelect).should('be.enabled').click()
+
+        // Retryable assertion instead of a fixed `.wait(500)` + one-shot
+        // `.then()` read: Cypress re-runs this callback until the input value
+        // settles after the click-driven onChange/state update.
+        cy.get('input').should(($input) => {
+          const inputValue = $input.val() as string
+          const inputValueRTLFree = removeRtlMarkers(inputValue)
+          const hasCorrectDirection =
+            (textDirection === 'rtl') === hasRtlMarkers(inputValue)
+
+          expect(hasCorrectDirection, 'text direction matches locale').to.equal(
+            true
+          )
+          expect(inputValueRTLFree).to.equal(expectedFormattedValue)
+        })
+
+        cy.wrap(onChange).should(
+          'have.been.calledWith',
+          Cypress.sinon.match.any,
+          expectedOnChangeValue,
+          expectedDateIsoString
+        )
       })
     })
   })

cypress/component/Emotion-useStyle.cy.tsx

@@ -58,6 +58,7 @@ const grey1111 = 'rgb(0, 128, 0)'
 const green4570 = 'rgb(10, 10, 10)'
 const blue4570 = 'rgb(255, 255, 0)'
 const exampleTheme: Theme = {
+  // TODO update to the new theme syntax
   key: 'exampleTheme',
   colors: {
     contrasts: {

cypress/component/Modal-test-1.cy.tsx

@@ -28,9 +28,7 @@ import 'cypress-real-events'
 import '../support/component'
 
 describe('<Modal/>', () => {
-  // cypress-real-events keeps the real cursor where the previous test left it,
-  // so a test that ends hovering a Tooltip trigger leaves the next test's
-  // tooltip already visible (breaking its initial `not.be.visible` assertion).
+  // cypress-real-events keeps the real cursor where the previous test left it.
   // Park the cursor off-component (viewport bottom-right) before each test.
   beforeEach(() => {
     cy.get('body').realMouseMove(0, 0, { position: 'bottomRight' })

cypress/component/OptionsItem.cy.tsx

@@ -29,7 +29,7 @@ import { Options } from '@instructure/ui/latest'
 import { IconCheckSolid } from '@instructure/ui-icons'
 
 describe('<OptionsItem/>', () => {
-  it('should allow label to recieve focus', () => {
+  it('should allow label to receive focus', () => {
     const onFocus = cy.spy()
     cy.mount(
       <Options.Item tabIndex={-1} onFocus={onFocus}>

cypress/component/Pill.cy.tsx

@@ -28,9 +28,8 @@ import '../support/component'
 import 'cypress-real-events'
 
 describe('<Pill/>', () => {
-  // cypress-real-events keeps the real cursor where the previous test left it,
-  // so a test that ends hovering the Pill would leave the next test's tooltip
-  // already visible. Park the cursor away (viewport bottom-right) before each.
+  // cypress-real-events keeps the real cursor where the previous test left it.
+  // Park the cursor off-component (viewport bottom-right) before each test.
   beforeEach(() => {
     cy.get('body').realMouseMove(0, 0, { position: 'bottomRight' })
   })

cypress/component/SideNavBarItem.cy.tsx

@@ -29,7 +29,7 @@ import { IconAdminLine } from '@instructure/ui/latest'
 import '../support/component'
 
 describe('<SideNavBarItem/>', () => {
-  it('should show a tooltip when the nav is minimized ', () => {
+  it('should show a tooltip when the nav is minimized', () => {
     const onClick = cy.spy()
     cy.mount(
       <div data-testid="navBarItemWrapper" style={{ width: 300 }}>

cypress/component/TimeSelect.cy.tsx

@@ -354,17 +354,14 @@ describe('<TimeSelect/>', () => {
         renderLabel="Choose a time"
         allowNonStepInput={true}
         locale="en_AU"
-        format="LTS" // shows seconds
+        format="LTS" // `h:mm:ss A`
         timezone="US/Eastern"
         onChange={onChange}
       />
     )
     cy.get('input[id^="Select_"]').as('input')
     cy.get('@input').should('have.value', '')
 
-    // Hour must not be zero-padded: `format="LTS"` is `h:mm:ss A` (single `h`)
-    // and the input is parsed in moment strict mode, so `04:...` would be
-    // rejected and cleared on blur. See INSTUI leading-zero note.
     cy.get('@input').realClick().realType('4:45:55 AM')
     cy.get('@input').blur() // sends onChange event
 

cypress/component/Tooltip.cy.tsx

@@ -30,10 +30,7 @@ import '../support/component'
 
 describe('<Tooltip/>', () => {
   // cypress-real-events keeps the real cursor where the previous test left it.
-  // A test that ends hovering the trigger would leave the next freshly-mounted
-  // tooltip already visible, breaking its initial `not.be.visible` assertion.
-  // Park the cursor in the viewport's bottom-right (away from the top-left
-  // mounted trigger) before each test.
+  // Park the cursor in the viewport's bottom-right before each test.
   beforeEach(() => {
     cy.get('body').realMouseMove(0, 0, { position: 'bottomRight' })
   })

cypress/component/Tray.cy.tsx

@@ -36,15 +36,16 @@ describe('<Tray />', () => {
         open
         size="small"
         placement="start"
-        themeOverride={{ smallWidth: '10em' }}
+        themeOverride={{ widthSm: '165px' }}
       >
         <div>Hello</div>
       </Tray>
     )
 
     cy.get('[aria-label="Tray Example"]')
       .should('have.attr', 'role', 'dialog')
-      .and('have.css', 'width', '160px')
+      .parent()
+      .should('have.css', 'width', '165px')
   })
 
   it('should call onDismiss prop when Esc key pressed', () => {
@@ -68,7 +69,7 @@ describe('<Tray />', () => {
     cy.wrap(onDismiss).should('have.been.called')
   })
 
-  it.only('should handle focus properly in complex cases', () => {
+  it('should handle focus properly in complex cases', () => {
     const Example = () => {
       const [showTray, setShowTray] = React.useState(false)
       const [showOverlay, setShowOverlay] = React.useState(false)

cypress/component/TruncateList.cy.tsx

@@ -27,6 +27,7 @@ import { expect } from 'chai'
 
 import '../support/component'
 import 'cypress-real-events'
+import type { TruncateListProps } from '@instructure/ui-truncate-list'
 
 describe('<TruncateList />', () => {
   it('should pass how many items should be visible with `onUpdate` prop', () => {
@@ -240,13 +241,17 @@ describe('<TruncateList />', () => {
   })
 
   it('should resize list when fixMenuTriggerWidth changed in runtime', () => {
-    const Example = ({ fixMenuTriggerWidth }) => {
-      const [itemsCount, setItemsCount] = useState(Number)
+    const Example = ({
+      fixMenuTriggerWidth
+    }: {
+      fixMenuTriggerWidth: TruncateListProps['fixMenuTriggerWidth']
+    }) => {
+      const [itemsCount, setItemsCount] = useState(0)
 
       return (
         <TruncateList
           fixMenuTriggerWidth={fixMenuTriggerWidth}
-          onUpdate={({ visibleItemsCount }) => {
+          onUpdate={({ visibleItemsCount }: { visibleItemsCount: number }) => {
             setItemsCount(visibleItemsCount)
           }}
           visibleItemsCount={itemsCount}