feat: add Modal Snapshot test

[Chrisdbeloved1]

Checklist:

• I have read freeCodeCamp's contribution guidelines.
• My pull request has a descriptive title (not a vague title like Update index.md)

Solving #309

Created a Snapshot testing for the modal component.

Co-authored-by: Ayomide Onifade [email protected]
Co-authored-by: Quawiyyah Abdulhameed [email protected]
Co-authored-by: Hamzat Oluwabori [email protected]

[lloydchang]

Please contact @GuillermoFloresV if you have further questions about this. Thanks!

[lloydchang]

From https://codedayorg.slack.com/archives/C05ENB1VAKT/p1691946767049949

@Chrisdbeloved1, @Code-Victor, @Quawiyyah, @Ayomide6441
I believe you will need to fix the failing test by updating the Jest snapshot files to match.
Otherwise, the pull request reviewers cannot merge your pull request.
#399
Classroom ci / Build and test (16.14.2) (pull_request) Failing after 49s
https://github.com/freeCodeCamp/classroom/actions/runs/5842433790/job/15843553089?pr=399
Attached file:
ⓧ Run tests 4s

Details

Run npm run test
  npm run test
  shell: /usr/bin/bash -e {0}

@freecodecamp/[email protected] test

jest .

FAIL tests/components/modal.test.jsx

● Modal Component › renders header correctly
expect(received).toMatchSnapshot()

Snapshot name: `Modal Component renders header correctly 1`

- Snapshot  -  0
+ Received  + 10

@@ -1,6 +1,16 @@
  <div>
+   <div>
+     <div
+       className="Toastify"
+     />
+   </div>
+   <div>
+     <div
+       className="Toastify"
+     />
+   </div>
    <div
      className="flex justify-center"
    >
      <div
        className="flex cursor-pointer justify-center p-4 m-6 rounded-md hover:bg-fcc-primary-yellow shadedow-lg border-solid border-color: inherit; border-2 pl-4 pr-4 bg-[#feac32] text-black"

  37 |   it('renders header correctly', () => {
  38 |     const tree = renderer.create(<Modal userId= {sampleUser} certificationNames= {sampleData} />).toJSON();
> 39 |     expect(tree).toMatchSnapshot();
     |                  ^
  40 |   });
  41 |   it('renders whole form after header clicked', ()=> {
  42 |     const testRenderer = renderer.create(<Modal userId= {sampleUser} certificationNames= {sampleData} />);

  at Object.toMatchSnapshot (__tests__/components/modal.test.jsx:39:18)

● Modal Component › renders whole form after header clicked
expect(received).toMatchSnapshot()

Snapshot name: `Modal Component renders whole form after header clicked 1`

- Snapshot  -  0
+ Received  + 10

@@ -1,6 +1,16 @@
  <div>
+   <div>
+     <div
+       className="Toastify"
+     />
+   </div>
+   <div>
+     <div
+       className="Toastify"
+     />
+   </div>
    <div
      className="flex justify-center"
    >
      <div
        className="flex cursor-pointer justify-center p-4 m-6 rounded-md hover:bg-fcc-primary-yellow shadedow-lg border-solid border-color: inherit; border-2 pl-4 pr-4 bg-[#feac32] text-black"

  47 |     });
  48 |     const tree = testRenderer.toJSON();
> 49 |     expect(tree).toMatchSnapshot();
     |                  ^
  50 |   });
  51 | });
  52 |

  at Object.toMatchSnapshot (__tests__/components/modal.test.jsx:49:18)

› 2 snapshots failed.

PASS tests/components/updateUserForm.test.jsx

PASS tests/components/adminTable.test.jsx

PASS tests/components/authButton.test.jsx

PASS tests/components/dashtable_v2.test.jsx

PASS tests/components/navbar.test.jsx
Snapshot Summary

› 2 snapshots failed from 1 test suite. Inspect your code changes or run npm test -- -u to update them.
Test Suites: 1 failed, 5 passed, 6 total

Tests:       2 failed, 8 passed, 10 total

Snapshots:   2 failed, 6 passed, 8 total

Time:        2.985 s

Ran all test suites matching /./i.

Error: Process completed with exit code 1.

[Code-Victor]

The error occured because UI was updated recently to support toast notifications. we are about to update the snapshot too.

[utsab]

Thank you for creating this test. I appreciate that you tested the case where the user clicks on the header. I didn't know you could simulate the click through a snapshot test!