test

Author: paula-stacho

packages/compass-components/src/components/accordion.spec.tsx

@@ -1,12 +1,7 @@
 import React from 'react';
 import { expect } from 'chai';
 
-import {
-  fireEvent,
-  render,
-  screen,
-  cleanup,
-} from '@mongodb-js/testing-library-compass';
+import { userEvent, render, screen } from '@mongodb-js/testing-library-compass';
 
 import { Accordion } from './accordion';
 
@@ -21,25 +16,36 @@ function renderAccordion(
 }
 
 describe('Accordion Component', function () {
-  afterEach(cleanup);
-
   it('should open the accordion on click', function () {
     renderAccordion();
 
     expect(screen.getByTestId('my-test-id')).to.exist;
     const button = screen.getByText('Accordion Test');
-    fireEvent.click(button);
+    userEvent.click(button);
+    expect(screen.getByText('Hello World')).to.be.visible;
+  });
+
+  it('should close the accordion on click - default open', function () {
+    renderAccordion({
+      defaultOpen: true,
+    });
+
+    expect(screen.getByTestId('my-test-id')).to.exist;
+    const button = screen.getByText('Accordion Test');
     expect(screen.getByText('Hello World')).to.be.visible;
+    userEvent.click(button);
+
+    expect(screen.queryByText('Hello World')).not.to.exist;
   });
 
   it('should close the accordion after clicking to open then close', function () {
     renderAccordion();
 
     expect(screen.getByTestId('my-test-id')).to.exist;
     const button = screen.getByText('Accordion Test');
-    fireEvent.click(button);
+    userEvent.click(button);
     expect(screen.getByText('Hello World')).to.be.visible;
-    fireEvent.click(button);
+    userEvent.click(button);
     expect(screen.queryByText('Hello World')).to.not.exist;
   });
 

packages/compass-components/src/components/accordion.tsx

@@ -52,7 +52,7 @@ interface AccordionProps extends React.HTMLProps<HTMLButtonElement> {
   hintText?: string;
   textClassName?: string;
   open?: boolean;
-  isDefaultExpanded?: boolean;
+  defaultOpen?: boolean;
   setOpen?: (newValue: boolean) => void;
 }
 function Accordion({
@@ -61,11 +61,11 @@ function Accordion({
   textClassName,
   open: _open,
   setOpen: _setOpen,
-  isDefaultExpanded = false,
+  defaultOpen = false,
   ...props
 }: React.PropsWithChildren<AccordionProps>): React.ReactElement {
   const darkMode = useDarkMode();
-  const [localOpen, setLocalOpen] = useState(_open ?? isDefaultExpanded);
+  const [localOpen, setLocalOpen] = useState(_open ?? defaultOpen);
   const setOpenRef = useRef(_setOpen);
   setOpenRef.current = _setOpen;
   const onOpenChange = useCallback(() => {

packages/compass-data-modeling/src/components/diagram-editor.tsx

@@ -230,7 +230,7 @@ const DiagramEditor: React.FunctionComponent<{
   onCollectionSelect: (namespace: string) => void;
   onRelationshipSelect: (rId: string) => void;
   onDiagramBackgroundClicked: () => void;
-  selectedItems: SelectedItems | null;
+  selectedItems: SelectedItems;
 }> = ({
   diagramLabel,
   step,

packages/compass-data-modeling/src/components/relationship-drawer-content.tsx

@@ -172,7 +172,7 @@ const RelationshipDrawerContent: React.FunctionComponent<
     <div data-relationship-id={relationshipId} className={containerStyles}>
       <Accordion
         text="RELATIONSHIP"
-        isDefaultExpanded={true}
+        defaultOpen={true}
         textClassName={accordionTitleStyles}
       >
         <FormFieldContainer className={formFieldContainerStyles}>
@@ -204,7 +204,7 @@ const RelationshipDrawerContent: React.FunctionComponent<
 
       <Accordion
         text="CONFIGURATION"
-        isDefaultExpanded={true}
+        defaultOpen={true}
         textClassName={accordionTitleStyles}
       >
         <FormFieldContainer className={formFieldContainerStyles}>