@hvcgroep/design-system

HVC groep Design System

Usage

To use this package a written agreement has to be concluded with HVC. Without a written agreement you are not allowed to use this package in any way.

Testing

Our tests are written with (Jest)[https://jestjs.io/]. The tests are located in the component's root directory, so for example src/components/Accordion/index.test.tsx.

Snapshot tests

It's important that our components UI stays the same throughout changes in the codebase, and does not change unexpectedly. That's why we test them using snapshot tests. A typical snapshot test case renders a UI component, takes a snapshot, then compares it to a reference snapshot file stored alongside the test. The test will fail if the two snapshots do not match: either the change is unexpected, or the reference snapshot needs to be updated to the new version of the UI component.

We run all the tests in the testing pipeline. If a test fails, this will result in a failing pipeline and is a sign that there is a bug in the code, or a test needs to be regenerated.

You can run all the snapshot tests yourself, alongside other Jest tests, using the following command:

yarn run test

Or run a test for a specific component:

yarn run test src/components/Accordion

This command will run the test written in the index.test.tsx file. If your test file has a name other than index, you'll have to specify that file name in your command.

The terminal will output the test report and show you if the test succeeded or failed and why it failed. The output will look similar to this:

Success:

 PASS  src/components/Accordion/index.test.tsx
  Accordion
    ✓ renders correctly when not expanded (5 ms)
    ✓ renders correctly when expanded (1 ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   2 passed, 2 total
Time:        2.456 s, estimated 3 s
Ran all test suites matching /src\/components\/Accordion/i.

Failure:

 FAIL  src/components/Accordion/index.test.tsx
  Accordion
    ✕ renders correctly when not expanded (6 ms)
    ✕ renders correctly when expanded

  ● Accordion › renders correctly when not expanded

    expect(received).toMatchSnapshot()

    Snapshot name: `Accordion renders correctly when not expanded 1`

    - Snapshot  - 3
    + Received  + 1

    @@ -15,10 +15,8 @@
        </button>
        <div
          className="faq-item__inner"
          id="section"
        >
    -     <div>
    -       Als je een slimme meter hebt, zullen wij de meterstand op 1 januari automatisch uitlezen. Als je een meter hebt die wij niet op afstand kunnen uitlezen, ontvang je van ons inderdaad een verzoek om de meterstand door te geven. Als je niet in staat bent de meterstand door te geven, zullen wij deze voor je schatten. We kunnen de meterstand achteraf niet aanpassen. Wij hebben de meterstand van 1 januari nodig zodat we het juiste verbruik tegen de juiste tarieven kunnen afrekenen op de jaarnota.
    -     </div>
    +     content
        </div>
      </article>

      13 |     ).toJSON();
      14 |
    > 15 |     expect(tree).toMatchSnapshot();
         |                  ^
      16 |   });
      17 |
      18 |   it('renders correctly when expanded', () => {

      at Object.<anonymous> (src/components/Accordion/index.test.tsx:15:18)

(Re)generate snapshot tests

If you make a change to a component that will cause the snapshot test to fail expectedly, you can regenerate the snapshot test using the command:

yarn run test:snapshot-generate <path-to-file>

This will update the existing test file to match the updated component UI state. You should only run this command if you've made intentional changes to the component or any component that depends on it. Otherwise, a failed test is a sign of a bug in the code.

All the generated snapshot tests will be stored in the directory __snapshots__.