StandaloneServiceCounterComponent

Author: molily

src/app/app.module.ts

@@ -12,9 +12,15 @@ import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app.routing.module';
 import { CounterComponent } from './components/counter/counter.component';
 import { HomeComponent } from './components/home/home.component';
-import { NgRxCounterComponent } from './components/ngrx-counter/ngrx-counter.component';
-import { ServiceCounterComponent } from './components/service-counter/service-counter.component';
-import { StandaloneCounterComponent } from './components/standalone-counter/standalone-counter.component';
+import {
+  NgRxCounterComponent,
+} from './components/ngrx-counter/ngrx-counter.component';
+import {
+  ServiceCounterComponent,
+} from './components/service-counter/service-counter.component';
+import {
+  StandaloneServiceCounterComponent,
+} from './components/standalone-service-counter/standalone-service-counter.component';
 import { CounterEffects } from './effects/counter.effects';
 import { reducers } from './reducers';
 import { CounterApiService } from './services/counter-api.service';
@@ -33,7 +39,7 @@ import { CounterService } from './services/counter.service';
     HttpClientModule,
 
     AppRoutingModule,
-    StandaloneCounterComponent,
+    StandaloneServiceCounterComponent,
 
     // NgRx Store
     StoreModule.forRoot(reducers, {

src/app/app.routing.module.ts

@@ -1,16 +1,25 @@
 import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import {
+  RouterModule,
+  Routes,
+} from '@angular/router';
 
 import { CounterComponent } from './components/counter/counter.component';
 import { HomeComponent } from './components/home/home.component';
-import { NgRxCounterComponent } from './components/ngrx-counter/ngrx-counter.component';
-import { ServiceCounterComponent } from './components/service-counter/service-counter.component';
-import { StandaloneCounterComponent } from './components/standalone-counter/standalone-counter.component';
+import {
+  NgRxCounterComponent,
+} from './components/ngrx-counter/ngrx-counter.component';
+import {
+  ServiceCounterComponent,
+} from './components/service-counter/service-counter.component';
+import {
+  StandaloneServiceCounterComponent,
+} from './components/standalone-service-counter/standalone-service-counter.component';
 
 export const routes: Routes = [
   { path: '', pathMatch: 'full', component: HomeComponent },
   { path: 'counter-component', component: CounterComponent },
-  { path: 'standalone-counter-component', component: StandaloneCounterComponent },
+  { path: 'standalone-counter-component', component: StandaloneServiceCounterComponent },
   { path: 'service-counter-component', component: ServiceCounterComponent },
   { path: 'ngrx-counter-component', component: NgRxCounterComponent },
 ];

src/app/components/service-counter/service-counter.component.spec.ts

@@ -1,12 +1,23 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { BehaviorSubject, Observable, of } from 'rxjs';
+import {
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+
+import {
+  BehaviorSubject,
+  Observable,
+  of,
+} from 'rxjs';
 
 import { CounterService } from '../../services/counter.service';
-import { click, expectText, setFieldValue } from '../../spec-helpers/element.spec-helper';
+import {
+  click,
+  expectText,
+  setFieldValue,
+} from '../../spec-helpers/element.spec-helper';
 import { ServiceCounterComponent } from './service-counter.component';
 
 describe('ServiceCounterComponent: integration test', () => {
-  let component: ServiceCounterComponent;
   let fixture: ComponentFixture<ServiceCounterComponent>;
 
   beforeEach(async () => {
@@ -16,7 +27,6 @@ describe('ServiceCounterComponent: integration test', () => {
     }).compileComponents();
 
     fixture = TestBed.createComponent(ServiceCounterComponent);
-    component = fixture.componentInstance;
     fixture.detectChanges();
   });
 
@@ -48,7 +58,6 @@ describe('ServiceCounterComponent: integration test', () => {
 describe('ServiceCounterComponent: unit test', () => {
   const currentCount = 123;
 
-  let component: ServiceCounterComponent;
   let fixture: ComponentFixture<ServiceCounterComponent>;
   // Declare shared variable
   let fakeCounterService: CounterService;
@@ -69,7 +78,6 @@ describe('ServiceCounterComponent: unit test', () => {
     }).compileComponents();
 
     fixture = TestBed.createComponent(ServiceCounterComponent);
-    component = fixture.componentInstance;
     fixture.detectChanges();
   });
 

src/app/components/standalone-counter/standalone-counter.component.html

@@ -0,0 +1 @@
+// TODO

src/app/components/standalone-counter/standalone-counter.component.spec.ts

@@ -0,0 +1,15 @@
+<h1>Standalone counter connected to the service</h1>
+
+<p>
+  <strong data-testid="count">{{ count$ | async }}</strong>
+</p>
+
+<p>
+  <button (click)="increment()" data-testid="increment-button">+</button>
+  <button (click)="decrement()" data-testid="decrement-button">-</button>
+</p>
+
+<p>
+  <input type="number" #input data-testid="reset-input" />
+  <button (click)="reset(input.value)" data-testid="reset-button">Reset</button>
+</p>