Add tests

mui · Sep 16, 2024 · 9f531a6 · 9f531a6
1 parent 8bf30ea
commit 9f531a6
Show file tree

Hide file tree

Showing 10 changed files with 584 additions and 24 deletions.
diff --git a/packages/mui-base/src/Accordion/Header/AccordionHeader.test.tsx b/packages/mui-base/src/Accordion/Header/AccordionHeader.test.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 import * as Accordion from '@base_ui/react/Accordion';
 import * as Collapsible from '@base_ui/react/Collapsible';
 import { describeConformance, createRenderer } from '#test-utils';
+import { NOOP } from '../../utils/noop';
 
 const { AccordionRootContext, AccordionItemContext } = Accordion;
 
@@ -34,6 +35,8 @@ const accordionItemContextValue: Accordion.Item.Context = {
     orientation: 'vertical',
     transitionStatus: undefined,
   },
+  setTriggerId: NOOP,
+  triggerId: ':trigger:',
 };
 
 const collapsibleContextValue: Collapsible.Root.Context = {
@@ -42,9 +45,9 @@ const collapsibleContextValue: Collapsible.Root.Context = {
   disabled: false,
   mounted: true,
   open: true,
-  setContentId() {},
-  setMounted() {},
-  setOpen() {},
+  setContentId: NOOP,
+  setMounted: NOOP,
+  setOpen: NOOP,
   transitionStatus: undefined,
   ownerState: {
     open: true,

diff --git a/packages/mui-base/src/Accordion/Item/AccordionItem.test.tsx b/packages/mui-base/src/Accordion/Item/AccordionItem.test.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 // import { spy } from 'sinon';
 import * as Accordion from '@base_ui/react/Accordion';
 import { describeConformance, createRenderer } from '#test-utils';
+import { NOOP } from '../../utils/noop';
 
 const { AccordionRootContext } = Accordion;
 
@@ -11,7 +12,7 @@ const accordionRootContextValue: Accordion.Root.Context = {
   animated: false,
   direction: 'ltr',
   disabled: false,
-  handleOpenChange() {},
+  handleOpenChange: NOOP,
   orientation: 'vertical',
   ownerState: {
     value: [0],

diff --git a/packages/mui-base/src/Accordion/Item/AccordionItem.tsx b/packages/mui-base/src/Accordion/Item/AccordionItem.tsx
@@ -111,15 +111,16 @@ const AccordionItem = React.forwardRef(function AccordionItem(
     [collapsible.transitionStatus, disabled, index, isOpen, rootOwnerState],
   );
 
-  const triggerId = useId();
+  const [triggerId, setTriggerId] = React.useState<string | undefined>(useId());
 
   const accordionItemContext: AccordionItem.Context = React.useMemo(
     () => ({
       open: isOpen,
-      triggerId,
       ownerState,
+      setTriggerId,
+      triggerId,
     }),
-    [isOpen, ownerState, triggerId],
+    [isOpen, ownerState, setTriggerId, triggerId],
   );
 
   const { renderElement } = useComponentRenderer({
@@ -147,8 +148,9 @@ export namespace AccordionItem {
 
   export interface Context {
     open: boolean;
-    triggerId?: string;
     ownerState: OwnerState;
+    setTriggerId: (id: string | undefined) => void;
+    triggerId?: string;
   }
 
   export interface OwnerState extends AccordionRoot.OwnerState {

diff --git a/packages/mui-base/src/Accordion/Item/styleHooks.ts b/packages/mui-base/src/Accordion/Item/styleHooks.ts
@@ -12,7 +12,7 @@ export const accordionStyleHookMapping: CustomStyleHookMapping<AccordionItem.Own
     return Number.isInteger(value) ? { 'data-index': String(value) } : null;
   },
   open: (value) => {
-    return value ? { 'data-collapsible': 'open' } : { 'data-collapsible': 'closed' };
+    return value ? { 'data-accordion': 'open' } : { 'data-accordion': 'closed' };
   },
   transitionStatus: (value) => {
     if (value === 'entering') {

diff --git a/packages/mui-base/src/Accordion/Panel/AccordionPanel.test.tsx b/packages/mui-base/src/Accordion/Panel/AccordionPanel.test.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 import * as Accordion from '@base_ui/react/Accordion';
 import * as Collapsible from '@base_ui/react/Collapsible';
 import { describeConformance, createRenderer } from '#test-utils';
+import { NOOP } from '../../utils/noop';
 
 const { AccordionRootContext, AccordionItemContext } = Accordion;
 
@@ -14,7 +15,7 @@ const accordionRootContextValue: Accordion.Root.Context = {
   animated: false,
   direction: 'ltr',
   disabled: false,
-  handleOpenChange() {},
+  handleOpenChange: NOOP,
   orientation: 'vertical',
   ownerState: {
     value: [0],
@@ -34,6 +35,8 @@ const accordionItemContextValue: Accordion.Item.Context = {
     orientation: 'vertical',
     transitionStatus: undefined,
   },
+  setTriggerId: NOOP,
+  triggerId: ':trigger:',
 };
 
 const collapsibleContextValue: Collapsible.Root.Context = {
@@ -42,9 +45,9 @@ const collapsibleContextValue: Collapsible.Root.Context = {
   disabled: false,
   mounted: true,
   open: true,
-  setContentId() {},
-  setMounted() {},
-  setOpen() {},
+  setContentId: NOOP,
+  setMounted: NOOP,
+  setOpen: NOOP,
   transitionStatus: undefined,
   ownerState: {
     open: true,

diff --git a/packages/mui-base/src/Accordion/Panel/AccordionPanel.tsx b/packages/mui-base/src/Accordion/Panel/AccordionPanel.tsx
@@ -24,7 +24,7 @@ const AccordionPanel = React.forwardRef(function AccordionPanel(
   props: AccordionPanel.Props,
   forwardedRef: React.ForwardedRef<HTMLButtonElement>,
 ) {
-  const { className, htmlHidden: htmlHiddenProp, render, ...otherProps } = props;
+  const { className, htmlHidden: htmlHiddenProp, id: idProp, render, ...otherProps } = props;
 
   const { animated, mounted, open, contentId, setContentId, setMounted, setOpen } =
     useCollapsibleContext();
@@ -34,7 +34,7 @@ const AccordionPanel = React.forwardRef(function AccordionPanel(
   const { getRootProps, height, width } = useCollapsibleContent({
     animated,
     htmlHidden: htmlHiddenProp || htmlHidden,
-    id: contentId,
+    id: idProp ?? contentId,
     mounted,
     open,
     ref: forwardedRef,
@@ -91,6 +91,10 @@ AccordionPanel.propTypes /* remove-proptypes */ = {
    * @default 'hidden'
    */
   htmlHidden: PropTypes.oneOf(['hidden', 'until-found']),
+  /**
+   * @ignore
+   */
+  id: PropTypes.string,
   /**
    * A function to customize rendering of the component.
    */