Angular 如何测试需要位置的组件

# Angular 组件位置测试指南

typescript
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { YourComponent } from './your-component.component';
describe('YourComponent', () => {
  let fixture: ComponentFixture;
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [YourComponent],
    });
    fixture = TestBed.createComponent(YourComponent);
    fixture.detectChanges();
  });
  it('should have a specific element in the correct position', () => {
    const specificElement = fixture.debugElement.query(By.css('.your-specific-class'));
    expect(specificElement).toBeTruthy();
  });
});

typescript
// your-component.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-your-component',
  template: `
    
Title
    
Content
  `,
  styleUrls: ['./your-component.component.css'],
})
export class YourComponent {}

css
/* your-component.component.css */
.title {
  font-size: 24px;
}
.content {
  font-size: 16px;
}

typescript
// your-component.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { YourComponent } from './your-component.component';
describe('YourComponent', () => {
  let fixture: ComponentFixture;
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [YourComponent],
    });
    fixture = TestBed.createComponent(YourComponent);
    fixture.detectChanges();
  });
  it('should have title and content in the correct position', () => {
    const titleElement = fixture.debugElement.query(By.css('.title'));
    const contentElement = fixture.debugElement.query(By.css('.content'));
    // Assert that the title comes before the content
    expect(titleElement.nativeElement.compareDocumentPosition(contentElement.nativeElement) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
  });
});