@@ -10,18 +10,18 @@ Every Ember app comes with [QUnit](http://qunitjs.com/) and [QUnit DOM](https://
10
10
11
11
To see the power of QUnit DOM, consider this code snippet. It checks whether our button component shows the right label and the right attributes.
12
12
13
- ``` javascript {data-filename=tests/integration/components/simple-button-test.js }
13
+ ``` gjs {data-filename=tests/integration/components/simple-button-test.gjs }
14
14
/*
15
15
For simplicity, the import, module, and setup statements
16
16
are omitted here. Our component accepts two arguments,
17
17
label (string) and isDisabled (boolean).
18
18
*/
19
19
test("should show label", async function (assert) {
20
- await render (hbs `
20
+ await render(<template>
21
21
<SimpleButton
22
22
@label="Hello world!"
23
23
/>
24
- ` );
24
+ </template> );
25
25
let button = this.element.querySelector("button");
26
26
27
27
// QUnit
@@ -32,12 +32,12 @@ test("should show label", async function (assert) {
32
32
});
33
33
34
34
test("should allow disabling the button", async function (assert) {
35
- await render (hbs `
35
+ await render(<template>
36
36
<SimpleButton
37
37
@label="Hello world!"
38
38
@isDisabled={{true}}
39
39
/>
40
- ` );
40
+ </template> );
41
41
let button = this.element.querySelector("button");
42
42
43
43
// QUnit
@@ -84,26 +84,28 @@ You want to be able to grab DOM elements in your tests. Since Ember is just Java
84
84
85
85
Consider the example of a button component again. This time, our component can display a Material icon in addition to the label.
86
86
87
- ``` handlebars {data-filename=app/components/simple-button.hbs}
88
- <button data-test-button={{@label}} type="button">
89
- {{#if @icon}}
90
- <i data-test-icon aria-hidden="true" class="material-icons">
91
- {{@icon}}
92
- </i>
93
- {{/if}}
94
-
95
- <span data-test-label>{{@label}}</span>
96
- </button>
87
+ ``` gjs {data-filename=app/components/simple-button.gjs}
88
+ <template>
89
+ <button data-test-button={{@label}} type="button">
90
+ {{#if @icon}}
91
+ <i data-test-icon aria-hidden="true" class="material-icons">
92
+ {{@icon}}
93
+ </i>
94
+ {{/if}}
95
+
96
+ <span data-test-label>{{@label}}</span>
97
+ </button>
98
+ </template>
97
99
```
98
100
99
- ``` javascript {data-filename=tests/integration/components/simple-button-test.js }
101
+ ``` gjs {data-filename=tests/integration/components/simple-button-test.gjs }
100
102
test("should show icon and label", async function (assert) {
101
- await render (hbs `
103
+ await render(<template>
102
104
<SimpleButton
103
105
@icon="face"
104
106
@label="Hello world!"
105
107
/>
106
- ` );
108
+ </template> );
107
109
108
110
// Bad
109
111
assert.strictEqual(
0 commit comments