Cómo escribimos 5.800 pruebas... rápido

Una de las formas en que Devoted Health comercializa nuestros planes es mediante la publicación de información sobre ellos en nuestro sitio web dedicado.com. Los visitantes pueden buscar planes por código postal y ver un resumen de los beneficios ( ejemplo ). Todos los años, antes del Período de inscripción anual de Medicare, hacemos cambios en la página del buscador de planes para que los planes del próximo año se presenten correctamente.

En total, tenemos más de 100 planes en casi 200 condados, cada uno con docenas de tipos de beneficios y presentados en dos idiomas. ¿Cómo los probamos todos?

La prueba de instantáneas ha sido una herramienta poderosa para ayudarnos a realizar estas actualizaciones de forma rápida y segura. Este estilo de prueba compara la salida de un componente con una versión "buena" conocida. Con Jest , podemos comparar cómo se procesa un componente de React. Esto funciona muy bien con dedicado.com. Es producido por un generador de sitios estáticos, por lo que todos los datos que utiliza viven en archivos JSON, en el control de código fuente, junto con nuestros componentes React. Tenemos una prueba de instantánea general que representa cada celda de la tabla para cada plan. Esto significa que las instantáneas contienen datos tal como se ven en producción y que evaluar el impacto de un cambio es tan simple como producir una nueva instantánea y ejecutar git diff.

La prueba se ve así:

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 ejemplo, una parte de una página de búsqueda de planes se ve así:

Y la instantánea correspondiente se ve así:

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