Conventional test selectors

conventional-test-selectors.ts

test('createTestSelector', function(assert) {
  // Base namespace could be, for example, the component's name
  let base = createTestSelector('namespace');

  // Element that appears only once on the screen at a time
  assert.equal(base('single'), '[data-test-namespace="single"]');

  // List of elements, targeting all items
  assert.equal(base('multiple', null), '[data-test-namespace^="multiple:"]');

  // List of elements, targeting a single item
  assert.equal(base('multiple', 'unique'), '[data-test-namespace="multiple:unique"]');
});

// Impl.
const createTestSelector = (namespace: string) => (item: string, identifier?: string | null): string => {
  let operator = '';

  if (identifier) {
    item = `${item}:${identifier}`;
  } else if (identifier === null) {
    operator = '^';
    item = `${item}:`;
  }

  return `[data-test-${namespace}${operator}="${item}"]`;
};