mirror of
https://github.com/Raghu-Ch/angular-challenges.git
synced 2026-02-10 21:03:03 -05:00
feat(challenge28): testing a simple checkbox
This commit is contained in:
10
apps/testing-checkbox/src/app/app.component.spec.ts
Normal file
10
apps/testing-checkbox/src/app/app.component.spec.ts
Normal 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);
|
||||
});
|
||||
});
|
||||
});
|
||||
27
apps/testing-checkbox/src/app/app.component.ts
Normal file
27
apps/testing-checkbox/src/app/app.component.ts
Normal 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;
|
||||
}
|
||||
}
|
||||
0
apps/testing-checkbox/src/assets/.gitkeep
Normal file
0
apps/testing-checkbox/src/assets/.gitkeep
Normal file
BIN
apps/testing-checkbox/src/favicon.ico
Normal file
BIN
apps/testing-checkbox/src/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
13
apps/testing-checkbox/src/index.html
Normal file
13
apps/testing-checkbox/src/index.html
Normal 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>
|
||||
4
apps/testing-checkbox/src/main.ts
Normal file
4
apps/testing-checkbox/src/main.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
import { bootstrapApplication } from '@angular/platform-browser';
|
||||
import { AppComponent } from './app/app.component';
|
||||
|
||||
bootstrapApplication(AppComponent).catch((err) => console.error(err));
|
||||
5
apps/testing-checkbox/src/styles.scss
Normal file
5
apps/testing-checkbox/src/styles.scss
Normal 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 */
|
||||
2
apps/testing-checkbox/src/test-setup.ts
Normal file
2
apps/testing-checkbox/src/test-setup.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
import '@testing-library/jest-dom';
|
||||
import 'jest-preset-angular/setup-jest';
|
||||
Reference in New Issue
Block a user