cleaned up redundant code and added tests

Author: rubydong

packages/compass-indexes/src/components/create-index-form/create-index-options-accordion.spec.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { render, screen, userEvent } from '@mongodb-js/testing-library-compass';
+import { expect } from 'chai';
+import CreateIndexOptionsAccordion from './create-index-options-accordion';
+
+describe('CreateIndexOptionsAccordion', () => {
+  it('renders the button with "Options" text', () => {
+    render(
+      <CreateIndexOptionsAccordion>Test Content</CreateIndexOptionsAccordion>
+    );
+    expect(screen.getByText('Options')).to.exist;
+  });
+
+  it('toggles the accordion content when the button is clicked', () => {
+    render(
+      <CreateIndexOptionsAccordion>Test Content</CreateIndexOptionsAccordion>
+    );
+
+    const button = screen.getByRole('button', { name: /options/i });
+    expect(screen.queryByText('Test Content')).to.not.exist;
+
+    userEvent.click(button);
+    expect(screen.getByText('Test Content')).to.exist;
+
+    userEvent.click(button);
+    expect(screen.queryByText('Test Content')).to.not.exist;
+  });
+
+  it('renders the correct icon based on the open state', () => {
+    render(
+      <CreateIndexOptionsAccordion>Test Content</CreateIndexOptionsAccordion>
+    );
+
+    const button = screen.getByRole('button', { name: /options/i });
+    expect(
+      screen.getByTestId('create-index-options-accordion-icon')
+    ).to.have.attribute('aria-label', 'Chevron Right Icon');
+
+    userEvent.click(button);
+    expect(
+      screen.getByTestId('create-index-options-accordion-icon')
+    ).to.have.attribute('aria-label', 'Chevron Down Icon');
+  });
+});

packages/compass-indexes/src/components/create-index-form/create-index-options-accordion.tsx

@@ -1,20 +1,12 @@
 import {
   Body,
   css,
-  cx,
   Icon,
   palette,
   useDarkMode,
 } from '@mongodb-js/compass-components';
 import React, { useState } from 'react';
 
-const buttonLightThemeStyles = css({
-  color: palette.gray.dark2,
-});
-const buttonDarkThemeStyles = css({
-  color: palette.white,
-});
-
 const buttonStyles = css({
   fontWeight: 'bold',
   display: 'flex',
@@ -29,18 +21,10 @@ const buttonStyles = css({
   },
 });
 
-const buttonIconContainerStyles = css({
+const iconStyles = css({
   marginLeft: '4px',
 });
 
-const iconDarkThemeStyles = css({
-  color: palette.gray.base,
-});
-
-const iconLightThemeStyles = css({
-  color: palette.gray.dark1,
-});
-
 const CreateIndexOptionsAccordion = ({
   children,
 }: {
@@ -56,10 +40,7 @@ const CreateIndexOptionsAccordion = ({
   return (
     <>
       <button
-        className={cx(
-          darkMode ? buttonDarkThemeStyles : buttonLightThemeStyles,
-          buttonStyles
-        )}
+        className={buttonStyles}
         type="button"
         aria-expanded={open ? 'true' : 'false'}
         onClick={onOpenChange}
@@ -68,11 +49,10 @@ const CreateIndexOptionsAccordion = ({
           Options
         </Body>
         <Icon
-          className={
-            (cx(darkMode ? iconDarkThemeStyles : iconLightThemeStyles),
-            buttonIconContainerStyles)
-          }
+          color={darkMode ? palette.gray.base : palette.gray.dark1}
+          className={iconStyles}
           glyph={open ? 'ChevronDown' : 'ChevronRight'}
+          data-testid="create-index-options-accordion-icon"
         />
       </button>