Update busy model wrapper component to use page object

[daveconnis]

What's in this PR?

Adding page object to busy-model-wrapper-test and writing out tests that actually test the component. Originally, there was only an it renders test. Planning on testing both onSaving and onDeleting.

Fixes #1607

[daveconnis]

Unsure what I need in the page object because I'm not sure what model is in /Users/imaginationstation/sites/code-corps-ember/app/templates/components/common/busy-model-wrapper.hbs. What is this referencing? It isn't the model which is set to null in the corresponding .js file is it? if so, where is the action defined for setting model to model.isSaving or model.isDeleting

[begedin]

@daveconnis The idea of that component, is, you give it an ember data model and wrap the component around some sort of UI related to that model. If the model is not being saved or deleted at the moment, it shows that UI. Otherwise, it shows a message indicating it's saving or deleting.

From that, you don't really need to put anything in the page object, although we may at some point

What you want to test is

• if model is saving, but is not deleted, page.text is "Saving"
• if model is saving and is deleted, page.text is "Deleting"
• if model is neither saving nor deleted, page.text is whatever you wrapped the component around

If you set your render page as

page.render(hbs`{{#budy-model-wrapper model=model}}Foo{{/busy-model-wrapper}}`)

Then bullet nr. 3 simply asserts page.text is 'Foo'

[begedin]

So to add to my previous comment, your direction is fine. Just need to cover the 2 other cases.

[daveconnis]

Have the first two tests passing, by setting the model, however, I'm unsure how to get the this one passing without something to yield. Nikola mentioned earlier that I could set my renderPage to page.render(hbs{{#busy-model-wrapper model=model}}Foo{{/busy-model-wrapper}}) but I've tried this both in my initial renderPage() function and in the test itself and haven't gotten anywhere with it. The error I get is

Error: Element not found.

PageObject: 'page.text'
Selector: ':first'

I got this on both of my tests prior, but only because I'd messed up the boolean values onSaving and onDeleting. I fixed that, but I'm not sure what this would need to accept that neither onSaving or onDeleting are false.

[joshsmith]

You won't want to use renderPage for this since that's just a helper function.

In this case you would do:

page.render(hbs`
  {{#common/busy-model-wrapper model=model}}
    Foo
  {{/common/busy-model-wrapper}}
`);

inside of your test.

[daveconnis]

I've deleted the tag, class, and page object for this, haven't switched the page object syntax back to jQuery yet, but when I do, I'll be sure to comment out WHY we haven't switched this over to a page object.

[joshsmith]

@daveconnis do you want to finish this one up before continuing on the other?

[daveconnis]

Biggest thing I want attention on is this comment. Want to make sure it makes sense. Remember, we veto'd the page object for this test because it was just, if I remember right:
tagname: ' ' scope: .busymodelwrapper

[joshsmith]

Comments should be multi-line when over 80 chars.

[begedin]

@daveconnis I decided to wrap this up.

In hindsight, we didn't pay enough attention on how the busy model wrapper works and sent you in the wrong direction.

What I ended up doing is I used your findings to setup a dynamically defined page object and a render-page function which wraps the component call in a test container div, so we can still assert page.text instead of this.$().text().trim()