@csssr/data-test-id

Tools for using data-test-id in components and tests

Installation

``bash
npm i -D @csssr/data-test-id

yarn add -D @csssr/data-test-id
`

Usage

Create pair mapping files:

` ts
// examplesPairs.ts
import { DataTestRawPairs } from "@csssr/data-test-id/types";

export const firstPairs: DataTestRawPairs = {
addButton: "example:form:add_button",
cancelButton: "example:form:cancel",
container: "example:form:container",
subPairs: {
country: "example:form:country",
place: "example:form:place",
},
};
`

Create file index.ts for initialization:
` ts
// index.ts
import { examplePairs } from "./examplesPairs";
import { DataTestRawModules } from "@csssr/data-test-id/types";

// by class
import DataTest from "@csssr/data-test-id";
// by function
import { getDataTestModules } from "../../src/tools";

const dataTestRawModules: DataTestRawModules = {
firstPairs,
};

// by class
export const dataTestModules = new DataTest(dataTestRawModules);
// by function
export const dataTestModules = getDataTestModules(dataTestRawModules);
`
Usage in components:
` ts
import { dataTestModules } from "./index";
// by class
const dataTest = dataTestModules.getModule("firstPairs");
// by function
const dataTest = dataTestModules("firstPairs");

...
{...dataTest.get('addButton')}
/>
...
`
Usage in tests:
` ts
import { dataTestModules } from "./index";
// by class
const dataTest = dataTestModules.getModule("firstPairs");
// by function
const dataTest = dataTestModules("firstPairs");

const firstPairsSelectors = dataTest.getSelectors();

function test() {
step("Тест", () => {
browser.click(firstPairsSelectors.addButton).pause(1000);
});
``