Bagaimana kami menulis 5.800 tes… dengan cepat

Salah satu cara Devoted Health memasarkan rencana kami adalah dengan menerbitkan informasi tentang mereka di situs web kami, dedicated.com. Pengunjung dapat mencari paket dengan kode pos dan melihat ringkasan manfaat ( contoh ). Setiap tahun, menjelang Periode Pendaftaran Tahunan Medicare, kami melakukan perubahan pada halaman pencari rencana sehingga rencana tahun mendatang akan disajikan dengan benar.

Secara keseluruhan, kami memiliki lebih dari 100 rencana di hampir 200 kabupaten, masing-masing dengan lusinan jenis manfaat dan disajikan dalam dua bahasa. Bagaimana kita menguji mereka semua?

Pengujian snapshot telah menjadi alat yang ampuh untuk membantu kami melakukan pembaruan ini dengan cepat dan aman. Gaya pengujian ini membandingkan keluaran komponen dengan versi "baik" yang diketahui. Dengan Jest , kita dapat membandingkan bagaimana komponen React merender. Ini bekerja sangat baik dengan dedicated.com. Ini diproduksi oleh generator situs statis, jadi semua data yang digunakannya tinggal di file JSON, di kontrol sumber, bersama komponen React kami. Kami memiliki pengujian snapshot omnibus yang merender setiap sel tabel untuk setiap paket. Ini berarti snapshot berisi data seperti yang terlihat dalam produksi, dan mengevaluasi dampak perubahan semudah membuat snapshot baru dan menjalankan git diff.

Tesnya terlihat seperti ini:

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

Misalnya, salah satu halaman pencari paket terlihat seperti ini:

Dan snapshot yang sesuai terlihat seperti ini:

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