Как мы пишем 5800 тестов… быстро

Один из способов, которым Devoted Health рекламирует наши планы, — публикация информации о них на нашем веб-сайте посвященный.com. Посетители могут искать планы по почтовому индексу и просматривать сводку преимуществ ( пример ). Каждый год, в преддверии Годового периода регистрации в Medicare, мы вносим изменения на страницу поиска планов, чтобы планы на предстоящий год отображались корректно.

В общей сложности у нас есть более 100 планов почти в 200 округах, каждый из которых предлагает десятки видов льгот и представлен на двух языках. Как мы протестируем их всех?

Тестирование моментальных снимков стало мощным инструментом, помогающим нам делать эти обновления быстро и безопасно. В этом стиле тестирования выходные данные компонента сравниваются с известной «хорошей» версией. С помощью Jest мы можем сравнить, как отображается компонент React. Это очень хорошо работает с посвященным.com. Он создается генератором статических сайтов, поэтому все используемые им данные хранятся в файлах JSON, в системе управления версиями, наряду с нашими компонентами React. У нас есть комплексный тест моментальных снимков, который отображает каждую ячейку таблицы для каждого плана. Это означает, что моментальные снимки содержат данные, как они видны в рабочей среде, и что оценка влияния изменения так же проста, как создание нового моментального снимка и запуск git diff.

Тест выглядит так:

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

Например, одна часть страницы поиска планов выглядит так:

И соответствующий снимок выглядит так:

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