React Test case for the button disabled or not on

Question

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>

Now, what I tried is,

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

Now Here,

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

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

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

Answer 1

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

1. It should render 2 buttons as children
2. When are these buttons enabled or disabled
3. classNames of these components

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.

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.

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