data-test-id eslint rules, create function and cypress commands

[ojkelly]

This has 2 failing tests on the eslint rules, because i cannot get the eslint environment running correctly, for the tests to run.

---

Kablamo eslint plugin

yarn add -D @kablamo/eslint-plugin

Add the following to your .eslintrc.js.

module.exports = {
  plugins: ["@kablamo"],
  extends: ["plugin:@kablamo/recommended"],
};

Rules

test-id-prefix-match-path

This rule fixes the first argument of createTestIds(prefix, [ ...ids]) to be a prefix derived from the files
current directory. This ensures consistent unique prefixes per component.

You can still suffix variables to the end of your test id for example data-test-id={${testId.myId}-${uuid}}`.

test-id-consistent-naming

This rule ensures common misspellings always get fixed to the snake-case data-test-id.

Configurations

This plugin contains a reccomended elsint ruleset to enable the included rules.

[github-actions]

Coverage increased (+0.05%) to 91.519% when pulling 3c7f566 on eslint-plugin into f916f47 on master.

[github-actions]

Coverage increased (+0.05%) to 91.519% when pulling 3c7f566 on eslint-plugin into f916f47 on master.

[nhardy]

This rule ensures common misspellings always get fixed to the snake-case data-test-id.

Should this be kebab-case data-testid?

[ojkelly]

TODO: in another PR

adding the following commands to the kerosene-test cypress folder

Cypress.Commands.add("visitStorybook", (path, storybookName, options = {}) => {
  cy.visit(
    `iframe.html?selectedKind=${encodeURIComponent(
      path,
    )}&selectedStory=${encodeURIComponent(storybookName)}`,
    options,
  );
});

Cypress.Commands.add("testId", testId => {
  cy.get(`[data-test-id="${testId}"]`);
});

[ojkelly]

This rule ensures common misspellings always get fixed to the snake-case data-test-id.

Should this be kebab-case data-testid?

changed the doc to say kebab-case.

I've also seen data-test-id and data-testid bikeshedded.

I know react-testing-library was adamant about data-testid, but has since added the ability to specify a custom selector so you can use data-test-id.

The general guidelines around global data attributes say no caps https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*. The spec itself says no uppers https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes

And then finally, every example they have with more than one word has them separated by hyphens so data-one-two instead of data-onetwo.

For example, a library called "DoQuery" could use attribute names like data-doquery-range, and a library called "jJo" could use attributes names like data-jjo-range. The jJo library could also provide an API to set which prefix to use (e.g. J.setDataPrefix('j2'), making the attributes have names like data-j2-range).

That context along with my time in webdev makes data-test-id feel much more natural that data-testid, in a similar way that yml is preferable over yaml.

[ojkelly]

I've also added the cypress commands that make storybook and using data-test-id easier.

[thoiberg]

LGTM 👍

Nice work!

[nhardy]

That context along with my time in webdev makes data-test-id feel much more natural that data-testid, in a similar way that yml is preferable over yaml.

Should it be configurable with data-test-id being the default then?

[ojkelly]

That context along with my time in webdev makes data-test-id feel much more natural that data-testid, in a similar way that yml is preferable over yaml.

Should it be configurable with data-test-id being the default then?

It could be. the eslint rule could take options ["data-test-id","data-testid"] the cypress helper command is harder. We could maybe make two files and you import the relevant one.

[nhardy]

Should this be "test-id-consistent-naming": ["error", "data-testid"],?

[ojkelly]

yeah i think so. the rulestester complains if you give it more than one arg, and I think that was confusing me.