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

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: {

value
} from 'ember-cli-page-object';
import meshManager from './mesh-manager';
import { fillInFroalaEditor, froalaEditorValue } from 'ilios/tests/helpers/froala-editor';
import { datePicker } from 'ilios/tests/helpers/date-picker';

export default {
  scope: '[data-test-detail-learning-materials]',
  createNew: clickable('.detail-learningmaterials-actions button'),
  pickNew: clickOnText('.detail-learningmaterials-actions ul li'),
  save: clickable('.actions button.bigadd'),
  cancel: clickable('.actions button.bigcancel'),
  canSearch: isVisible('[data-test-search-box]'),
  canCreateNew: isVisible('.detail-learningmaterials-actions .action-menu'),
  canCollapse: isVisible('.detail-learningmaterials-actions .collapse-button'),
  search: fillable('[data-test-search-box] input'),
  current: collection({
    scope: '.detail-learningmaterials-content table',
    itemScope: 'tbody tr',
    item: {
      title: text('td', { at: 0 }),
      owner: text('td', { at: 1 }),
      required: text('td', { at: 2 }),
      notes: text('td', { at: 3 }),
      mesh: text('td', { at: 4 }),
      status: text('td', { at: 5 }),
      isNotePublic: isVisible('.fa-eye'),
      isTimedRelease: isVisible('.fa-clock'),
      details: clickable('.link', { at: 0 }),
    },
  }),
  searchResults: collection({

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

const definition = {
  scope: '[data-test-school-vocabulary-term-manager]',
  title: text('[data-test-title]'),
  editTitle: clickable('[data-test-title] .clickable'),
  changeTitle: fillable('[data-test-title] input'),
  saveTitle: clickable('[data-test-title] .done'),
  hasError: isPresent('[data-test-title-error-message]'),
  errorMessage: text('[data-test-title-error-message]'),
  description: text('[data-test-description]'),
  breadcrumbs: {
    scope: '[data-test-breadcrumbs]',
    all: text('[data-test-all]'),
    vocabulary: text('[data-test-vocabulary]'),
    terms: collection('[data-test-term]', {
      title: text(),
    }),
  },
  isActive: {
    scope: '[data-test-is-active]',
    active: is(':checked', 'input'),
    toggle: clickable('[data-test-toggle-yesno] .switch-handle'),

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

export default {
  scope: '.organization-settings-form',

  description: {
    scope: 'input[name=description]',
    fillIn: fillable(),
    value: value()
  },

  imageDrop,

  name: {
    scope: 'input[name=name]',
    fillIn: fillable(),
    value: value()
  },

  save: {
    scope: '.save',
    click: clickable(),
    isVisible: isVisible()
  }
};

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

create,
  collection,
  count,
  fillable,
  hasClass,
  isHidden,
  isVisible,
  property,
  text,
  visitable
} from 'ember-cli-page-object';

export default create({
  scope: '[data-test-courses]',
  visit: visitable('/courses'),
  filterByTitle: fillable('[data-test-title-filter]'),
  filterByYear: fillable('[data-test-year-filter]'),
  filterByMyCourses: clickable('[data-test-my-courses-filter] label:eq(0)'),
  yearFilters: collection({
    itemScope: '[data-test-year-filter] option',
    item: {
      text: text(),
      selected: property('selected'),
    },
  }),
  schoolFilters: collection({
    itemScope: '[data-test-school-filter] option',
    item: {
      text: text(),
      selected: property('selected'),
    },
  }),

async selectPageNumber(number) {
      await click('.selection.compact.ui.dropdown');
      await click(`.selection.compact.ui.dropdown .menu .item[data-id='${JSON.stringify(number)}']`);
    },
    selectedPageNumber: text('.selection.compact.ui.dropdown .text'),
    selectPageNumberDisabled: hasClass('disabled', '.selection.compact.ui.dropdown'),
  },
  async changePageSize(size) {
    await click('.selection.compact.ui.dropdown');
    await click(`.selection.compact.ui.dropdown .menu .item[data-id='${JSON.stringify(size)}']`);
  },
  pageSize: text('.selection.compact.ui.dropdown .text'),

  filters: collection('table thead tr:eq(1) th', {
    content: text(),
    inputFilter: fillable('input'),
    inputValue: value('input'),
    inputPlaceholder: attribute('placeholder', 'input'),
    inputFilterExists: exists('input'),
    clearFilter: clickable('.clearFilterIcon'),
    clearFilterExists: exists('.clearFilterIcon'),
    clearFilterDisabled: attribute('disabled', '.clearFilterIcon'),
    async selectFilter(value) {
      if (value === 'true') {
          value = true;
      }
      if (value === 'false') {
          value = false;
      }
      await click('.selection.ui.dropdown');
      await click(`.selection.ui.dropdown .menu .item[data-id='${JSON.stringify(value)}']`);
    },

hasError: isVisible('.validation-error-message')
    },
    level: {
      scope: '.courselevel',
      value: text('span', { at: 0}),
      edit: clickable('.clickable'),
      set: fillable('select'),
      save: clickable('.done'),
      hasError: isVisible('.validation-error-message')
    },
    universalLocator: text('.universallocator'),
    clerkshipType: {
      scope: '.clerkshiptype',
      value: text('span', { at: 0}),
      edit: clickable('.clickable'),
      set: fillable('select'),
      save: clickable('.done')
    },
  },

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

fillInBlockContentInput: fillable(blockContentInput),
  keyUpBlockContentInput: triggerable('keyup', blockContentInput),
  async changeBlockContentInput(newValue) {
    await this.fillInBlockContentInput(newValue),
    await this.keyUpBlockContentInput()
  },
  toggleTastefulInput: clickable(tastefulInput),

  selectInputValue: value(selectInput),
  isSmall: hasClass('x-Bar--small', '.x-Bar'),
  isMedium: hasClass('x-Bar--medium', '.x-Bar'),
  changeSelectInput: fillable(selectInput),

  numberInputValue: value(numberInput),
  numberRendered: text('.x-Bar-rank'),
  changeNumberInput: fillable(numberInput),

  checkboxInputValue: value(checkboxInput),
  isVisible: isVisible('.x-Bar'),
  toggleCheckbox: clickable(checkboxInput),
});