From 8ff21fb5ca4258b0e64c2b2c4eb6edb5eb34ac48 Mon Sep 17 00:00:00 2001
From: Hadrien Milano <hadrien.milano@gmail.com>
Date: Sat, 10 Oct 2020 20:26:25 +0200
Subject: [PATCH] Update ng10 tests

---
 test/ng10/src/app/app.component.spec.ts       | 10 ++---
 .../src/app/fancy-button.component.spec.ts    | 41 +++++++++++++------
 2 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/test/ng10/src/app/app.component.spec.ts b/test/ng10/src/app/app.component.spec.ts
index cbcb109..64aa881 100644
--- a/test/ng10/src/app/app.component.spec.ts
+++ b/test/ng10/src/app/app.component.spec.ts
@@ -9,17 +9,16 @@ import { CONSOLE } from './auth/app.providers';
 
 describe('AppComponent', () => {
 
-    let page: Page;
-
     let isAuthenticated: boolean;
 
-    beforeEach(async () => {
+    function createPage() {
         isAuthenticated = false;
         when(getMock(AuthService).isAuthenticated()).useGetter(() => isAuthenticated);
-        page = new Page(await renderComponent(AppComponent, AppModule));
-    });
+        page = new Page(renderComponent(AppComponent, AppModule));
+    }
 
     it('lets user log in when not authenticated', fakeAsync(() => {
+        const page = createPage();
         when(getMock(AuthService).setAuthenticated(true)).return().once();
         page.detectChanges();
         page.loginButton.click();
@@ -27,6 +26,7 @@ describe('AppComponent', () => {
     }));
 
     it('presents a fancy button when authenticated', fakeAsync(() => {
+        const page = createPage();
         isAuthenticated = true;
         page.detectChanges();
         expect(page.fancyButton.confirmLabel).toBe('Got it');
diff --git a/test/ng10/src/app/fancy-button.component.spec.ts b/test/ng10/src/app/fancy-button.component.spec.ts
index b782e83..70f3951 100644
--- a/test/ng10/src/app/fancy-button.component.spec.ts
+++ b/test/ng10/src/app/fancy-button.component.spec.ts
@@ -1,23 +1,21 @@
 import { fakeAsync } from '@angular/core/testing';
-import { BasePage, getShallow, renderComponent } from 'ng-vacuum';
+import { BasePage, renderComponent } from 'ng-vacuum';
 
 import { AppModule } from './app.module';
 import { FancyButtonComponent } from './fancy-button.component';
 
 describe('FancyButtonComponent', () => {
 
-    let page: Page;
-
-    it('shows default values', fakeAsync(async () => {
-        page = new Page(await renderComponent(FancyButtonComponent, AppModule));
+    it('shows default values', fakeAsync(() => {
+        const page = new Page(renderComponent(FancyButtonComponent, AppModule));
         expect(page.confirmBtnLabel).toBe('Happy');
         expect(page.cancelBtnLabel).toBe('Sad');
         expect(page.description).toBe('Chose between Happy or Sad');
     }));
 
-    it('shows confirm and cancel labels', fakeAsync(async () => {
-        page = new Page(await getShallow(FancyButtonComponent, AppModule).render({
-            bind: {
+    it('shows confirm and cancel labels', fakeAsync(() => {
+        const page = new Page(renderComponent(FancyButtonComponent, AppModule, {
+            input: {
                 confirmLabel: 'hello',
                 cancelLabel: 'goodbye'
             }
@@ -33,19 +31,38 @@ describe('FancyButtonComponent', () => {
         expect(page.cancelBtnLabel).toBe('Tschuss');
         expect(page.description).toBe('Chose between Gruetzi or Tschuss');
     }));
+
+    it('emits click events', fakeAsync(() => {
+        const page = new Page(renderComponent(FancyButtonComponent, AppModule));
+
+        const emittedValues = page.outputs.clicked.capture();
+        page.confirmBtn.click();
+        expect(emittedValues).toEqual(['confirm']);
+
+        page.cancelBtn.click();
+        expect(emittedValues).toEqual(['confirm', 'cancel']);
+    }));
 });
 
 class Page extends BasePage<FancyButtonComponent> {
 
     get confirmBtnLabel(): string {
-        return (this.rendering.find('[test-id=confirm-btn]').nativeElement as HTMLButtonElement).innerText;
+        return this.confirmBtn.innerText;
     }
 
-    get cancelBtnLabel() {
-        return (this.rendering.find('[test-id=cancel-btn]').nativeElement as HTMLButtonElement).innerText;
+    get cancelBtnLabel(): string {
+        return this.cancelBtn.innerText;
     }
 
-    get description() {
+    get description(): string {
         return (this.rendering.find('[test-id=description]').nativeElement as HTMLDivElement).innerText;
     }
+
+    get confirmBtn(): HTMLButtonElement {
+        return this.rendering.find('[test-id=confirm-btn]').nativeElement;
+    }
+
+    get cancelBtn(): HTMLButtonElement {
+        return this.rendering.find('[test-id=cancel-btn]').nativeElement;
+    }
 }