homework-pengyu

src/app/app.component.spec.ts

@@ -1,12 +1,17 @@
 import { TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
+import { CounterComponent } from './counter/counter.component';
+import { CounterGroupComponent } from './counter-group/counter-group.component';
+import { NO_ERRORS_SCHEMA } from '@angular/compiler';
 
 describe('AppComponent', () => {
   beforeEach(() => TestBed.configureTestingModule({
     imports: [RouterTestingModule],
-    declarations: [AppComponent]
-  }));
+    declarations: [AppComponent, CounterComponent, CounterGroupComponent],
+    schemas: [NO_ERRORS_SCHEMA]
+  }).compileComponents()
+);
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);
@@ -26,4 +31,4 @@ describe('AppComponent', () => {
     const compiled = fixture.nativeElement as HTMLElement;
     expect(compiled.querySelector('.content span')?.textContent).toContain('ng-counter-group app is running!');
   });
-});
+});

src/app/app.module.ts

@@ -3,10 +3,14 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { CounterComponent } from './counter/counter.component';
+import { CounterGroupComponent } from './counter-group/counter-group.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    CounterComponent,
+    CounterGroupComponent
   ],
   imports: [
     BrowserModule,

src/app/counter-group/counter-group.component.css

@@ -0,0 +1,55 @@
+.home-page {
+  width: 600px;
+  height: 800px;
+  margin: auto;
+  border: 3px solid rgb(181, 175, 175);
+  border-radius: 10px;
+}
+
+.add-counter-button {
+  width: 580px;
+  height: 40px;
+  margin: 10px 10px 20px 10px;
+  background-color: #07bdb7;
+  border: transparent;
+  border-radius: 5px;
+  font: 16px bold;
+}
+
+.counter-group-region {
+  width: 580px;
+  margin: 0 10px 20px 10px;
+}
+
+.counter-box {
+  margin: 15px 0;
+  display: flex;
+}
+
+.counter-item {
+  margin-right: 40px;
+}
+
+.remove-button {
+  display: flex;
+}
+
+.remove-button:hover {
+  background-color: #db342b;
+  border: solid #db342b;
+}
+
+.sum-text {
+  margin: 0 10px 20px 10px;
+  text-align: center;
+  font-size: 20px;
+}
+.remove-counters-button {
+  width: 580px;
+  height: 40px;
+  margin: 10px 10px 20px 10px;
+  background-color: #db342b;
+  border: transparent;
+  border-radius: 5px;
+  font: 16px bold;
+}

src/app/counter-group/counter-group.component.html

@@ -0,0 +1,17 @@
+<div class="home-page">
+  <button (click)="onAddCounter()" class="add-counter-button">
+    Add counter
+  </button>
+  <div class="counter-group-region">
+    <div *ngFor="let counter of counters; index as i" class="counter-box">
+      <app-counter
+        [number]="counter.num"
+        (change)="counter.num = $event"
+        class="counter-item"
+      ></app-counter>
+      <button (click)="onRemoveCounter(i)" class="remove-button">Remove</button>
+    </div>
+  </div>
+  <div class="sum-text">Sum: {{ sum }}</div>
+  <button (click)="onResetNumber()" class="remove-counters-button">ResetAllNumber</button>
+</div>

src/app/counter-group/counter-group.component.spec.ts

@@ -0,0 +1,47 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CounterGroupComponent } from './counter-group.component';
+import { CounterComponent } from '../counter/counter.component';
+
+
+describe('CounterGroupComponent', () => {
+  let component: CounterGroupComponent;
+  let fixture: ComponentFixture<CounterGroupComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CounterGroupComponent, CounterComponent],
+    });
+    fixture = TestBed.createComponent(CounterGroupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should reset all number when call OnResetNumber', () => {
+    component.counters = [{num: 1}, {num: 2}];
+    component.onResetNumber();
+    expect(component.counters).toEqual([{num: 0}, {num: 0}]);
+  });
+
+  it('should increase sum when num from counter increase', () => {
+    component.counters = [{num: 1}, {num: 2}];
+    component.counters[0].num++;
+    expect(component.sum).toEqual(4);
+  })
+
+  it('should remove counter object from counters when call onRemoveCounter', () => {
+    component.counters = [{num: 1}, {num: 2}];
+    component.onRemoveCounter(0);
+    expect(component.counters).toEqual([{num: 2}]);
+  })
+
+  it('should add counter object to counters when call onAddCounter', () => {
+    component.counters = [{num: 1}, {num: 2}];
+    component.onAddCounter();
+    expect(component.counters).toEqual([{num: 1}, {num: 2}, {num: 0}]);
+  })
+});

src/app/counter-group/counter-group.component.ts

@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+import { CounterComponent } from '../counter/counter.component';
+@Component({
+  selector: 'app-counter-group',
+  templateUrl: './counter-group.component.html',
+  styleUrls: ['./counter-group.component.css']
+})
+export class CounterGroupComponent {
+  counters: {num: number}[] = [
+    {num: 1},
+    {num: 2},
+    {num: 3}
+  ];
+
+  get sum() {
+    let sum_c = 0;
+    this.counters.forEach(counter => {
+      sum_c += counter.num
+    })
+    return sum_c;
+    // return this.counters.reduce((result, current) => result + current.num, 0)
+  }
+
+  onAddCounter() {
+    this.counters.push({num: 0});
+  }
+
+  onResetNumber() {
+    this.counters.forEach(counter => {
+      counter.num = 0;
+    })
+  }
+
+  onRemoveCounter(index: number) {
+    this.counters.splice(index, 1)
+  }
+}

src/app/counter/counter.component.css

@@ -0,0 +1,17 @@
+.add-button {
+  margin-right: 10px;
+  margin-left: 70px;
+}
+
+.decrease-button {
+  margin-left: 10px;
+}
+
+.button:hover {
+  background-color: rgb(151, 185, 255);
+  border: solid rgb(151, 185, 255);
+}
+
+.reset-button {
+  margin-left: 40px;
+}

src/app/counter/counter.component.html

@@ -0,0 +1,6 @@
+<div>
+  <button (click)="onIncreaseNumber()" class="button add-button">+</button>
+  <span>number: {{ number }}</span>
+  <button (click)="onDecreaseNumber()" class="button decrease-button">-</button>
+  <button (click)="onResetCurrentNumber()" class="button reset-button">ResetCurrentNumber</button>
+</div>

src/app/counter/counter.component.spec.ts

@@ -0,0 +1,40 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CounterComponent } from './counter.component';
+
+describe('CounterComponent', () => {
+  let component: CounterComponent;
+  let fixture: ComponentFixture<CounterComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CounterComponent]
+    });
+    fixture = TestBed.createComponent(CounterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should increase number when call onIncreaseNumber', () => {
+    component.number = 2;
+    component.onIncreaseNumber();
+    expect(component.number).toEqual(3);
+  })
+
+  it('should decrease number when call onDecreaseNumber', () => {
+    component.number = 2;
+    component.onDecreaseNumber();
+    expect(component.number).toEqual(1);
+  })
+
+  it('should reset number when call onResetCurrentNumber', () => {
+    component.number = 2;
+    component.onResetCurrentNumber();
+    expect(component.number).toEqual(0);
+  })
+});
+

src/app/counter/counter.component.ts

@@ -0,0 +1,25 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-counter',
+  templateUrl: './counter.component.html',
+  styleUrls: ['./counter.component.css']
+})
+export class CounterComponent {
+  @Input() number = 0;
+  @Output() change = new EventEmitter();
+  onIncreaseNumber() {
+    this.number++;
+    this.change.emit(this.number);
+  }
+
+  onDecreaseNumber() {
+    this.number--;
+    this.change.emit(this.number);
+  }
+
+  onResetCurrentNumber() {
+    this.number = 0;
+    this.change.emit(this.number);
+  }
+}