Como escrevemos 5.800 testes... rápido

Uma das maneiras pelas quais a Devoted Health comercializa nossos planos é publicando informações sobre eles em nosso site, paid.com. Os visitantes podem pesquisar planos por CEP e visualizar um resumo dos benefícios ( exemplo ). Todos os anos, na preparação para o Período de Inscrição Anual do Medicare, fazemos alterações na página do localizador de planos para que os planos do ano seguinte sejam apresentados corretamente.

Ao todo, temos mais de 100 planos em quase 200 municípios, cada um com dezenas de tipos de benefícios e apresentados em dois idiomas. Como testamos todos eles?

O teste de instantâneo tem sido uma ferramenta poderosa para nos ajudar a fazer essas atualizações com rapidez e segurança. Esse estilo de teste compara a saída de um componente com uma versão “boa” conhecida. Com Jest , podemos comparar como um componente React é renderizado. Isso funciona muito bem com o paid.com. Ele é produzido por um gerador de site estático, então todos os dados que ele usa residem em arquivos JSON, no controle de origem, ao lado de nossos componentes React. Temos um teste instantâneo omnibus que renderiza cada célula da tabela para cada plano. Isso significa que os instantâneos contêm dados vistos na produção e que avaliar o impacto de uma alteração é tão simples quanto produzir um novo instantâneo e executar o git diff.

O teste fica assim:

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;
};

Por exemplo, uma parte de uma página do localizador de planos se parece com isto:

E o instantâneo correspondente se parece com isso:

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>
`;