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

refactor: move libs

Browse Source
This commit is contained in:
thomas
2024-05-11 21:27:33 +02:00
parent 4a3c7f23e0
commit 001d35731a
659 changed files with 775 additions and 1573 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/testing/19-input-output/src/app/app.component.ts Normal file
View File

@@ -0,0 +1,16 @@
import { Component } from '@angular/core';
import { CounterComponent } from './counter.component';
@Component({
standalone: true,
imports: [CounterComponent],
selector: 'app-root',
template: `
<app-counter [initialValue]="10" (send)="log($event)"></app-counter>
`,
})
export class AppComponent {
log(counter: number) {
console.log('output log', counter);
}
}

13
apps/testing/19-input-output/src/app/counter.component.cy.ts Normal file
View File

@@ -0,0 +1,13 @@
import { CounterComponent } from './counter.component';
describe(CounterComponent.name, () => {
describe('Given an initualValue of 10', () => {
it('listen to output using createOutputSpy', () => {
cy.mount(CounterComponent);
});
it('listen to output using autoSpyOutputs', () => {
cy.mount(CounterComponent);
});
});
});

27
apps/testing/19-input-output/src/app/counter.component.spec.ts Normal file
View File

@@ -0,0 +1,27 @@
import { render } from '@testing-library/angular';
import { CounterComponent } from './counter.component';
describe('CounterComponent', () => {
describe('Given an initualValue of 10', () => {
test('Then counterValue is 10', async () => {
await render(CounterComponent);
});
describe('When clicking 5 times on increment button', () => {
test('Then counterValue is 15', async () => {
await render(CounterComponent);
});
});
describe('When clicking 2 times on decrement button', () => {
test('Then counterValue is 8', async () => {
await render(CounterComponent);
});
describe('When clicking on Send ', () => {
test('Then emitted value is 8', async () => {
await render(CounterComponent);
});
});
});
});
});

45
apps/testing/19-input-output/src/app/counter.component.ts Normal file
View File

@@ -0,0 +1,45 @@
import { AsyncPipe } from '@angular/common';
import {
ChangeDetectionStrategy,
Component,
EventEmitter,
Input,
Output,
} from '@angular/core';
import { LetDirective } from '@ngrx/component';
import { ComponentStore } from '@ngrx/component-store';
@Component({
selector: 'app-counter',
standalone: true,
imports: [AsyncPipe, LetDirective],
template: `
<ng-container *ngrxLet="counter$ as counter">
<p data-testid="counter">Counter: {{ counter }}</p>
<button (click)="increment()">Increment</button>
<button (click)="decrement()">Decrement</button>
<button (click)="send.emit(counter)">Send</button>
</ng-container>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CounterComponent extends ComponentStore<{ counter: number }> {
@Input() set initialValue(initialValue: number) {
this.patchState({ counter: initialValue });
}
@Output() send = new EventEmitter<number>();
readonly counter$ = this.select((state) => state.counter);
readonly increment = this.updater((state) => ({
counter: state.counter + 1,
}));
readonly decrement = this.updater((state) => ({
counter: state.counter - 1,
}));
constructor() {
super({ counter: 0 });
}
}

0
apps/testing/19-input-output/src/assets/.gitkeep Normal file
View File

BIN
apps/testing/19-input-output/src/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

13
apps/testing/19-input-output/src/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TestingInputOutput</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/19-input-output/src/main.ts Normal file
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));

1
apps/testing/19-input-output/src/styles.scss Normal file
View File

@@ -0,0 +1 @@
/* You can add global styles to this file, and also import other style files */

2
apps/testing/19-input-output/src/test-setup.ts Normal file
View File

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