@oanda/labs-widget-common 1.0.196 → 1.0.198

package/test/chart/BaseChart.test.tsx

@@ -0,0 +1,121 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { act, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { BaseChart } from '../../src/chart/BaseChart';
+import type { BaseChartRef } from '../../src/chart/types';
+
+jest.mock('echarts-for-react/lib/core', () => {
+  const ReactMock = require('react');
+  const MockEChartsCore = ReactMock.forwardRef(
+    (props: any, ref: React.Ref<any>) => (
+      <div
+        ref={ref as any}
+        data-loading={props.showLoading}
+        data-testid="charts-container"
+        data-theme={props.theme}
+        style={props.style}
+      />
+    )
+  );
+  MockEChartsCore.displayName = 'MockEChartsCore';
+  return MockEChartsCore;
+});
+
+describe('BaseChart component', () => {
+  const defaultProps = {
+    isDark: false,
+    chartHeight: 400,
+    option: {
+      xAxis: {
+        type: 'category',
+        data: ['Mon', 'Tue', 'Wed'],
+      },
+      yAxis: {
+        type: 'value',
+      },
+      series: [
+        {
+          data: [120, 200, 150],
+          type: 'line',
+        },
+      ],
+    },
+  };
+
+  let resolveFontsReady: (value?: unknown) => void;
+
+  beforeEach(() => {
+    Object.defineProperty(document, 'fonts', {
+      value: {
+        ready: new Promise((resolve) => {
+          resolveFontsReady = resolve;
+        }),
+      },
+      writable: true,
+    });
+  });
+
+  it('should show loading state initially', () => {
+    render(<BaseChart {...defaultProps} />);
+    const chart = screen.getByTestId('charts-container');
+    expect(chart).toHaveAttribute('data-loading', 'true');
+  });
+
+  it('should render chart after fonts are ready', async () => {
+    render(<BaseChart {...defaultProps} />);
+
+    const chart = screen.getByTestId('charts-container');
+    expect(chart).toHaveAttribute('data-loading', 'true');
+
+    await act(async () => {
+      resolveFontsReady();
+      await document.fonts.ready;
+    });
+
+    expect(chart).toHaveAttribute('data-loading', 'false');
+  });
+
+  it('should apply dark theme when isDark is true', async () => {
+    render(<BaseChart {...defaultProps} isDark={true} />);
+
+    await act(async () => {
+      resolveFontsReady();
+      await document.fonts.ready;
+    });
+
+    const chart = screen.getByTestId('charts-container');
+    expect(chart).toHaveAttribute('data-theme', 'dark_theme');
+  });
+
+  it('should apply light theme when isDark is false', async () => {
+    render(<BaseChart {...defaultProps} isDark={false} />);
+
+    await act(async () => {
+      resolveFontsReady();
+      await document.fonts.ready;
+    });
+
+    const chart = screen.getByTestId('charts-container');
+    expect(chart).toHaveAttribute('data-theme', 'light_theme');
+  });
+
+  it('should set correct chart height', async () => {
+    const height = 500;
+    render(<BaseChart {...defaultProps} chartHeight={height} />);
+
+    await act(async () => {
+      resolveFontsReady();
+      await document.fonts.ready;
+    });
+
+    const chart = screen.getByTestId('charts-container');
+    expect(chart).toHaveStyle({ height: `${height}px` });
+  });
+
+  it('should forward ref to BaseChartRef', () => {
+    const ref = React.createRef<BaseChartRef>();
+    render(<BaseChart {...defaultProps} ref={ref} />);
+    expect(ref.current).toBeTruthy();
+  });
+});

package/test/setup.ts

@@ -0,0 +1,16 @@
+// Mock document.fonts.ready
+if (!document.fonts) {
+  Object.defineProperty(document, 'fonts', {
+    value: {
+      ready: Promise.resolve(),
+      check: () => true,
+      load: () => Promise.resolve([]),
+    },
+    configurable: true,
+  });
+} else if (!('ready' in document.fonts)) {
+  Object.defineProperty(document.fonts, 'ready', {
+    value: Promise.resolve(),
+    configurable: true,
+  });
+}