如何在 Angular 中测试 scss 子类？

Question

我想测试几种环境的不同背景颜色。 您可以在环境 bmw、audi 和 vw 之间切换。根据所选环境，背景颜色会发生变化。现在我想为此编写一个 Angular 测试。如何更改动态 css 类并对其进行测试。请在下面输入我的代码。

谢谢你。

component.html 的内容

<span class="car-models {{ car }}">Welcome</span>

component.scss 的内容

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

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 class="car-models bmw">Welcome</span>
    // than should the backgroundcolor of the text blue;
    // if <span class="car-models audi">Welcome</span> 
    // than should the background color of the text yellow

  });

Answer 1

干得好

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');
});

在 (5) 步骤中，我使用了colorsMap 来获取颜色名称因为getComputedStyle 返回背景颜色为RGB价值，但我们需要颜色名称反而

这里是colorsMap的定义，直接在describe函数里面添加

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

如果您不喜欢colorsMap，那么您必须更改您的scss颜色名称至RGB

奖金提示

提示 1 - 使用 By.css 而不是 querySelector 为什么？ 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;

提示 2 - 使用 data-test 或 data-test-id 查询元素，因为 CSS 类将来可能会更改并且您的测试将失败

<span data-test="carModel" class="car-models {{ car }}">Welcome</span>

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

Answer 2

谢谢你的解决方案。我试了一下，发现这辆车是只读的（功能）。所以我不能在我的测试用例中设置“compotent.car”。 设置“汽车”的最佳方法是什么。编写 setter 函数或操纵 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：我将测试提示2。谢谢。

此致