ts-mockito#spy TypeScript Examples

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

  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        declarations: [
          LgAccordionPanelHeadingComponent,
          MockComponents(LgHeadingComponent, LgIconComponent),
        ],
      }).compileComponents();
    }),
  );

  beforeEach(() => {
    fixture = TestBed.createComponent(LgAccordionPanelHeadingComponent);
    component = fixture.componentInstance;
    component.headingLevel = 2;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  describe('#toggle', () => {
    beforeEach(() => {
      triggerElement = fixture.debugElement.query(
        By.css('.lg-accordion__heading-toggle'),
      );
    });

    describe('when the accordion item is toggled open', () => {
      it('should set \'isActive\' to false', () => {
        component.isActive = true;
        component.toggle();

        expect(component.isActive).toBe(false);
      });

      it('should set the \'active\' class', () => {
        expect(
          triggerElement.nativeElement.classList.contains(
            'lg-accordion__heading-toggle--active',
          ),
        ).toBe(false);

        triggerElement.nativeElement.click();
        fixture.detectChanges();

        expect(
          triggerElement.nativeElement.classList.contains(
            'lg-accordion__heading-toggle--active',
          ),
        ).toBe(true);
      });

      it('should set the `aria-expanded` attribute to true', () => {
        expect(triggerElement.attributes['aria-expanded']).toBe('false');

        triggerElement.nativeElement.click();
        fixture.detectChanges();

        expect(triggerElement.attributes['aria-expanded']).toBe('true');
      });
    });

    describe('when the accordion item is toggled close', () => {
      it('should set \'isActive\' to true', () => {
        component.isActive = false;
        component.toggle();

        expect(component.isActive).toBe(true);
      });

      it('should remove the `active` class', () => {
        triggerElement.nativeElement.click();
        fixture.detectChanges();

        expect(
          triggerElement.nativeElement.classList.contains(
            'lg-accordion__heading-toggle--active',
          ),
        ).toBe(true);

        triggerElement.nativeElement.click();
        fixture.detectChanges();

        expect(
          triggerElement.nativeElement.classList.contains(
            'lg-accordion__heading-toggle--active',
          ),
        ).toBe(false);
      });

      it('should set the `aria-expanded` attribute to false', () => {
        triggerElement.nativeElement.click();
        fixture.detectChanges();

        expect(triggerElement.attributes['aria-expanded']).toBe('true');

        triggerElement.nativeElement.click();
        fixture.detectChanges();

        expect(triggerElement.attributes['aria-expanded']).toBe('false');
      });
    });

    it('should emit an event with the value of \'isActive\'', () => {
      const componentEventSpy = spy(component.toggleActive);

      component.toggle();

      verify(componentEventSpy.emit(true)).once();

      expect().nothing();
    });
  });
});

describe('LgInputFieldComponent', () => {
  let fixture: MockedComponentFixture<LgInputFieldComponent>;
  let component: LgInputFieldComponent;
  let labelInstance: LgLabelComponent;
  let inputDirectiveInstance: LgInputDirective;
  let inputFieldDebugElement: DebugElement;
  let inputWrapperDebugElement: DebugElement;
  let errorStateMatcherMock: LgErrorStateMatcher;
  let labelDebugElement: DebugElement;

  const errorId = 'test-error-id';
  const hintId = 'test-hint-id';
  const prefixId = 'prefix-id';
  const suffixId = 'suffix-id';

  const suffixText = 'suffix';
  const prefixText = 'prefix';

  beforeEach(waitForAsync(() => {
    errorStateMatcherMock = mock(LgErrorStateMatcher);

    TestBed.configureTestingModule({
      imports: [ FormsModule, ReactiveFormsModule ],
      declarations: [
        LgInputFieldComponent,
        MockComponents(
          LgValidationComponent,
          LgLabelComponent,
          LgHintComponent,
          LgButtonComponent,
        ),
        MockDirectives(
          LgFocusDirective,
          LgInputDirective,
          LgSuffixDirective,
          LgPrefixDirective,
        ),
      ],
      providers: [
        {
          provide: LgErrorStateMatcher,
          useFactory: () => instance(errorStateMatcherMock),
        },
      ],
    }).compileComponents();
  }));

  function renderComponent({
    block = false,
    hasPrefix = false,
    hasSuffix = false,
    showLabel = true,
  }) {
    fixture = MockRender(`
      <lg-input-field [block]="${block}" [showLabel]="${showLabel}">
        Label
        <input lgInput />
        <lg-hint id="${hintId}">Hint</lg-hint>
        <lg-validation id="${errorId}">Error</lg-validation>
        ${hasPrefix && `<span lgPrefix id="${prefixId}">${prefixText}</span>`}
        ${hasSuffix && `<span lgSuffix id="${suffixId}">${suffixText}</span>`}
      </lg-input-field>
    `);

    component = fixture.point.componentInstance;
    fixture.detectChanges();

    inputFieldDebugElement = fixture.debugElement.query(
      By.directive(LgInputFieldComponent),
    );

    labelInstance = fixture.debugElement.query(
      By.directive(LgLabelComponent),
    ).componentInstance;

    inputDirectiveInstance = ngMocks.get(ngMocks.find('input'), LgInputDirective);

    inputWrapperDebugElement = fixture.debugElement.query(
      By.css('.lg-input-field__inputs'),
    );

    labelDebugElement = fixture.debugElement.query(By.directive(LgLabelComponent));
  }

  describe('markup', () => {
    beforeEach(() => {
      renderComponent({});
    });

    it('adds the for attribute to the label', () => {
      expect(labelInstance.for).toEqual(inputDirectiveInstance.id);
    });

    it('links the hint to the input field with the correct aria attributes', () => {
      expect(inputDirectiveInstance.ariaDescribedBy).toContain(hintId);
    });

    it('links the error to the input field with the correct aria attributes', () => {
      expect(inputDirectiveInstance.ariaDescribedBy).toContain(errorId);
    });

    it('combines both the hint and error ids to create the aria described attribute', () => {
      expect(inputDirectiveInstance.ariaDescribedBy).toBe(`${hintId} ${errorId}`);
    });
  });

  describe('showLabel', () => {
    it('doesn\'t add the visually hidden class if the showLabel property is true', () => {
      renderComponent({ showLabel: true });

      expect(labelDebugElement.nativeElement.getAttribute('class')).not.toContain(
        'lg-visually-hidden',
      );
    });

    it('adds the visually hidden class if the showLabel property is false', () => {
      renderComponent({ showLabel: false });

      expect(labelDebugElement.nativeElement.getAttribute('class')).toContain(
        'lg-visually-hidden',
      );
    });
  });

  describe('block', () => {
    beforeEach(() => {
      renderComponent({ block: true });
    });

    it('sets the input element to block if block property is set', () => {
      expect(inputDirectiveInstance.block).toBe(true);
    });

    it('adds the input element block class if block property is set', () => {
      expect(inputFieldDebugElement.nativeElement.getAttribute('class')).toContain(
        'lg-input-field--block',
      );
    });
  });

  describe('focus', () => {
    beforeEach(() => {
      renderComponent({});
    });

    it('adds a focus class when the input is focused', () => {
      inputWrapperDebugElement.triggerEventHandler('focusin', {
        target: { nodeName: 'INPUT' },
      });

      fixture.detectChanges();

      expect(inputFieldDebugElement.nativeElement.getAttribute('class')).toContain(
        'lg-input-field--focus',
      );
    });

    it('does not add a focus class if a child other than the input itself is focused', () => {
      inputWrapperDebugElement.triggerEventHandler('focusin', {
        target: { nodeName: 'BUTTON' },
      });

      fixture.detectChanges();

      expect(inputFieldDebugElement.nativeElement.getAttribute('class')).not.toContain(
        'lg-input-field--focus',
      );
    });

    it('removes a focus class when the input wrapper is focused out', () => {
      inputWrapperDebugElement.triggerEventHandler('focusin', {
        target: { nodeName: 'INPUT' },
      });

      fixture.detectChanges();

      expect(inputFieldDebugElement.nativeElement.getAttribute('class')).toContain(
        'lg-input-field--focus',
      );

      inputWrapperDebugElement.triggerEventHandler('focusout', {});
      fixture.detectChanges();

      expect(inputFieldDebugElement.nativeElement.getAttribute('class')).not.toContain(
        'lg-input-field--focus',
      );
    });
  });

  describe('hover', () => {
    beforeEach(() => {
      renderComponent({});
      inputWrapperDebugElement.triggerEventHandler('mouseenter', {});
      fixture.detectChanges();
    });

    it('adds a hover class to the input wrapper when the input is moused over', () => {
      expect(inputFieldDebugElement.nativeElement.getAttribute('class')).toContain(
        'lg-input-field--hover',
      );
    });

    it('removes a hover class from the input wrapper when the input is moused out', () => {
      expect(inputFieldDebugElement.nativeElement.getAttribute('class')).toContain(
        'lg-input-field--hover',
      );

      inputWrapperDebugElement.triggerEventHandler('mouseleave', {});
      fixture.detectChanges();

      expect(inputFieldDebugElement.nativeElement.getAttribute('class')).not.toContain(
        'lg-input-field--hover',
      );
    });
  });

  describe('error', () => {
    let componentSpy: LgInputFieldComponent;

    beforeEach(() => {
      renderComponent({});
      componentSpy = spy(component);
      fixture.detectChanges();
    });

    it('adds an error class to the input wrapper when the control is invalid', () => {
      when(componentSpy.errorClass).thenReturn(true);
      fixture.detectChanges();

      expect(inputFieldDebugElement.nativeElement.getAttribute('class')).toContain(
        'lg-input-field--error',
      );
    });

    it('does not add the error class to the input wrapper when the control is valid', () => {
      when(componentSpy.errorClass).thenReturn(false);
      fixture.detectChanges();

      expect(inputFieldDebugElement.nativeElement.getAttribute('class')).not.toContain(
        'lg-input-field--error',
      );
    });
  });

  describe('suffixes', () => {
    beforeEach(() => {
      renderComponent({ hasSuffix: true });
    });

    it('renders the suffix into the suffix wrapper', () => {
      expect(inputWrapperDebugElement.nativeElement.innerText).toContain(suffixText);
    });

    it('links the hint to the input field with the correct aria attributes', () => {
      expect(inputDirectiveInstance.ariaDescribedBy).toContain(suffixId);
    });
  });

  describe('prefixes', () => {
    beforeEach(() => {
      renderComponent({ hasPrefix: true });
    });

    it('renders the prefix into the prefix wrapper', () => {
      expect(inputWrapperDebugElement.nativeElement.innerText).toContain(prefixText);
    });

    it('links the hint to the input field with the correct aria attributes', () => {
      expect(inputDirectiveInstance.ariaDescribedBy).toContain(prefixId);
    });
  });
});

describe('LgRadioButtonComponent', () => {
  let component: LgRadioButtonComponent;
  let testComponent: TestRadioButtonComponent;
  let fixture: ComponentFixture<LgRadioButtonComponent>;
  let testFixture: ComponentFixture<TestRadioButtonComponent>;
  let errorStateMatcherMock: LgErrorStateMatcher;
  let radioGroupMock: LgRadioGroupComponent;
  let hintDebugElement: DebugElement;
  let inputDebugElement: DebugElement;

  beforeEach(
    waitForAsync(() => {
      errorStateMatcherMock = mock(LgErrorStateMatcher);
      radioGroupMock = mock(LgRadioGroupComponent);
      when(radioGroupMock.name).thenReturn('color');
      when(radioGroupMock.variant).thenReturn('segment');

      TestBed.configureTestingModule({
        imports: [ FormsModule, ReactiveFormsModule ],
        declarations: [
          LgRadioButtonComponent,
          LgRadioGroupComponent,
          TestRadioButtonComponent,
          MockComponents(LgHintComponent),
        ],
        providers: [
          {
            provide: LgRadioGroupComponent,
            useFactory: () => instance(radioGroupMock),
          },
          {
            provide: LgErrorStateMatcher,
            useFactory: () => instance(errorStateMatcherMock),
          },
        ],
      }).compileComponents();

      fixture = TestBed.createComponent(LgRadioButtonComponent);
      component = fixture.componentInstance;

      fixture.detectChanges();

      testFixture = TestBed.createComponent(TestRadioButtonComponent);
      testComponent = testFixture.componentInstance;

      testFixture.detectChanges();

      inputDebugElement = testFixture.debugElement.queryAll(By.css('input'))[1];
      hintDebugElement = testFixture.debugElement.query(By.directive(LgHintComponent));
    }),
  );

  it('sets its name from the radio group name', () => {
    expect(component.name).toBe('color');
  });

  describe('the variant', () => {
    it('should be set based on the radio group variant', () => {
      expect(component.variant).toBe('segment');
    });

    it('should set the correct class modifier', () => {
      expect(fixture.debugElement.nativeElement.getAttribute('class')).toContain(
        'lg-radio-button--segment',
      );

      when(radioGroupMock.variant).thenReturn('radio');
      fixture = TestBed.createComponent(LgRadioButtonComponent);
      component = fixture.componentInstance;

      expect(fixture.debugElement.nativeElement.getAttribute('class')).not.toContain(
        'lg-radio-button--segment',
      );
    });
  });

  // https://github.com/NagRock/ts-mockito/issues/120
  xit('sets the radio group value when checked', () => {
    component.value = 'red';
    const radio = fixture.debugElement.query(By.css('input'));

    radio.triggerEventHandler('click', null);
    fixture.detectChanges();
    verify(radioGroupMock.value).called();

    expect().nothing();
  });

  it('sets the disabled property when the radio group is disabled', () => {
    when(radioGroupMock.disabled).thenReturn(true);
    fixture.detectChanges();

    expect(component.disabled).toBe(true);
  });

  // https://github.com/NagRock/ts-mockito/issues/120
  xit('marks the radioGroup as touched if the radio is checked', () => {
    const radio = fixture.debugElement.query(By.css('input'));

    radio.triggerEventHandler('click', null);
    fixture.detectChanges();
    verify(radioGroupMock.onTouched()).once();

    expect().nothing();
  });

  it('sets the aria-invalid attribute to false when the input is valid', () => {
    when(errorStateMatcherMock.isControlInvalid(anything(), anything())).thenReturn(
      false,
    );

    fixture.detectChanges();
    const radio = fixture.debugElement.query(By.css('input'));

    expect(radio.nativeElement.getAttribute('aria-invalid')).toBe('false');
  });

  it('adds the error class and set aria-invalid to true if the form field is invalid', () => {
    when(errorStateMatcherMock.isControlInvalid(anything(), anything())).thenReturn(true);
    fixture.detectChanges();

    expect(fixture.debugElement.nativeElement.className).toContain(
      'lg-radio-button--error',
    );

    const radio = fixture.debugElement.query(By.css('input'));

    expect(radio.nativeElement.getAttribute('aria-invalid')).toBe('true');
  });

  it('links the hint to the input with the correct aria attributes', () => {
    expect(testComponent).not.toBe(null);
    expect(hintDebugElement.nativeElement.getAttribute('id').length).not.toEqual(0);

    expect(inputDebugElement.nativeElement.getAttribute('aria-describedBy')).toContain(
      hintDebugElement.nativeElement.getAttribute('id'),
    );
  });

  it('should emit an event when #onBlur is called', () => {
    const blurEmitterSpy = spy(component.blur);

    component.onBlur(new Event(''));
    verify(blurEmitterSpy.emit(anything())).once();
  });
});

describe('LgModalComponent', () => {
  let component: LgModalComponent;
  let cdrMock: ChangeDetectorRef;
  let fixture: MockedComponentFixture<LgModalComponent>;
  let modalServiceMock: LgModalService;
  const id = 'test-1';
  const isModalOpen$ = new BehaviorSubject<boolean>(false);

  beforeEach(
    waitForAsync(() => {
      cdrMock = mock(ChangeDetectorRef);
      modalServiceMock = mock(LgModalService);

      TestBed.configureTestingModule({
        declarations: [
          LgModalComponent,
          MockComponents(LgModalHeaderComponent, LgModalBodyComponent),
        ],
        imports: [ MockModule(LgCardModule), MockModule(LgFocusModule) ],
        providers: [
          { provide: LgModalService, useValue: instance(modalServiceMock) },
          { provide: ChangeDetectorRef, useValue: instance(cdrMock) },
        ],
      }).compileComponents();

      when(modalServiceMock.isOpen$(anything())).thenReturn(isModalOpen$);
    }),
  );

  beforeEach(() => {
    fixture = MockRender(`
      <lg-modal [id]="id">
        <lg-modal-header></lg-modal-header>
        <lg-modal-body></lg-modal-body>
      </lg-modal>
    `);

    component = fixture.debugElement.children[0].componentInstance;
    component.id = id;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  describe('on init', () => {
    it('should update isOpen', () => {
      isModalOpen$.next(true);

      expect(component.isOpen).toBe(true);
    });

    it('should add the overflow style to the body and emit an open event if the modal is open', () => {
      const openEmitterSpy = spy(component.open);

      isModalOpen$.next(true);

      verify(openEmitterSpy.emit()).once();

      fixture.detectChanges();
      const bodyEl: HTMLBodyElement = document.querySelector('body');

      expect(bodyEl.style.overflow).toEqual('hidden');
    });

    it('should remove the overflow style on the body and emit a closed event if the modal is close', () => {
      const closedEmitterSpy = spy(component.closed);

      isModalOpen$.next(false);

      verify(closedEmitterSpy.emit()).once();

      fixture.detectChanges();
      const bodyEl: HTMLBodyElement = document.querySelector('body');

      expect(bodyEl.style.overflow).toEqual('');
    });

    it('should detect changes', () => {
      const cdrDetectChangesSpy = spyOn(component['cdr'], 'detectChanges');

      isModalOpen$.next(true);

      expect(cdrDetectChangesSpy).toHaveBeenCalledTimes(1);
    });
  });

  it('should update the modal header and body id on #ngAfterContentInit', () => {
    component.ngAfterContentInit();

    expect(component.modalHeaderComponent.id).toEqual('lg-modal-header-test-1');
    expect(component.modalBodyComponent.id).toEqual('lg-modal-body-test-1');
  });

  describe('on keydown', () => {
    const escEvent = new KeyboardEvent('keydown', {
      key: keyName.KEY_ESCAPE,
    });

    it('should close the modal when escape key is pressed and the modal is open', () => {
      component.isOpen = true;
      component.onKeydown(escEvent);

      verify(modalServiceMock.close(id)).once();

      expect().nothing();
    });

    it('shouldn\'t close the modal when any other key is pressed', () => {
      component.isOpen = true;
      const event = new KeyboardEvent('keydown', {
        key: keyName.KEY_UP,
      });

      component.onKeydown(event);

      verify(modalServiceMock.close(id)).never();

      expect().nothing();
    });

    it('shouldn\'t close the modal when the modal is already closed', () => {
      component.isOpen = false;
      component.onKeydown(escEvent);

      verify(modalServiceMock.close(id)).never();

      expect().nothing();
    });
  });

  describe('clicking on the modal panel', () => {
    it('should stop the propagation of the event', () => {
      const event = new Event('click');

      spyOn(event, 'stopPropagation').and.callThrough();
      component.onModalClick(event);

      expect(event.stopPropagation).toHaveBeenCalledTimes(1);
    });
  });
});

describe('LgModalService', () => {
  const id = 'test-1';
  let service: LgModalService;
  let serviceSpy: LgModalService;
  let subscription: Subscription;

  beforeEach(
    waitForAsync(() => {
      service = TestBed.inject(LgModalService);
    }),
  );

  beforeEach(() => {
    serviceSpy = spy(service);
    service.add(id);
  });

  afterEach(() => {
    subscription?.unsubscribe();
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  it('should push true to the state of the specific modal when calling the #open fn', (done: DoneFn) => {
    service.open(id);

    subscription = service['states'].get(id).subscribe(data => {
      expect(data).toBeTrue();
      done();
    });
  });

  it('should push false to the state of the specific modal when calling the #close fn', (done: DoneFn) => {
    service.close(id);

    subscription = service['states'].get(id).subscribe(data => {
      expect(data).toBeFalse();
      done();
    });
  });

  describe('isOpen$', () => {
    it('should return the state observable for the specific modal', (done: DoneFn) => {
      service['states'].get(id).next(true);

      subscription = service.isOpen$(id).subscribe(data => {
        expect(data).toBeTrue();
        done();
      });
    });

    it('should call #add when the modal doesn\'t exist', (done: DoneFn) => {
      subscription = service.isOpen$('test-2').subscribe(data => {
        verify(serviceSpy.add('test-2')).once();

        expect(data).toBeFalse();
        done();
      });
    });
  });

  it('should add a new item to the map when calling #add', () => {
    expect(service['states'].has(id)).toBeTrue();
    expect(service['states'].has('test-2')).toBeFalse();

    service.add('test-2');

    expect(service['states'].has(id)).toBeTrue();
    expect(service['states'].has('test-2')).toBeTrue();
  });

  it('should call #close and remove an item from the map when calling #remove', () => {
    expect(service['states'].has(id)).toBeTrue();

    service.remove(id);

    verify(serviceSpy.close(id)).once();

    expect(service['states'].has(id)).toBeFalse();
  });
});

describe('LgTableRowComponent', () => {
  let component: LgTableRowComponent;
  let componentSpy: LgTableRowComponent;
  let fixture: ComponentFixture<LgTableRowComponent>;
  let debugElement: DebugElement;

  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        declarations: [
          LgTableRowComponent,
          MockComponents(LgTableCellComponent, LgTableRowToggleComponent),
        ],
      }).compileComponents();
    }),
  );

  beforeEach(() => {
    fixture = TestBed.createComponent(LgTableRowComponent);
    component = fixture.componentInstance;
    componentSpy = spy(component);
    debugElement = fixture.debugElement;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should have the table row class', () => {
    expect(fixture.nativeElement.getAttribute('class')).toContain('lg-table-row');
  });

  it('should have the table row toggle class if the row is expandable', () => {
    when(componentSpy.hasToggle).thenReturn(true);
    fixture.detectChanges();

    expect(fixture.nativeElement.getAttribute('class')).toContain('lg-table-row__toggle');
  });

  it('shouldn\'t have the table row toggle class if the row is not expandable', () => {
    when(componentSpy.hasToggle).thenReturn(false);
    fixture.detectChanges();

    expect(fixture.nativeElement.getAttribute('class')).not.toContain(
      'lg-table-row__toggle',
    );
  });

  it('should have the active class if the row is toggled active', () => {
    when(componentSpy.isToggledActive).thenReturn(true);
    fixture.detectChanges();

    expect(fixture.nativeElement.getAttribute('class')).toContain(
      'lg-table-row__toggle--active',
    );
  });

  it('shouldn\'t have the active class if the row is not toggled active', () => {
    when(componentSpy.isToggledActive).thenReturn(false);
    fixture.detectChanges();

    expect(fixture.nativeElement.getAttribute('class')).not.toContain(
      'lg-table-row__toggle--active',
    );
  });

  describe('when the id by is not set', () => {
    it('should not set the id attribute', () => {
      expect(debugElement.nativeElement.getAttribute('id')).toBeNull();
    });
  });

  describe('when the id attribute is set', () => {
    beforeEach(() => {
      component.ariaId = 'test';
      fixture.detectChanges();
    });

    it('should set the id attribute', () => {
      expect(debugElement.nativeElement.getAttribute('id')).toBe('test');
    });
  });

  describe('when the row is not hidden', () => {
    beforeEach(() => {
      component.isHidden = false;
      fixture.detectChanges();
    });

    it('should set the id attribute', () => {
      expect(debugElement.nativeElement.getAttribute('aria-hidden')).toBeNull();
    });
  });

  describe('when the row is hidden', () => {
    beforeEach(() => {
      component.isHidden = true;
      fixture.detectChanges();
    });

    it('should set the id attribute', () => {
      expect(debugElement.nativeElement.getAttribute('aria-hidden')).toBe('true');
    });
  });

  describe('when the aria labelled by is not set', () => {
    it('should not set the aria-labelledby attribute', () => {
      expect(debugElement.nativeElement.getAttribute('aria-labelledby')).toBeNull();
    });
  });

  describe('when the aria labelled by is set', () => {
    beforeEach(() => {
      component.ariaLabelledBy = 'test';
      fixture.detectChanges();
    });

    it('should set the aria-labelledby attribute', () => {
      expect(debugElement.nativeElement.getAttribute('aria-labelledby')).toBe('test');
    });
  });
});