I am trying to test the opacity and color of mat-checkbox when it get focus but it is not working.

My code is as follow:

  it('focused opacity', () => {  
    cy.get('.mat-checkbox[data-cy=selected] .mat-checkbox-input').first()
      .focus()
      .find('.mat-checkbox-focus-overlay')
      .then((btn) => {
        cy.wrap(btn).should('have.css', 'opacity', '0.20');
        cy.wrap(btn).should('have.css', 'background-color')
        cy.wrap(btn).and('be.colored', '#00777');
      });
  });

The error is:

             Timed out retrying after 4000ms: Expected to find element: .mat-checkbox-focus-overlay, but never found it. Queried from element: <input#mat-checkbox-2-input.mat-checkbox-input.cdk-visually-hidden>

Html of element:

<mat-checkbox
  
  [labelPosition]="labelPosition"
  data-cy="unselected"
  color="primary"
>
  unselected
</mat-checkbox>   

Inner Html:

<mat-checkbox _ngcontent-waw-c239="" data-cy="unselected" color="primary" class="mat-checkbox example-margin cgui-checkbox mat-primary" ng-reflect-color="primary" ng-reflect-label-position="after" id="mat-checkbox-1">
   <label class="mat-checkbox-layout" for="mat-checkbox-1-input">
      <span class="mat-checkbox-inner-container">
         <input type="checkbox" class="mat-checkbox-input cdk-visually-hidden" id="mat-checkbox-1-input" tabindex="0" aria-checked="false"><span matripple="" class="mat-ripple mat-checkbox-ripple mat-focus-indicator" ng-reflect-trigger="[object HTMLLabelElement]" ng-reflect-disabled="false" ng-reflect-radius="20" ng-reflect-centered="true" ng-reflect-animation="[object Object]"><span class="mat-ripple-element mat-checkbox-persistent-ripple"></span></span><span class="mat-checkbox-frame"></span>
         <span class="mat-checkbox-background">
            <svg version="1.1" focusable="false" viewBox="0 0 24 24" xml:space="preserve" class="mat-checkbox-checkmark">
               <path fill="none" stroke="white" d="M4.1,12.7 9,17.6 20.3,6.3" class="mat-checkbox-checkmark-path"></path>
            </svg>
            <span class="mat-checkbox-mixedmark"></span>
         </span>
      </span>
      <span class="mat-checkbox-label"><span style="display: none;">&nbsp;</span> unselected </span>
   </label>
</mat-checkbox>

CodePudding user response：

It seems to me that the element you're wrapping is the focus-overlay. To check the property of the button you should be wrapping the button directly. It would be helpful if you share the inner HTML of the checkbox. Moreover, you're using and after wrapping the element again. Either chain it with should, or split the assertions as mentioned below. Nevertheless try this,

it('focused opacity', () => {  
cy.get('.mat-checkbox[data-cy=selected] .mat-checkbox-input').first().then(btn =>{
  cy.wrap(btn).focus()
  
    cy.wrap(btn).should('have.css', 'background-color')
    cy.wrap(btn).should('be.colored', '#00777');
    cy.wrap(btn).should('have.css', 'opacity', '0.20');
  });

});

CodePudding user response：

It can work by doing following things:

Add CSS for it:

.mat-checkbox.cdk-focused.cdk-program-focused {
    opacity: 0.2;
}

Opacity test:

 it('should have correct focused opacity', () => {  
    cy.get('.mat-checkbox[data-cy=selected] .mat-checkbox-input').first()
      .focus()
    cy.get('.mat-checkbox[data-cy=selected]')
      .should('have.css', 'opacity', '0.2')
  })
    

Color test:

 it('should have correct background color when checked', () => {
    cy.get('.cgui-checkbox[data-cy=selected] .mat-checkbox-background')
      .should('have.css', 'background-color')
      .and('be.colored', '#00777');
 });