根据状态值对按钮是否禁用反应测试用例

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

观察你的组件呈现什么，似乎有三件事要测试：

1. 它应该将 2 个按钮呈现为子项
2. 这些按钮何时启用或禁用
3. 这些组件的类名

主要测试用例是“启用”用例。是否测试 classNames 取决于您，几乎不需要测试内联样式或 css 类。

如果没有给出userCompany 和/或selectedTechnology，似乎两个按钮都被禁用，如果它们都给出，则两个按钮都被启用。

你可以根据你给组件的 state & prop 观察 html 按钮的 'disabled' 属性。

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