@angular/common#TitleCasePipe TypeScript Examples

@NgModule({
  declarations: [
    HomeComponent,
    PropertyCardComponent,
    AnalysisComponent,
    TimelineScoreFormaterPipe,
  ],
  providers: [TitleCasePipe],
  imports: [
    CommonModule,
    DashboardRoutingModule,
    GraphQLModule,
    FormsModule,
    HttpClientModule,
    SharedModule,
    NgxChartsModule,
  ],
})
export class DashboardModule {}

@NgModule({
  declarations: [
    LeaderboardComponent,
    LeaderboardCardComponent,
    LeaderboardLabelFormaterPipe,
  ],
  providers: [TitleCasePipe],
  imports: [
    CommonModule,
    LeaderboardRoutingModule,
    SharedModule,
    GraphQLModule,
    HttpClientModule,
  ],
})
export class LeaderboardModule {}

transform(value: string, ...args: unknown[]): unknown {
    if (
      value !== LeaderboardCategory.PWA &&
      value !== LeaderboardCategory.SEO
    ) {
      const titleCasePipe = new TitleCasePipe();
      return titleCasePipe.transform(value.replace('_', ' '));
    }
    return value;
  }

constructor(
    private advanceRequestService: AdvanceRequestService,
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private advanceService: AdvanceService,
    private networkService: NetworkService,
    private offlineService: OfflineService,
    private filtersHelperService: FiltersHelperService,
    private utilityService: UtilityService,
    private titleCasePipe: TitleCasePipe,
    private trackingService: TrackingService,
    private tasksService: TasksService,
    private cdr: ChangeDetectorRef
  ) {}

constructor(
    private advanceRequestService: AdvanceRequestService,
    private tasksService: TasksService,
    private trackingService: TrackingService,
    private cdRef: ChangeDetectorRef,
    private router: Router,
    private filtersHelperService: FiltersHelperService,
    private offlineService: OfflineService,
    private titleCasePipe: TitleCasePipe
  ) {}

constructor(
    private router: ActivatedRoute,
    private dashboardService: DashboardService,
    private titleCasePipe: TitleCasePipe,
    @Inject(LOCALE_ID) private locale: string
  ) {}

constructor(
    private leaderboardService: LeaderboardService,
    private titleCasePipe: TitleCasePipe
  ) {}

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    GoogleMapsModule,
    SharedModule,
    HammerModule,
    HttpClientJsonpModule,
    SharedModule,
    HammerModule,
  ],
  providers: [
    GooglePlus,
    InAppBrowser,
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: MyHammerConfig,
    },
    {
      provide: RouteReuseStrategy,
      useClass: IonicRouteStrategy,
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpConfigInterceptor,
      multi: true,
    },
    {
      provide: ErrorHandler,
      useValue: Sentry.createErrorHandler({
        showDialog: false,
      }),
    },
    CurrencyPipe,
    ConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: (configService: ConfigService) => () => configService.loadConfigurationData(),
      deps: [ConfigService, RouterAuthService, TokenService, SecureStorageService, StorageService, Sentry.TraceService],
      multi: true,
    },
    {
      provide: Sentry.TraceService,
      deps: [Router],
    },
    {
      provide: MIN_SCREEN_WIDTH,
      useValue: 375,
    },
    TitleCasePipe,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

constructor(
    private titleCasePipe: TitleCasePipe,
    private modalController: ModalController,
    private offlineService: OfflineService
  ) {}

describe('AnalysisComponent', () => {
  let component: AnalysisComponent;
  let fixture: ComponentFixture<AnalysisComponent>;
  let service: DashboardService;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [AnalysisComponent, TimelineScoreFormaterPipe],
      imports: [
        CommonModule,
        RouterTestingModule,
        SharedModule,
        NgxChartsModule,
        BrowserAnimationsModule,
      ],
      providers: [
        {
          provide: ActivatedRoute,
          useValue: {
            queryParams: of({
              name: 'one-platform',
            }),
            params: of({
              id: '1',
            }),
          },
        },
        TitleCasePipe,
      ],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(AnalysisComponent);
    component = fixture.componentInstance;
    service = TestBed.inject(DashboardService);
    fixture.detectChanges();
    spyOn(service, 'listLHProjectBranches').and.returnValue({
      valueChanges: of({ data: mockListProjectBranches, loading: false }),
    });
    spyOn(service, 'ListLHProjectScores').and.returnValue(
      of({ data: mockListProjectScores, loading: false })
    );
    spyOn(service, 'listLHLeaderboard').and.returnValue(
      of({ data: mockLeaderboardAPI, loading: false })
    );
  });

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

  it('should call the services on mount', () => {
    component.ngOnInit();
    expect(service.listLHProjectBranches).toHaveBeenCalled();
    expect(service.ListLHProjectScores).toHaveBeenCalled();
  });

  it('should set title and scores on mount', () => {
    component.ngOnInit();
    expect(component.title).toEqual('one-platform');
    expect(component.buildScores['one-platform']).toEqual(
      mockListProjectScores.listLHProjectBuilds as any
    );
  });

  it('should sort branches with main and master first', () => {
    const branchesWithMain = [{ branch: 'one-platform' }, { branch: 'main' }];
    const branchesWithoutMain = [
      { branch: 'one-platform' },
      { branch: 'one-platform-2' },
    ];
    expect(component.handlePriorityOrderBranch(branchesWithMain)[0]).toEqual(
      'main'
    );
    expect(component.handlePriorityOrderBranch(branchesWithoutMain)[0]).toEqual(
      'one-platform'
    );
  });

  it('should be able to change branch', fakeAsync(() => {
    component.onToggleBranchSelector(true);
    component.onBranchSelect('one-platform');
    tick();
    fixture.detectChanges();
    expect(component.selectedBranch).toEqual('one-platform');
    expect(component.isBranchContextSelectorOpen).toBeFalsy();
    expect(component.buildScores['one-platform']).toEqual(
      mockListProjectScores.listLHProjectBuilds as any
    );
  }));

  it('should show loading state', () => {
    const el: HTMLElement = fixture.nativeElement;
    expect(el.textContent).toContain('Loading...');
  });

  it('should show empty state', fakeAsync(() => {
    component.ngOnInit();
    const el: HTMLElement = fixture.nativeElement;
    component.branches = [];
    tick();
    fixture.detectChanges();
    expect(el.textContent).not.toContain('Loading...');
    expect(el.textContent).toContain('No branch found');
  }));
});

describe('LeaderboardComponent', () => {
  let component: LeaderboardComponent;
  let fixture: ComponentFixture<LeaderboardComponent>;
  let service: LeaderboardService;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [
        LeaderboardComponent,
        LeaderboardLabelFormaterPipe,
        LeaderboardCardComponent,
      ],
      imports: [CommonModule, SharedModule, ApolloTestingModule],
      providers: [
        { provide: 'Window', useValue: window },
        Apollo,
        TitleCasePipe,
      ],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(LeaderboardComponent);
    component = fixture.componentInstance;
    service = TestBed.inject(LeaderboardService);
    fixture.detectChanges();
    spyOn(service, 'listLHLeaderboard').and.returnValue(of(mockLeaderboardAPI));
    component.ngOnInit();
  });

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

  it('should setup a leaderboard on component mount', () => {
    expect(component.rows).toEqual(mockLeaderboardRows);
    expect(component.totalCount).toEqual(
      mockLeaderboardAPI.data.listLHLeaderboard.count
    );
    expect(component.isPageLoading).toBeFalsy();
  });

  it('should disable both pagination button', () => {
    const el: HTMLElement = fixture.nativeElement;
    const prevBtnPagination: HTMLButtonElement =
      el.querySelector('.pf-m-prev button');
    const nextBtnPagination: HTMLButtonElement =
      el.querySelector('.pf-m-next button');
    expect(prevBtnPagination.disabled).toBeTruthy();
    expect(nextBtnPagination.disabled).toBeTruthy();
  });

  it('should disable pagination prev button', fakeAsync(() => {
    const el: HTMLElement = fixture.nativeElement;
    const prevBtnPagination: HTMLButtonElement =
      el.querySelector('.pf-m-prev button');
    const nextBtnPagination: HTMLButtonElement =
      el.querySelector('.pf-m-next button');

    component.pageOffset = 0;
    component.totalCount = 100;
    tick();
    fixture.detectChanges();

    expect(prevBtnPagination.disabled).toBeTruthy();
    expect(nextBtnPagination.disabled).toBeFalsy();
  }));

  it('should disable pagination next button', fakeAsync(() => {
    const el: HTMLElement = fixture.nativeElement;
    const prevBtnPagination: HTMLButtonElement =
      el.querySelector('.pf-m-prev button');
    const nextBtnPagination: HTMLButtonElement =
      el.querySelector('.pf-m-next button');

    component.pageOffset = 90;
    component.pageLimit = 10;
    component.totalCount = 100;
    tick();
    fixture.detectChanges();

    expect(prevBtnPagination.disabled).toBeFalsy();
    expect(nextBtnPagination.disabled).toBeTruthy();
  }));
});