frappe/cypress/integration/control_color.js

context('Control Color', () => {
	before(() => {
		cy.login();
		cy.visit('/app/website');
	});

	function get_dialog_with_color() {
		return cy.dialog({
			title: 'Color',
			fields: [{
				label: 'Color',
				fieldname: 'color',
				fieldtype: 'Color'
			}]
		});
	}

	it('Verifying if the color control is selecting correct', () => {
		get_dialog_with_color().as('dialog');
		cy.findByPlaceholderText('Choose a color').click();

		///Selecting a color from the color palette
		cy.get('[style="background-color: rgb(79, 157, 217);"]').click();

		//Checking if the css attribute is correct
		cy.get('.color-map').should('have.css', 'color', 'rgb(79, 157, 217)');
		cy.get('.hue-map').should('have.css', 'color', 'rgb(0, 145, 255)');

		//Checking if the correct color is being selected
		cy.get('@dialog').then(dialog => {
			let value = dialog.get_value('color');
			expect(value).to.equal('#4F9DD9');
		});

		//Selecting a color
		cy.get('[style="background-color: rgb(203, 41, 41);"]').click();

		//Checking if the correct css is being selected
		cy.get('.color-map').should('have.css', 'color', 'rgb(203, 41, 41)');
		cy.get('.hue-map').should('have.css', 'color', 'rgb(255, 0, 0)');

		//Checking if the correct color is being selected
		cy.get('@dialog').then(dialog => {
			let value = dialog.get_value('color');
			expect(value).to.equal('#CB2929');
		});

		//Selecting color from the palette
		cy.get('.color-map > .color-selector').click(65, 87, {force: true});
		cy.get('.color-map').should('have.css', 'color', 'rgb(56, 0, 0)');

		//Checking if the expected color is selected and getting displayed
		cy.get('@dialog').then(dialog => {
			let value = dialog.get_value('color');
			expect(value).to.equal('#380000');
		});

		//Selecting the color from the hue map
		cy.get('.hue-map > .hue-selector').click(35, -1, {force: true});
		cy.get('.color-map').should('have.css', 'color', 'rgb(56, 45, 0)');
		cy.get('.hue-map').should('have.css', 'color', 'rgb(255, 204, 0)');
		cy.get('.color-map > .color-selector').click(55, 12, {force: true});
		cy.get('.color-map').should('have.css', 'color', 'rgb(46, 37, 0)');

		//Checking if the correct color is being displayed
		cy.get('@dialog').then(dialog => {
			let value = dialog.get_value('color');
			expect(value).to.equal('#2e2500');
		});

		//Clearing the field and checking if the field contains the placeholder "Choose a color"
		cy.get('.input-with-feedback').click({force: true});
		cy.get_field('color', 'Color').type('{selectall}').clear();
		cy.get_field('color', 'Color').invoke('attr', 'placeholder').should('contain', 'Choose a color');

	});
});