How to use the ember-classy-page-object.extend function in ember-classy-page-object

import PageObject, { alias, collection, hasClass, triggerable } from 'ember-classy-page-object';
import { findElement } from 'ember-classy-page-object/extend';
import { click } from 'ember-native-dom-helpers';

import { mouseDown, mouseMove, mouseUp } from '../../helpers/mouse';
import { getScale } from '../../helpers/element';

export const SortPage = PageObject.extend({
  indicator: {
    scope: '[data-test-sort-indicator]',
    isAscending: hasClass('is-ascending'),
    isDescending: hasClass('is-descending'),
  },
  toggle: {
    scope: '[data-test-sort-toggle]',
  },
});

export const ResizePage = PageObject.extend({
  scope: '[data-test-resize-handle]',
});

const Header = PageObject.extend({
  get text() {

import PageObject, { alias } from 'ember-classy-page-object';
import { findElement } from 'ember-classy-page-object/extend';

import EmberTableBodyPage from './-private/ember-table-body';
import EmberTableFooterPage from './-private/ember-table-footer';
import EmberTableHeaderPage from './-private/ember-table-header';

/**
 * Ember Table page object. Use this page object and its nested header/body object to retrieve table
 * data and manipulate table in test.
 */
export default PageObject.extend({
  scope: '[data-test-ember-table]',

  /**
   * Page object for table header.
   */
  header: EmberTableHeaderPage,

  /**
   * Page object for table body.
   */
  body: EmberTableBodyPage,

  /**
   * Page object for table footer.
   */
  footer: EmberTableFooterPage,

export const SortPage = PageObject.extend({
  indicator: {
    scope: '[data-test-sort-indicator]',
    isAscending: hasClass('is-ascending'),
    isDescending: hasClass('is-descending'),
  },
  toggle: {
    scope: '[data-test-sort-toggle]',
  },
});

export const ResizePage = PageObject.extend({
  scope: '[data-test-resize-handle]',
});

const Header = PageObject.extend({
  get text() {
    return findElement(this)
      .innerText.replace(/\s+/g, ' ')
      .trim();
  },

  /**
   * Retrieves selected header cell width.
   */
  get width() {
    return findElement(this).offsetWidth;
  },

  /**
   * Retrieves selected header cell height.
   */

import { mouseDown, mouseMove, mouseUp } from '../../helpers/mouse';
import { getScale } from '../../helpers/element';

export const SortPage = PageObject.extend({
  indicator: {
    scope: '[data-test-sort-indicator]',
    isAscending: hasClass('is-ascending'),
    isDescending: hasClass('is-descending'),
  },
  toggle: {
    scope: '[data-test-sort-toggle]',
  },
});

export const ResizePage = PageObject.extend({
  scope: '[data-test-resize-handle]',
});

const Header = PageObject.extend({
  get text() {
    return findElement(this)
      .innerText.replace(/\s+/g, ' ')
      .trim();
  },

  /**
   * Retrieves selected header cell width.
   */
  get width() {
    return findElement(this).offsetWidth;
  },

import PageObject, {
  alias,
  triggerable,
  collection,
  hasClass,
  property,
} from 'ember-classy-page-object';
import { findElement } from 'ember-classy-page-object/extend';

import { click } from 'ember-native-dom-helpers';

export default PageObject.extend({
  scope: 'tbody',

  /**
    Returns the number of rows in the body.
  */
  get rowCount() {
    return Number(findElement(this).getAttribute('data-test-row-count'));
  },

  /**
    List of rows in table body. Each of property/function in this collections is the property/func
    of a single row selected by using calling rows.objectAt(index).
  */
  rows: collection({
    scope: 'tr',