Skip to content

Commit d8ff613

Browse files
committed
update testing tools to gjs
1 parent 59163c7 commit d8ff613

File tree

1 file changed

+20
-18
lines changed

1 file changed

+20
-18
lines changed

guides/release/testing/testing-tools.md

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,18 @@ Every Ember app comes with [QUnit](http://qunitjs.com/) and [QUnit DOM](https://
1010

1111
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.
1212

13-
```javascript {data-filename=tests/integration/components/simple-button-test.js}
13+
```gjs {data-filename=tests/integration/components/simple-button-test.gjs}
1414
/*
1515
For simplicity, the import, module, and setup statements
1616
are omitted here. Our component accepts two arguments,
1717
label (string) and isDisabled (boolean).
1818
*/
1919
test("should show label", async function (assert) {
20-
await render(hbs`
20+
await render(<template>
2121
<SimpleButton
2222
@label="Hello world!"
2323
/>
24-
`);
24+
</template>);
2525
let button = this.element.querySelector("button");
2626
2727
// QUnit
@@ -32,12 +32,12 @@ test("should show label", async function (assert) {
3232
});
3333
3434
test("should allow disabling the button", async function (assert) {
35-
await render(hbs`
35+
await render(<template>
3636
<SimpleButton
3737
@label="Hello world!"
3838
@isDisabled={{true}}
3939
/>
40-
`);
40+
</template>);
4141
let button = this.element.querySelector("button");
4242
4343
// QUnit
@@ -84,26 +84,28 @@ You want to be able to grab DOM elements in your tests. Since Ember is just Java
8484

8585
Consider the example of a button component again. This time, our component can display a Material icon in addition to the label.
8686

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>
9799
```
98100

99-
```javascript {data-filename=tests/integration/components/simple-button-test.js}
101+
```gjs {data-filename=tests/integration/components/simple-button-test.gjs}
100102
test("should show icon and label", async function (assert) {
101-
await render(hbs`
103+
await render(<template>
102104
<SimpleButton
103105
@icon="face"
104106
@label="Hello world!"
105107
/>
106-
`);
108+
</template>);
107109
108110
// Bad
109111
assert.strictEqual(

0 commit comments

Comments
 (0)