docs: add example for issue #304 (#305)

Author: timdeschryver

apps/example-app/src/app/issues/issue-304.spec.ts

@@ -0,0 +1,67 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Location } from '@angular/common';
+import { render, screen } from '@testing-library/angular';
+import userEvent from '@testing-library/user-event';
+import { TestBed } from '@angular/core/testing';
+
+// with goBackSpy, the implementation of goBack won't be invoked (because it's using the spy)
+test('should call a goBack when user click in the button', async () => {
+  const goBackSpy = jest.fn();
+  await render(HeaderBackButtonComponent, {
+    declarations: [IconButtonComponent],
+    componentProperties: {
+      goBack: goBackSpy,
+    },
+  });
+
+  const button = screen.getByLabelText(/icon button/i);
+  userEvent.click(button);
+  expect(goBackSpy).toHaveBeenCalled();
+});
+
+// don't spy on goBack, this way the implementation of goBack is invoked, and you can test if location.back() is called
+test('should call a Location.back when user click in the button', async () => {
+  await render(HeaderBackButtonComponent, {
+    declarations: [IconButtonComponent],
+  });
+
+  const location = TestBed.inject(Location);
+  jest.spyOn(location, 'back');
+
+  const button = screen.getByLabelText(/icon button/i);
+  userEvent.click(button);
+  expect(location.back).toHaveBeenCalled();
+});
+
+@Component({
+  selector: 'app-cebs-header-back-button',
+  template: `
+    <header>
+      <app-cebs-icon-button icon="chevron_left" aria-label="back button" (clickEvent)="goBack()"></app-cebs-icon-button>
+    </header>
+  `,
+})
+class HeaderBackButtonComponent {
+  constructor(private location: Location) {}
+
+  goBack(): void {
+    this.location.back();
+  }
+}
+
+@Component({
+  selector: 'app-cebs-icon-button',
+  template: `
+    <button (click)="onClick()" aria-label="icon button">
+      <span class="material-symbols-outlined icon">{{ icon }}</span>
+    </button>
+  `,
+})
+class IconButtonComponent {
+  @Output() clickEvent = new EventEmitter();
+  @Input() icon!: string;
+
+  onClick(): void {
+    this.clickEvent.emit();
+  }
+}

apps/example-app/tsconfig.app.json

@@ -4,7 +4,7 @@
     "outDir": "../../dist/out-tsc",
     "types": [],
     "allowJs": true,
-    "target": "ES2017"
+    "target": "ES2020"
   },
   "files": ["src/main.ts", "src/polyfills.ts"],
   "include": ["src/**/*.d.ts"],

projects/testing-library/tsconfig.schematics.json

@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "strict": true,
-    "target": "es6",
+    "target": "ES2020",
     "module": "commonjs",
     "moduleResolution": "node",
     "esModuleInterop": true,

tsconfig.base.json

@@ -11,7 +11,7 @@
     "moduleResolution": "node",
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
-    "target": "es2015",
+    "target": "ES2020",
     "typeRoots": ["node_modules/@types"],
     "strict": true,
     "exactOptionalPropertyTypes": true,