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

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

export default {
  scope: '.user-projects-list',

  header: text('h3'),
  emptyState: text('.empty-state strong'),
  listItemCount: count('li'),
  projectDescription: text('li:first p'),
  projectIconSrc: property('src', 'li:first img'),
  projectTitle: text('li:first h4')
};

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


export default {
  scope: '[data-test-detail-objectives]',
  createNew: clickable('.detail-objectives-actions button'),
  save: clickable('.detail-objectives-actions button.bigadd'),
  cancel: clickable('.detail-objectives-actions button.bigcancel'),
  newObjective: {
    description: fillInFroalaEditor('.fr-box'),
    save: clickable('.done'),
    cancel: clickable('.cancel'),
    canSave: property('disabled', '.done'),
    validationError: text('.validation-error-message'),
    hasValidationError: isVisible('.validation-error-message'),
  },
  current: collection({
    scope: 'table',
    itemScope: 'tbody tr',
    item: {
      description: {
        scope: 'td:eq(0)',
        openEditor: clickable('.editable'),
        editorContents: froalaEditorValue('.fr-box'),
        edit: fillInFroalaEditor('.fr-box'),
        save: clickable('.done'),
        validationError: text('.validation-error-message'),
        hasValidationError: isVisible('.validation-error-message'),
      },

import {
  collection,
  count,
  isVisible,
  property
} from 'ember-cli-page-object';

export default {
  scope: '.project-users',

  userCount: count('li'),

  users: collection('li', {
    imageSource: property('src', 'img'),
    imageIsVisible: isVisible('img'),
    placeholderIsVisible: isVisible('div.icon')
  })
};

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

export default {
  scope: '.category-checkboxes',

  checkboxes: collection('li', {
    isChecked: property('checked', 'input'),
    label: { scope: 'label', name: text() }
  })
};

value
} from 'ember-cli-page-object';

import courseSearchResult from './course-search-result';

const definition = {
  scope: '[data-test-global-search]',
  noResultsIsVisible: isVisible('.no-results'),
  input: fillable('input.global-search-input'),
  clickIcon: clickable('[data-test-search-icon]'),
  academicYear: value('[data-test-academic-year-filter]'),
  academicYearOptions: text('[data-test-academic-year-filter]'),
  courseTitleLinks: collection('.course-title-link'),
  selectAcademicYear: fillable('[data-test-academic-year-filter]'),
  schoolFilters: collection('[data-test-school-filters] [data-test-school-filter]', {
    isSelected: property('checked', 'input'),
    isDisabled: property('disabled', 'input'),
    school: text('label'),
    toggle: clickable('label'),
  }),
  searchResults: collection('[data-test-course-search-result]', courseSearchResult),
};

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

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'),
    },
  }),
  headerTitle: text('[data-test-courses-header-title]'),
  toggleNewCourseForm: clickable('[data-test-toggle-new-course-form] button'),
  toggleNewCourseFormExists: isVisible('[data-test-toggle-new-course-form]'),
  newCourseForm: {
    scope: '[data-test-new-course]',
    title: fillable('[data-test-title]'),
    chooseYear: fillable('[data-test-year]'),