feat(challenge24): create challenge 24

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);
+  });
+});

apps/create-harness/src/app/app.component.ts

@@ -13,14 +13,16 @@ import { SliderComponent } from './slider.component';
       [maxValue]="30"
       (valueChange)="slider1Value.set($event)" />
     <h2>Slider 2: {{ slider2Value() }}</h2>
+    <p>Enabled only if Slider 1 > 20</p>
     <app-slider
       [step]="10"
       [maxValue]="1000"
+      [disabled]="slider1Value() < 20"
       (valueChange)="slider2Value.set($event)" />
   `,
   styles: [''],
 })
 export class AppComponent {
-  slider1Value = signal(0);
+  slider1Value = signal(10);
   slider2Value = signal(0);
 }

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()],
 };

apps/create-harness/src/app/slider.component.spec.ts

@@ -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);
-  });
-});

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: `
-    <mat-card class="flex">
+    <mat-card class="items-center">
       <mat-card-content>
         <div class="flex gap-10 items-center">
-          <button mat-mini-fab (click)="back()">
+          <button id="minusButton" mat-mini-fab (click)="back()">
             <mat-icon>arrow_back_ios</mat-icon>
           </button>
           {{ minValue }}
@@ -19,11 +20,15 @@ import { MatSliderModule } from '@angular/material/slider';
             class="m-4"
             [max]="maxValue"
             [min]="minValue"
+            [disabled]="disabled"
             [step]="step">
-            <input matSliderThumb [value]="value()" />
+            <input
+              matSliderThumb
+              [value]="value()"
+              (valueChange)="value.set($event)" />
           </mat-slider>
           {{ maxValue }}
-          <button mat-mini-fab (click)="forward()">
+          <button id="plusButton" mat-mini-fab (click)="forward()">
             <mat-icon>arrow_forward_ios</mat-icon>
           </button>
         </div>
@@ -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);

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';
 }