the road to 1.0

ember-semantic-test-helpers.md

semantic-dom-selectors -----> ember-semantic-test-helpers
          |                           |
          |                           |
          |                           |   
      qunit-semantic-assertions ------
          |
          |
          |
       qunit-dom

extracted selectors so that other communities can use the same engine.

Config

config follows eslint syntax.

import { config } from 'ember-semantic-test-helpers'

//basic error level
config.setErrorLevels({
  'invalid-for-relationship': 0
  'percived-by-name': 2
  'my-custom-rule': 1
  aria: [0, 'substring'] // rule specific options
})

each of these keys are defined in the finders defined in the What if my custom component is not findable section

Action helpers

asserts semantics of select / toggle they are announced differently. currently buttons and links would fall under click

• click (all clickable elements/ inputs will be focused checkboxes will be toggled)
• select
• fillin
• toggle ( on the fence of removing this in favour of click, using it will ensure that the dom is semantic though)

Assertions

The goal is to assert that you are using the correct semantics for each of these objects.

• assert.alert('this is my alert string')
• assert.table('monthly savings) uses table caption for name
• assert.button('this is my button text')
• assert.link
• assert.dialog //need to find out how dialogs are announced
• assert.input //currently would work for all inputs that have a .value, and if not should walk aria tree to find value selects, toggls, text-fields would all fall under this.

over time we can find more :) for example menus.

What if my custom component is not findable

1. the component is not aria complaint nor semantic
2. the semantic-dom-selectors does not handle it.

The solution for both of these is to, build a custom finder, until 1 and 2 are both resolved.

import { config } from 'ember-semantic-test-helpers'

// The key is used to be configureable when setting error levels. allows consumer to be able to, easily find parts of test 
// That are using this finder if they want to deprecate and remove it.
config.registerFinder({ // not sure if this should be a class or if a pojo is enough
   key: 'my-custom-finder ',
   run: function(selector, text){
       findObject
   },
   errorText: function(type, labelText){
    return `could not find power select labeled ${labelText}`
   }
})

{
 key: string
 run: function(selector: string, text: string): HTMLElement
 errorText: function(type, labelText)
}

What if my custom component is not fillable

import { config } from 'ember-semantic-test-helpers'
 
//here are 2 that i have built for my apps
config.registerActor({
  type:'select',
  run: async function selectizeFiller(control, value){
    if(control.attributes.class.value.includes('selectized')){
      let options = document.querySelectorAll(`#${control.parentElement.attributes.id.value} .option`);
      let element = Array.prototype.slice.call(options).find(function(element){
        return element.innerText === value
      })
      await click(element);
      return true;
    }
    return false;
  }
})

//this one should be able to be simplified the lib has evolved since then.
config.registerActor({
  type:'select',
  run: async function simpleSelectFiller(control, value){
    let id = control.attributes.id.value;
    if(document.querySelector(`#${id} .ember-power-select`)){
      await click(`#${control.attributes.id.value} .ember-power-select-trigger`);
      let options = document.querySelector(`#${control.attributes.id.value} [role="option"]`);
      for(let i = 0; i < options.length; i++){
        if(options[i].innerText.toLowerCase() == value.toLowerCase()){
          await click(options[i]);
          break;
        }
      }
    }
  }
})

{
  type: Enum('select', 'toggle', 'text', 'click')
  run:function(control: HTMLElement, value)
}

I18n

Either

• i18n libs expose proxied versions of helpers and assertions
• semantic selectors accepts a translater function config //maybe lower perf not sure how significant

 import { config } from 'ember-semantic-test-helpers'

 config.translate = function(label){
  //do translation
  return 
 }

• create a proxy addon that proxies helpers.

Community growth

• addons should use this to test that the addon is percivable
• maybe we need a badge or a special point on observer to award addons that pass these tests.
• all new versions of addons will run the tests to make sure they don't break anything etc.

Unanswered Questions

• Should finders and actors extend base classes ?
• best way to support i18n
• more default finders like (findByPlaceholder) //the long term goal here is that this addon will create a migration path to aria compatability instead of forcing people to be compatible today.