How to use the ember-cli-page-object.visitable function in ember-cli-page-object

} from 'ember-cli-page-object';
import userListItem from './components/user-list-item';

function buildContributorsDefinitionForIndex(index) {
  return {
    scope: `.contributors-list:eq(${index})`,
    emptyMessageVisible: isVisible('.contributors-list--empty'),
    contributors: collection({
      itemScope: 'li',
      item: userListItem
    })
  };
}

export default create({
  visit: visitable('/:project_organization_slug/:project_slug/settings/contributors'),

  pendingContributors: buildContributorsDefinitionForIndex(0),
  owners: buildContributorsDefinitionForIndex(1),
  admins: buildContributorsDefinitionForIndex(2),
  others: buildContributorsDefinitionForIndex(3),
  projectMenu: {
    scope: '.project__menu',
    contributors: {
      scope: '.contributors',
      infoText: text('.info'),
      infoVisible: isVisible('.info')
    }
  }
});

import {
  clickable,
  collection,
  create,
  fillable,
  hasClass,
  text,
  visitable
} from 'ember-cli-page-object';

export default create({
  visitIndex: visitable(':organization'),
  visitSettingsProfile: visitable('organizations/:organization/settings/profile'),

  name: fillable('[name=name]'),
  description: fillable('[name=description]'),
  clickSave: clickable('.save'),

  successAlerts: collection('.flash-messages--full-width .alert-success', { scope: 'p' }),

  clickSettingsMenuItem: clickable('.organization-menu li a:contains("Settings")'),

  projectsMenuItemIsActive: hasClass('active', '.organization-menu li a:contains("Projects")'),

  settingsMenuItemIsActive: hasClass('active', '.organization-menu li a:contains("Settings")'),

  orgHeader: {
    scope: '.organization-header'

import { collection, create, visitable } from 'ember-cli-page-object';

export default create({
  visit: visitable('/admin/github/events/:id'),

  flashErrors: collection('.flash-messages--full-width .flash-message.alert-danger'),

  error: {
    scope: '[data-test-error]'
  },

  eventTitle: {
    scope: '[data-test-event-title]'
  },

  failureReason: {
    scope: '[data-test-failure-reason]'
  },

  flashMessages: collection('.flash-messages--full-width .flash-message'),

import {
  collection,
  create,
  text,
  visitable
} from 'ember-cli-page-object';

export default create({
  visit: visitable('/team'),

  company: {
    scope: '.company',

    header: text('h2'),
    items: collection('li')
  },

  contributors: {
    scope: '.contributors',

    header: text('h2'),
    items: collection('li')
  }
});

import {
  clickable,
  collection,
  create,
  fillable,
  visitable
} from 'ember-cli-page-object';

export default create({
  visit: visitable('admin/organization-invites/new'),

  flashMessages: collection('.flash-messages--full-width .flash-message'),

  flashErrors: collection('.flash-messages--full-width .flash-message.alert-danger'),

  inviteForm: {
    scope: '[data-test-invite-form]',

    clickSubmit: clickable('[data-test-submit]'),

    errors: collection('.input-group.has-error'),

    inputEmail: fillable('[name=email]'),
    inputOrganizationName: fillable('[name=organizationName]')
  },

import {
  clickable,
  collection,
  create,
  fillable,
  text,
  visitable
} from 'ember-cli-page-object';
import donationProgress from 'code-corps-ember/tests/pages/components/donations/donation-progress';
import errorFormatter from 'code-corps-ember/tests/pages/components/error-formatter';

export default create({
  visit: visitable(':organization/:project/settings/donations/goals'),

  donationProgress,

  donationGoals: collection('.donation-goals .donation-goal', { clickEdit: clickable('.edit') }),

  editedDonationGoals: collection('.donation-goals .donation-goal-edit', {
    amount: fillable('input[name=amount]'),
    description: fillable('textarea[name=description]'),
    clickSave: clickable('.save'),
    clickCancel: clickable('.cancel'),
    validationErrors: collection('.input-error', { message: text('') })
  }),

  errorFormatter,

  clickActivateDonationGoals: clickable('.activate-donations'),

import { create, visitable, collection, attribute, clickable } from 'ember-cli-page-object';

import filter from 'consul-ui/tests/pages/components/acl-filter';
export default create({
  visit: visitable('/:dc/acls'),
  acls: collection('[data-test-acl]', {
    name: attribute('data-test-acl'),
    acl: clickable('a'),
  }),
  filter: filter,
});

function githubAppsRepositoryCollection(scope) {
  return collection(`${scope} li.profile-repolist-item`, {
    name: text('a.profile-repo'),

    isPublic: isPresent('.icon.public'),
    isPrivate: isPresent('.icon.private'),

    settings: {
      scope: '.profile-settings',
      isDisabled: hasClass('disabled')
    }
  });
}

export default create({
  visit: visitable('/account'),
  visitOrganization: visitable('/organizations/:name'),
  name: text('.profile-header h1'),
  nameBadge: { scope: '.profile-header .badge' },
  login: text('.login'),

  avatar: {
    scope: '.profile-header .avatar-wrapper',

    src: attribute('src', 'img'),
    checkmark: { scope: '.checkmark' }
  },

  syncButton: {
    scope: '.sync-button',
    lastSynced: text('.sync-last'),
    text: text('.button'),

import {
  clickable,
  collection,
  create,
  fillable,
  value,
  visitable
} from 'ember-cli-page-object';

import imageDrop from 'code-corps-ember/tests/pages/components/image-drop';
import navigationMenu from 'code-corps-ember/tests/pages/components/navigation-menu';

export default create({
  visit: visitable('organizations/new'),

  flashMessages: collection('.flash-messages--full-width .flash-message'),

  inviteCodeForm: {
    scope: '[data-test-invite-code-form]',

    clickSubmit: clickable('[data-test-submit]'),

    errors: collection('.input-group.has-error'),

    inputCode: fillable('[name=code]')
  },

  navigationMenu,

  organizationForm: {