使用TDD原则在JavaScript中开发UI

describe('Input Validation', () => {
  it('should work with one input', () => {
    const input = {
      type: 'number',
      label: 'Number Input',
      isValid: true,
    };
    const component = shallow<SimpleInput {...input} />);
    // Expect a form to contain the input
    expect(component.containsMatchingElement<input {...input.input} />)).toEqual(true);
    // Expect the input has error class when not valid
    input.isValid = false;
    component = shallow<SimpleInput {...input} />);
    expect(component.containsMatchingElement(<div class="error-indicator" />)).toEqual(true);
  });

  it('should work with two inputs', () => {
    const input1 = {
      type: 'checkbox',
      label: 'Checkbox Input',
      isValid: true,
    };
    const input2 = {
      type: 'number',
      label: 'Second Number Input',
      isValid: true,
    };
    const component = shallow<NestedInput {...input1, input2} />);
    // Expect at least two inputs
    expect(component.containsMatchingElement<input {...input1.input} />)).toEqual(true);
    expect(component.containsMatchingElement<input {...input2.input} />)).toEqual(true);
  });

  it('should call onChange when input is valid', () => {
    const spy = jest.fn();
    const input = {
      type: 'number',
      label: 'Number Input',
      isValid: true,
      onChange: spy,
    };
    const component = shallow<SimpleInput {...input} />);

    // Simulate input change
    input.isValid = false;
    const event = {
      target: {
        value: '50',
      },
    };
    component.find('input').prop('onChange')(event);

    expect(spy).toHaveBeenCalledWith({
      target: {
        isValid: true,
        value: '50',
      },
    });
  });
});