Can I test a prop in class css?

[jadir-junior]

Hi guys,

I'm try to test styles of a component with .toHaveStyle in the library, but I think, it's not possible.
Can I test a prop in class css?

I show you my code:

button.component.ts

import { Component, EventEmitter, Input, Output } from '@angular/core'

@Component({
  selector: 'cebs-button',
  template: `
    <button
      [attr.role]="type"
      [type]="type"
      [disabled]="disabled"
      [attr.aria-disabled]="disabled"
      [attr.aria-label]="ariaLabel"
      [ngClass]="{
        'default': color === 'default',
        'primary': color === 'primary',
        'block': block
      }"
      (click)="onClick()"
    >
      <ng-content></ng-content>
    </button>
  `,
  styles: [
    `
      button {
        color: black;
        font-weight: bold;
        font-size: 16px;
        background-color: #ddd;
        padding: 16px 32px;
        border: none;
        border-radius: 12px;
        box-shadow: 0px 8px 12px -10px black;
        cursor: pointer;
      }

      .primary {
        background-color: var(--primary-color);
        color: white;
        box-shadow: 0px 10px 14px -6px var(--primary-color);

        &:disabled {
          background-color: rgba(var(--primary-color-rgb), 0.7);
          box-shadow: none;
        }
      }

      .block {
        width: 100%;
      }
    `,
  ],
})
export class ButtonComponent {
  @Input() ariaLabel!: string
  @Input() disabled = false
  @Input() type: 'submit' | 'button' = 'button'
  @Input() color: 'primary' | 'default' = 'default'
  @Input() block = false
  @Output() clickEvent = new EventEmitter()

  onClick(): void {
    this.clickEvent.emit()
  }
}

my test button.component.spec.ts

import { render, screen } from '@testing-library/angular'

import { ButtonComponent } from './button.component'

describe('ButtonComponent', () => {
  const { getByText, getByLabelText } = screen
  it('should create button component with default props', async () => {
    await render(`<cebs-button type="text" ariaLabel="button">Button</cebs-button>`, {
      declarations: [ButtonComponent],
    })

    expect(getByText(/button/i)).toBeInTheDocument()
    expect(getByLabelText(/button/i)).toBeInTheDocument()
    expect(getByLabelText(/button/i)).toHaveClass('default')
    expect(getByLabelText(/button/i)).toHaveStyle({
      'background-color': '#ddd',
      'font-size': '16px',
    })
  })
})

And the error show me:

 FAIL  src/app/components/external/button/button.component.spec.ts
  ● ButtonComponent › should create button component with default props

    expect(element).toHaveStyle()

    - Expected

    - background-color: rgb(221, 221, 221);
    - font-size: 16px;
    + background-color: ButtonFace;

      13 |     expect(getByLabelText(/button/i)).toBeInTheDocument()
      14 |     expect(getByLabelText(/button/i)).toHaveClass('default')
    > 15 |     expect(getByLabelText(/button/i)).toHaveStyle({
         |                                       ^
      16 |       'background-color': '#ddd',
      17 |       'font-size': '16px',
      18 |     })

      at src/app/components/external/button/button.component.spec.ts:15:39
      at fulfilled (node_modules/tslib/tslib.js:115:62)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:409:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3830:43)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:408:56)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:169:47)
      at node_modules/zone.js/bundles/zone-testing-bundle.umd.js:1326:38
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invokeTask (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:443:35)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvokeTask (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3861:43)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invokeTask (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:442:64)
      at Zone.Object.<anonymous>.Zone.runTask (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:214:51)
      at drainMicroTaskQueue (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:632:39)

I try test if my background-color is different in default and primary colors

[jadengis]

@jadir-junior I don't think this is an issue with this library. A similar issue was reported here using styled-components with React testing-library/jest-dom#295, and a styled-components issue, testing-library/jest-dom#295.

If this is like the above issues, it might be that the stylesheets are not being applied to the DOM in the Jest environment, so the style matching doesn't work.

[timdeschryver]

Indeed what @jadengis said.
Also, I wouldn't encourage to test the styles because this can be brittle.
You could check for classnames, or what I tend to do is to use data attributes.