根据状态值对按钮禁用或不启用React测试用例 [英] React Test case for the button disabled or not on the basis of state value

问题描述

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

I am trying to write the test cases for the buttons enable or disable.

<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的测试用例感到困惑.

So, I am confused in writting the test cases for the buttons enable and disable.

那么，有人可以帮助我吗?谢谢.

So, can any one help me with this ? Thanks.

推荐答案

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

Observing what your component renders, there seems to be three things to test:

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

主要测试用例是已启用"用例.是否测试className由您决定，测试内联样式或CSS类基本上是没有必要的.

The primary test case is the 'enabled' case. Testing classNames or not is up to you, it's mostly not necessary to test inline styles or css classes.

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

It seems that both buttons are disabled if userCompany and/or selectedTechnology aren't given, and if they're both given, both buttons are enabled.

您可以根据状态&观察html按钮的已禁用"属性.道具的道具.

You can observe the 'disabled' prop of the html buttons, according to the state & prop you have given to the component.

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

这篇关于根据状态值对按钮禁用或不启用React测试用例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！