Not able to figure out where I’m going wrong
import React, { useState } from 'react';
const ColorPickerComponent = () => {
// State to hold the default background color
const [defaultBGColor, setDefaultBGColor] = useState('#ffffff'); // Default to white
// Function to handle the color change
const handleBGColorChange = (e) => {
console.log(e.target.value); // Log the new color value
setDefaultBGColor(e.target.value); // Update the state with the new color
};
return (
<div style={{ backgroundColor: defaultBGColor, padding: '20px' }}>
<h1>Pick a Background Color</h1>
<input
type="color"
id="colorPicker1"
name="colorPicker1"
value={defaultBGColor}
onChange={handleBGColorChange}
/>
<p>Current Color: {defaultBGColor}</p>
</div>
);
};
export default ColorPickerComponent;
describe('Color Picker Component Test', () => {
beforeEach(() => {
// Visit the page where the ColorPickerComponent is rendered
cy.visit('localhost:3000/'); // Replace with your actual page URL
});
it('should change the background color when a new color is selected', () => {
// Define the new color value you want to set
const newColor = '#ff5733'; // Example: a shade of orange
// Get the color input and change its value
cy.get('#colorPicker1')
.invoke('val', newColor) // Set the new color value
.trigger('change'); // Trigger the change event
// Assert that the input value has changed
cy.get('#colorPicker1').should('have.value', newColor);
// Assert that the background color of the div has changed
cy.get('div') // Select the div that has the background color
.should('have.css', 'background-color')
.and('match', /rgba?(255, 87, 51/); // Match the RGB value for the new color
});
it('should log the new color value to the console', () => {
// Spy on the console.log function
cy.window().then((win) => {
cy.stub(win.console, 'log').as('consoleLog'); // Alias the console.log
// Define the new color value you want to set
const newColor = '#ff5733'; // Example: a shade of orange
// Get the color input and change its value
cy.get('#colorPicker1')
.invoke('val', newColor) // Set the new color value
.trigger('change'); // Trigger the change event
// Assert that console.log was called with the new color value
cy.get('@consoleLog').should('have.been.calledWith', newColor);
});
});
});
Getting this error.
assertexpected [ <div#root>, 1 more… ] to have CSS property background-color with the value rgba(255, 87, 51), but the value was rgba(0, 0, 0, 0)
at this line
cy.get(‘div’).should(‘have.css’, ‘background-color’,’rgba(255, 87, 51)’)
The base problem is React uses synthetic events and .trigger('change') is not firing the event handler in the React component.
The full discussion and a workaround is available here Testing Synthetic Events in Cypress.
Using Ryan’s custom command, you can replicate the user’s actions.
Cypress.Commands.add('inputChange', (input, value) => {
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
window.HTMLInputElement.prototype,
'value'
).set
const changeInputValue = inputToChange => newValue => {
nativeInputValueSetter.call(inputToChange[0], newValue)
inputToChange[0].dispatchEvent(new Event('change', {
newValue,
bubbles: true
}))
}
return cy.get(input).then(input => {
changeInputValue(input)(value)
})
})
Test
cy.visit('http://localhost:3000/')
const newColor = '#ff5733'; // Example: a shade of orange
cy.inputChange('#colorPicker1', newColor)
cy.get('#colorPicker1').should('have.value', newColor);
// Get your div from the input's parent
cy.get('#colorPicker1')
.parent('div')
.should('have.css', 'background-color', 'rgb(255, 87, 51)');