Testing React Input With Type Range By Dispatching Events

Опубликовано: 13 Февраль 2023
на канале: gleb bahmutov

947

In this video, I refactor a spec file that tries to control an input type=range element wrapped in a React component. To properly trigger the "input" event, I have to construct the event object. Since we have a lot of test command duplication, the last part of the video shows how to create a custom Cypress command "setRange". The final spec file:
Cypress.Commands.add(
'setRange',
{ prevSubject: 'element' },
function (subject, value) {
subject.val(value)
subject[0].dispatchEvent(new Event('input', { bubbles: true }))
Cypress.log({
name: 'setRange',
message: value,
})
},
)

describe('test on the functioning of the estimator', function () {
beforeEach(function () {
cy.visit('/preventivatore')
cy.getByData('test').should('be.visible')
})

it('test on slide position preventivatore', function () {
cy.getByData('test').setRange(30)
cy.getByData('slide30').should('exist')
cy.getByData('test').setRange(50)

cy.getByData('slide50').should('exist')
cy.getByData('test').setRange(70)

cy.getByData('slide70').should('exist')
cy.getByData('test').setRange(90)

cy.getByData('slide90').should('exist')
})
})

Смотрите видео Testing React Input With Type Range By Dispatching Events онлайн, длительностью часов минут секунд в хорошем качестве, которое загружено на канал gleb bahmutov 13 Февраль 2023. Делитесь ссылкой на видео в социальных сетях, чтобы ваши подписчики и друзья так же посмотрели это видео. Данный видеоклип посмотрели 947 раз и оно понравилось 24 посетителям.

10,632