Update tutorial to use assert.strictEqual in place of assert.equal to pass eslint-plugin-qunit (#197)

* Update tutorial to use `assert.strictEqual` in place of `assert.equal`
to pass eslint-plugin-qunit

Co-authored-by: Godfrey Chan <godfreykfc@gmail.com>

Author: kategengler

.github/workflows/build.yml

@@ -18,7 +18,7 @@ jobs:
       fail-fast: false
       matrix:
         channel:
-          - release
+          # - release TODO: Re-enable once 4.0 is released
           - beta
     steps:
       - name: Set up Git

src/markdown/tutorial/part-1/03-automated-testing.md

@@ -68,17 +68,17 @@ Let's open the generated test file and replace the boilerplate test with our own
 -  test('visiting /super-rentals', async function (assert) {
 -    await visit('/super-rentals');
 -
--    assert.equal(currentURL(), '/super-rentals');
+-    assert.strictEqual(currentURL(), '/super-rentals');
 +  test('visiting /', async function (assert) {
 +    await visit('/');
 +
-+    assert.equal(currentURL(), '/');
++    assert.strictEqual(currentURL(), '/');
 +    assert.dom('h2').hasText('Welcome to Super Rentals!');
 +
 +    assert.dom('.jumbo a.button').hasText('About Us');
 +    await click('.jumbo a.button');
 +
-+    assert.equal(currentURL(), '/about');
++    assert.strictEqual(currentURL(), '/about');
    });
 ```
 
@@ -152,25 +152,25 @@ Let's practice what we learned by adding tests for the remaining pages:
 +  test('visiting /about', async function (assert) {
 +    await visit('/about');
 +
-+    assert.equal(currentURL(), '/about');
++    assert.strictEqual(currentURL(), '/about');
 +    assert.dom('h2').hasText('About Super Rentals');
 +
 +    assert.dom('.jumbo a.button').hasText('Contact Us');
 +    await click('.jumbo a.button');
 +
-+    assert.equal(currentURL(), '/getting-in-touch');
++    assert.strictEqual(currentURL(), '/getting-in-touch');
 +  });
 +
 +  test('visiting /getting-in-touch', async function (assert) {
 +    await visit('/getting-in-touch');
 +
-+    assert.equal(currentURL(), '/getting-in-touch');
++    assert.strictEqual(currentURL(), '/getting-in-touch');
 +    assert.dom('h2').hasText('Contact Us');
 +
 +    assert.dom('.jumbo a.button').hasText('About');
 +    await click('.jumbo a.button');
 +
-+    assert.equal(currentURL(), '/about');
++    assert.strictEqual(currentURL(), '/about');
 +  });
  });
 ```

src/markdown/tutorial/part-1/04-component-basics.md

@@ -265,17 +265,17 @@ But what kind of test? We *could* write a component test for the `<NavBar>` by i
 
 ```run:file:patch lang=js cwd=super-rentals filename=tests/acceptance/super-rentals-test.js
 @@ -11,2 +11,4 @@
-     assert.equal(currentURL(), '/');
+     assert.strictEqual(currentURL(), '/');
 +    assert.dom('nav').exists();
 +    assert.dom('h1').hasText('SuperRentals');
      assert.dom('h2').hasText('Welcome to Super Rentals!');
 @@ -23,2 +25,4 @@
-     assert.equal(currentURL(), '/about');
+     assert.strictEqual(currentURL(), '/about');
 +    assert.dom('nav').exists();
 +    assert.dom('h1').hasText('SuperRentals');
      assert.dom('h2').hasText('About Super Rentals');
 @@ -35,2 +39,4 @@
-     assert.equal(currentURL(), '/getting-in-touch');
+     assert.strictEqual(currentURL(), '/getting-in-touch');
 +    assert.dom('nav').exists();
 +    assert.dom('h1').hasText('SuperRentals');
      assert.dom('h2').hasText('Contact Us');
@@ -291,13 +291,13 @@ But what kind of test? We *could* write a component test for the `<NavBar>` by i
 +    assert.dom('nav a.menu-contact').hasText('Contact');
 +
 +    await click('nav a.menu-about');
-+    assert.equal(currentURL(), '/about');
++    assert.strictEqual(currentURL(), '/about');
 +
 +    await click('nav a.menu-contact');
-+    assert.equal(currentURL(), '/getting-in-touch');
++    assert.strictEqual(currentURL(), '/getting-in-touch');
 +
 +    await click('nav a.menu-index');
-+    assert.equal(currentURL(), '/');
++    assert.strictEqual(currentURL(), '/');
 +  });
  });
 ```

src/markdown/tutorial/part-2/09-route-params.md

@@ -333,13 +333,13 @@ Finally, let's add a `rental` template to actually *invoke* our `<Rental::Detail
 +    assert.dom('.rental').exists({ count: 3 });
 +
 +    await click('.rental:first-of-type a');
-+    assert.equal(currentURL(), '/rentals/grand-old-mansion');
++    assert.strictEqual(currentURL(), '/rentals/grand-old-mansion');
 +  });
 +
 +  test('visiting /rentals/grand-old-mansion', async function (assert) {
 +    await visit('/rentals/grand-old-mansion');
 +
-+    assert.equal(currentURL(), '/rentals/grand-old-mansion');
++    assert.strictEqual(currentURL(), '/rentals/grand-old-mansion');
 +    assert.dom('nav').exists();
 +    assert.dom('h1').containsText('SuperRentals');
 +    assert.dom('h2').containsText('Grand Old Mansion');

src/markdown/tutorial/part-2/10-service-injection.md

@@ -174,9 +174,9 @@ To be sure, let's add some tests! Let's start with an acceptance test:
 +    let button = find('.share.button');
 +
 +    let tweetURL = new URL(button.href);
-+    assert.equal(tweetURL.host, 'twitter.com');
++    assert.strictEqual(tweetURL.host, 'twitter.com');
 +
-+    assert.equal(
++    assert.strictEqual(
 +      tweetURL.searchParams.get('url'),
 +      `${window.location.origin}/rentals/grand-old-mansion`
 +    );
@@ -202,7 +202,7 @@ wait  #qunit-banner.qunit-fail
 
 Looking at the failure closely, the problem seems to be that the component had captured `http://localhost:4200/tests` as the "current page's URL". The issue here is that the `<ShareButton>` component uses `window.location.href` to capture the current URL. Because we are running our tests at `http://localhost:4200/tests`, that's what we got. *Technically* it's not wrong, but this is certainly not what we meant. Gotta love computers!
 
-This brings up an interesting question – why does the `currentURL()` test helper not have the same problem? In our test, we have been writing assertions like `assert.equal(currentURL(), '/about');`, and those assertions did not fail.
+This brings up an interesting question – why does the `currentURL()` test helper not have the same problem? In our test, we have been writing assertions like `assert.strictEqual(currentURL(), '/about');`, and those assertions did not fail.
 
 It turns out that this is something Ember's router handled for us. In an Ember app, the router is responsible for handling navigation and maintaining the URL. For example, when you click on a `<LinkTo>` component, it will ask the router to execute a *[route transition](../../../routing/preventing-and-retrying-transitions/)*. Normally, the router is set up to update the browser's address bar whenever it transitions into a new route. That way, your users will be able to use the browser's back button and bookmark functionality just like any other webpage.
 
@@ -262,16 +262,21 @@ We will take advantage of this capability in our component test:
  import { setupRenderingTest } from 'ember-qunit';
 +import Service from '@ember/service';
  import { render } from '@ember/test-helpers';
-@@ -5,2 +6,8 @@
+@@ -5,2 +6,13 @@
 
++const MOCK_URL = new URL(
++  '/foo/bar?baz=true#some-section',
++  window.location.origin
++);
++
 +class MockRouterService extends Service {
 +  get currentURL() {
 +    return '/foo/bar?baz=true#some-section';
 +  }
 +}
 +
  module('Integration | Component | share-button', function (hooks) {
-@@ -8,18 +15,22 @@
+@@ -8,18 +20,20 @@
 
 -  test('it renders', async function (assert) {
 -    // Set any properties with this.set('myProperty', 'value');
@@ -300,9 +305,7 @@ We will take advantage of this capability in our component test:
 +      .hasAttribute('rel', 'external nofollow noopener noreferrer')
 +      .hasAttribute(
 +        'href',
-+        `https://twitter.com/intent/tweet?url=${encodeURIComponent(
-+          new URL('/foo/bar?baz=true#some-section', window.location.origin)
-+        )}`
++        `https://twitter.com/intent/tweet?url=${encodeURIComponent(MOCK_URL.href)}`
 +      )
 +      .hasClass('share')
 +      .hasClass('button')
@@ -329,7 +332,7 @@ While we are here, let's add some more tests for the various functionalities of
 -import { render } from '@ember/test-helpers';
 +import { find, render } from '@ember/test-helpers';
  import { hbs } from 'ember-cli-htmlbars';
-@@ -17,2 +17,8 @@
+@@ -22,2 +22,8 @@
      this.owner.register('service:router', MockRouterService);
 +
 +    this.tweetParam = (param) => {
@@ -338,44 +341,39 @@ While we are here, let's add some more tests for the various functionalities of
 +      return url.searchParams.get(param);
 +    };
    });
-@@ -26,8 +32,3 @@
+@@ -31,6 +37,3 @@
        .hasAttribute('rel', 'external nofollow noopener noreferrer')
 -      .hasAttribute(
 -        'href',
--        `https://twitter.com/intent/tweet?url=${encodeURIComponent(
--          new URL('/foo/bar?baz=true#some-section', window.location.origin)
--        )}`
+-        `https://twitter.com/intent/tweet?url=${encodeURIComponent(MOCK_URL.href)}`
 -      )
 +      .hasAttribute('href', /^https:\/\/twitter\.com\/intent\/tweet/)
        .hasClass('share')
-@@ -35,2 +36,53 @@
+@@ -38,2 +41,50 @@
        .containsText('Tweet this!');
 +
-+    assert.equal(
-+      this.tweetParam('url'),
-+      new URL('/foo/bar?baz=true#some-section', window.location.origin)
-+    );
++    assert.strictEqual(this.tweetParam('url'), MOCK_URL.href);
 +  });
 +
 +  test('it supports passing @text', async function (assert) {
 +    await render(
 +      hbs`<ShareButton @text="Hello Twitter!">Tweet this!</ShareButton>`
 +    );
 +
-+    assert.equal(this.tweetParam('text'), 'Hello Twitter!');
++    assert.strictEqual(this.tweetParam('text'), 'Hello Twitter!');
 +  });
 +
 +  test('it supports passing @hashtags', async function (assert) {
 +    await render(
 +      hbs`<ShareButton @hashtags="foo,bar,baz">Tweet this!</ShareButton>`
 +    );
 +
-+    assert.equal(this.tweetParam('hashtags'), 'foo,bar,baz');
++    assert.strictEqual(this.tweetParam('hashtags'), 'foo,bar,baz');
 +  });
 +
 +  test('it supports passing @via', async function (assert) {
 +    await render(hbs`<ShareButton @via="emberjs">Tweet this!</ShareButton>`);
-+    assert.equal(this.tweetParam('via'), 'emberjs');
++    assert.strictEqual(this.tweetParam('via'), 'emberjs');
 +  });
 +
 +  test('it supports adding extra classes', async function (assert) {

src/markdown/tutorial/part-2/11-ember-data.md

@@ -129,19 +129,19 @@ The generator created some boilerplate code for us, which serves as a pretty goo
 +        'This grand old mansion sits on over 100 acres of rolling hills and dense redwood forests.',
 +    });
 +
-+    assert.equal(rental.type, 'Standalone');
++    assert.strictEqual(rental.type, 'Standalone');
 +
 +    rental.category = 'Condo';
-+    assert.equal(rental.type, 'Community');
++    assert.strictEqual(rental.type, 'Community');
 +
 +    rental.category = 'Townhouse';
-+    assert.equal(rental.type, 'Community');
++    assert.strictEqual(rental.type, 'Community');
 +
 +    rental.category = 'Apartment';
-+    assert.equal(rental.type, 'Community');
++    assert.strictEqual(rental.type, 'Community');
 +
 +    rental.category = 'Estate';
-+    assert.equal(rental.type, 'Standalone');
++    assert.strictEqual(rental.type, 'Standalone');
    });
 ```