TypeScript theme.NbUserComponent類代碼示例

describe('NbUserComponent', () => {
  let fixture: ComponentFixture<NbUserComponent>;
  let userComponent: NbUserComponent;
  let userElement: HTMLElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ NbUserModule ],
      providers: [ NbLayoutDirectionService ],
    });

    fixture = TestBed.createComponent(NbUserComponent);
    userComponent = fixture.componentInstance;
    userElement = fixture.nativeElement;
    fixture.detectChanges();
  });

  it('should render name if set', () => {
    const name = 'SomeName';
    userComponent.name = name;
    fixture.detectChanges();

    const nameElement = userElement.querySelector(NAME_SELECTOR);
    expect(nameElement).not.toEqual(null);
    expect(nameElement.textContent).toEqual(name);
  });

  it('should not render name if showName set to false', () => {
    const name = 'SomeName';
    userComponent.name = name;
    userComponent.showName = false;
    fixture.detectChanges();

    const nameElement = userElement.querySelector(NAME_SELECTOR);
    expect(nameElement).toEqual(null);
  });

  it('should not render name if set to empty string', () => {
    userComponent.name = '';
    fixture.detectChanges();

    const nameElement = userElement.querySelector(NAME_SELECTOR);
    expect(nameElement).toEqual(null);
  });

  it('should render title if set', () => {
    const title = 'SomeTitle';
    userComponent.title = title;
    fixture.detectChanges();

    const titleElement = userElement.querySelector(TITLE_SELECTOR);
    expect(titleElement).not.toEqual(null);
    expect(titleElement.textContent).toEqual(title);
  });

  it('should not render title if showTitle set to false', () => {
    const title = 'SomeName';
    userComponent.title = title;
    userComponent.showTitle = false;
    fixture.detectChanges();

    const titleElement = userElement.querySelector(TITLE_SELECTOR);
    expect(titleElement).toEqual(null);
  });

  it('should not render title if set to empty string', () => {
    const title = '';
    userComponent.title = title;
    fixture.detectChanges();

    const titleElement = userElement.querySelector(TITLE_SELECTOR);
    expect(titleElement).toEqual(null);
  });

  it(`should show initials if picture isn't set`, () => {
    const name = 'Name Name';
    userComponent.name = name;
    fixture.detectChanges();

    const initialsElement = userElement.querySelector(INITIALS_SELECTOR);
    expect(initialsElement.textContent.trim()).toEqual('NN');
  });

  it(`should not show initials if picture is set`, () => {
    userComponent.name = 'Name';
    userComponent.title = 'Title';
    userComponent.picture = '/';
    fixture.detectChanges();

    expect(userElement.querySelector(INITIALS_SELECTOR)).toEqual(null);
  });

  it('should set color of initials if set color property is set', () => {
    const color = 'red';
    userComponent.color = color;
    fixture.detectChanges();

    const initialsStyle = (userElement.querySelector(INITIALS_SELECTOR) as HTMLElement).style;
    expect(initialsStyle.backgroundColor).toEqual(color);
  });
//.........這裏部分代碼省略.........

    it(`should return two letters for two first words letters if name set to more then two words`, () => {
      userComponent.name = 'Name Name Name';
      expect(userComponent.getInitials()).toEqual('NN');

      userComponent.name = 'Name Name Name Name Name Name Name Name Name';
      expect(userComponent.getInitials()).toEqual('NN');
    });