Angular 角度测试如何模拟ActivatedRoute数据

我在模拟ActivatedRoute数据属性时遇到了一个很大的问题。无论我在做什么，它都会以错误消息结束：

error:：Property data没有访问类型get

。将存根常量移动到单独的模拟类也无法解决此问题。我发现这应该是直截了当的，但我已经为此奋斗了几天了

组成部分

@Component({
  selector: 'app-notifications',
  templateUrl: './notifications.component.html',
  styleUrls: ['./notifications.component.css']
})
export class NotificationsComponent implements OnInit {
  notifications: NotificationEntry[];

  constructor(
    private route: ActivatedRoute,
    private modalService: ModalService,
    private messageBoxService: MessageBoxService,
    private notificationsService: NotificationsService
  ) {}

  ngOnInit() {
    this.route.data.subscribe(
      (data: { notifications: NotificationEntry[] }) => {
        this.notifications = data.notifications;
      }
    );
  }
}

组件规范

describe('NotificationsComponent', () => {
  let component: NotificationsComponent;
  let fixture: ComponentFixture<NotificationsComponent>;

  const registryVersionBasicData = new RegistryVersionBasicData(
    false,
    'versionId',
    new JsonDate('Unspecified', 631894104000000000),
    'user',
    'comment'
  )

  const notifications = new NotificationEntry(
    new JsonDate('Unspecified', 631894104000000000),
    'summary',
    'message',
    NotificationEntityType.StressScenario,
    'instance name',
    'instance key',
    registryVersionBasicData,
    'additional information')

  const notificationsArray = [notifications]

  beforeEach(() => {
    const activatedRouteStub = { data: of({ notifications: notificationsArray }) };
    const modalServiceStub = {};
    const messageBoxServiceStub = {};
    const notificationsServiceStub = {};

    TestBed.configureTestingModule({
      schemas: [NO_ERRORS_SCHEMA],
      declarations: [NotificationsComponent, OrderPipe, RenderDatePipe, VersionInfoPipe],
      providers: [
        { provide: ActivatedRoute, useValue: activatedRouteStub },
        { provide: ModalService, useValue: modalServiceStub },
        { provide: MessageBoxService, useValue: messageBoxServiceStub },
        { provide: NotificationsService, useValue: notificationsServiceStub },
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(NotificationsComponent);
    component = fixture.componentInstance;
  });

  it('can load instance', () => {
    expect(component).toBeTruthy();
  });

  describe('ngOnInit', () => {
    it('should get notifications entry', () => {
      const activatedRouteStub = TestBed.get(ActivatedRoute);
      spyOnProperty(activatedRouteStub, 'data')

      component.ngOnInit();

      expect(component.notifications).toEqual(notificationsArray)
    });
  });
});

description（'NotificationsComponent'，（）=>{
let组件：NotificationsComponent；
let夹具：组件夹具；
const registryVersionBasicData=新的registryVersionBasicData(
假,，
“versionId”，
新JsonDate（“未指定”，631894104000000000），
“用户”，
“评论”
)
const notifications=新通知条目(
新JsonDate（“未指定”，631894104000000000），
"摘要",，
"讯息",，
NotificationEntityType.StressScenario，
'实例名称'，
'实例键'，
registryVersionBasicData，
"其他资料")
const notificationsArray=[通知]
在每个之前（（）=>{
const activatedRouteStub={data:of（{notifications:notificationsArray}）}；
const modalServiceStub={}；
const messageBoxServiceStub={}；
const notificationsServiceStub={}；
TestBed.configureTestingModule({
模式：[无错误模式]，
声明：[NotificationsComponent、OrderPipe、RenderDatePipe、VersionInfoPipe]，
供应商：[
{提供：ActivatedRoute，useValue:activatedRouteStub}，
{provide:ModalService，useValue:modalServiceStub}，
{提供：MessageBoxService，useValue:messageBoxServiceStub}，
{提供：NotificationsService，使用值：NotificationsService存根}，
]
}).compileComponents（）；
fixture=TestBed.createComponent（NotificationsComponent）；
组件=fixture.componentInstance；
});
它（'可以加载实例'，（）=>{
expect（component.toBeTruthy（）；
});
描述（'ngOnInit'，（）=>{
它（'应该获取通知条目'，（）=>{
const activatedRouteStub=TestBed.get（ActivatedRoute）；
spyOnProperty（activatedRouteStub，“数据”）
组件。ngOnInit（）；
expect（component.notifications）.toEqual（notificationsArray）
});
});
});

如下定义您的activatedRouteStub-

class ActivatedRouteStub {
    private _data = new BehaviorSubject(notifications);
    get data() {
        return this._data;
    }
    set data(notifications: NotificationEntry[]) {
        this.data.next(notifications)
    }
}

然后在提供者中使用它作为

{ provide: ActivatedRoute, useValue: new ActivatedRouteStub()}

现在您可以通过执行以下操作来更改数据

const activeRoute = testBed.get(ActivatedRoute);
activeRoute.data = [new Notification()];

。。然后，在组件提供程序中使用此值：

{ provide: ActivatedRoute, useValue: route }

。。作为ActivatedRoute的原始模拟。然后，您的测试用例可以如下所示（不需要测试台）：

const route = { data: of({ notifications: [notifications] }) };

{ provide: ActivatedRoute, useValue: route }

  describe('ngOnInit', () => {
    it('should get notifications entry', () => {
      component.ngOnInit();
      expect(component.notifications).toEqual([notifications]);
    });
  });