@csssr/data-test-id

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

Installation

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

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

Usage

Create pair mapping files:

// 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:

// 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:

import { dataTestModules } from "./index";
// by class
const dataTest = dataTestModules.getModule("firstPairs");
// by function
const dataTest = dataTestModules("firstPairs");

...
    <div
        {...dataTest.get('addButton')}
    />
...

Usage in tests:

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);
});