React Markers

01_front_marker.js

export default function marker(value) {
  if (process.env.NODE_ENV !== 'production') {
    return {
      'data-marker': value,
    };
  }

  return {};
}

export function createMarker(prefix) {
  return (suffix) => marker(`${prefix}-${suffix}`);
}

02_front_Logo.js

const mark = createMarker('Logo');

export default class Logo extends React.Component {
  render() {
    return (
      <Link
        {...mark('Link')}
      />
    );
  }
}

03_specs_marker.js

export default function marker(value) {
  return `[data-marker="${value}"]`;
}

export function createMarker(prefix) {
  return (suffix) => marker(`${prefix}-${suffix}`);
}

export function chain(...selectors) {
  return selectors.join(' ');
}

04_specs_Logo.spec.js

test('logo/isLink', async (t) => {
  const b = createHeadlessBrowser();

  await b.openUrl('/');
  await b.waitForSelector(Logo('Link'));

  const logo = b.querySelector(Logo('Link'));

  t.equal(logo.tagName, 'A');
  t.equal(logo.getAttribute('href'), '/');
});