Add strict-mode tests

Windvis · Feb 3, 2024 · 2986b81 · 2986b81
1 parent d98dc7b
commit 2986b81
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 22 deletions.
diff --git a/...ts/integration/helpers/breadcrumb-test.js → ...s/integration/helpers/breadcrumb-test.gts b/...ts/integration/helpers/breadcrumb-test.js → ...s/integration/helpers/breadcrumb-test.gts
@@ -1,41 +1,46 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render, settled } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import { tracked } from '@glimmer/tracking';
+
+// TODO, find out why the "nice" import doesn't work here
+// import { breadcrumb, breadcrumbs } from 'ember-breadcrumb-trail';
+import breadcrumb from 'ember-breadcrumb-trail/helpers/breadcrumb';
+import breadcrumbs from 'ember-breadcrumb-trail/helpers/breadcrumbs';
 
 module('Integration | Helper | breadcrumb', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it adds a breadcrumb when rendered', async function (assert) {
-    await render(hbs`
+    await render(<template>
       <ol>
         {{#each (breadcrumbs) as |breadcrumb|}}
           <li data-test-breadcrumb-item>{{breadcrumb.title}}</li>
         {{/each}}
       </ol>
 
       {{breadcrumb "foo"}}
-    `);
+    </template>);
 
     assert.dom('[data-test-breadcrumb-item]').hasText('foo');
   });
 
   test('it combines all positional arguments into a single title', async function (assert) {
-    await render(hbs`
+    await render(<template>
       <ol>
         {{#each (breadcrumbs) as |breadcrumb|}}
           <li data-test-breadcrumb-item>{{breadcrumb.title}}</li>
         {{/each}}
       </ol>
 
       {{breadcrumb "foo" " bar " "baz"}}
-    `);
+    </template>);
 
     assert.dom('[data-test-breadcrumb-item]').hasText('foo bar baz');
   });
 
   test("it's possible to access the passed in named arguments through the `data` key", async function (assert) {
-    await render(hbs`
+    await render(<template>
       <ol>
         {{#each (breadcrumbs) as |breadcrumb|}}
           <li>
@@ -47,15 +52,15 @@ module('Integration | Helper | breadcrumb', function (hooks) {
       </ol>
 
       {{breadcrumb "foo" route="index" isLink=false}}
-    `);
+    </template>);
 
     assert.dom('[data-test-title]').hasText('foo');
     assert.dom('[data-test-route]').hasText('index');
     assert.dom('[data-test-is-link]').hasText('false');
   });
 
   test("it's possible to add multiple breadcrumbs from the same template", async function (assert) {
-    await render(hbs`
+    await render(<template>
       <ol>
         {{#each (breadcrumbs) as |breadcrumb|}}
           <li data-test-breadcrumb-item>{{breadcrumb.title}}</li>
@@ -64,21 +69,25 @@ module('Integration | Helper | breadcrumb', function (hooks) {
 
       {{breadcrumb "foo"}}
       {{breadcrumb "bar"}}
-    `);
+    </template>);
 
-    let breadcrumbs = this.element.querySelectorAll(
+    const breadcrumbElements = this.element.querySelectorAll(
       '[data-test-breadcrumb-item]',
     );
-    assert.strictEqual(breadcrumbs.length, 2);
-    assert.dom(breadcrumbs[0]).hasText('foo');
-    assert.dom(breadcrumbs[1]).hasText('bar');
+    assert.strictEqual(breadcrumbElements.length, 2);
+    assert.dom(breadcrumbElements[0]).hasText('foo');
+    assert.dom(breadcrumbElements[1]).hasText('bar');
   });
 
   test('it updates the breadcrumb when data changes', async function (assert) {
-    this.dynamicTitle = 'foo';
-    this.isLink = false;
+    class TestState {
+      @tracked dynamicTitle: string = 'foo';
+      @tracked isLink: boolean = false;
+    }
+
+    const state = new TestState();
 
-    await render(hbs`
+    await render(<template>
       <ol>
         {{#each (breadcrumbs) as |breadcrumb|}}
           <li data-test-breadcrumb-item>
@@ -88,17 +97,17 @@ module('Integration | Helper | breadcrumb', function (hooks) {
         {{/each}}
       </ol>
 
-      {{breadcrumb this.dynamicTitle isLink=this.isLink}}
-    `);
+      {{breadcrumb state.dynamicTitle isLink=state.isLink}}
+    </template>);
 
-    let title = assert.dom('[data-test-title]').hasText('foo');
-    let link = assert.dom('[data-test-named-arg-data]').hasText('false');
+    const title = assert.dom('[data-test-title]').hasText('foo');
+    const link = assert.dom('[data-test-named-arg-data]').hasText('false');
 
-    this.set('dynamicTitle', 'bar');
+    state.dynamicTitle = 'bar';
     await settled();
     title.hasText('bar');
 
-    this.set('isLink', true);
+    state.isLink = true;
     await settled();
     link.hasText('true');
   });

diff --git a/test-app/tests/integration/helpers/loose-mode-test.ts b/test-app/tests/integration/helpers/loose-mode-test.ts
@@ -0,0 +1,22 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Loose-mode', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('both helpers resolve in loose-mode', async function (assert) {
+    await render(hbs`
+      <ol>
+        {{#each (breadcrumbs) as |breadcrumb|}}
+          <li data-test-breadcrumb-item>{{breadcrumb.title}}</li>
+        {{/each}}
+      </ol>
+
+      {{breadcrumb "foo" " bar " "baz"}}
+    `);
+
+    assert.dom('[data-test-breadcrumb-item]').hasText('foo bar baz');
+  });
+});