Skip to content

Commit

Permalink
Fix issues with prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
chancancode committed Jan 12, 2021
1 parent a7f5b96 commit c32aa34
Show file tree
Hide file tree
Showing 11 changed files with 460 additions and 218 deletions.
2 changes: 1 addition & 1 deletion src/markdown/tutorial/part-1/01-orientation.md
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ del package.json
+ details.runtime = totalRuntime;
+ });
+
+ QUnit.begin(function( details ) {
+ QUnit.begin(details => {
+ let ua = document.getElementById('qunit-userAgent');
+ ua.innerText = ua.innerText.replace(/QUnit [0-9\.]+/g, 'QUnit');
+ ua.innerText = ua.innerText.replace(/(WebKit|Chrome|Safari)\/[0-9\.]+/g, '$1');
Expand Down
28 changes: 24 additions & 4 deletions src/markdown/tutorial/part-1/03-automated-testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,26 @@ In this case, we generated an *[acceptance test](../../../testing/test-types/#to
git add tests/acceptance/super-rentals-test.js
```

<!-- patch for https://github.com/emberjs/ember.js/issues/19333 -->

```run:file:patch hidden=true cwd=super-rentals filename=tests/acceptance/super-rentals-test.js
@@ -4,6 +4,6 @@

-module('Acceptance | super rentals', function(hooks) {
+module('Acceptance | super rentals', function (hooks) {
setupApplicationTest(hooks);

- test('visiting /super-rentals', async function(assert) {
+ test('visiting /super-rentals', async function (assert) {
await visit('/super-rentals');
```
```run:command hidden=true cwd=super-rentals
git add tests/acceptance/super-rentals-test.js
```
<!-- end patch for https://github.com/emberjs/ember.js/issues/19333 -->
Generators aren't required; we *could* have created the file ourselves which would have accomplished the exact same thing. But, generators certainly save us a lot of typing. Go ahead and take a peek at the acceptance test file and see for yourself.
> Zoey says...
Expand All @@ -65,11 +85,11 @@ Let's open the generated test file and replace the boilerplate test with our own
import { setupApplicationTest } from 'ember-qunit';
@@ -7,6 +7,12 @@

- test('visiting /super-rentals', async function(assert) {
- test('visiting /super-rentals', async function (assert) {
- await visit('/super-rentals');
-
- assert.equal(currentURL(), '/super-rentals');
+ test('visiting /', async function(assert) {
+ test('visiting /', async function (assert) {
+ await visit('/');
+
+ assert.equal(currentURL(), '/');
Expand Down Expand Up @@ -149,7 +169,7 @@ Let's practice what we learned by adding tests for the remaining pages:
@@ -18,2 +18,26 @@
});
+
+ test('visiting /about', async function(assert) {
+ test('visiting /about', async function (assert) {
+ await visit('/about');
+
+ assert.equal(currentURL(), '/about');
Expand All @@ -161,7 +181,7 @@ Let's practice what we learned by adding tests for the remaining pages:
+ assert.equal(currentURL(), '/getting-in-touch');
+ });
+
+ test('visiting /getting-in-touch', async function(assert) {
+ test('visiting /getting-in-touch', async function (assert) {
+ await visit('/getting-in-touch');
+
+ assert.equal(currentURL(), '/getting-in-touch');
Expand Down
31 changes: 27 additions & 4 deletions src/markdown/tutorial/part-1/04-component-basics.md
Original file line number Diff line number Diff line change
Expand Up @@ -153,16 +153,39 @@ ember generate component-test jumbo
git add tests/integration/components/jumbo-test.js
```

<!-- patch for https://github.com/emberjs/ember.js/issues/19333 -->

```run:file:patch hidden=true cwd=super-rentals filename=tests/integration/components/jumbo-test.js
@@ -5,8 +5,8 @@

-module('Integration | Component | jumbo', function(hooks) {
+module('Integration | Component | jumbo', function (hooks) {
setupRenderingTest(hooks);

- test('it renders', async function(assert) {
+ test('it renders', async function (assert) {
// Set any properties with this.set('myProperty', 'value');
- // Handle any actions with this.set('myAction', function(val) { ... });
+ // Handle any actions with this.set('myAction', function (val) { ... });

```
```run:command hidden=true cwd=super-rentals
git add tests/integration/components/jumbo-test.js
```
<!-- end patch for https://github.com/emberjs/ember.js/issues/19333 -->
Here, we used the generator to generate a *[component test](../../../testing/testing-components/)*, also known as a rendering test. These are used to render and test a single component at a time. This is in contrast to the acceptance tests that we wrote earlier, which have to navigate and render entire pages worth of content.
Let's replace the boilerplate code that was generated for us with our own test:
```run:file:patch lang=js cwd=super-rentals filename=tests/integration/components/jumbo-test.js
@@ -8,18 +8,8 @@

- test('it renders', async function(assert) {
- test('it renders', async function (assert) {
- // Set any properties with this.set('myProperty', 'value');
- // Handle any actions with this.set('myAction', function(val) { ... });
- // Handle any actions with this.set('myAction', function (val) { ... });
-
- await render(hbs`<Jumbo />`);
-
Expand All @@ -176,7 +199,7 @@ Let's replace the boilerplate code that was generated for us with our own test:
- `);
-
- assert.equal(this.element.textContent.trim(), 'template block text');
+ test('it renders the content inside a jumbo header with a tomster', async function(assert) {
+ test('it renders the content inside a jumbo header with a tomster', async function (assert) {
+ await render(hbs`<Jumbo>Hello World</Jumbo>`);
+
+ assert.dom('.jumbo').exists();
Expand Down Expand Up @@ -282,7 +305,7 @@ But what kind of test? We *could* write a component test for the `<NavBar>` by i
@@ -42,2 +48,20 @@
});
+
+ test('navigating using the nav-bar', async function(assert) {
+ test('navigating using the nav-bar', async function (assert) {
+ await visit('/');
+
+ assert.dom('nav').exists();
Expand Down
69 changes: 59 additions & 10 deletions src/markdown/tutorial/part-1/05-more-about-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,29 @@ git add app/components/rental.hbs
git add tests/integration/components/rental-test.js
```

<!-- patch for https://github.com/emberjs/ember.js/issues/19333 -->

```run:file:patch hidden=true cwd=super-rentals filename=tests/integration/components/rental-test.js
@@ -5,8 +5,8 @@

-module('Integration | Component | rental', function(hooks) {
+module('Integration | Component | rental', function (hooks) {
setupRenderingTest(hooks);

- test('it renders', async function(assert) {
+ test('it renders', async function (assert) {
// Set any properties with this.set('myProperty', 'value');
- // Handle any actions with this.set('myAction', function(val) { ... });
+ // Handle any actions with this.set('myAction', function (val) { ... });

```
```run:command hidden=true cwd=super-rentals
git add tests/integration/components/rental-test.js
```
<!-- end patch for https://github.com/emberjs/ember.js/issues/19333 -->
We will start by editing the template. Let's *[hard-code](https://en.wikipedia.org/wiki/Hard_coding)* the details for one rental property for now, and replace it with the real data from the server later on.
```run:file:patch lang=handlebars cwd=super-rentals filename=app/components/rental.hbs
Expand Down Expand Up @@ -61,9 +84,9 @@ Then, we will write a test to ensure all of the details are present. We will rep
```run:file:patch lang=js cwd=super-rentals filename=tests/integration/components/rental-test.js
@@ -8,18 +8,11 @@

- test('it renders', async function(assert) {
- test('it renders', async function (assert) {
- // Set any properties with this.set('myProperty', 'value');
- // Handle any actions with this.set('myAction', function(val) { ... });
- // Handle any actions with this.set('myAction', function (val) { ... });
-
- await render(hbs`<Rental />`);
-
Expand All @@ -77,7 +100,7 @@ Then, we will write a test to ensure all of the details are present. We will rep
- `);
-
- assert.equal(this.element.textContent.trim(), 'template block text');
+ test('it renders information about a rental property', async function(assert) {
+ test('it renders information about a rental property', async function (assert) {
+ await render(hbs`<Rental />`);
+
+ assert.dom('article').hasClass('rental');
Expand Down Expand Up @@ -147,6 +170,30 @@ git add app/components/rental/image.hbs
git add tests/integration/components/rental/image-test.js
```
<!-- patch for https://github.com/emberjs/ember.js/issues/19333 -->
```run:file:patch hidden=true cwd=super-rentals filename=tests/integration/components/rental/image-test.js
@@ -5,8 +5,8 @@

-module('Integration | Component | rental/image', function(hooks) {
+module('Integration | Component | rental/image', function (hooks) {
setupRenderingTest(hooks);

- test('it renders', async function(assert) {
+ test('it renders', async function (assert) {
// Set any properties with this.set('myProperty', 'value');
- // Handle any actions with this.set('myAction', function(val) { ... });
+ // Handle any actions with this.set('myAction', function (val) { ... });

```
```run:command hidden=true cwd=super-rentals
git add tests/integration/components/rental/image-test.js
```
<!-- end patch for https://github.com/emberjs/ember.js/issues/19333 -->
Components like these are known as *[namespaced](https://en.wikipedia.org/wiki/Namespace)* components. Namespacing allows us to organize our components by folders according to their purpose. This is completely optional&mdash;namespaced components are not special in any way.
## Forwarding HTML Attributes with `...attributes`
Expand Down Expand Up @@ -188,11 +235,11 @@ In general, it is a good idea to add `...attributes` to the primary element in y
Let's write a test for our new component!
```run:file:patch lang=js cwd=super-rentals filename=tests/integration/components/rental/image-test.js
@@ -8,18 +8,13 @@
@@ -8,18 +8,15 @@

- test('it renders', async function(assert) {
- test('it renders', async function (assert) {
- // Set any properties with this.set('myProperty', 'value');
- // Handle any actions with this.set('myAction', function(val) { ... });
- // Handle any actions with this.set('myAction', function (val) { ... });
-
- await render(hbs`<Rental::Image />`);
-
Expand All @@ -206,17 +253,19 @@ Let's write a test for our new component!
- `);
-
- assert.equal(this.element.textContent.trim(), 'template block text');
+ test('it renders the given image', async function(assert) {
+ test('it renders the given image', async function (assert) {
+ await render(hbs`
+ <Rental::Image
+ src="/assets/images/teaching-tomster.png"
+ alt="Teaching Tomster"
+ />
+ `);
+
+ assert.dom('.image').exists();
+ assert.dom('.image img').hasAttribute('src', '/assets/images/teaching-tomster.png');
+ assert.dom('.image img').hasAttribute('alt', 'Teaching Tomster');
+ assert
+ .dom('.image img')
+ .exists()
+ .hasAttribute('src', '/assets/images/teaching-tomster.png')
+ .hasAttribute('alt', 'Teaching Tomster');
});
```
Expand Down
2 changes: 1 addition & 1 deletion src/markdown/tutorial/part-1/06-interactive-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,7 @@ Finally, let's write a test for this new behavior:
@@ -20,2 +21,26 @@
});
+
+ test('clicking on the component toggles its size', async function(assert) {
+ test('clicking on the component toggles its size', async function (assert) {
+ await render(hbs`
+ <Rental::Image
+ src="/assets/images/teaching-tomster.png"
Expand Down
Loading

0 comments on commit c32aa34

Please sign in to comment.