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

import {
  create,
  visitable,
  clickable
} from 'ember-cli-page-object';
import form from './components/login-form';
import navMenu from './components/navigation-menu';

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

  form,
  navMenu,

  clickForgotPassword: clickable('.t-forgot-password')
});

import leadershipCollapsed from 'ilios-common/page-objects/components/leadership-collapsed';
import leadershipList from 'ilios-common/page-objects/components/leadership-list';
import leadershipManager from 'ilios-common/page-objects/components/leadership-manager';

export default create({
  scope: '[data-test-program-details]',
  visit: visitable('/programs/:programId'),

  leadershipCollapsed,
  leadershipExpanded: {
    scope: '[data-test-program-leadership-expanded]',
    title: text('.title'),
    manage: clickable('.actions button'),
    save: clickable('.actions button.bigadd'),
    cancel: clickable('.actions button.bigcancel'),
    leadershipList,
    leadershipManager,
  },
});

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'
  },

  projectList: {
    scope: '.project-list'
  },

groups: collection({
          scope: 'ul',
          itemScope: 'li',
          item: {
            title: text(),
            isTopLevelGroup: hasClass('top-level-group')
          }
        })
      },
    }),
    manager: learnerGroupManager,
  },

  instructors: {
    scope: '[data-test-detail-instructors]',
    manage: clickable('.actions button'),
    save: clickable('.actions button.bigadd'),
    cancel: clickable('.actions button.bigcancel'),
    title: text('.detail-instructors-header .title'),
    currentGroups: collection({
      scope: '[data-test-instructor-groups]',
      itemScope: 'li',
      item: {
        title: text(),
      },
    }),
    currentInstructors: collection({
      scope: '[data-test-instructors]',
      itemScope: 'li',
      item: {
        title: text(),
      },

visit: clickable(),
      link: attribute('href'),
      visible: isVisible(),
    },
    sessionType: {
      scope: '.sessiontype',
      value: text('span', { at: 0}),
      edit: clickable('.clickable'),
      set: fillable('select'),
      save: clickable('.done'),
      hasError: isVisible('.validation-error-message')
    },
    sessionDescription: {
      scope: '.sessiondescription',
      value: text('span', { at: 0}),
      edit: clickable('.editable'),
      set: fillInFroalaEditor('.fr-box'),
      save: clickable('.done'),
      cancel: clickable('.cancel'),
      hasError: isVisible('.validation-error-message')
    },
    instructionalNotes: {
      scope: '[data-test-instructional-notes]',
      value: text('span', { at: 0}),
      edit: clickable('.editable'),
      set: fillInFroalaEditor('.fr-box'),
      save: clickable('.done'),
      cancel: clickable('.cancel'),
      hasError: isVisible('.validation-error-message')
    },
    ilmHours: {
      scope: '.sessionilmhours',

itemScope: '[data-test-result]',
      item: {
        add: clickable(),
        isSelectable: hasClass('clickable'),
        isSelected: notHasClass('clickable'),
      },
    }),
  },
  administratorSearch: {
    scope: '[data-test-administrator-search] [data-test-leadership-search]',
    search: fillable('input[type=search]'),
    results: collection({
      scope: '.results',
      itemScope: '[data-test-result]',
      item: {
        add: clickable(),
        isSelectable: hasClass('clickable'),
        isSelected: notHasClass('clickable'),
      },
    }),
  },
  selectedAdministrators: collection({
    scope: '[data-test-administrators] ul',
    itemScope: 'li',
    item: {
      remove: clickable('.remove'),
    }
  }),
};