Реагировать Тестовый пример для кнопки отключенной или нет на основе значения состояния
Я пытаюсь написать тестовые примеры для включения или отключения кнопок.
<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.
Итак, может ли кто-нибудь помочь мне с этим? Спасибо.
выбранные технологии и пользовательская компания хранятся в вашем состоянии? или он передается как опора или задается как константа?
это хранится в состоянии
const { selectedTechnology } = this.state; const {userCompany} = this.props; const enabled = (!!selectedTechnology && selectedTechnology.length > 0) && (!!userCompany && userCompany.length > 0)
@Harvey это то, как я использовал
@ Харви Есть что-нибудь, что я пропустил?
Привет, Ганеш, ничего не пропало, извините, не могу ответить, на прошлой неделе был очень занят работой. Постараюсь ответить чуть позже :)
Хорошо, без проблем. Спасибо за это :-)
Ответы 1
Наблюдая за тем, что отображает ваш компонент, можно проверить три вещи:
- Он должен отображать 2 кнопки как дочерние
- Когда эти кнопки включены или отключены
- 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
});
});
Итак, таким образом мы можем использовать значения состояния в тестовом примере. Большое спасибо не только за ответ, но и за то, что вы научили меня чему-то новому. Итак, таким образом я могу протестировать компонент, использующий локальное состояние. Что, если значение для пользовательской компании исходит от моего редуктора, использующего mapStateToProps в том же компоненте?
Я не проводил много тестов с реакцией + редукцией вместе, только тестировал их отдельно для модульного тестирования. но этот блог может вам помочь jsramblings.com/2018/01/15/…
Я всегда получаю эту ошибку. Метод props предназначен для запуска на 1 узле. Вместо этого найдено 0.
вы можете шпионить за объектами selectedTechnology и userCompany и проверять их