feat(challenge28): testing a simple checkbox

This commit is contained in:
ThomasL
2023-07-05 14:33:35 +02:00
parent 4ad02e12ad
commit 9534fdcd24
18 changed files with 326 additions and 1 deletions

View File

@@ -0,0 +1,10 @@
import { render } from '@testing-library/angular';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
describe('When checking the checkbox', () => {
it('Then button is enabled', async () => {
await render(AppComponent);
});
});
});

View File

@@ -0,0 +1,27 @@
import { Component } from '@angular/core';
@Component({
standalone: true,
selector: 'app-root',
template: ` <label for="agree">Agreed</label>
<input
class="ml-2"
id="agree"
type="checkbox"
[value]="check"
(input)="toggleCheck()" />
<button
class="border p-2 rounded-lg ml-10"
[class.bg-gray-500]="!check"
[class.text-white]="!check"
[disabled]="!check">
Submit
</button>`,
})
export class AppComponent {
check = false;
toggleCheck() {
this.check = !this.check;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>testing-checkbox</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<app-root></app-root>
</body>
</html>

View File

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

View File

@@ -0,0 +1,5 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/* You can add global styles to this file, and also import other style files */

View File

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