Pdf export Functionality

[vickyc2266]

Description

Changes attempts to create the PDF export function with this pull request. Updated package.json to include pdfkit dependencies along with other dependency version updates. Updated src/components/App.js to to include downloadPDF that follows the downloadExcel format for collecting inputs but outputs differently with a summary table and a match table into one document. Also updated src/components/ResultsOptions to include an ExportPDF Button. Updated the directory of setUpTests from utils to directly under src for the sake of testing. Also included testing files ResultsOptions.test and texPdfExport.

Fixes # (issue)

Resolves #53

Type of change

Please delete options that are not relevant.

• New feature (non-breaking change which adds functionality)

Testing

To run tests, run in command line:
-npm install
-npm test
(with the assumption that all dependencies are locally updated)

ResultsOptions.test (Tests the UI interaction between user and component)
(Created a group of mock props that's supposed to represent various methods and data that ResultsOptions depends on)

• Test 'renders PDF export button' tests to ensure that the PDF Export button is present and renders correctly.
• Test 'calls downloadPDF and tracks event when clicking export button' tests the ReactGA.event is called and downloadPDF function is invoked.
• Test 'shows error toast when PDF export fails' tests that an error message is outputted to gracefully handle errors.

testPdfExport.test (Tests the outputted format of document)
(beforeEach sets up new mockPDF instances for each test cases and afterEach clears all mock calls on data to prevent cross-test interference)

• Test 'should generate a PDF with match data' tests that the pdf is generated with correct structure and data
• Test 'handles PDF generation errors' tests the handling of errors during PDF generating

Test Configuration

This test configuration uses Jest as the primary testing framework with React Testing Library to simulate user interactions. Mocking tools like jspdf allow us to test PDF generation functionality without creating actual files, ensuring the methods like autoTable and text are called correctly. The environment is isolated through beforeEach and afterEach hooks, resetting state between tests. Additional dependencies like react-ga4 are mocked to validate analytics tracking. The tests achieve comprehensive coverage for both normal operation and edge cases, ensuring the ResultsOptions component and PDF generation logic behave as expected.

• Library version:
  -jspsdf@2.5.2
  -jspdf-autotable@3.8.4
  -react-ga4@2.1.0
  -react@18.3.1

• OS:macOS Sequoia 15.0.1

• Toolchain:
  -Node.js 22.12.0
  -npm: 10.9.0
  -Webpack: 5.1.4
  -TypeScript: 5.5.4

Checklist

• [ x] My code follows the style guidelines of this project
• [ x] I have performed a self-review of my own code
• [ x] I have commented my code, particularly in hard-to-understand areas
• [ x] I have made corresponding changes to the documentation
• [ x] My changes generate no new warnings
• [ x] I have added tests that prove my fix is effective or that my feature works
• [ x] New and existing unit tests pass locally with my changes
• [ x] Any dependent changes have been merged and published in downstream modules
• [ x] I have checked my code and corrected any misspellings

[netlify]

👷 Deploy request for harmony-staging pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	bde9aa0

[ronnyTodgers]

You need to specifically import 'jspdf-autotable' to enable the autotable.

But more importantly this proceedure totally ignores layout on the final PDF - so if there are long question strings you get a table with only the first column visible and the remaining columns off the page.

Works very well for short questions like the CES_D, not at all for long questions like the SCARED - can you make the layout more adaptable?

[narendrakumar9867]

@vickyc2266 Can you tell me where you're facing the issue and why you have kept it open until now?