@cdx-di-template/webtemplate-investment-widget 0.0.1 → 0.0.2

package/dist/src/app/__name__.test.tsx.template

@@ -0,0 +1,169 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { ThemeProvider } from '@mui/material';
+import { createTheme } from '@mui/material/styles';
+import <%= upperCamel(name) %> from './<%= upperCamel(name) %>';
+import { environment } from '../environments/environment';
+import investment from '../__mocks__/investmentMock.json';
+import { PlatformSDK } from '@cdx-extensions/di-sdk';
+
+jest.mock('@cdx-extensions/di-sdk', () => {
+  const mockGet = jest.fn();
+  const mockUseUserContext = jest.fn();
+  const mockUseBranding = jest.fn();
+  const instance = {
+    getHttpClient: () => ({
+      get: mockGet,
+    }),
+    useUserContext: mockUseUserContext,
+    useBranding: mockUseBranding,
+  };
+  return {
+    PlatformSDK: {
+      getInstance: jest.fn(() => instance),
+    },
+  };
+});
+
+const getSdkInstance = () => (PlatformSDK.getInstance as jest.Mock)();
+
+const getMockGet = () => getSdkInstance().getHttpClient().get as jest.Mock;
+
+const expectedBaseUrl =
+  environment.apiUrl || 'https://investmentmock.tiiny.site/investmentMock.json';
+
+function renderWithHostTheme(ui: React.ReactElement) {
+  return render(
+    <ThemeProvider theme={createTheme()}>{ui}</ThemeProvider>,
+  );
+}
+
+describe('<<%= upperCamel(name) %> />', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    getMockGet().mockResolvedValue({ data: investment });
+    getSdkInstance().useUserContext.mockReturnValue({
+      data: { fullName: 'Test User', userName: 'testuser' },
+    });
+    getSdkInstance().useBranding.mockReturnValue({ theme: {} });
+  });
+
+  it('should render portfolio allocation and overview', () => {
+    renderWithHostTheme(<<%= upperCamel(name) %> />);
+
+    expect(screen.getByText('Portfolio Allocation')).toBeInTheDocument();
+    expect(screen.getByText('Portfolio Overview')).toBeInTheDocument();
+  });
+
+  it('should render total value from mock portfolio data', () => {
+    renderWithHostTheme(<<%= upperCamel(name) %> />);
+
+    expect(screen.getByText(/\$175,430\.50/)).toBeInTheDocument();
+  });
+
+  it('should render Refresh button', () => {
+    renderWithHostTheme(<<%= upperCamel(name) %> />);
+
+    expect(screen.getByRole('button', { name: /Refresh/i })).toBeInTheDocument();
+  });
+
+  it('should render legend with holding symbols from mock data', () => {
+    renderWithHostTheme(<<%= upperCamel(name) %> />);
+
+    expect(screen.getByText('AAPL')).toBeInTheDocument();
+    expect(screen.getByText('MSFT')).toBeInTheDocument();
+  });
+
+  it('should render Name label and fullName from user context under Portfolio Overview', () => {
+    renderWithHostTheme(<<%= upperCamel(name) %> />);
+
+    expect(screen.getByText('Portfolio Overview')).toBeInTheDocument();
+    expect(screen.getByText(/Name\s*:/)).toBeInTheDocument();
+    expect(screen.getByText(/Test User/)).toBeInTheDocument();
+  });
+
+  it('should show N/A for Name when user context is undefined', () => {
+    getSdkInstance().useUserContext.mockReturnValue({ data: undefined });
+    renderWithHostTheme(<<%= upperCamel(name) %> />);
+
+    expect(screen.getByText(/Name\s*:/)).toBeInTheDocument();
+    expect(screen.getByText(/N\/A/)).toBeInTheDocument();
+  });
+
+  it('should call get with base URL when Refresh button is clicked', async () => {
+    renderWithHostTheme(<<%= upperCamel(name) %> />);
+
+    fireEvent.click(screen.getByRole('button', { name: /Refresh/i }));
+
+    await waitFor(() => {
+      expect(getMockGet()).toHaveBeenCalledWith(expectedBaseUrl);
+    });
+  });
+
+  it('should update portfolio data when Refresh succeeds', async () => {
+    const newTotal = 200000;
+    getMockGet().mockResolvedValue({
+      data: { ...investment, totalValue: newTotal },
+    });
+    renderWithHostTheme(<<%= upperCamel(name) %> />);
+
+    fireEvent.click(screen.getByRole('button', { name: /Refresh/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/\$200,000\.00/)).toBeInTheDocument();
+    });
+  });
+
+  it('should call alert and keep initial data when Refresh fails', async () => {
+    const alertSpy = jest.spyOn(window, 'alert').mockImplementation(() => {});
+    getMockGet().mockRejectedValue(new Error('Network error'));
+    renderWithHostTheme(<<%= upperCamel(name) %> />);
+
+    fireEvent.click(screen.getByRole('button', { name: /Refresh/i }));
+
+    await waitFor(() => {
+      expect(alertSpy).toHaveBeenCalledWith(new Error('Network error'));
+    });
+
+    expect(screen.getByText(/\$175,430\.50/)).toBeInTheDocument();
+    alertSpy.mockRestore();
+  });
+
+  it('should render donut center Total label and formatted total value', () => {
+    renderWithHostTheme(<<%= upperCamel(name) %> />);
+
+    expect(screen.getByText('Total')).toBeInTheDocument();
+    expect(screen.getByText(/\$175,430\.50/)).toBeInTheDocument();
+  });
+
+  it('should render legend allocation percentages from mock data', () => {
+    renderWithHostTheme(<<%= upperCamel(name) %> />);
+
+    expect(screen.getByText('6.3%')).toBeInTheDocument();
+    expect(screen.getByText('35.5%')).toBeInTheDocument();
+  });
+
+  it('should render all holding symbols from mock data in legend', () => {
+    renderWithHostTheme(<<%= upperCamel(name) %> />);
+
+    const symbols = ['AAPL', 'MSFT', 'GOOGL', 'AMZN', 'TSLA', 'SPY', 'VTI', 'BND'];
+    symbols.forEach(symbol => {
+      expect(screen.getByText(symbol)).toBeInTheDocument();
+    });
+  });
+
+  it('should call useUserContext and useBranding on mount (embedded)', () => {
+    renderWithHostTheme(<<%= upperCamel(name) %> />);
+
+    expect(getSdkInstance().useUserContext).toHaveBeenCalled();
+    expect(getSdkInstance().useBranding).toHaveBeenCalledWith('branding-1');
+  });
+
+  it('should render with standalone prop and call useBranding with branding-1', () => {
+    render(<<%= upperCamel(name) %> standalone />);
+
+    expect(screen.getByText('Portfolio Allocation')).toBeInTheDocument();
+    expect(getSdkInstance().useBranding).toHaveBeenCalledWith('branding-1');
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-di-template/webtemplate-investment-widget",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "license": "MIT",
   "description": "CDX web widget generator template files (investment-widget variant)",
   "publishConfig": {