@react-magma/charts 14.0.0-next.3 → 14.0.0-next.4

package/src/components/CarbonChart/CarbonChart.test.js

@@ -1,7 +1,14 @@
 import React from 'react';
 
-import { act, render } from '@testing-library/react';
-import { ThemeContext, magma } from 'react-magma-dom';
+import { act, render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+  ThemeContext,
+  magma,
+  DropdownMenuItem,
+  I18nContext,
+  defaultI18n,
+} from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartType } from '.';
 
@@ -11,10 +18,14 @@ global.ResizeObserver = jest.fn().mockImplementation(() => ({
   disconnect: jest.fn(),
 }));
 
-// Capture MutationObserver callbacks so we can trigger them manually
-let mutationObserverCallback;
+// Capture MutationObserver callbacks so we can trigger them manually.
+// Multiple observers may be created per component; we collect all of them and
+// call each one so that no observer is silently skipped.
+let mutationObserverCallbacks = [];
+const mutationObserverCallback = mutations =>
+  mutationObserverCallbacks.forEach(cb => cb(mutations));
 global.MutationObserver = jest.fn().mockImplementation(callback => {
-  mutationObserverCallback = callback;
+  mutationObserverCallbacks.push(callback);
   return {
     observe: jest.fn(),
     disconnect: jest.fn(),
@@ -588,6 +599,32 @@ describe('CarbonChart', () => {
         }
       );
     });
+
+    it('should move focus back after closing the More options dropdown and chart toolbar', () => {
+      const testId = 'modal-footer-border-test';
+      const { getByTestId, getByText } = render(
+        <ThemeContext.Provider value={magma}>
+          <CarbonChart
+            testId={testId}
+            dataSet={dataSet}
+            options={chartOptions}
+            type={CarbonChartType.bar}
+            isInverse={false}
+            chartToolbar={{}}
+          />
+        </ThemeContext.Provider>
+      );
+
+      const moreOptionsButton = getByTestId('chart-more-options-button');
+      userEvent.click(moreOptionsButton);
+
+      expect(getByText('Download as CSV')).toBeVisible();
+      expect(getByText('Download as PNG')).toBeVisible();
+      expect(getByText('Download as JPG')).toBeVisible();
+
+      userEvent.keyboard('{esc}');
+      expect(moreOptionsButton).toHaveFocus();
+    });
   });
 
   describe('Modal Focus Management', () => {
@@ -597,6 +634,7 @@ describe('CarbonChart', () => {
     let otherButton;
 
     beforeEach(() => {
+      mutationObserverCallbacks = [];
       jest.useFakeTimers();
       jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => {
         cb(0);
@@ -754,4 +792,434 @@ describe('CarbonChart', () => {
       expect(document.activeElement).toBe(closeButton);
     });
   });
+
+  describe('chartToolbar prop', () => {
+    const toolbarProps = {
+      dataSet,
+      options: chartOptions,
+      type: CarbonChartType.bar,
+      chartToolbar: {},
+    };
+
+    it('should render the show-as-table button with aria-haspopup="dialog"', () => {
+      render(<CarbonChart {...toolbarProps} />);
+
+      const button = screen.getByRole('button', {
+        name: chartOptions.title,
+      });
+      expect(button).toHaveAttribute('aria-haspopup', 'dialog');
+      expect(button).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('should render the fullscreen button without aria-haspopup', () => {
+      render(<CarbonChart {...toolbarProps} />);
+
+      const button = screen.getByRole('button', {
+        name: `View ${chartOptions.title} full screen`,
+      });
+      expect(button).not.toHaveAttribute('aria-haspopup');
+    });
+
+    it('should open the table modal when show-as-table button is clicked', () => {
+      render(<CarbonChart {...toolbarProps} />);
+
+      fireEvent.click(screen.getByRole('button', { name: chartOptions.title }));
+
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+      expect(
+        screen.getByRole('heading', {
+          level: 2,
+          name: `Tabular representation ${chartOptions.title}`,
+        })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('columnheader', { name: 'Group' })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('columnheader', { name: 'Value' })
+      ).toBeInTheDocument();
+    });
+
+    it('should render chart data in the table modal', () => {
+      render(<CarbonChart {...toolbarProps} />);
+
+      fireEvent.click(screen.getByRole('button', { name: chartOptions.title }));
+
+      expect(screen.getByRole('cell', { name: 'Qty' })).toBeInTheDocument();
+      expect(screen.getByRole('cell', { name: '65000' })).toBeInTheDocument();
+    });
+
+    it('should set aria-expanded to true when modal is open', () => {
+      render(<CarbonChart {...toolbarProps} />);
+
+      const tableButton = screen.getByRole('button', {
+        name: chartOptions.title,
+      });
+      fireEvent.click(tableButton);
+
+      expect(tableButton).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    it('should not render the table button when showAsTable is false', () => {
+      render(
+        <CarbonChart {...toolbarProps} chartToolbar={{ showAsTable: false }} />
+      );
+
+      expect(
+        screen.queryByRole('button', { name: chartOptions.title })
+      ).not.toBeInTheDocument();
+    });
+
+    it('should not render the fullscreen button when fullscreen is false', () => {
+      render(
+        <CarbonChart {...toolbarProps} chartToolbar={{ fullscreen: false }} />
+      );
+
+      expect(
+        screen.queryByRole('button', { name: /full screen/i })
+      ).not.toBeInTheDocument();
+    });
+
+    it('should render the chart title as h2 by default', () => {
+      render(<CarbonChart {...toolbarProps} />);
+
+      expect(
+        screen.getByRole('heading', { level: 2, name: chartOptions.title })
+      ).toBeInTheDocument();
+    });
+
+    it('should render the chart title at the level set by titleLevel', () => {
+      render(
+        <CarbonChart {...toolbarProps} chartToolbar={{ titleLevel: 3 }} />
+      );
+
+      expect(
+        screen.getByRole('heading', { level: 3, name: chartOptions.title })
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByRole('heading', { level: 2, name: chartOptions.title })
+      ).not.toBeInTheDocument();
+    });
+
+    it('should always render the more options dropdown with built-in download items', () => {
+      render(<CarbonChart {...toolbarProps} />);
+
+      const moreBtn = screen.getByRole('button', { name: 'More options' });
+      expect(moreBtn).toBeInTheDocument();
+
+      fireEvent.click(moreBtn);
+      expect(screen.getByText('Download as CSV')).toBeVisible();
+      expect(screen.getByText('Download as PNG')).toBeVisible();
+      expect(screen.getByText('Download as JPG')).toBeVisible();
+    });
+
+    it('should render additional moreOptions items below built-in downloads', () => {
+      render(
+        <CarbonChart
+          {...toolbarProps}
+          chartToolbar={{
+            moreOptions: <DropdownMenuItem>Custom Action</DropdownMenuItem>,
+          }}
+        />
+      );
+
+      const moreBtn = screen.getByRole('button', { name: 'More options' });
+      fireEvent.click(moreBtn);
+      expect(screen.getByText('Download as CSV')).toBeVisible();
+      expect(screen.getByText('Download as PNG')).toBeVisible();
+      expect(screen.getByText('Download as JPG')).toBeVisible();
+      expect(screen.getByText('Custom Action')).toBeVisible();
+    });
+
+    it('should support custom table columns', () => {
+      render(
+        <CarbonChart
+          {...toolbarProps}
+          chartToolbar={{
+            tableColumns: [
+              { header: 'Category', key: 'group' },
+              { header: 'Count', key: 'value' },
+            ],
+          }}
+        />
+      );
+
+      fireEvent.click(screen.getByRole('button', { name: chartOptions.title }));
+
+      expect(
+        screen.getByRole('columnheader', { name: 'Category' })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('columnheader', { name: 'Count' })
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('dot keyboard accessibility', () => {
+    let rafCallbacks;
+
+    beforeEach(() => {
+      rafCallbacks = [];
+      jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => {
+        rafCallbacks.push(cb);
+        return rafCallbacks.length - 1;
+      });
+    });
+
+    afterEach(() => {
+      window.requestAnimationFrame.mockRestore();
+      rafCallbacks = [];
+    });
+
+    function renderChart() {
+      const { getByTestId } = render(
+        <CarbonChart
+          testId="dot-tab-test"
+          dataSet={dataSet}
+          options={chartOptions}
+          type={CarbonChartType.scatter}
+        />
+      );
+      return getByTestId('dot-tab-test');
+    }
+
+    function addDot(wrapper) {
+      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      const dot = document.createElementNS(
+        'http://www.w3.org/2000/svg',
+        'circle'
+      );
+      dot.classList.add('dot');
+      svg.appendChild(dot);
+      wrapper.appendChild(svg);
+      return dot;
+    }
+
+    describe('tabbing', () => {
+      it('should stamp tabindex="0" on circle.dot elements so they are reachable by Tab', () => {
+        const wrapper = renderChart();
+        const dot = addDot(wrapper);
+
+        // The last captured RAF is the dots-stamping callback (no ariaLabel provided)
+        act(() => rafCallbacks[rafCallbacks.length - 1](0));
+
+        expect(dot).toHaveAttribute('tabindex', '0');
+      });
+
+      it('should not overwrite an existing tabindex on circle.dot', () => {
+        const wrapper = renderChart();
+        const dot = addDot(wrapper);
+        dot.setAttribute('tabindex', '-1');
+
+        act(() => rafCallbacks[rafCallbacks.length - 1](0));
+
+        expect(dot).toHaveAttribute('tabindex', '-1');
+      });
+    });
+
+    describe('focus on dot content', () => {
+      it('should set opacity to 1 when a dot receives focus', () => {
+        const wrapper = renderChart();
+        const dot = addDot(wrapper);
+
+        fireEvent.focusIn(dot);
+
+        expect(dot.style.opacity).toBe('1');
+      });
+
+      it('should dispatch mouseover on dot focusin to reveal tooltip data', () => {
+        const wrapper = renderChart();
+        const dot = addDot(wrapper);
+
+        const mouseoverSpy = jest.fn();
+        dot.addEventListener('mouseover', mouseoverSpy);
+
+        fireEvent.focusIn(dot);
+
+        expect(mouseoverSpy).toHaveBeenCalledTimes(1);
+      });
+
+      it('should dispatch mousemove on dot focusin', () => {
+        const wrapper = renderChart();
+        const dot = addDot(wrapper);
+
+        const mousemoveSpy = jest.fn();
+        dot.addEventListener('mousemove', mousemoveSpy);
+
+        fireEvent.focusIn(dot);
+
+        expect(mousemoveSpy).toHaveBeenCalledTimes(1);
+      });
+
+      it('should not change opacity for non-dot circle elements on focusin', () => {
+        const wrapper = renderChart();
+        const nonDot = document.createElementNS(
+          'http://www.w3.org/2000/svg',
+          'circle'
+        );
+        wrapper.appendChild(nonDot);
+
+        fireEvent.focusIn(nonDot);
+
+        expect(nonDot.style.opacity).toBe('');
+      });
+    });
+
+    describe('data visibility', () => {
+      it('should reset dot opacity when dot loses focus', () => {
+        const wrapper = renderChart();
+        const dot = addDot(wrapper);
+
+        fireEvent.focusIn(dot);
+        expect(dot.style.opacity).toBe('1');
+
+        fireEvent.focusOut(dot);
+        expect(dot.style.opacity).toBe('');
+      });
+
+      it('should dispatch mouseout on dot focusout to hide tooltip', () => {
+        const wrapper = renderChart();
+        const dot = addDot(wrapper);
+
+        const mouseoutSpy = jest.fn();
+        dot.addEventListener('mouseout', mouseoutSpy);
+
+        fireEvent.focusIn(dot);
+        fireEvent.focusOut(dot);
+
+        expect(mouseoutSpy).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+
+  describe('Legend accessibility wrap', () => {
+    const testId = 'legend-a11y';
+
+    beforeEach(() => {
+      mutationObserverCallbacks = [];
+    });
+
+    it('wraps the Carbon legend in a fieldset with a legend caption derived from the chart title', () => {
+      const { getByTestId } = render(
+        <CarbonChart
+          testId={testId}
+          dataSet={dataSet}
+          options={chartOptions}
+          type={CarbonChartType.bar}
+        />
+      );
+      const wrapper = getByTestId(testId);
+
+      const fieldset = wrapper.querySelector('.cds--cc--legend-fieldset');
+      expect(fieldset).not.toBeNull();
+      expect(fieldset.tagName).toBe('FIELDSET');
+      expect(fieldset.querySelector('.cds--cc--legend')).not.toBeNull();
+
+      const caption = fieldset.querySelector('legend');
+      expect(caption).not.toBeNull();
+      expect(caption.textContent).toBe(
+        `${chartOptions.title}. Checking these checkboxes will update the chart.`
+      );
+    });
+
+    it('uses ariaLabel for the legend caption when provided', () => {
+      const ariaLabel = 'Quarterly sales chart';
+      const { getByTestId } = render(
+        <CarbonChart
+          testId={testId}
+          ariaLabel={ariaLabel}
+          dataSet={dataSet}
+          options={chartOptions}
+          type={CarbonChartType.bar}
+        />
+      );
+      const wrapper = getByTestId(testId);
+
+      const caption = wrapper.querySelector(
+        '.cds--cc--legend-fieldset > legend'
+      );
+      expect(caption).not.toBeNull();
+      expect(caption.textContent).toBe(
+        `${ariaLabel}. Checking these checkboxes will update the chart.`
+      );
+    });
+
+    it('does not duplicate the fieldset when the mutation observer fires again with no DOM changes', () => {
+      const { getByTestId } = render(
+        <CarbonChart
+          testId={testId}
+          dataSet={dataSet}
+          options={chartOptions}
+          type={CarbonChartType.bar}
+        />
+      );
+      const wrapper = getByTestId(testId);
+
+      const before = wrapper.querySelectorAll('.cds--cc--legend-fieldset');
+      expect(before).toHaveLength(1);
+
+      act(() => {
+        mutationObserverCallback?.();
+        mutationObserverCallback?.();
+      });
+
+      const after = wrapper.querySelectorAll('.cds--cc--legend-fieldset');
+      expect(after).toHaveLength(1);
+      expect(after[0]).toBe(before[0]);
+    });
+
+    it('replaces Carbon\'s generic "Data groups" aria-label with semantic list roles on the legend and its items', () => {
+      const { getByTestId } = render(
+        <CarbonChart
+          testId={testId}
+          dataSet={dataSet}
+          options={chartOptions}
+          type={CarbonChartType.bar}
+        />
+      );
+      const wrapper = getByTestId(testId);
+
+      const legend = wrapper.querySelector('.cds--cc--legend');
+      expect(legend).not.toBeNull();
+      expect(legend.getAttribute('aria-label')).toBeNull();
+      expect(legend.getAttribute('role')).toBe('list');
+
+      const items = legend.querySelectorAll('.legend-item');
+      expect(items.length).toBeGreaterThan(0);
+      items.forEach(item => {
+        expect(item.getAttribute('role')).toBe('listitem');
+      });
+    });
+
+    it('uses translated legend instructions from I18nContext', () => {
+      const translatedInstructions =
+        'Marquer ces cases mettra à jour le graphique.';
+      const i18nValue = {
+        ...defaultI18n,
+        charts: {
+          ...defaultI18n.charts,
+          toolbar: { legendInstructions: translatedInstructions },
+        },
+      };
+
+      const { getByTestId } = render(
+        <I18nContext.Provider value={i18nValue}>
+          <CarbonChart
+            testId={testId}
+            dataSet={dataSet}
+            options={chartOptions}
+            type={CarbonChartType.bar}
+          />
+        </I18nContext.Provider>
+      );
+      const wrapper = getByTestId(testId);
+
+      const caption = wrapper.querySelector(
+        '.cds--cc--legend-fieldset > legend'
+      );
+      expect(caption.textContent).toBe(
+        `${chartOptions.title}. ${translatedInstructions}`
+      );
+    });
+  });
 });