test: add more regression tests. Fix SSR error in Calendar

in Calendar the weekday header IDs were getting out of sync because they were not deterministically
generated

Author: matyasf

package-lock.json

@@ -64,6 +64,7 @@
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.5.1",
     "@vitest/eslint-plugin": "^1.2.1",
+    "@types/node": "^22",
     "chai": "^4.4.1",
     "chalk": "^4.1.2",
     "commitizen": "^4.3.1",
@@ -101,7 +102,7 @@
     "@types/jest": "needed because https://github.com/testing-library/jest-dom/issues/544 recheck if fixed"
   },
   "engines": {
-    "node": ">=18",
+    "node": ">=22",
     "yarn": "YARN NO LONGER USED - use npm instead."
   },
   "config": {

package.json

@@ -28,11 +28,11 @@ import { View } from '@instructure/ui-view'
 import {
   safeCloneElement,
   callRenderProp,
-  omitProps
+  omitProps,
+  withDeterministicId
 } from '@instructure/ui-react-utils'
 import { createChainedFunction } from '@instructure/ui-utils'
 import { logError as error } from '@instructure/console'
-import { uid } from '@instructure/uid'
 import { AccessibleContent } from '@instructure/ui-a11y-content'
 
 import { testable } from '@instructure/ui-testable'
@@ -64,6 +64,7 @@ import { SimpleSelect } from '@instructure/ui-simple-select'
 category: components
 ---
 **/
+@withDeterministicId()
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
 class Calendar extends Component<CalendarProps, CalendarState> {
@@ -82,14 +83,15 @@ class Calendar extends Component<CalendarProps, CalendarState> {
   }
 
   ref: Element | null = null
-  private _weekdayHeaderIds = (
-    this.props.renderWeekdayLabels || this.defaultWeekdays
-  ).reduce((ids: Record<number, string>, _label, i) => {
-    return { ...ids, [i]: uid(`weekday-header-${i}`) }
-  }, {})
+  private _weekdayHeaderIds
+
   constructor(props: CalendarProps) {
     super(props)
-
+    this._weekdayHeaderIds = (
+      this.props.renderWeekdayLabels || this.defaultWeekdays
+    ).reduce((ids: Record<number, string>, _label, i) => {
+      return { ...ids, [i]: this.props.deterministicId!('weekday-header') }
+    }, {})
     this.state = this.calculateState(
       this.locale(),
       this.timezone(),

packages/ui-calendar/src/Calendar/index.tsx

@@ -38,6 +38,7 @@ import { ReactElement } from 'react'
 import type { CalendarDayProps } from './Day/props'
 import { Renderable } from '@instructure/shared-types'
 import type { Moment } from '@instructure/ui-i18n'
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
 type CalendarOwnProps = {
   /**
@@ -178,7 +179,8 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type CalendarProps = CalendarOwnProps &
   WithStyleProps<CalendarTheme, CalendarStyle> &
-  OtherHTMLAttributes<CalendarOwnProps>
+  OtherHTMLAttributes<CalendarOwnProps> &
+  WithDeterministicIdProps
 
 type CalendarStyle = ComponentStyle<
   'navigation' | 'navigationWithButtons' | 'weekdayHeader' | 'yearPicker'

packages/ui-calendar/src/Calendar/props.ts

@@ -45,10 +45,10 @@ export function runTest(codemod: Transform) {
   entries.forEach((entry) => {
     if (entry.isFile() && entry.name.includes('input')) {
       const isWarningTest = entry.name.includes('.warning.input')
-      const inputPath = path.join(entry.path, entry.name)
+      const inputPath = path.join(entry.parentPath, entry.name)
       const input = fs.readFileSync(inputPath, 'utf8')
       const expectedName = entry.name.replace('input', 'output')
-      const expectedPath = path.join(entry.path, expectedName)
+      const expectedPath = path.join(entry.parentPath, expectedName)
       const expected = fs.readFileSync(expectedPath, 'utf8')
 
       // eslint-disable-next-line no-console
@@ -61,12 +61,17 @@ export function runTest(codemod: Transform) {
       )
 
       if (isWarningTest) {
-        const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => { })
+        const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
 
         try {
           const j = jscodeshift.withParser('tsx')
           const fileInfo = { path: inputPath, source: input }
-          const api = { jscodeshift: j, j: j, stats: () => { }, report: () => { } }
+          const api = {
+            jscodeshift: j,
+            j: j,
+            stats: () => {},
+            report: () => {}
+          }
           const options = {}
 
           // Run codemod withouth comparison

packages/ui-codemods/lib/__node_tests__/runTest.ts

@@ -211,7 +211,7 @@ describe('<Drilldown.Option />', () => {
       )
       const option = screen.getByLabelText('Option')
 
-      expect(option).toHaveAttribute('role', 'button')
+      expect(option).toHaveAttribute('role', 'menuitem')
       expect(option).toHaveAttribute('aria-haspopup', 'true')
     })
   })

packages/ui-drilldown/src/Drilldown/DrilldownOption/__tests__/DrilldownOption.test.tsx

@@ -1126,7 +1126,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
     if (subPageId) {
       optionProps.renderAfterLabel = <IconArrowOpenEndSolid />
       optionProps['aria-haspopup'] = true
-      optionProps.role = customRole || 'button'
+      optionProps.role = customRole || 'menuitem'
       warn(
         !renderAfterLabel,
         `The prop "renderAfterLabel" is reserved on item with id: "${id}". When it has "subPageId" provided, a navigation arrow will render after the label.`

packages/ui-drilldown/src/Drilldown/index.tsx

@@ -49,9 +49,9 @@ Pre-configured and with unique styles, the `ai-headings` are used for standardiz
 type: example
 ---
 <div style={{display: 'flex', flexDirection: 'column', gap: '24px'}}>
- <Heading aiVariant="stacked">Nutrition Facts</Heading>
- <Heading aiVariant="horizontal">Nutrition Facts</Heading>
- <Heading aiVariant="iconOnly">Nutrition Facts</Heading>
+  <Heading aiVariant="stacked" level="h2">Nutrition Facts</Heading>
+  <Heading aiVariant="horizontal" level="h3">Nutrition Facts</Heading>
+  <Heading aiVariant="iconOnly" level="h4">Nutrition Facts</Heading>
 </div>
 ```
 

packages/ui-heading/src/Heading/README.md

@@ -63,12 +63,11 @@ const generateStyle = (
       background: componentTheme.selectedBackground,
       color: componentTheme.highlightedLabelColor
     },
-    disabled: { cursor: 'not-allowed', opacity: 0.5 },
+    disabled: { cursor: 'not-allowed', opacity: 0.68 },
     'highlighted-disabled': {
       background: componentTheme.highlightedBackground,
       color: componentTheme.highlightedLabelColor,
-      cursor: 'not-allowed',
-      opacity: 0.5
+      cursor: 'not-allowed'
     },
     'selected-highlighted': {
       background: componentTheme.selectedHighlightedBackground,

packages/ui-options/src/Options/Item/styles.ts

@@ -780,8 +780,14 @@ class Select extends Component<SelectProps> {
       onBlur: utils.createChainedFunction(onBlur, onRequestHideOptions),
       ...overrideProps
     }
-
-    return <TextInput {...triggerProps} {...getInputProps(inputProps)} />
+    // suppressHydrationWarning is needed because `role` depends on the browser type
+    return (
+      <TextInput
+        {...triggerProps}
+        {...getInputProps(inputProps)}
+        suppressHydrationWarning
+      />
+    )
   }
 
   render() {