8、React 数据输入测试驱动及测试替身探索

React 数据输入测试驱动及测试替身探索

1. React 数据输入测试驱动

在 React 开发中，对于数据输入的测试驱动是非常重要的。我们可以通过以下步骤来完成相关功能的开发与测试。

1.1 实现 RadioButtonIfAvailable 组件

首先，我们需要实现一个 RadioButtonIfAvailable 组件，用于根据可用的时间槽来渲染单选按钮。以下是具体代码：

const RadioButtonIfAvailable = ({
  availableTimeSlots,
  date,
  timeSlot
}) => {
  const startsAt = mergeDateAndTime(date, timeSlot);
  if (
    availableTimeSlots.some(availableTimeSlot =>
      availableTimeSlot.startsAt === startsAt
    )
  ) {
    return (
      <input
        name="startsAt"
        type="radio"
        value={startsAt}
      />
    );
  }
  return null;
};

然后，在 TimeSlotTable 中使用这个组件，替换现有的三元运算符：