I want to test the different background colors for several environments. You can switch between the environments bmw, audi and vw. Depending on the chosen environment the background color will change. Now I want to write an Angular test for this. How can I change the dynamic css class and test it. Please the my code below.

Thank you.

content of component.html

<span >Welcome</span>

content of component.scss

 .car-models {
    &.bmw{
      background: blue;
    }
    &.audi {
      background: yellow;
    }
    &.vw {
      background: black;
    }
}

content of component.spec.ts

    beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('check background color', () => {
    //if <span >Welcome</span>
    // than should the backgroundcolor of the text blue;
    // if <span >Welcome</span> 
    // than should the background color of the text yellow

  });

CodePudding user response：

Here you go

it('should have yellow background color for audi', () => {
  //(1) Set the value
  component.car = 'audi';
  //(2) Invoke this to update the template
  fixture.detectChanges();

  //(3) Get your element
  const span: HTMLElement = fixture.nativeElement.querySelector('.car-models');
  //(4) Get backgroundColor for above element
  const bgColor = getComputedStyle(span).backgroundColor;

  //(5) Assert it
  expect(colorsMap[bgColor]).toBe('yellow');
});

In the (5) step I used colorsMap to get color name because getComputedStyle returns backgroundColor as rgb value, but we need color name instead

Here is the definition of colorsMap, add it directly inside describe function

const colorsMap: { [key: string]: string } = {
    'rgb(0, 0, 255)': 'blue',
    'rgb(255, 255, 0)': 'yellow',
    'rgb(0, 0, 0)': 'black'
  }

If you didn't like the colorsMap then you have to change your scss color names to rgb

Bonus Tips

Tip 1 - Use By.css instead of querySelector Why? Read Here

// Change this
const span: HTMLElement = fixture.nativeElement.querySelector('.car-models');
// To this
const span: HTMLElement = fixture.debugElement.query(By.css('.car-models')).nativeElement;

Tip 2 - Query element using data-test or data-test-id because CSS classes may get changed in future and your test will fail

<span data-test="carModel" >Welcome</span>

const span: HTMLElement = fixture.debugElement.query(By.css('[data-test="carModel"]')).nativeElement;

CodePudding user response：

thanks you for your solution. I tried it and noticed that the car is read-only (function). So I can not set the "compotent.car" in my test case. What is the best way to set the "car". Writing an setter function or manupulating the appconfig?

export class MyComponent implements OnInit {
  browserVersion = 'N/A';
  hostName = 'N/A';

  constructor(
    @Inject(APP_VERSION)
    public appConfig: { car?: string; appVersion?: string }
  ) {}

  get car(): string | undefined {
    return this.appConfig.car?.toLocaleLowerCase();
  }

PS: I am going to test the tip 2. Thanks for that.

Best regards