используя стилизованные компоненты или пользовательский компонент с кипарисом - PullRequest
Новая
       61

используя стилизованные компоненты или пользовательский компонент с кипарисом

0 голосов
/ 06 мая 2020

Селектор Cypress прост, просто выберите cy.get('.myComp') и <input className="myComp" />, но с компонентом стиля

, возможно, нам нужно использовать настраиваемый атрибут, такой как cy-data, cy-testid et c . Думаю, нет другого ярлыка, кроме заливки нашего компонента этим настраиваемым атрибутом, верно? , то вам нужно полностью передать свой настраиваемый атрибут 

<Custom cy-data="btn1" />

const Custom = ({cy-data}) => <button cy-data={cy-data} />

, чтобы избежать этой боли?

1 Ответ

0 голосов
/ 06 мая 2020

Мы используем атрибут data-test-target и записываем его вручную в JSX. В простой версии это все, что вам нужно. Но если у вас есть сложные случаи, например, две формы на одной странице с одинаковыми полями, вам необходимо их различать. Итак, мы делаем это:

Цель может быть построена по 3 параметрам:

  • block: required
  • element: optional
  • context: optional

Представьте, что у вас есть компонент React и вы хотите установить цели тестирования. Например, у вас есть 2 кнопки в компоненте: удалить и отредактировать, поэтому он будет выглядеть как 

<button data-test-target="component-name:remove">Remove</button>
<button data-test-target="component-name">Edit</button>

Если у вас есть более одного этого компонента на странице, вы должны передать контекст в props: 

<button data-test-target="component-name:remove::todo-list">Remove</button>

Помощник, который я использую, чтобы следовать этой идее: 

import dashify from 'dashify';

export const createTestAttribute = ({
    block: blockPart,
    element,
    context,
}) => {
    const elementPart = element ? `:${dashify(element)}` : '';
    const contextPart = context ? `::${dashify(context)}` : '';

    return `${blockPart}${elementPart}${contextPart}`;
};

Использование: 

<button
  data-test-target={createTestAttribute({
    block: 'component-name',
    element: 'remove',
    context: props.testContext,
  })}
>
  Remove
</button>

При его использовании тесты будут стабильными и не будут зависеть от вашей разметки имена структур и классов

...