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

pressEscKey: triggerable('keydown', 'input', {
    eventProperties: {
      keyCode : 27,
      which   : 27
    }
  }),

  pressRKey: triggerable('keydown', 'input', {
    eventProperties: {
      keyCode : 82,
      which   : 82
    }
  }),

  pressUpKey: triggerable('keydown', 'input', {
    eventProperties: {
      keyCode : 38,
      which   : 38
    }
  })
};

scope: '[data-test-global-search-box]',
  input: fillable('input'),
  inputValue: value('input'),
  inputHasFocus: is(':focus', 'input'),
  triggerInput: triggerable('keyup', 'input'),
  clickIcon: clickable('[data-test-search-icon]'),
  autocompleteResults: collection('[data-test-autocomplete] li'),
  resultsRow1HasActiveClass: hasClass('active', 'li:nth-child(1)'),
  resultsRow2HasActiveClass: hasClass('active', 'li:nth-child(2)'),
  resultsRow3HasActiveClass: hasClass('active', 'li:nth-child(3)'),
  keyUp: {
    scope: '[data-test-input]',
    enter: triggerable('keyup', '', { eventProperties: { key: 'Enter' } }),
    down: triggerable('keyup', '', { eventProperties: { key: 'ArrowDown' } }),
    up: triggerable('keyup', '', { eventProperties: { key: 'ArrowUp' } }),
    escape: triggerable('keyup', '', { eventProperties: { key: 'Escape' } }),
  }
};

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

text,
  triggerable,
  visitable
} from 'ember-cli-page-object';
import imageDrop from 'code-corps-ember/tests/pages/components/image-drop';
import navMenu from './components/navigation-menu';
import skillsTypeahead from './components/skills-typeahead';

export default create({
  start: visitable('/start'),
  interests: visitable('/start/interests'),
  skills: visitable('/start/skills'),
  expertise: visitable('/start/expertise'),

  firstName: fillable('[name="firstName"]'),
  firstNameEnter: triggerable('keyup', '[name="firstName"]', { eventProperties: { keyCode: 13 } }),
  lastName: fillable('[name="lastName"]'),
  lastNameEnter: triggerable('keyup', '[name="lastName"]', { eventProperties: { keyCode: 13 } }),
  clickCategoryItem: clickable('.category-item button'),

  footer: {
    scope: '.site-footer'
  },

  startButton: {
    scope: '.hello__column--name-input button',
    isDisabled: attribute('disabled')
  },

  startFooterButton: {
    scope: '.start__footer button',
    isDisabled: attribute('disabled')

clickable,
  collection,
  fillable,
  isVisible,
  triggerable
} from 'ember-cli-page-object';

export default {
  scope: '.create-comment-form',

  clickSave: clickable('button[name=save]'),

  editor: {
    scope: '.editor-with-preview',

    hitCtrlEnter: triggerable('keydown', 'textarea[name=markdown]', { eventProperties: { keyCode: 13, ctrlKey: true } }),

    bodyPreview: {
      scope: '.body-preview'
    },

    clickPreview: clickable('.preview'),

    markdown: fillable('textarea[name=markdown]')
  },

  errors: collection('.error'),

  rendersLogin: isVisible('a[href$=login]'),
  rendersMarkdown: isVisible('[name=markdown]'),
  rendersSaveButton: isVisible('[name=save]'),
  rendersSignup: isVisible('a[href$=signup]')

visitable
} from 'ember-cli-page-object';
import imageDrop from 'code-corps-ember/tests/pages/components/image-drop';
import navMenu from './components/navigation-menu';
import skillsTypeahead from './components/skills-typeahead';

export default create({
  start: visitable('/start'),
  interests: visitable('/start/interests'),
  skills: visitable('/start/skills'),
  expertise: visitable('/start/expertise'),

  firstName: fillable('[name="firstName"]'),
  firstNameEnter: triggerable('keyup', '[name="firstName"]', { eventProperties: { keyCode: 13 } }),
  lastName: fillable('[name="lastName"]'),
  lastNameEnter: triggerable('keyup', '[name="lastName"]', { eventProperties: { keyCode: 13 } }),
  clickCategoryItem: clickable('.category-item button'),

  footer: {
    scope: '.site-footer'
  },

  startButton: {
    scope: '.hello__column--name-input button',
    isDisabled: attribute('disabled')
  },

  startFooterButton: {
    scope: '.start__footer button',
    isDisabled: attribute('disabled')
  },

export default create({
  visit: visitable('/'),
  repoTitle: text('.repo-header .repo-title h1'),
  clickSidebarMyReposTab: clickable('#tab_owned a'),
  clickSidebarRunningTab: clickable('#tab_running a'),
  runningTabIsActive: hasClass('active', '#tab_running'),
  myReposTabIsActive: hasClass('active', '#tab_owned'),
  navigateToProfilePage: clickable('#profile-page-link'),
  sidebarRepositories: collection('ul.repos-list li.repo', repositoryObject),
  sidebarRunningTabText: text('#tab_running a'),
  sidebarRunningRepositories: collection('.sidebar-list .tile--sidebar', repositoryObject),
  missingReposMessage: text('.loading-container'),
  viewRunningJob: clickable('p.tile-title a'),
  enterSearchQuery: fillable('#travis-search'),
  pressEnter: triggerable('keyup', '#travis-search', { eventProperties: { keyCode: 13 } }),
});

issueNumber: {
    scope: '[data-test-issue-number]'
  },

  isTooltipTarget: hasClass('ember-tooltip-or-popover-target'),

  loadingLarge: {
    scope: '[data-test-loading-large]'
  },

  loadingSmall: {
    scope: '[data-test-loading-small]'
  },

  mouseenter: triggerable('mouseenter'),
  mouseleave: triggerable('mouseleave'),

  repoName: {
    scope: '[data-test-repo-name]'
  },

  tooltip,

  url: {
    scope: '[data-test-issue-url]'
  }
};

import {
  fillable,
  triggerable
} from 'ember-cli-page-object';

import suggestionsArea from 'code-corps-ember/tests/pages/components/_suggestions-area';

export default {
  fillIn: fillable('input'),
  keydown: triggerable('keydown', 'input'),

  suggestionsArea
};

const definition = {
  scope: '[data-test-global-search-box]',
  input: fillable('input'),
  inputValue: value('input'),
  inputHasFocus: is(':focus', 'input'),
  triggerInput: triggerable('keyup', 'input'),
  clickIcon: clickable('[data-test-search-icon]'),
  autocompleteResults: collection('[data-test-autocomplete] li'),
  resultsRow1HasActiveClass: hasClass('active', 'li:nth-child(1)'),
  resultsRow2HasActiveClass: hasClass('active', 'li:nth-child(2)'),
  resultsRow3HasActiveClass: hasClass('active', 'li:nth-child(3)'),
  keyUp: {
    scope: '[data-test-input]',
    enter: triggerable('keyup', '', { eventProperties: { key: 'Enter' } }),
    down: triggerable('keyup', '', { eventProperties: { key: 'ArrowDown' } }),
    up: triggerable('keyup', '', { eventProperties: { key: 'ArrowUp' } }),
    escape: triggerable('keyup', '', { eventProperties: { key: 'Escape' } }),
  }
};

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

import { collection, hasClass, triggerable } from 'ember-cli-page-object';

export default {
  scope: '.skill-dropdown-item',

  listItemIsSelected: hasClass('selected'),
  mouseenter: triggerable('mouseenter'),
  mousedown: triggerable('mousedown'),

  highlightedStrings: collection('strong')
};