Added tests for the Templates flow (#97)

TemplatesContext is covered for registering and cleaning up the Dynamo callback, updating context from received template data, and normalizing template fields (date to DateModified, default Author/Description). PageRecent is covered for rendering templates from context, switching the Templates section to list view, and opening a template row through the shared openFile flow

Author: Chloepeg

tests/unit/Recent/PageRecent.test.tsx

@@ -1,6 +1,8 @@
 import { screen, fireEvent, act } from '@testing-library/react';
 import { renderWithProviders } from '../testUtils';
 import { RecentPage } from '../../../src/components/Recent/PageRecent';
+import { useTemplates } from '../../../src/components/TemplatesContext';
+import { openFile } from '../../../src/functions/utility';
 
 jest.mock('../../../src/components/Recent/GraphGridItem', () => ({
   GraphGridItem: (props: unknown) => {
@@ -12,8 +14,8 @@ jest.mock('../../../src/components/Recent/GraphGridItem', () => ({
 jest.mock('../../../src/components/Recent/GraphTable', () => ({
   GraphTable: (props: unknown) => {
     const { data, onRowClick } = props as {
-      data: Array<{ id: string; Caption: string }>;
-      onRowClick: (row: { original: { id: string; Caption: string } }) => void;
+      data: Array<{ id: string; Caption: string; ContextData: string }>;
+      onRowClick: (row: { original: { id: string; Caption: string; ContextData: string } }) => void;
     };
     return (
       <div data-testid="graph-table">
@@ -32,6 +34,10 @@ jest.mock('../../../src/functions/utility', () => ({
   saveHomePageSettings: jest.fn(),
 }));
 
+jest.mock('../../../src/components/TemplatesContext', () => ({
+  useTemplates: jest.fn(),
+}));
+
 const defaultProps = {
   setIsDisabled: jest.fn(),
   recentPageViewMode: 'grid' as const,
@@ -42,9 +48,24 @@ const mockGraphs = [
   { id: '2', Caption: 'Graph Two', ContextData: '/path/two.dyn', DateModified: '2024-01-02', Thumbnail: null, Description: '' },
 ];
 
+const mockTemplates = [
+  {
+    id: 'template-1',
+    Caption: 'Template One',
+    ContextData: '/path/template-one.dyn',
+    DateModified: '2024-02-01',
+    Thumbnail: '',
+    Author: '',
+    Description: '',
+  },
+];
+
+const mockUseTemplates = useTemplates as jest.MockedFunction<typeof useTemplates>;
+
 describe('RecentPage', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    mockUseTemplates.mockReturnValue([]);
   });
 
   it('renders "Recent" title', () => {
@@ -134,4 +155,33 @@ describe('RecentPage', () => {
     unmount();
     expect(window.receiveGraphDataFromDotNet).toBeUndefined();
   });
+
+  it('renders templates returned by TemplatesContext', () => {
+    mockUseTemplates.mockReturnValue(mockTemplates);
+    renderWithProviders(<RecentPage {...defaultProps} recentPageViewMode="grid" />);
+
+    expect(screen.getByText('Templates')).toBeInTheDocument();
+    expect(screen.getByText('Template One')).toBeInTheDocument();
+  });
+
+  it('switches templates to list view', () => {
+    mockUseTemplates.mockReturnValue(mockTemplates);
+    renderWithProviders(<RecentPage {...defaultProps} recentPageViewMode="grid" />);
+
+    fireEvent.click(screen.getByTestId('templates-view-toggle-list'));
+
+    expect(screen.getByTestId('graph-table')).toBeInTheDocument();
+    expect(screen.getByText('Template One')).toBeInTheDocument();
+  });
+
+  it('opens a template from the templates table', () => {
+    mockUseTemplates.mockReturnValue(mockTemplates);
+    renderWithProviders(<RecentPage {...defaultProps} recentPageViewMode="grid" />);
+
+    fireEvent.click(screen.getByTestId('templates-view-toggle-list'));
+    fireEvent.click(screen.getByText('Template One'));
+
+    expect(defaultProps.setIsDisabled).toHaveBeenCalledWith(true);
+    expect(openFile).toHaveBeenCalledWith('/path/template-one.dyn');
+  });
 });

tests/unit/TemplatesContext.test.tsx

@@ -1,5 +1,22 @@
-import { act, render } from '@testing-library/react';
-import { TemplatesProvider } from '../../src/components/TemplatesContext';
+import { act, render, screen } from '@testing-library/react';
+import { TemplatesProvider, useTemplates } from '../../src/components/TemplatesContext';
+
+const TemplatesConsumer = () => {
+  const templates = useTemplates();
+
+  return (
+    <div>
+      {templates.map((template) => (
+        <div key={template.id}>
+          <span>{template.Caption}</span>
+          <span>{`date:${template.DateModified}`}</span>
+          <span>{`author:${template.Author}`}</span>
+          <span>{`description:${template.Description}`}</span>
+        </div>
+      ))}
+    </div>
+  );
+};
 
 describe('TemplatesProvider', () => {
   beforeEach(() => {
@@ -15,7 +32,7 @@ describe('TemplatesProvider', () => {
   it('clears loading state when template data is received', () => {
     render(
       <TemplatesProvider>
-        <div />
+        <TemplatesConsumer />
       </TemplatesProvider>
     );
 
@@ -25,4 +42,78 @@ describe('TemplatesProvider', () => {
 
     expect(window.setShowStartPageChanged).toHaveBeenCalledWith(true);
   });
+
+  it('registers receiveTemplatesDataFromDotNet on mount', () => {
+    render(
+      <TemplatesProvider>
+        <TemplatesConsumer />
+      </TemplatesProvider>
+    );
+
+    expect(typeof window.receiveTemplatesDataFromDotNet).toBe('function');
+  });
+
+  it('updates templates from receiveTemplatesDataFromDotNet', () => {
+    render(
+      <TemplatesProvider>
+        <TemplatesConsumer />
+      </TemplatesProvider>
+    );
+
+    act(() => {
+      window.receiveTemplatesDataFromDotNet([
+        {
+          id: 'template-1',
+          Caption: 'Template One',
+          ContextData: '/path/template-one.dyn',
+          DateModified: '2024-02-01',
+          Thumbnail: '',
+          Author: 'Dynamo Team',
+          Description: 'Template description',
+        },
+      ]);
+    });
+
+    expect(screen.getByText('Template One')).toBeInTheDocument();
+    expect(screen.getByText('date:2024-02-01')).toBeInTheDocument();
+    expect(screen.getByText('author:Dynamo Team')).toBeInTheDocument();
+    expect(screen.getByText('description:Template description')).toBeInTheDocument();
+  });
+
+  it('normalizes date, Author, and Description fields from template input', () => {
+    render(
+      <TemplatesProvider>
+        <TemplatesConsumer />
+      </TemplatesProvider>
+    );
+
+    act(() => {
+      window.receiveTemplatesDataFromDotNet([
+        {
+          id: 'template-1',
+          Caption: 'Template One',
+          ContextData: '/path/template-one.dyn',
+          date: '2024-03-01',
+          Thumbnail: '',
+        },
+      ]);
+    });
+
+    expect(screen.getByText('Template One')).toBeInTheDocument();
+    expect(screen.getByText('date:2024-03-01')).toBeInTheDocument();
+    expect(screen.getByText('author:')).toBeInTheDocument();
+    expect(screen.getByText('description:')).toBeInTheDocument();
+  });
+
+  it('removes receiveTemplatesDataFromDotNet on unmount', () => {
+    const { unmount } = render(
+      <TemplatesProvider>
+        <TemplatesConsumer />
+      </TemplatesProvider>
+    );
+
+    unmount();
+
+    expect(window.receiveTemplatesDataFromDotNet).toBeUndefined();
+  });
 });