vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-12 05:43:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(challenge24): create test harness

Browse Source
This commit is contained in:
thomas
2023-06-11 22:05:48 +02:00
parent 810094400f
commit 58a6632552
20 changed files with 402 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
apps/create-harness/src/app/app.component.ts Normal file
View File

@@ -0,0 +1,26 @@
import { Component, signal } from '@angular/core';
import { SliderComponent } from './slider.component';
@Component({
standalone: true,
imports: [SliderComponent],
selector: 'app-root',
template: `
<h2>Slider 1: {{ slider1Value() }}</h2>
<app-slider
[step]="3"
[minValue]="10"
[maxValue]="30"
(valueChange)="slider1Value.set($event)" />
<h2>Slider 2: {{ slider2Value() }}</h2>
<app-slider
[step]="10"
[maxValue]="1000"
(valueChange)="slider2Value.set($event)" />
`,
styles: [''],
})
export class AppComponent {
slider1Value = signal(0);
slider2Value = signal(0);
}

5
apps/create-harness/src/app/app.config.ts Normal file
View File

@@ -0,0 +1,5 @@
import { ApplicationConfig } from '@angular/core';
export const appConfig: ApplicationConfig = {
providers: [],
};

8
apps/create-harness/src/app/slider.component.spec.ts Normal file
View File

@@ -0,0 +1,8 @@
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);
});
});

71
apps/create-harness/src/app/slider.component.ts Normal file
View File

@@ -0,0 +1,71 @@
import { Component, Input, OnInit, Output, signal } from '@angular/core';
import { toObservable } from '@angular/core/rxjs-interop';
import { FormsModule } from '@angular/forms';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { MatSliderModule } from '@angular/material/slider';
@Component({
selector: 'app-slider',
template: `
<mat-card class="flex">
<mat-card-content>
<div class="flex gap-10 items-center">
<button mat-mini-fab (click)="back()">
<mat-icon>arrow_back_ios</mat-icon>
</button>
{{ minValue }}
<mat-slider
class="m-4"
[max]="maxValue"
[min]="minValue"
[step]="step">
<input matSliderThumb [value]="value()" />
</mat-slider>
{{ maxValue }}
<button mat-mini-fab (click)="forward()">
<mat-icon>arrow_forward_ios</mat-icon>
</button>
</div>
</mat-card-content>
</mat-card>
`,
styles: [
`
.mat-mdc-slider {
max-width: 300px;
width: 100%;
}
.mat-mdc-card + .mat-mdc-card {
margin-top: 8px;
}
`,
],
standalone: true,
imports: [MatCardModule, FormsModule, MatSliderModule, MatIconModule],
})
export class SliderComponent implements OnInit {
@Input() step = 1;
@Input() minValue = 0;
@Input() maxValue = 100;
value = signal(0);
@Output() valueChange = toObservable(this.value);
ngOnInit(): void {
this.value.set(this.minValue);
}
back() {
if (this.value() - this.step >= this.minValue) {
this.value.update((v) => v - this.step);
}
}
forward() {
if (this.value() + this.step <= this.maxValue) {
this.value.update((v) => v + this.step);
}
}
}

5
apps/create-harness/src/app/slider.harness.ts Normal file
View File

@@ -0,0 +1,5 @@
import { ComponentHarness } from '@angular/cdk/testing';
class MySliderHarness extends ComponentHarness {
static hostSelector = 'app-slider';
}

0
apps/create-harness/src/assets/.gitkeep Normal file
View File

BIN
apps/create-harness/src/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

16
apps/create-harness/src/index.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>create-harness</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet" />
</head>
<body>
<app-root></app-root>
</body>
</html>

7
apps/create-harness/src/main.ts Normal file
View File

@@ -0,0 +1,7 @@
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig).catch((err) =>
console.error(err)
);

29
apps/create-harness/src/styles.scss Normal file
View File

@@ -0,0 +1,29 @@
/* You can add global styles to this file, and also import other style files */
@use '@angular/material' as mat;
@tailwind base;
@tailwind components;
@tailwind utilities;
/* You can add global styles to this file, and also import other style files */
@include mat.core();
$theme-primary: mat.define-palette(mat.$indigo-palette);
$theme-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$theme-warn: mat.define-palette(mat.$red-palette);
$theme: mat.define-light-theme(
(
color: (
primary: $theme-primary,
accent: $theme-accent,
warn: $theme-warn,
),
typography: mat.define-typography-config(),
)
);
@include mat.dialog-theme($theme);
@include mat.all-component-themes($theme);

2
apps/create-harness/src/test-setup.ts Normal file
View File

@@ -0,0 +1,2 @@
import '@testing-library/jest-dom';
import 'jest-preset-angular/setup-jest';