Покрытие кода для стилизованных компонентов с использованием реагирующей-тестирующей библиотеки

Question

Я написал модульный тест для стилевых компонентов, использующих реагирующую библиотеку, и рассмотрел практически все возможные сценарии, но не уверен, почему существует низкий охват кода. Отчет показал некоторые красные линии на стиле, который не покрыт. Кто-нибудь знает, как избавиться от подобных проблем? Я стараюсь изо всех возможных тестовых случаев, но не могу решить проблему.

Реагировать компонент

import * as React from "react";
import styled from "styled-components";

/**
 * Wrapper box for the component.
 */
const StyledBox = styled("div")`
  display: -ms-flexbox; /* IE10 */
  display: flex;
  padding: 12px;
  background-color: #ffffff;
`;

/**
 * Search icon and aligned to the left of the input control.
 */
const StyledIcon = styled("img")`
  height: 24px;
  width: 18px;
  text-align: center;
`;

/**
 * Input element which will hold the search text entered by the user.
 */
const StyledInput = styled("input")`
  color: #524f53;
`;

interface ISearchBoxProps {
  id: string;
  disabled?: boolean;
  maxLength?: number;
  placeholder?: string;
  required?: boolean;
  style?: object;
  searchIconUrl: string;
}

/**
 * SearchBox component holds a simple input element with search icon on its left.
 */
class SearchBox extends React.PureComponent<ISearchBoxProps> {
  render() {
    const {id, disabled, placeholder,maxLength,style,searchIconUrl,
    } = this.props;

    return (
      <StyledBox style={style}>
        <StyledIcon src={searchIconUrl} />
        <StyledInput
          id={id}
          type="text"
          disabled={disabled}
          maxLength={maxLength}
          placeholder={placeholder || "Search"}
        />
      </StyledBox>
    );
  }
}

export default SearchBox;

Модульное тестирование:

import * as React from "react";
import { render } from "react-testing-library";
import SearchBox from "../SearchBox";

const componentAttributes = {
  id: "searchBox",
  maxLength: 40,
  placeholder: "Search Assets",
  searchIconUrl: "searchIconUrl",
  style: {
    color: "#BAB9BA",
  },
};

describe("<Searchbox />", () => {

  it("Should not be null", async () => {
    const { container } = render(<SearchBox {...componentAttributes} />);
    expect(container).not.toBeNull();
  });

  it("Should have DIV wrapper", async () => {
    const { container } = render(<SearchBox {...componentAttributes} />);
    expect(container.nodeName).toBe("DIV");
  });

  it("Should set the style to the wrapper", async () => {
    const { container } = render(<SearchBox {...componentAttributes} />);
    expect(container.querySelector("div").getAttribute("style")).toBe("color: rgb(186, 185, 186);");
  });

  it("Should have image element inside it", async () => {
    const { container } = render(<SearchBox {...componentAttributes} />);
    expect(container.querySelector("img").nodeName).toBe("IMG");
  });

  it("Should have img with search icon url", async () => {
    const { container } = render(<SearchBox {...componentAttributes} />);
    expect(container.querySelector("img").getAttribute("src")).toBeTruthy();
  });

  it("Should have input element inside it", async () => {
    const { container } = render(<SearchBox {...componentAttributes} />);
    expect(container.querySelector("input").nodeName).toBe("INPUT");
  });

  it("Should have input element having id attribute ", async () => {
    const { container } = render(<SearchBox {...componentAttributes} />);
    expect(container.querySelector("input").getAttribute("id")).toBeTruthy();
  });

  it("Should have input element having id attribute ", async () => {
    const { container } = render(<SearchBox {...componentAttributes} />);
    expect(container.querySelector("input").getAttribute("id")).toBeTruthy();
  });

  it("Should have input element having disabled attribute to be null", async () => {
    const { container } = render(<SearchBox {...componentAttributes} />);
    expect(container.querySelector("input").getAttribute("disabled")).toBeNull();
  });

  it("Should have input element having maxLength attribute 40", async () => {
    const { container } = render(<SearchBox {...componentAttributes} />);
    expect(container.querySelector("input").getAttribute("maxLength")).toBe("40");
  });

  it("Should have input element having placeholder text 'Search Assets'", async () => {
    const { container } = render(<SearchBox {...componentAttributes} />);
    expect(container.querySelector("input").getAttribute("placeholder")).toBe("Search Assets");
  });

  it("Should have input element having placeholder text 'Search' when no placeholder is passed", async () => {
    const { container } = render(<SearchBox id="searchbox" searchIconUrl="" />);
    expect(container.querySelector("input").getAttribute("placeholder")).toBe("Search");
  });

});

Answer 1

При визуальном / пользовательском тестировании вы должны использовать правильные инструменты для этого! Я уже давно пользуюсь Applitools, и с ними, кажется, приятно и весело работать. Они предлагают много SDK и интегрируются со многими фреймворками. Они поддерживают React и других.

Недавно они выпустили новый инструмент, анализ корневых причин (RCA). Этот инструмент помогает вам обнаружить визуальные различия и точно сказать, что вызывает разницу с точки зрения изменений DOM или CSS изменений. Таким образом, вам не нужно тратить свое время, пытаясь выяснить, что пошло не так, вы сосредоточены только на устранении проблемы. Действительно мощные инструменты для разработчиков.

Попробуй!