How to use ember-cli-page-object - 10 common examples

emailInput: {
    scope: '[name=email]',
    isVisible: isVisible()
  },

  errors: collection('p.error'),

  loginSuccessfully(email, password) {
    this.username(email).password(password).submit();
  },

  loginUnsuccessfully(email, password) {
    this.username(email).password(password).submit();
  },

  password: fillable('[name=password]'),

  passwordInput: {
    scope: '[name=password]',
    isVisible: isVisible()
  },

  submit: clickable('button'),

  submitButton: {
    scope: 'button',
    isVisible: isVisible()
  },

  username: fillable('[name=email]'),

  forgotPasswordLink: {

import PageObject, {
  text,
  count,
  collection
} from 'ember-cli-page-object';

export default PageObject.create({
  title: text('.FreestyleUsage-title'),
  content: text('.FreestyleUsage-rendered'),
  numTitles: count('.FreestyleUsage-title'),
  numFocusButtons: count('.FreestyleUsage-focusCta'),
  numNotesSection: count('.FreestyleUsage-notes'),
  numCodeSection: count('.FreestyleUsage-usage'),

  notesSection: {
    scope: '.FreestyleUsage-notes',
    snippets: collection('.FreestyleUsage-snippet')
  },

  usageSection: {
    scope: '.FreestyleUsage-usage',
    snippets: collection('.FreestyleUsage-snippet', {
      rawText: text('', { normalize: false })
    })

}),
  },
  newCourseLink: text('[data-test-new-course] a'),
  newCourseLinkIsHidden: isHidden('[data-test-new-course] a'),
  savedCoursesCount: count('[data-test-courses] [data-test-active-row]'),
  visitNewCourse: clickable('[data-test-new-course] a'),
  courses: collection({
    scope: '[data-test-ilios-course-list]',
    itemScope: '[data-test-courses] [data-test-active-row]',

    item: {
      title: text('td', { at: 0 }),
      school: text('td', { at: 1 }),
      year: text('td', { at: 2 }),
      level: text('td', { at: 3 }),
      startDate: text('td', { at: 4 }),
      endDate: text('td', { at: 5 }),
      status: text('td', { at: 6 }),
      isLocked: hasClass('fa-lock', 'svg', {scope: 'td:eq(6)', at: 0}),
      isUnlocked: hasClass('fa-unlock', 'svg', {scope: 'td:eq(6)', at: 0}),
      lock: clickable('.fa-unlock', {scope: 'td:eq(6)'}),
      unLock: clickable('.fa-lock', {scope: 'td:eq(6)'}),
      remove: clickable('.remove', {scope: 'td:eq(6)'}),
      removeActionCount: count('.remove', {scope: 'td:eq(6)'}),
    },
  }),
  emptyListRowIsVisible: isVisible('[data-test-empty-list]'),
  sortByTitle: clickable('th', {scope: '[data-test-ilios-course-list] [data-test-course-headings]', at: 0}),
  sortByLevel: clickable('th', {scope: '[data-test-ilios-course-list] [data-test-course-headings]', at: 3}),
  sortByStartDate: clickable('th', {scope: '[data-test-ilios-course-list] [data-test-course-headings]', at: 4}),
  sortByEndDate: clickable('th', {scope: '[data-test-ilios-course-list] [data-test-course-headings]', at: 5}),
  sortByStatus: clickable('th', {scope: '[data-test-ilios-course-list] [data-test-course-headings]', at: 6}),

isSorted: hasClass('glyphicon', 'i'),
    colspan: attribute('colspan')
  }),
  headers: collection('thead tr', {
    cells: text('th', {multiple: true}),
    colspans: attribute('colspan', 'th', {multiple: true})
  }),
  footer: {
    scope: 'tfoot',
    cells: collection('tr td', {
      isComponent: hasClass('ember-view')
    })
  },
  navigation: {
    scope: '.table-nav',
    text: text(''),
    selectPageNumberExists: exists('select'),
    selectPageNumber: fillable('select'),
    selectPageNumberDisabled: property('disabled', 'select'),
    selectedPageNumber: value('select'),
    goToLastPage: clickable('button:eq(3)'),
    goToLastPageDisabled: hasClass('disabled', 'button:eq(3)'),
    goToNextPage: clickable('button:eq(2)'),
    goToNextPageDisabled: hasClass('disabled', 'button:eq(2)'),
    goToPrevPage: clickable('button:eq(1)'),
    goToPrevPageDisabled: hasClass('disabled', 'button:eq(1)'),
    goToFirstPage: clickable('button:eq(0)'),
    goToFirstPageDisabled: hasClass('disabled', 'button:eq(0)'),
    navigationButtons: text('button', {multiple: true}),
    btns: collection('button', {
      icon: attribute('class', 'i')
    }),

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')
    }
  });
}

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

const definition = {
  scope: '[data-test-curriculum-inventory-verification-preview-table4]',
  title: text('[data-test-title]'),
  table: {
    scope: 'table',
    headings: collection('thead tr th'),
    rows: collection('tbody tr', {
      id: text('td', {at: 0}),
      title: text('td', {at: 1}),
      numPrimary: text('td', {at: 2}),
      numNonPrimary: text('td', {at: 3})
    }),
    footer: collection('tfoot tr td'),
  },
};

export default definition;
export const component = create(definition);

visit: clickable('[data-test-plan-box]:last-child'),
      },
    },

    selectedPlan: {
      scope: '.highlight-plan',
      isHighlighted: hasClass('highlight-plan'),

      heading: {
        scope: '.highlight-plan [data-test-selected-plan-heading]',
        text: text()
      },

      name: {
        scope: '.highlight-plan [data-test-selected-plan-name]',
        text: text()
      },

      jobs: {
        scope: '.highlight-plan [data-test-selected-plan-jobs]',
        text: text()
      },

      price: {
        scope: '.highlight-plan [data-test-selected-plan-price]',
        text: text()
      },

      changePlan: {
        scope: '.highlight-plan [data-test-change-selected-plan]',
        text: text()
      }

passed: hasClass('passed'),
    failed: hasClass('failed'),
    errored: hasClass('errored'),

    commitSha: text('.row-commit .label-align'),
    committer: text('.row-committer .label-align'),

    commitDate: {
      scope: '.row-calendar div',
      title: attribute('title'),
      text: text('.label-align')
    },

    requestIconTitle: attribute('title', '.row-item.request span[title]'),
    duration: text('.row-duration .label-align'),
    message: text('.row-message'),

    cancelButton: {
      scope: '.action-button--cancel',
      visible: isVisible(),
      click: clickable()
    }
  }),

  showMoreButton: {
    scope: 'button.showmore-button',

    exists: isVisible(),
    click: clickable()
  }
});

item: {
        text: text(),
        selected: property('selected'),
      },
    }),
  },
  newCourseLink: text('[data-test-new-course] a'),
  newCourseLinkIsHidden: isHidden('[data-test-new-course] a'),
  savedCoursesCount: count('[data-test-courses] [data-test-active-row]'),
  visitNewCourse: clickable('[data-test-new-course] a'),
  courses: collection({
    scope: '[data-test-ilios-course-list]',
    itemScope: '[data-test-courses] [data-test-active-row]',

    item: {
      title: text('td', { at: 0 }),
      school: text('td', { at: 1 }),
      year: text('td', { at: 2 }),
      level: text('td', { at: 3 }),
      startDate: text('td', { at: 4 }),
      endDate: text('td', { at: 5 }),
      status: text('td', { at: 6 }),
      isLocked: hasClass('fa-lock', 'svg', {scope: 'td:eq(6)', at: 0}),
      isUnlocked: hasClass('fa-unlock', 'svg', {scope: 'td:eq(6)', at: 0}),
      lock: clickable('.fa-unlock', {scope: 'td:eq(6)'}),
      unLock: clickable('.fa-lock', {scope: 'td:eq(6)'}),
      remove: clickable('.remove', {scope: 'td:eq(6)'}),
      removeActionCount: count('.remove', {scope: 'td:eq(6)'}),
    },
  }),
  emptyListRowIsVisible: isVisible('[data-test-empty-list]'),
  sortByTitle: clickable('th', {scope: '[data-test-ilios-course-list] [data-test-course-headings]', at: 0}),

function list (scope) {
  return {...dragSortList({title : text()}), scope }
}