Comment nous écrivons 5 800 tests… rapidement

L'une des façons dont Devoted Health commercialise nos plans est de publier des informations à leur sujet sur notre site Web,dicate.com. Les visiteurs peuvent rechercher des forfaits par code postal et consulter un récapitulatif des prestations ( exemple ). Chaque année, à l'approche de la période d'inscription annuelle de Medicare, nous apportons des modifications à la page de recherche de plan afin que les plans de l'année à venir soient présentés correctement.

Au total, nous avons plus de 100 plans dans près de 200 comtés, chacun avec des dizaines de types de prestations et présentés en deux langues. Comment testons-nous chacun d'eux?

Les tests instantanés ont été un outil puissant pour nous aider à effectuer ces mises à jour rapidement et en toute sécurité. Ce style de test compare la sortie d'un composant avec une "bonne" version connue. Avec Jest , nous sommes en mesure de comparer le rendu d'un composant React. Cela fonctionne très bien avec dévoué.com. Il est produit par un générateur de site statique, de sorte que toutes les données qu'il utilise se trouvent dans des fichiers JSON, dans le contrôle de source, aux côtés de nos composants React. Nous avons un test d'instantané omnibus qui rend chaque cellule du tableau pour chaque plan. Cela signifie que les instantanés contiennent des données telles qu'elles apparaissent en production et que l'évaluation de l'impact d'un changement est aussi simple que de produire un nouvel instantané et d'exécuter git diff.

L'épreuve ressemble à ça :

describe('PlanRow', () => {
  const allPlans: Plan[] =require('path/to/plans.json');
  const table = allPbps.map(pbp => [pbp.record_locator, pbp]);

  [
    Each,
    Component,
    Used,
    To,
    Render,
    A,
    Row,
    In,
    The,
    Table,
  ].forEach(Component => {
    describe(Component.name, () => {
      test.each(table)(
        '%s renders correctly',
        (recordLocator: string, plan: Plan) => {
          const props: RowProps = { /* each component expects the same shape props, so those can be constructed here from the plan */ };
          const fragment = render(<Component {...props} />).asFragment();
          expect(fragment).toMatchSnapshot();
        },
      );
    });
  });
});

useMock.t = (key, options) => {
  if (options) {
    // sort the stringified keys alphabetically to ensure consistent output for snapshot tests
    return `${key} ${JSON.stringify(options, Object.keys(options).sort())}`;
  }
  return key;
};

Par exemple, une partie d'une page de recherche de plan ressemble à ceci :

Et l'instantané correspondant ressemble à ceci :

exports[`CountyTableRow MonthlyPremiumRow H1290-001-000-2023 renders correctly 1`] = `
<DocumentFragment>
  <div
    class="text"
  >
    <h4>
      pbpTable.monthlyPremium.header.title
    </h4>
  </div>
  <div
    class="text"
  >
    <p>
      <strong>
        $0
      </strong>
      <br />
      <br />
      pbpTable.monthlyPremium.noBuydown
    </p>
  </div>
</DocumentFragment>
`;