如何编写Angular 2 Meta标签的Jasmine单元测试

Let's fix your test errors step by step. Here's what's going wrong and how to resolve it:

Key Issues in Your Original Tests #

1. Incorrect comparison in first test: meta.getTag() returns an HTMLMetaElement object, not a string. Comparing it directly to 'My keywords' causes a type mismatch.
2. Wrong assignment and selector in second test:
   • You assigned the Meta service to metatags (typed as HTMLMetaElement[]), which is invalid.
   • The selector httpEquiv=X-UA-Compatible uses camelCase, but HTML attributes use hyphens (http-equiv), so the tag wasn't being found.
   • getTags() is a method of the Meta service, not of an array of elements.
3. Unsupported 'title' attribute: Angular's Meta service doesn't support setting non-standard attributes like title on meta tags—this property will be ignored when adding the tag.

Corrected Test Code #

import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import { BrowserTestingModule } from '@angular/platform-browser/testing';
import { Meta } from '@angular/platform-browser';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  let meta: Meta;
  let comp: AppComponent;
  let fixture: ComponentFixture<AppComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent],
      imports: [BrowserTestingModule], // Provides the Meta service correctly
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    comp = fixture.componentInstance;
    meta = TestBed.inject(Meta); // Use inject instead of deprecated get
    fixture.detectChanges(); // Trigger component initialization
  });

  it(`should have a meta tag with name='keywords' and content='My keywords'`, () => {
    const keywordTag = meta.getTag('name=keywords');
    expect(keywordTag).toBeTruthy(); // Verify the tag exists
    expect(keywordTag?.content).toBe('My keywords'); // Check the content property
  });

  it(`should have a meta tag with http-equiv='X-UA-Compatible' and content='IE=edge'`, () => {
    const uaTags = meta.getTags('http-equiv=X-UA-Compatible');
    expect(uaTags.length).toBe(1); // Ensure exactly one tag was added
    const uaTag = uaTags[0];
    expect(uaTag.content).toBe('IE=edge');

    // Note: The 'title' attribute won't be set here—Angular's Meta service doesn't support non-standard attributes
    // If you need custom attributes, you'd need to manipulate the DOM directly (not recommended)
  });
});

Additional Fixes Explained #

• Added BrowserTestingModule: This imports Angular's browser testing utilities, including the correct provider for the Meta service—no need to manually provide it anymore.
• Used TestBed.inject: Replaced the deprecated TestBed.get with the recommended inject method.
• Corrected selectors: Used http-equiv (hyphenated) instead of httpEquiv to match the actual HTML attribute name.
• Properly checked tag existence: Added expect(keywordTag).toBeTruthy() to ensure the tag was created before accessing its properties.

Note on the 'title' Attribute #

If you intended to set a custom title attribute on the meta tag, Angular's Meta service won't handle this since it's not a standard meta tag attribute. You'd need to either:

1. Remove the title property from your component code (since it's not being used), or
2. Manually create the meta element using document.createElement('meta') and append it to the document head (bypassing the Meta service).

内容的提问来源于stack exchange，提问作者Alex Slav