feat: add test for container, remove trading container from app

apps/trading/components/chart-container/chart-container.spec.tsx

@@ -1,3 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import { ChartContainer } from './chart-container';
+import { useCandlesChartSettingsStore } from './use-candles-chart-settings';
+
+jest.mock('@vegaprotocol/candles-chart', () => ({
+  CandlesChartContainer: ({ marketId }: { marketId: string }) => (
+    <div data-testid="pennant">{marketId}</div>
+  ),
+}));
+
+jest.mock('@vegaprotocol/trading-view', () => ({
+  TradingViewContainer: ({ marketId }: { marketId: string }) => (
+    <div data-testid="tradingview">{marketId}</div>
+  ),
+}));
+
 describe('ChartContainer', () => {
-  it.todo('switches chart type');
+  it('shows tradingview chart', () => {
+    useCandlesChartSettingsStore.setState({
+      chartlib: 'tradingview',
+    });
+
+    const marketId = 'market-id';
+
+    render(<ChartContainer marketId={marketId} />);
+
+    expect(screen.getByTestId('tradingview')).toHaveTextContent(marketId);
+  });
+
+  it('shows pennant chart', () => {
+    useCandlesChartSettingsStore.setState({
+      chartlib: 'pennant',
+    });
+
+    const marketId = 'market-id';
+
+    render(<ChartContainer marketId={marketId} />);
+
+    expect(screen.getByTestId('pennant')).toHaveTextContent(marketId);
+  });
 });

apps/trading/components/chart-container/chart-container.tsx

@@ -3,7 +3,7 @@ import {
   useCandlesChartSettings,
   STUDY_SIZE,
 } from './use-candles-chart-settings';
-import { TradingViewContainer } from '../../components/trading-view-container';
+import { TradingViewContainer } from '@vegaprotocol/trading-view';
 
 /**
  * Renders either the pennant chart or the tradingview chart

apps/trading/components/trading-view-container/index.ts

@@ -1 +0,0 @@
-export { TradingViewContainer } from './trading-view-container';

apps/trading/components/trading-view-container/trading-view-container.tsx

@@ -1,5 +0,0 @@
-import { TradingView } from '@vegaprotocol/trading-view';
-
-export const TradingViewContainer = ({ marketId }: { marketId: string }) => {
-  return <TradingView marketId={marketId} />;
-};

libs/trading-view/src/index.ts

@@ -1 +1 @@
-export * from './lib/trading-view';
+export { TradingViewContainer } from './lib/trading-view';

libs/trading-view/src/lib/trading-view.tsx

@@ -44,15 +44,15 @@ export const useScript = (url: string) => {
   return loaded;
 };
 
-export const TradingView = ({ marketId }: { marketId: string }) => {
+export const TradingViewContainer = ({ marketId }: { marketId: string }) => {
   const loaded = useScript(LIBRARY_PATH);
 
   if (!loaded) return null;
 
-  return <TradingViewChart marketId={marketId} />;
+  return <TradingView marketId={marketId} />;
 };
 
-export const TradingViewChart = ({ marketId }: { marketId: string }) => {
+export const TradingView = ({ marketId }: { marketId: string }) => {
   const { theme } = useThemeSwitcher();
   const chartContainerRef =
     useRef<HTMLDivElement>() as React.MutableRefObject<HTMLInputElement>;