feat(candles-chart): combine overlays and studies into indicators dropdown (#5129)

libs/candles-chart/src/lib/candles-menu.spec.tsx

@@ -1,31 +1,83 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { CandlesMenu } from './candles-menu';
+import {
+  useCandlesChartSettingsStore,
+  DEFAULT_CHART_SETTINGS,
+} from './use-candles-chart-settings';
+import { Overlay, Study, overlayLabels, studyLabels } from 'pennant';
 
 describe('CandlesMenu', () => {
-  it('should render with the correct default studies', async () => {
+  const openDropdown = async () => {
-    render(<CandlesMenu />);
-
     await userEvent.click(
       screen.getByRole('button', {
-        name: 'Studies',
+        name: 'Indicators',
       })
     );
-    expect(await screen.findByRole('menu')).toBeInTheDocument();
+  };
-    expect(screen.getByText('Volume')).toHaveAttribute('data-state', 'checked');
+
-    expect(screen.getByText('MACD')).toHaveAttribute('data-state', 'checked');
+  beforeEach(() => {
+    // clear store each time to avoid conditional testing of defaults
+    useCandlesChartSettingsStore.setState({ overlays: [], studies: [] });
   });
 
-  it('should render with the correct default overlays', async () => {
+  it.each(Object.values(Overlay))('can set %s overlay', async (overlay) => {
+    render(<CandlesMenu />);
+
+    await openDropdown();
+
+    const menu = within(await screen.findByRole('menu'));
+
+    await userEvent.click(menu.getByText(overlayLabels[overlay as Overlay]));
+
+    // re-open the dropdown
+    await openDropdown();
+
+    expect(screen.getByText(overlayLabels[overlay as Overlay])).toHaveAttribute(
+      'data-state',
+      'checked'
+    );
+  });
+
+  it.each(Object.values(Study))('can set %s study', async (study) => {
+    render(<CandlesMenu />);
+
+    await openDropdown();
+
+    const menu = within(await screen.findByRole('menu'));
+
+    await userEvent.click(menu.getByText(studyLabels[study as Study]));
+
+    // re-open the dropdown
+    await openDropdown();
+
+    expect(screen.getByText(studyLabels[study as Study])).toHaveAttribute(
+      'data-state',
+      'checked'
+    );
+  });
+
+  it('should render with the correct default studies and overlays', async () => {
+    useCandlesChartSettingsStore.setState(DEFAULT_CHART_SETTINGS);
+
     render(<CandlesMenu />);
 
     await userEvent.click(
       screen.getByRole('button', {
-        name: 'Overlays',
+        name: 'Indicators',
       })
     );
-    expect(await screen.findByRole('menu')).toBeInTheDocument();
+    const menu = within(await screen.findByRole('menu'));
-    expect(screen.getByText('Moving average')).toHaveAttribute(
+
+    expect(menu.getByText(studyLabels.volume)).toHaveAttribute(
+      'data-state',
+      'checked'
+    );
+    expect(menu.getByText(studyLabels.macd)).toHaveAttribute(
+      'data-state',
+      'checked'
+    );
+    expect(menu.getByText(overlayLabels.movingAverage)).toHaveAttribute(
       'data-state',
       'checked'
     );

libs/candles-chart/src/lib/candles-menu.tsx

@@ -107,7 +107,7 @@ export const CandlesMenu = () => {
         trigger={
           <TradingDropdownTrigger className={triggerClasses}>
             <TradingButton {...triggerButtonProps}>
-              {t('Overlays')}
+              {t('Indicators')}
             </TradingButton>
           </TradingDropdownTrigger>
         }
@@ -132,18 +132,6 @@ export const CandlesMenu = () => {
               <TradingDropdownItemIndicator />
             </TradingDropdownCheckboxItem>
           ))}
-        </TradingDropdownContent>
-      </TradingDropdown>
-      <TradingDropdown
-        trigger={
-          <TradingDropdownTrigger className={triggerClasses}>
-            <TradingButton {...triggerButtonProps}>
-              {t('Studies')}
-            </TradingButton>
-          </TradingDropdownTrigger>
-        }
-      >
-        <TradingDropdownContent align={contentAlign}>
           {Object.values(Study).map((study) => (
             <TradingDropdownCheckboxItem
               key={study}

libs/candles-chart/src/lib/use-candles-chart-settings.ts

@@ -24,7 +24,7 @@ const STUDY_ORDER: Study[] = [
   Study.VOLUME,
 ];
 
-const DEFAULT_CHART_SETTINGS = {
+export const DEFAULT_CHART_SETTINGS = {
   interval: Interval.I15M,
   type: ChartType.CANDLE,
   overlays: [Overlay.MOVING_AVERAGE],