[Question]: navigation composition

[toranb]

Huge fan of your work and this great OSS project! One discussion I often get into with others is ...should we include menu/nav "clickable" inside specific page objects (and use composition to reuse a set of functions that do this) or ... should you just use more than 1 page object in your tests? One for the navigation /menu work and one for the content you are testing specifically ?

Thanks for the feedback!

[juanazam]

@toranb we are glad you like it 😄. That's actually a good question, I guess it's a matter of taste, in my opinion, I like my page objects to reflect everything that the user sees when they get to a page (including repeated content as a menu or nav).

Anyway there are same cases that having more than one PageObject is more clear to me, for example testing that a transition is done when the user does a particular action on a page.

  const createUserPage = PageObject.create({
    visit: visitable('/users/new'),
    fillInName: PageObject.fillable('#name')
  });

  const usersPage = PageObject.create({
    users: PageObject.collection({
      scope: 'users',
      itemScope: 'tr',
      item: {
        name: PageObject.text('td')
      }
    })
  });

test("user is redirected to user list page to see created user", function(assert) {
  createUserPage.visit().fillInName("toranb").clickOn('Save');

  andThen(function() {
    assert.equal(usersPage.users(0).name, "toranb");
  });
});

Hope this answers your question 😄

EDIT: you can ask questions like this on the ember-cli-page-object channel on the ember community slack.

[toranb]

@juanazam excellent (sorry I didn't utilize the slack channel first) !

[san650]

Thanks for the kind words @toranb.

It's really an interesting topic of discussion. Personally, I prefer to implement the nav menu as a page object component and include it on every page that needs it.

We're also discussing how to implement page object extensibility (#109) to DRY this type of definitions so you can implement a base page object that has all the common parts of the application (main menu, etc).

I would like to see how people is implementing this in general, so if you have examples you can share, It would be great to see them.

[toranb]

@san650 I looked over #109 and realized it isn't (yet) in master so for now I'll just follow that and watch what lands in master officially :)

I'm really new to adopting this myself but like mixin model (or any extend option you end up with) as I can include modal/ or navigation as needed. Thanks again!