Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

get-e2e-test-classname

NumminorihSF3MIT1.1.3

Get unique classnames for e2e tests with prefix

e2e, classname

readme

get-e2e-test-classname

This package allow to guarantee that class names used in e2e tests are unique. Also it adds prefix for every classname to let QA know if some classname can be used by themselves.

Example: `jsx harmony import { getE2ETestClassName } from 'get-e2e-test-classname';

const myClass = getE2ETestClassName('my');

const ReactComp = () => <button className={myClass}>test</button>;


In case of using non-unique className, this package will throw an error. Example:
```jsx harmony
import { getE2ETestClassName } from 'get-e2e-test-classname';

const myClass = getE2ETestClassName('my');
const myClass2 = getE2ETestClassName('my'); // throw new Error

Default prefix is '-'. So getE2ETestClassName('my') === '-my'

Change prefix

To use custom prefix, you can use next code: `jsx harmony import { getE2ETestClassName, setPrefix } from 'get-e2e-test-classname';

setPrefix('my-prefix-');

getE2ETestClassName('name'); // 'my-prefix-name\


**Warn!** Created classname is `prefix + originalClassName` without any separator. 

### Create scope
To prevent issues with hard-coding long part of classnames to make them unique, you may use scopes.
Code without scope:
```jsx harmony
import { getE2ETestClassName } from 'get-e2e-test-classname';

const e2e = {
  firstNameInput: getE2ETestClassName('my-form-inside-application-first-name-input'),
  lastNameInput: getE2ETestClassName('my-form-inside-application-last-name-input'),
  emailInput: getE2ETestClassName('my-form-inside-application-email-input'),
  passwordInput: getE2ETestClassName('my-form-inside-application-password-input'),
};

It can be replaced with: `jsx harmony import { createScoped } from 'get-e2e-test-classname';

const getE2ETestClassName = createScoped('my-form-inside-application');

const e2e = { firstNameInput: getE2ETestClassName('first-name-input'), lastNameInput: getE2ETestClassName('last-name-input'), emailInput: getE2ETestClassName('email-input'), passwordInput: getE2ETestClassName('password-input'), }; `

Warn! Code isn't totally equal to unscoped cause created classnames will be different:

Manual Scoped
-my-form-inside-application-first-name-input -my-form-inside-application_first-name-input
^ ^