Question

我正在为一些现有代码编写一些茉莉花测试，并且无法找到模拟导入枚举的方法（以保持测试隔离）。我试图检查查找的枚举标签是否符合预期的html页面上的标签。我对实际的查找值不感兴趣，只是标签在右页的页面上。

现有代码

labels.service.ts

export enum LabelEnum {
  common_Greeting,
  Common_ButtonClose,
  Common_ButtonSave
}

export LabelsService {
    public Get(enumLabelId: string): string {
        return "This would come from external API for content management";
    }
}

some.component.ts

import { Component, OnInit } from "@angular/core";
import { LabelEnum, LabelsService } from "./labels.service";

@Component({
  selector: 'my-app',
  templateUrl: './some.component.html',
  providers: [LabelsService]
})
export class SomeComponent implements OnInit {
  greetingLabel: string;

  constructor(
    public labelsService: LabelsService) { }

  ngOnInit(): void {    
    this.greetingLabel = this.labelsService.Get(LabelEnum.Common_Greeting);
  }
}

some.component.html

<div id="somePage">
  <div>
    <h1>{{greetingLabel}}</h1>
  </div>
</div>

茉莉花测试

some.component.spec.ts

import { async, ComponentFixture, TestBed } from "@angular/core/testing";
import { DebugElement, Injectable } from '@angular/core';
import { LabelEnum, LabelsService } from "./labels.service";
import { SomeComponent } from "./some.component";

enum LabelEnumMock {
    Common_Greeting
}

class LabelsServiceStub {
    Get(id: string): string {
        return id;
    }
}

describe('SomeComponent', () => {
    let component: SomeComponent;
    let fixture: ComponentFixture<SomeComponent>;
    let de: DebugElement;
    let el: HTMLElement;    
    let labelsService;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [SomeComponent],
            providers: [
                { provide: LabelsService, useClass: LabelsServiceStub },
                { provide: LabelEnum, useValue: LabelEnumMock }
            ]
        })
            .compileComponents()
            .then(() => {
                this.fixture = TestBed.createComponent(SomeComponent);              
                this.labelsService = this.fixture.debugElement.injector.get(LabelsService);
                this.el = this.fixture.nativeElement;
                this.de = this.fixture.debugElement;
            });
    }));

    afterEach(() => {
        this.fixture = null;        
        this.stringsService = null;
        this.el = null;
        this.de = null;
    });

    describe('after initialised', () => {       
        it('renders expected labels', () => {
            this.fixture.detectChanges();
            expect(this.el.querySelector('h1').innerText).toBe(LabelEnumMock.Common_Greeting);
        });
    });
});

我开始得到这个工作的一个人，不幸的是它没有运行。

Demo

Answer 1

枚举不能像这样工作。我们可以将枚举与明确名称为key的数组进行比较：

export enum LabelEnum {
  common_Greeting, 
  Common_ButtonClose,
  Common_ButtonSave
}
console.log(LabelEnum.common_Greeting) //=> 0 (it's a number not a string)
console.log(LabelEnum.Common_ButtonClose) //=> 1
console.log(LabelEnum.Common_ButtonSave) //=> 2

但您可以为枚举条目指定值：

enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}
console.log(Direction.Up) //=> UP
console.log(Direction.Left) //=> LEFT

我认为你的标签服务也很糟糕，我建议：

export LabelsService {
    public Get(enumLabelId: LabelEnum): string {
        return enumLabelId;
    }
}

就个人而言，我没有按照你的方式测试服务。我想我只是测试得到的回报：

it("Should return the converted value for common greeting label", () => {
   expect(labelsService.get(LabelEnum.common_Greeting)).toEqual(LabelEnum.common_Greeting)
})

在这种情况下，模拟和存根代码没有用，因为它是你自己的逻辑而不是第三部分，尤其是枚举。

在角度组件中，我只显示Get

的返回值

你如何用茉莉花模拟导入的枚举

现有代码

茉莉花测试

1 个答案: