Question

我正在尝试为按钮启用或禁用编写测试用例。

<button type="button" id="addBtn" className={`btn border-0 create-job-btn ${enabled ? 'add-btn' : 'jd-button'}`} disabled={!enabled} >Add/Paste Jd</button>
<span className="pl-1 pr-1"> or </span>
<button type="button" id="uploadBtn" className={`btn border-0 create-job-btn ${enabled ? "upload-btn" : "jd-button"}`} disabled={!enabled} >Upload Jd File</button>

现在，我尝试的是

it('should have buttons', () => {
        const wrapper = shallow(<SelectCriteraNewJob />);
        expect(wrapper.find('button#addBtn')).toBeTruthy();
        expect(wrapper.find('button#uploadBtn')).toBeTruthy();
    });

现在，

const enabled = (!!selectedTechnology && selectedTechnology.length > 0) && (!!userCompany && userCompany.length > 0)

因此，我在为按钮enable and disable编写测试用例时感到困惑。

那么，有人可以帮助我吗？谢谢。

Answer 1

观察您的组件呈现的内容，似乎需要测试三件事：

应将2个按钮呈现为子级
这些按钮何时启用或禁用
classNames

主要测试用例是“已启用”用例。是否测试className由您决定，测试内联样式或CSS类几乎是不必要的。

如果未提供userCompany和/或selectedTechnology，则似乎两个按钮都被禁用，如果都给出了两个按钮，则这两个按钮都被启用。

根据提供给组件的状态和属性，您可以观察html按钮的“禁用”属性。

const wrapper = shallow(<SelectCriteraNewJob userCompany='Some Company' />);

it('SelectCriteraNewJob should render two buttons as children', () => {
    expect(wrapper.childAt(0).type()).toEqual('button');
    // expect(wrapper.childAt(1).type()).toEqual('span'); if you want to, not necessary to test
    expect(wrapper.childAt(2).type()).toEqual('button');
});

describe('If technology and company are not empty, both buttons are enabled. Otherwise disabled.',() => {
    expect(wrapper.find('button#addBtn')).toBeTruthy();
    expect(wrapper.find('button#uploadBtn')).toBeTruthy();

    test('Company and technology given', () => {
        wrapper.setState({selectedTechnology: 'React'});
        const addBtn = wrapper.find('button#addBtn').prop('disabled');
        const uploadBtn = wrapper.find('button#uploadBtn').prop('disabled');
        expect(addBtn).toBeFalsy();
        expect(uploadBtn).toBeFalsy();
    });
    test('Only technology given', () => {
        wrapper.setProps({userCompany:''});
        const addBtn = wrapper.find('button#addBtn').prop('disabled');
        const uploadBtn = wrapper.find('button#uploadBtn').prop('disabled');
        expect(addBtn).toBeTruthy();
        expect(uploadBtn).toBeTruthy();
    });
    test('Only company given', () => {
        wrapper.setState({selectedTechnology:''});
        wrapper.setProps({userCompany:'Some Company'});
        const addBtn = wrapper.find('button#addBtn').prop('disabled');
        const uploadBtn = wrapper.find('button#uploadBtn').prop('disabled');
        expect(addBtn).toBeTruthy();
        expect(uploadBtn).toBeTruthy();
    });
    test('Neither are given', () => {
        wrapper.setState({selectedTechnology:''});
        wrapper.setProps({userCompany:''});
        const addBtn = wrapper.find('button#addBtn').prop('disabled');
        const uploadBtn = wrapper.find('button#uploadBtn').prop('disabled');
        expect(addBtn).toBeTruthy();
        expect(uploadBtn).toBeTruthy();
        expect(wrapper.find('button.jd-button')).toHaveLength(2); //optional, test css class name
    });
});

根据状态值对按钮禁用或不响应的测试案例

1 个答案: