Шутовое тестирование нескольких тернарных операций [Typescprit React] - PullRequest
0 голосов
/ 29 мая 2020

Всем привет Надеюсь вам всем товар !! Я кодирую многопользовательский тетрис Typescript React / Node в режиме онлайн с помощью socket.io, и теперь мне нужно протестировать свой код с помощью jest, но я получаю несколько тернарных операций для рендеринга моей сетки в DOM.

Я новичок в модульном тестировании, и я действительно застреваю, чтобы проверить его, если кто-то даст мне несколько советов или способ научиться делать это, я очень ценю это! Я действительно не хочу, чтобы кто-то провел тест и опубликовал его, я хочу научиться основам c!

GameGrid.tsx:

import React from "react";

import "./GameGrid.css";
import { Board } from "../../reducers/userReducers";

export const pieces = [
  {
    color: "blue",
    opacity: 1,
  },
  {
    color: "green",
    opacity: 1,
  },
  {
    color: "cyan",
    opacity: 1,
  },
  {
    color: "orange",
    opacity: 1,
  },
  {
    color: "purple",
    opacity: 1,
  },
  {
    color: "yellow",
    opacity: 1,
  },
  {
    color: "red",
    opacity: 1,
  },
  { color: "", opacity: 1 },
  {
    color: "blue",
    opacity: 0.5,
  },
  {
    color: "green",
    opacity: 0.5,
  },
  {
    color: "cyan",
    opacity: 0.5,
  },
  {
    color: "orange",
    opacity: 0.5,
  },
  {
    color: "purple",
    opacity: 0.5,
  },
  {
    color: "yellow",
    opacity: 0.5,
  },
  {
    color: "red",
    opacity: 0.5,
  },
];

interface IProps {
  board: Board;
}

const GameGrid: React.FC<IProps> = (props) => {
  return (
    // tslint:disable-next-line: max-line-length
    <div className="Grid">
      {props.board.tmpGrid.map((rows, y) => {
        return (
          <div className="Line" key={y}>
            {rows.map((_value, x) => {
              // tslint:disable-next-line: jsx-self-close
              return (
                <div
                  className="Case"
                  key={x}
                  style={
                    _value
                      ? {
                          backgroundColor:
                            pieces[
                              _value > 9
                                ? _value / 10 - 1
                                : _value === -1
                                ? 7
                                : _value - 1
                            ].color,
                          opacity: _value > 9 ? 0.5 : 1,
                        }
                      : { backgroundColor: "lightgrey" }
                  }
                />
              );
            })}
          </div>
        );
      })}
    </div>
  );
};

export default GameGrid;

GameGrid.test.tsx:

import React from "react";
import { configure, mount } from "enzyme";
import * as ReactSixteenAdapter from "enzyme-adapter-react-16";
import GameGrid from "../components/GameBoard/GameGrid";

const adapter = ReactSixteenAdapter as any;
configure({ adapter: new adapter.default() });

const props = {
  board: {
    grid: Array.from({ length: 20 }, () => Array(10).fill(0)),
    tmpGrid: Array.from({ length: 20 }, () => Array(10).fill(0)),
    currentPiece: {
      tetrimino: "I",
      shape: [
        [0, 1, 0, 0],
        [0, 1, 0, 0],
        [0, 1, 0, 0],
        [0, 1, 0, 0],
      ],
      color: "blue",
      width: 3,
      height: 3,
      pos: {
        x: -1,
        y: 1,
      },
      shapeState: 0,
    },
  },
};

describe("<Grid />", () => {
  const wrapper = mount(<GameGrid board={props.board} />);

  it("Should create an grid", () => {
    expect(wrapper.find(".Grid")).toHaveLength(1);
  });

  it("Should create a grid with 20 lines", () => {
    expect(wrapper.find(".Line")).toHaveLength(20);
  });

  it("Should create an grid with 200 cases", () => {
    expect(wrapper.find(".Case")).toHaveLength(200);
  });

  it("Should render an blue 'I' piece",  () => {
    expect(wrapper) // test the multiple ternary operation.
  });
});

return from jest:

 GameGrid.tsx| 100 | 12.5 | 100 | 100 | 85,89,91,94

Извините, если мой код заставил вас плакать кровью. Я новичок в реакции машинописного текста и модульном тесте! Спасибо всем, хорошего дня!

...