From 1a563eacbd5b3af7e210727e6c330b64f9c73925 Mon Sep 17 00:00:00 2001
From: Timo Tijhof <krinkle@fastmail.com>
Date: Mon, 10 Jul 2023 18:33:38 +0100
Subject: [PATCH 1/2] testing: Improve examples by avoiding `assert.expect()`

---
 guides/release/testing/testing-components.md | 33 +++++++++-----------
 1 file changed, 14 insertions(+), 19 deletions(-)

diff --git a/guides/release/testing/testing-components.md b/guides/release/testing/testing-components.md
index d5e2d9d5a5..283a56ce2d 100644
--- a/guides/release/testing/testing-components.md
+++ b/guides/release/testing/testing-components.md
@@ -71,8 +71,6 @@ module('Integration | Component | pretty-color', function(hooks) {
   setupRenderingTest(hooks);
 
   test('should change colors', async function(assert) {
-    assert.expect(1);
-
     // set the outer context to red
     this.set('colorValue', 'red');
 
@@ -102,8 +100,6 @@ module('Integration | Component | pretty-color', function(hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function(assert) {
-    assert.expect(2);
-
     // set the outer context to red
     this.set('colorValue', 'red');
 
@@ -129,8 +125,6 @@ module('Integration | Component | pretty-color', function(hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function(assert) {
-    assert.expect(2);
-
     this.set('colorValue', 'orange');
 
     await render(hbs`<PrettyColor @name={{this.colorValue}} />`);
@@ -189,8 +183,6 @@ module('Integration | Component | magic-title', function(hooks) {
   setupRenderingTest(hooks);
 
   test('should update title on button click', async function(assert) {
-    assert.expect(2);
-
     await render(hbs`<MagicTitle />`);
 
     assert.equal(this.element.querySelector('h2').textContent.trim(), 'Hello World', 'initial text is hello world');
@@ -241,8 +233,9 @@ export default class CommentFormComponent extends Component {
 ```
 
 Here's an example test that asserts that the specified `externalAction` function is invoked when the component's internal `submitComment` action is triggered by making use of a test double (dummy function).
-`assert.expect(1)` at the top of the test makes sure that the assertion inside the
-external action is called:
+The value from the external action is captured in a shared variable (if and when it is called),
+so that it can be explicitly asserted directly in the test function at the time where we
+expect the closure to have been called.
 
 ```javascript {data-filename="tests/integration/components/comment-form-test.js"}
 import { module, test } from 'qunit';
@@ -254,12 +247,10 @@ module('Integration | Component | comment-form', function(hooks) {
   setupRenderingTest(hooks);
 
   test('should trigger external action on form submit', async function(assert) {
-    assert.expect(1);
-
     // test double for the external action
-    this.set('externalAction', (actual) => {
-      let expected = { comment: 'You are not a wizard!' };
-      assert.deepEqual(actual, expected, 'submitted value is passed to external action');
+    let actual;
+    this.set('externalAction', (data) => {
+      actual = data;
     });
 
     await render(hbs`<CommentForm @submitComment={{this.externalAction}} />`);
@@ -269,6 +260,9 @@ module('Integration | Component | comment-form', function(hooks) {
 
     // click the button to submit the form
     await click('.comment-input');
+
+    let expected = { comment: 'You are not a wizard!' };
+    assert.deepEqual(actual, expected, 'submitted value is passed to external action');
   });
 });
 ```
@@ -522,11 +516,11 @@ module('Integration | Component | delayed-typeahead', function(hooks) {
   ];
 
   test('should render results after typing a term', async function(assert) {
-    assert.expect(2);
-
     this.set('results', []);
-    this.set('fetchResults', (value) => {
-      assert.equal(value, 'test', 'fetch closure action called with search value');
+
+    let value;
+    this.set('fetchResults', (data) => {
+      value = data;
       this.set('results', stubResults);
     });
 
@@ -535,6 +529,7 @@ module('Integration | Component | delayed-typeahead', function(hooks) {
     this.element.querySelector('input').dispatchEvent(new Event('keyup'));
 
     await settled();
+    assert.equal(value, 'test', 'fetch closure action called with search value');
 
     assert.equal(this.element.querySelectorAll('.result').length, 2, 'two results rendered');
   });

From ce108da2f6debde4a616afdf5f8f1956fff14d85 Mon Sep 17 00:00:00 2001
From: Anne-Greeth Schot-van Herwijnen <anne-greeth.vanherwijnen@nedap.com>
Date: Mon, 15 Apr 2024 18:01:19 +0200
Subject: [PATCH 2/2] Update testing-components.md

---
 guides/release/testing/testing-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/guides/release/testing/testing-components.md b/guides/release/testing/testing-components.md
index 283a56ce2d..95ff6bbd11 100644
--- a/guides/release/testing/testing-components.md
+++ b/guides/release/testing/testing-components.md
@@ -235,7 +235,7 @@ export default class CommentFormComponent extends Component {
 Here's an example test that asserts that the specified `externalAction` function is invoked when the component's internal `submitComment` action is triggered by making use of a test double (dummy function).
 The value from the external action is captured in a shared variable (if and when it is called),
 so that it can be explicitly asserted directly in the test function at the time where we
-expect the closure to have been called.
+expect the closure action to have been called.
 
 ```javascript {data-filename="tests/integration/components/comment-form-test.js"}
 import { module, test } from 'qunit';