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

checkboxContainer: {
      scope: '[data-test-select-row-container]',

      isHidden: hasClass('et-speech-only'),
    },

    toggleSelect: alias('checkbox.click'),

    collapse: {
      scope: '[data-test-collapse-row]',
      isCollapsed: property('checked'),
    },

    toggleCollapse: alias('collapse.click'),

    isSelected: hasClass('is-selected'),

    /**
      Helper function to click with options like the meta key and ctrl key set

      @param {Object} options - click event options
    */
    async clickWith(options) {
      await click(findElement(this), options);
    },

    doubleClick: triggerable('dblclick'),
  }),

  /**
    A shortcut to return cell page object specified by row & column indexes.
  */

get width() {
    return findElement(this).offsetWidth;
  },

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

  get isLeaf() {
    return findElement(this).dataset.testLeafHeader;
  },

  isFixedLeft: hasClass('is-fixed-left'),
  isFixedRight: hasClass('is-fixed-right'),

  contextMenu: triggerable('contextmenu'),

  /**
   * Resizes this column by dragging right border several pixels.
   */
  async resize(targetSize) {
    let resizeHandle = findElement(this, '.et-header-resize-area');

    if (!resizeHandle) {
      return;
    }

    let box = resizeHandle.getBoundingClientRect();
    let startX = (box.right + box.left) / 2;

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() {
    return findElement(this)
      .innerText.replace(/\s+/g, ' ')
      .trim();
  },

return findElement(this).offsetWidth;
  },

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

  get isLeaf() {
    return findElement(this).dataset.testLeafHeader;
  },

  isFixedLeft: hasClass('is-fixed-left'),
  isFixedRight: hasClass('is-fixed-right'),

  contextMenu: triggerable('contextmenu'),

  /**
   * Resizes this column by dragging right border several pixels.
   */
  async resize(targetSize) {
    let resizeHandle = findElement(this, '.et-header-resize-area');

    if (!resizeHandle) {
      return;
    }

    let box = resizeHandle.getBoundingClientRect();
    let startX = (box.right + box.left) / 2;
    let deltaX = (targetSize - this.width) / getScale(resizeHandle);

return findElement(this).offsetHeight;
    },

    checkbox: {
      scope: '[data-test-select-row]',
      isChecked: property('checked'),

      async clickWith(options) {
        await click(findElement(this), options);
      },
    },

    checkboxContainer: {
      scope: '[data-test-select-row-container]',

      isHidden: hasClass('et-speech-only'),
    },

    toggleSelect: alias('checkbox.click'),

    collapse: {
      scope: '[data-test-collapse-row]',
      isCollapsed: property('checked'),
    },

    toggleCollapse: alias('collapse.click'),

    isSelected: hasClass('is-selected'),

    /**
      Helper function to click with options like the meta key and ctrl key set

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() {
    return findElement(this)
      .innerText.replace(/\s+/g, ' ')
      .trim();

await mouseDown(header, startX - 20, header.clientHeight / 2);
    await mouseMove(header, startX, header.clientHeight / 2);
    await mouseMove(header, startX + deltaX, header.clientHeight / 2);
    await mouseUp(header, startX + deltaX, header.clientHeight / 2);
  },

  /**
    Helper function to click with options like the meta key and ctrl key set

    @param {Object} options - click event options
  */
  async clickWith(options) {
    await click(findElement(this), options);
  },

  isSortable: hasClass('is-sortable'),

  sort: SortPage,
  sortIndicator: alias('sort.indicator'),
  sortToggle: alias('sort.toggle'),

  resizeHandle: ResizePage,
});

export default {
  scope: 'thead',

  /**
   * List of columns in the header.
   */
  headers: collection('th', Header),