Реактивный тестовый случай для кнопки отключен или нет на основе значения состояния

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 этих компонентов

Основной тестовый случай - это «включенный» случай.Тестировать classNames или нет - решать вам, в большинстве случаев нет необходимости тестировать встроенные стили или классы 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
    });
});