From f1bd68d78ef15f2901accfc906862d51e147cdba Mon Sep 17 00:00:00 2001 From: thomas Date: Mon, 12 Jun 2023 21:52:41 +0200 Subject: [PATCH] feat(challenge24): create challenge 24 --- apps/create-harness/README.md | 55 +++++++++++++++++++ .../src/app/app.component.spec.ts | 15 +++++ apps/create-harness/src/app/app.component.ts | 4 +- apps/create-harness/src/app/app.config.ts | 3 +- .../src/app/slider.component.spec.ts | 8 --- .../src/app/slider.component.ts | 21 ++++--- apps/create-harness/src/app/slider.harness.ts | 2 +- 7 files changed, 90 insertions(+), 18 deletions(-) create mode 100644 apps/create-harness/README.md create mode 100644 apps/create-harness/src/app/app.component.spec.ts delete mode 100644 apps/create-harness/src/app/slider.component.spec.ts diff --git a/apps/create-harness/README.md b/apps/create-harness/README.md new file mode 100644 index 0000000..8557ea2 --- /dev/null +++ b/apps/create-harness/README.md @@ -0,0 +1,55 @@ +

Create a component harness

+ +> Author: Thomas Laforge + +### Information + +The goal of this challenge is to create a test harness for `slider.component.ts`. The harness file, `slider.harness.ts`, has already been created. + +The following API needs to be implemented: + +```ts + async clickPlus(): Promise ; + + async clickMinus(): Promise; + + async getValue(): Promise ; + + async getMinValue(): Promise; + + async disabled(): Promise; + + async setValue(value: number): Promise; +``` + +Additionally, you should create a `HarnessPredicate` with the default predicate and the `minValue` property. + +```ts + static with( + this: ComponentHarnessConstructor, + options: SliderHarnessFilters = {} + ): HarnessPredicate; +``` + +Lastly, you will need to create the test suite for `app.component`. Some default tests have already been written, but feel free to add as many tests as you want and create as many harness methods as you need. + +> Angular Material documentation can be found [here](https://material.angular.io/cdk/test-harnesses/overview) + +Good luck !!! 💪 + +### Submitting your work + +1. Fork the project +2. clone it +3. npm install +4. `npx nx serve create-harness` +5. _...work on it_ +6. Commit your work +7. Submit a PR with a title beginning with **Answer:24** that I will review and other dev can review. + +create-harness +create-harness solution author + + + +_You can ask any question on_ twitter diff --git a/apps/create-harness/src/app/app.component.spec.ts b/apps/create-harness/src/app/app.component.spec.ts new file mode 100644 index 0000000..19115aa --- /dev/null +++ b/apps/create-harness/src/app/app.component.spec.ts @@ -0,0 +1,15 @@ +import { render } from '@testing-library/angular'; +import { AppComponent } from './app.component'; + +describe('AppComponent', () => { + test('select first slider and value must be 16 after clicking twice on plus button', async () => { + await render(AppComponent); + }); + + test('select first slider and click 1 time on plus button and twice on minus button, slider must be 10 again', async () => { + await render(AppComponent); + }); + test('second slider is disabled, click 4 times on first slider and slider 2 must be enabled', async () => { + await render(AppComponent); + }); +}); diff --git a/apps/create-harness/src/app/app.component.ts b/apps/create-harness/src/app/app.component.ts index d374d56..06c7eb9 100644 --- a/apps/create-harness/src/app/app.component.ts +++ b/apps/create-harness/src/app/app.component.ts @@ -13,14 +13,16 @@ import { SliderComponent } from './slider.component'; [maxValue]="30" (valueChange)="slider1Value.set($event)" />

Slider 2: {{ slider2Value() }}

+

Enabled only if Slider 1 > 20

`, styles: [''], }) export class AppComponent { - slider1Value = signal(0); + slider1Value = signal(10); slider2Value = signal(0); } diff --git a/apps/create-harness/src/app/app.config.ts b/apps/create-harness/src/app/app.config.ts index 81a6edd..59198e6 100644 --- a/apps/create-harness/src/app/app.config.ts +++ b/apps/create-harness/src/app/app.config.ts @@ -1,5 +1,6 @@ import { ApplicationConfig } from '@angular/core'; +import { provideAnimations } from '@angular/platform-browser/animations'; export const appConfig: ApplicationConfig = { - providers: [], + providers: [provideAnimations()], }; diff --git a/apps/create-harness/src/app/slider.component.spec.ts b/apps/create-harness/src/app/slider.component.spec.ts deleted file mode 100644 index c7b1530..0000000 --- a/apps/create-harness/src/app/slider.component.spec.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { render } from '@testing-library/angular'; -import { SliderComponent } from './slider.component'; - -describe('SliderComponent', () => { - test('should have 1 slider, 3 checkboxes, 4 inputs, 2 buttons', async () => { - await render(SliderComponent); - }); -}); diff --git a/apps/create-harness/src/app/slider.component.ts b/apps/create-harness/src/app/slider.component.ts index 3f363a3..1c07c11 100644 --- a/apps/create-harness/src/app/slider.component.ts +++ b/apps/create-harness/src/app/slider.component.ts @@ -4,14 +4,15 @@ import { FormsModule } from '@angular/forms'; import { MatCardModule } from '@angular/material/card'; import { MatIconModule } from '@angular/material/icon'; import { MatSliderModule } from '@angular/material/slider'; +import { skip } from 'rxjs'; @Component({ selector: 'app-slider', template: ` - +
- {{ minValue }} @@ -19,11 +20,15 @@ import { MatSliderModule } from '@angular/material/slider'; class="m-4" [max]="maxValue" [min]="minValue" + [disabled]="disabled" [step]="step"> - + {{ maxValue }} -
@@ -37,21 +42,23 @@ import { MatSliderModule } from '@angular/material/slider'; width: 100%; } - .mat-mdc-card + .mat-mdc-card { + .mat-mdc-card { margin-top: 8px; + flex-direction: row; } `, ], standalone: true, - imports: [MatCardModule, FormsModule, MatSliderModule, MatIconModule], + imports: [MatCardModule, MatSliderModule, MatIconModule, FormsModule], }) export class SliderComponent implements OnInit { @Input() step = 1; @Input() minValue = 0; @Input() maxValue = 100; + @Input() disabled = false; value = signal(0); - @Output() valueChange = toObservable(this.value); + @Output() valueChange = toObservable(this.value).pipe(skip(1)); ngOnInit(): void { this.value.set(this.minValue); diff --git a/apps/create-harness/src/app/slider.harness.ts b/apps/create-harness/src/app/slider.harness.ts index 25e8b10..a2ab6c0 100644 --- a/apps/create-harness/src/app/slider.harness.ts +++ b/apps/create-harness/src/app/slider.harness.ts @@ -1,5 +1,5 @@ import { ComponentHarness } from '@angular/cdk/testing'; -class MySliderHarness extends ComponentHarness { +export class MySliderHarness extends ComponentHarness { static hostSelector = 'app-slider'; }