我们可以使用Angular的异步加载模块来解决这个问题。我们可以使用async和await来等待模板的加载完成，然后再加载数据。下面是一个示例：

import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  template: `
    

      // display data
    
  `
})
class TestComponent {
  loading: boolean = true;
  data: any;

  async ngOnInit() {
    await this.loadTemplate();
    this.loadData();
  }

  async loadTemplate() {
    // Load template using async/await
    this.loading = false;
  }

  async loadData() {
    // Load data using async/await
    this.data = {};
  }
}

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

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ TestComponent ]
    })
    .compileComponents();
  }));

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

  it('should load the template first before loading data', async() => {
    spyOn(component, 'loadTemplate').and.callThrough();
    spyOn(component, 'loadData').and.callThrough();

    await component.ngOnInit();

    expect(component.loading).toBe(false);
    expect(component.loadTemplate).toHaveBeenCalled();
    expect(component.loadData).toHaveBeenCalled();

    fixture.detectChanges();

    const div = fixture.debugElement.query(By.css('div'));
    expect(div).toBeDefined();
  });
});

在上面的代码中，我们创建了一个名为TestComponent的组件，该组件包含一个加载模板和加载数据的方法。此外，我们通过在ngOnInit生命周期钩子中使用async和await来确保我们首先加载模板，然后再加载数据。

我们也编写了一个测试，以确保我们的模板在加载数据之前被加载。在测试中，我们使用spyOn来跟踪