วิธีที่เราเขียนข้อสอบ 5,800 ข้อ… อย่างรวดเร็ว

วิธีหนึ่งที่ Devoted Health ทำการตลาดแผนของเราคือการเผยแพร่ข้อมูลเกี่ยวกับสิ่งนี้บนเว็บไซต์ของเรา dedicated.com ผู้เยี่ยมชมสามารถค้นหาแผนตามรหัสไปรษณีย์และดูสรุปผลประโยชน์ ( ตัวอย่าง ) ทุก ๆ ปี จนถึงช่วงการลงทะเบียนประจำปีของเมดิแคร์ เราทำการเปลี่ยนแปลงในหน้าค้นหาแผนเพื่อให้แผนของปีที่จะถึงนี้แสดงได้อย่างถูกต้อง

เมื่อรวมกันแล้ว เรามีแผนมากกว่า 100 แผนในเกือบ 200 เทศมณฑล โดยแต่ละแผนมีประเภทผลประโยชน์มากมายและนำเสนอในสองภาษา เราจะทดสอบทั้งหมดได้อย่างไร

การทดสอบสแนปชอตเป็นเครื่องมืออันทรงพลังที่ช่วยให้เราทำการอัปเดตเหล่านี้ได้อย่างรวดเร็วและปลอดภัย การทดสอบรูปแบบนี้เปรียบเทียบผลลัพธ์ของคอมโพเนนต์กับเวอร์ชันที่ "ดี" ที่รู้จัก ด้วยJestเราสามารถเปรียบเทียบว่าส่วนประกอบ React แสดงผลอย่างไร สิ่งนี้ทำงานได้ดีมากกับ dedicated.com มันถูกสร้างขึ้นโดยตัวสร้างเว็บไซต์แบบสแตติก ดังนั้นข้อมูลทั้งหมดที่ใช้จึงอยู่ในไฟล์ JSON ในการควบคุมแหล่งที่มา ควบคู่ไปกับส่วนประกอบ React ของเรา เรามีการทดสอบสแน็ปช็อตของ Omnibus ที่แสดงแต่ละเซลล์ของตารางสำหรับแต่ละแผน ซึ่งหมายความว่าสแนปชอตมีข้อมูลที่เห็นในการผลิต และการประเมินผลกระทบของการเปลี่ยนแปลงนั้นง่ายเหมือนการสร้างสแนปชอตใหม่และเรียก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>
`;