toHaveStyle don't get properties on my scss file

[jadir-junior]

Current behavior

I have element with scss props on my component

//button.component.ts
import { Component, Input } from '@angular/core'

@Component({
  selector: 'spec-button',
  template: `<button
    [ngClass]="{
      'success': color === 'success',
      'danger': color === 'danger',
      'default': color === 'default'
    }"
  >
    <ng-content></ng-content>
  </button>`,
  styleUrls: ['./button.component.scss'],
})
export class ButtonComponent {
  @Input() color: 'success' | 'danger' | 'default' = 'default'
}

And scss

// button.component.scss
.success {
  background-color: #00ff00;
}

.danger {
  background-color: #ff0000;
}

.default {
  background-color: #ccc;
}

I tried test if my component button when color is success if background-color green

// button.component.spec.ts
import { SpectatorHost, createHostFactory } from '@ngneat/spectator'

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

describe('ButtonComponent', () => {
  let spectator: SpectatorHost<ButtonComponent>
  const createHost = createHostFactory(ButtonComponent)

  it('should have a default class by default', () => {
    spectator = createHost(`<spec-button>Text Button</spec-button>`)
    expect(spectator.query('button')).toHaveClass('default')
    expect(spectator.query('button')).toHaveText('Text Button')
  })

  it('should have a success class if color is success', () => {
    spectator = createHost(`<spec-button color="success" >Text Button</spec-button>`)
    expect(spectator.query('button')).toHaveClass('success')
    expect(spectator.query('button')).toHaveText('Text Button')
    expect(spectator.query('button')).toHaveStyle({
      backgroundColor: '#00ff00',
    })
  })
})

and I receive the error on test

Expected element to have CSS {"backgroundColor":"#00ff00"}

I can test a background-color color of my class css? If yes? how?

[NetanelBasal]

https://github.com/ngneat/spectator/blob/ac40000dfa6665468e24e22607351e90c3805501/projects/spectator/test/highlight.directive.spec.ts

[jadir-junior]

@NetanelBasal

Yes, I read it first, but it don't work with component and class