feat: add Modal Snapshot test

[Chrisdbeloved1]

Checklist:

• [x] I have read freeCodeCamp's contribution guidelines.
• [x] 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 onifadeayomide328@gmail.com Co-authored-by: Quawiyyah Abdulhameed abdulhameedqo@gmail.com Co-authored-by: Hamzat Oluwabori oluwaborihamzat@gmail.com

[lloydchang]

a new test was added, which is creating issues for all new PRs

https://github.com/freeCodeCamp/classroom/pull/396 by @lloydchang

https://github.com/freeCodeCamp/classroom/pull/397 by @theGaryLarson

https://github.com/freeCodeCamp/classroom/pull/398 by @Komal914

https://github.com/freeCodeCamp/classroom/pull/399 by @Chrisdbeloved1, @Ayomide6441, @Quawiyyah, @Code-Victor

all show the same failing test, dashtable_v2, from https://github.com/freeCodeCamp/classroom/pull/366#issuecomment-1652616915

[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. https://github.com/freeCodeCamp/classroom/pull/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/classroom@0.0.0 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.