How to use the @angular/platform-browser.By.directive function in @angular/platform-browser

it('should have a max-length of 16 characters', () => {
    const directive = el.query(By.directive(CreditCardDirective)).nativeElement;
    directive.value = '4751239812019201998394282394823';
    directive.dispatchEvent(new Event('input'));
    expect(directive.value).toBe('4751 2398 1201 9201');
  });

it('should have its children passed the proper values', (): void => {
    const mockSvc: jasmine.SpyObj = TestBed.get(DeploymentsService);
    const arrayOfComponents: DebugElement[] = testContext.fixture.debugElement.queryAll(By.directive(FakeUtilizationBarComponent));
    expect(arrayOfComponents.length).toEqual(2);

    const cpuUtilBar: FakeUtilizationBarComponent = arrayOfComponents[0].componentInstance;
    expect(cpuUtilBar.resourceTitle).toEqual('CPU');
    expect(cpuUtilBar.resourceUnit).toEqual('Cores');
    expect(cpuUtilBar.stat).toEqual(mockSvc.getEnvironmentCpuUtilization());

    const memoryUtilBar: FakeUtilizationBarComponent = arrayOfComponents[1].componentInstance;
    expect(memoryUtilBar.resourceTitle).toEqual('Memory');
    expect(memoryUtilBar.resourceUnit).toEqual('GB');
    expect(memoryUtilBar.stat).toEqual(mockSvc.getEnvironmentMemoryUtilization());
  });
});

it('should re-render the multi-years view when the maxDate changes', () => {
            fixture.detectChanges();
            const periodButton = calendarElement.querySelector(
                '.owl-dt-control-period-button'
            ) as HTMLElement;
            periodButton.click();
            fixture.detectChanges();

            let multiYearsViewDebugElm = fixture.debugElement.query(
                By.directive(OwlMultiYearViewComponent)
            );
            let multiYearsViewComp = multiYearsViewDebugElm.componentInstance;
            expect(multiYearsViewComp).toBeTruthy();

            spyOn(multiYearsViewComp, 'generateYearList').and.callThrough();
            testComponent.maxDate = new Date(2017, NOV, 1);
            fixture.detectChanges();

            expect(multiYearsViewComp.generateYearList).toHaveBeenCalled();
        });
    });

it("should select one", () => {
		const fixture = TestBed.createComponent(RadioTest);
		fixture.detectChanges();

		const radioOne = fixture.debugElement.query(By.directive(Radio));
		radioOne.triggerEventHandler("click", null);
		radioOne.nativeElement.querySelector("input").click();
		fixture.detectChanges();

		expect(fixture.componentInstance.radio).toBe("one");
	});
});

beforeEach(() => {
    fixture = TestBed.createComponent(ImportProjectDialogComponent);
    debugElement = fixture.debugElement;
    component = fixture.componentInstance;
    component.server = server;
    component.projectNameForm.controls['projectName'].setValue('ValidName');
    fixture.detectChanges();

    debugElement = fixture.debugElement.query(By.directive(FileSelectDirective));
    fileSelectDirective = debugElement.injector.get(FileSelectDirective) as FileSelectDirective;
    component.uploader.onErrorItem = () => {};
  });

beforeEach(() => {
      fixture = createComponent(DisableableRadioButton);

      testComponent = fixture.debugElement.componentInstance;
      const radioDebugElement = fixture.debugElement.query(
        By.directive(DtRadioButton),
      );
      radioInstance = radioDebugElement.injector.get>(
        DtRadioButton,
      );
      radioNativeElement = radioDebugElement.nativeElement.querySelector(
        'input',
      );
    });

beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [FileDropzoneTestComponent, NgEzFileDropzoneDirective]
        }).compileComponents();

        fixture = TestBed.createComponent(FileDropzoneTestComponent);
        debugElement = fixture.debugElement.query(By.directive(NgEzFileDropzoneDirective));
        directive = debugElement.injector.get(NgEzFileDropzoneDirective);
        fixture.detectChanges();
    });

beforeEach(() => {
        fixture = TestBed.createComponent(TestComponent);
        component = fixture.componentInstance;
        debugElement = fixture.debugElement;
        element = debugElement.nativeElement;

        fixture.detectChanges();
        directive = debugElement.query(By.directive(LabelDirective));
        directiveInstance = directive.injector.get(LabelDirective);


        spyOn(directiveInstance, '_setProperties').and.callThrough();
        spyOn(directiveInstance, '_addClassToElement');
    });

beforeEach(async(() => {
            fixture = TestBed.createComponent(RadiosInsideRadioGroup);
            fixture.detectChanges();

            testComponent = fixture.debugElement.componentInstance;

            groupDebugElement = fixture.debugElement.query(By.directive(McRadioGroup));
            groupInstance = groupDebugElement.injector.get(McRadioGroup);

            radioDebugElements = fixture.debugElement.queryAll(By.directive(McRadioButton));
            radioNativeElements = radioDebugElements.map((debugEl) => debugEl.nativeElement);
            radioInstances = radioDebugElements.map((debugEl) => debugEl.componentInstance);

            radioLabelElements = radioDebugElements
                .map((debugEl) => debugEl.query(By.css('label')).nativeElement);
            radioInputElements = radioDebugElements
                .map((debugEl) => debugEl.query(By.css('input')).nativeElement);
        }));

fixture => {
                    fixture.detectChanges();

                    const addTagButton = fixture.debugElement.query(By.directive(Button)).nativeElement;
                    const nativeInput: HTMLInputElement = fixture.debugElement.query(By.css('gtx-input input'))
                        .nativeElement;
                    nativeInput.focus = jasmine.createSpy('focus');
                    addTagButton.click();
                    tick(200);

                    expect(nativeInput.focus).toHaveBeenCalled();
                }
            )