UI - draft component test cases fixed

Author: Bangarraju-Microsoft

src/frontend/src/pages/draft/Draft.test.tsx

@@ -1,37 +1,83 @@
-import React from 'react'
-import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import { MemoryRouter } from 'react-router-dom'
+import { render, screen, fireEvent, act, waitFor } from '@testing-library/react'
+import { BrowserRouter } from 'react-router-dom'
 import { AppStateContext } from '../../state/AppProvider'
 import Draft from './Draft'
+import { Section } from '../../api/models'
 import { saveAs } from 'file-saver'
+import { defaultMockState } from '../../test/test.utils';
+import { MemoryRouter } from 'react-router-dom';
+
+import { Document, Packer, Paragraph, TextRun } from 'docx'
 
-// Mock the SectionCard component
-jest.mock('../../components/DraftCards/SectionCard', () => () => (
-  <div data-testid="mock-section-card">Mock Section Card</div>
-))
 
+// Mocks for third-party components and modules
 jest.mock('file-saver', () => ({
   saveAs: jest.fn(),
+}))
+
+jest.mock('../../components/DraftCards/TitleCard', () => ({ children }: { children: React.ReactNode }) => (
+  <div data-testid="title-card">
+    Title Card
+    {children}
+  </div>
+))
+
+jest.mock('../../components/DraftCards/SectionCard', () => ({
+  __esModule: true,
+  default: ({ sectionIdx }: { sectionIdx: number }) => (
+    <div data-testid={`section-card-${sectionIdx}`}>Section {sectionIdx}</div>
+  ),
+}))
+
+// Mock CommandBarButton from Fluent UI
+jest.mock('@fluentui/react', () => ({
+  ...jest.requireActual('@fluentui/react'),
+  CommandBarButton: ({ onClick, disabled, text, ariaLabel, iconProps }: any) => (
+    <button
+      aria-label={ariaLabel}
+      onClick={onClick}
+      disabled={disabled}
+      data-testid="command-bar-button">
+      {iconProps?.iconName && <span>{iconProps.iconName}</span>}
+      {text}
+    </button>
+  ),
 }));
 
-// jest.mock('../../components/DraftCards/TitleCard', () => () => <div data-testid="mock-title-card">Mock Title Card</div>)
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn(),
+}))
+
+jest.mock('docx', () => ({
+  Document: jest.fn().mockImplementation((options) => {
+    return {
+      sections: options.sections || [],
+    }
+  }),
+  Packer: {
+    toBlob: jest.fn().mockResolvedValue(new Blob()), // Mock the toBlob method
+  },
+  Paragraph: jest.fn(),
+  TextRun: jest.fn(),
+}))
+
 const mockAppState = {
-  state: {
-    draftedDocument: {
-      sections: [
-        { title: 'Section 1', content: 'Content of section 1.' },
-        { title: 'Section 2', content: 'Content of section 2.' }
-      ]
-    },
-    draftedDocumentTitle: 'Sample Draft'
+  draftedDocument: {
+    sections: [
+      { title: 'Section 1', content: 'Content of section 1.' },
+      { title: 'Section 2', content: 'Content of section 2.' }
+    ]
   },
-  dispatch: jest.fn()
+  isLoadedSections: [],
+  draftedDocumentTitle: 'Sample Draft'
 }
 
+
 const renderComponent = (appState: any) => {
   return render(
     <MemoryRouter>
-      <AppStateContext.Provider value={appState}>
+      <AppStateContext.Provider value={{ state: appState, dispatch: jest.fn() }}>
         <Draft />
       </AppStateContext.Provider>
     </MemoryRouter>
@@ -41,139 +87,183 @@ const renderComponent = (appState: any) => {
 describe('Draft Component', () => {
   beforeEach(() => {
     jest.clearAllMocks()
+
   })
 
-  // it('renders title card and section cards', () => {
-  //   renderComponent(mockAppState)
 
-  //   expect(screen.getByTestId('mock-title-card')).toBeInTheDocument()
-  //   expect(screen.getByText('Section 1')).toBeInTheDocument()
-  //   expect(screen.getByText('Content of section 1.')).toBeInTheDocument()
-  //   expect(screen.getByText('Section 2')).toBeInTheDocument()
-  //   expect(screen.getByText('Content of section 2.')).toBeInTheDocument()
-  // })
+  test('renders TitleCard and SectionCards correctly', async () => {
+    renderComponent(mockAppState)
 
-  it('redirects to home page if draftedDocument is empty', () => {
-    const appStateWithEmptyDraft = {
-      ...mockAppState,
-      state: {
-        ...mockAppState.state,
-        draftedDocument: null
-      }
-    }
+    expect(screen.getByTestId('title-card')).toBeInTheDocument()
 
-    renderComponent(appStateWithEmptyDraft)
-    expect(window.location.pathname).toBe('/')
-  })
+    await waitFor(() => {
+      expect(screen.getByTestId('section-card-0')).toBeInTheDocument()
+      expect(screen.getByTestId('section-card-1')).toBeInTheDocument()
+    })
 
-  it('sanitizes title correctly', () => {
-    const sanitizedTitle = mockAppState.state.draftedDocumentTitle.replace(/[^a-zA-Z0-9]/g, '')
-    expect(sanitizedTitle).toBe('SampleDraft')
-  })
-  
-  it('exports document when export button is clicked', async () => {
-    const { saveAs } = require('file-saver');
 
-    renderComponent(mockAppState)
+  })
 
-    fireEvent.click(screen.getByRole('button', { name: /Export Document/i }))
+  test('disables the export button when sections are not loaded', async () => {
+    const mockStateWithIncompleteLoad = {
+      ...mockAppState,
+      isLoadedSections: [{ title: 'Section 1', content: 'Content of section 1' }], // One section not loaded
+    }
+    renderComponent(mockStateWithIncompleteLoad)
 
     await waitFor(() => {
-      saveAs(new Blob(['test content']), 'DraftTemplate-SampleDraft.docx');
-      expect(saveAs).toHaveBeenCalledWith(expect.any(Blob), 'DraftTemplate-SampleDraft.docx')
+      const exportButton = screen.getByTestId('command-bar-button')
+      expect(exportButton).toBeDisabled()
     })
+
   })
-  
 
-  test('renders empty string when draftedDocumentTitle is an empty string', () => {
-    const appStateWithEmptyTitle = {
+  test('enabled the export button when sections are loaded', async () => {
+    const mockStateWithIncompleteLoad = {
       ...mockAppState,
-      state: {
-        ...mockAppState.state,
-        draftedDocumentTitle: ''
-      }
+      isLoadedSections: [{ title: 'Section 1', content: 'Content of section 1' },
+      { title: 'Section 2', content: 'Content of section 2.' }
+      ],
     }
+    renderComponent(mockStateWithIncompleteLoad)
+    await waitFor(() => {
+      const exportButton = screen.getByTestId('command-bar-button')
+      expect(exportButton).toBeEnabled()
+    })
 
-    renderComponent(appStateWithEmptyTitle)
-
-    expect(screen.getByDisplayValue('')).toBeInTheDocument()
   })
 
-  test('renders empty string when draftedDocumentTitle is null', () => {
-    const appStateWithNullTitle = {
+  test('triggers exportToWord function when export button is clicked', async () => {
+    const mockStateWithIncompleteLoad = {
       ...mockAppState,
-      state: {
-        ...mockAppState.state,
-        draftedDocumentTitle: null
-      }
+      isLoadedSections: [{ title: 'Section 1', content: 'Content of section 1' },
+      { title: 'Section 2', content: 'Content of section 2.' }
+      ], 
     }
+    renderComponent(mockStateWithIncompleteLoad)
 
-    renderComponent(appStateWithNullTitle)
+    await waitFor(async () => {
 
-    expect(screen.getByDisplayValue('')).toBeInTheDocument()
-  })
+      const exportButton = screen.getByText(/Export Document/i)
 
-  test('returns draftedDocumentTitle when it is a valid string', () => {
-    renderComponent(mockAppState)
+      await act(async () => {
+        fireEvent.click(exportButton)
+      })
 
-    expect(screen.getByDisplayValue('Sample Draft')).toBeInTheDocument()
+      expect(saveAs).toHaveBeenCalled()
+    });
   })
 
-  test('does not crash when draftedDocument is null', () => {
-    const appStateWithNullDocument = {
+  test('does not render any SectionCard when sections array is empty', async () => {
+    const mockStateWithIncompleteLoad = {
       ...mockAppState,
-      state: {
-        ...mockAppState.state,
-        draftedDocument: null
+      draftedDocument: {
+        sections: []
       }
     }
+    renderComponent(mockStateWithIncompleteLoad)
+
+    await waitFor(() => {
+      const sectionCards = screen.queryAllByTestId(/^section-card-/)
+      expect(sectionCards).toHaveLength(0)
+    });
+  })
 
-    renderComponent(appStateWithNullDocument)
+  test('does not render any SectionCard when sections array is null', async () => {
+    const mockStateWithIncompleteLoad = {
+      ...mockAppState,
+      draftedDocument: {
+        sections: null
+      }
+    }
+    renderComponent(mockStateWithIncompleteLoad)
 
-    expect(screen.queryByText('Section 1')).not.toBeInTheDocument()
-    expect(screen.queryByText('Section 2')).not.toBeInTheDocument()
+    await waitFor(() => {
+      const sectionCards = screen.queryAllByTestId(/^section-card-/)
+      expect(sectionCards).toHaveLength(0)
+    });
   })
 
-  test('does not crash when appStateContext is undefined', () => {
-    const appStateWithUndefinedContext = {
-      state: {}
+  test('redirects to home page when draftedDocument is empty', async () => {
+    const mockStateEmptyDoc = {
+      ...mockAppState,
+      draftedDocument: null,
+      sections: [],
+      isLoadedSections: [],
+      draftedDocumentTitle: null,
     }
 
-    renderComponent(appStateWithUndefinedContext)
+    const mockNavigate = jest.fn()
+    jest.spyOn(require('react-router-dom'), 'useNavigate').mockReturnValue(mockNavigate)
+
+    renderComponent(mockStateEmptyDoc)
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/')
+    })
 
-    expect(screen.getByDisplayValue('')).toBeInTheDocument()
   })
 
-  test('does not render any SectionCard when sections array is empty', () => {
-    const appStateWithEmptySections = {
+  test('does not call saveAs if export button is disabled', async () => {
+    const mockStateWithSectionsNotLoaded = {
       ...mockAppState,
-      state: {
-        ...mockAppState.state,
-        draftedDocument: {
-          sections: []
-        }
-      }
+      isLoadedSections: [], // Sections are not loaded
     }
 
-    renderComponent(appStateWithEmptySections)
+    renderComponent(mockStateWithSectionsNotLoaded)
+
+    const exportButton = screen.getByText(/Export Document/i)
 
-    const sectionCards = screen.queryAllByTestId('mock-section-card')
-    expect(sectionCards.length).toBe(0)
+    // Ensure the button is disabled and clicking it won't trigger export
+    expect(exportButton).toBeDisabled()
+
+    await act(async () => {
+      fireEvent.click(exportButton)
+    })
+
+    expect(saveAs).not.toHaveBeenCalled()
   })
 
-  test('renders SectionCard for each section in draftedDocument', async() => {
-    renderComponent(mockAppState)
+  test('calls saveAs when exportToWord is triggered', async () => {
 
-    await waitFor(() => {
-      const sectionCards = screen.getAllByTestId('mock-section-card');
-      expect(sectionCards.length).toBe(mockAppState.state.draftedDocument.sections.length);
-  });
+    const mockStateWithIncompleteLoad = {
+      ...mockAppState,
+      isLoadedSections: [{ title: 'Section 1', content: 'Content of section 1' },
+      { title: 'Section 2', content: 'Content of section 2.' }
+      ], // One section not loaded
+    }
+    renderComponent(mockStateWithIncompleteLoad)
+
+    await waitFor(async () => {
+
+      const exportButton = screen.getByText(/Export Document/i)
+
+      fireEvent.click(exportButton)
+      //expect(Packer.toBlob).toHaveBeenCalledTimes(1)
+      await waitFor(() => {
+        expect(saveAs).toHaveBeenCalled()
+      })
+    });
   })
 
-  test('getTitle function returns correct title when draftedDocumentTitle is valid', () => {
-    renderComponent(mockAppState)
-    expect(screen.getByDisplayValue('Sample Draft')).toBeInTheDocument()
+
+  test('generate document when draftedDocumentTitle is null', async () => {
+    const mockStateWithIncompleteLoad = {
+      ...mockAppState,
+      isLoadedSections: [{ title: 'Section 1', content: 'Content of section 1' },
+      { title: 'Section 2', content: 'Content of section 2.' }
+      ],
+      draftedDocumentTitle: null
+    }
+    renderComponent(mockStateWithIncompleteLoad)
+    await waitFor(async () => {
+      const exportButton = screen.getByText(/Export Document/i)
+      fireEvent.click(exportButton)
+
+      await waitFor(() => {
+        expect(Document).toHaveBeenCalledTimes(1)
+      })
+    });
   })
 
- 
 })