Создание визуального модульного теста для React

В настоящее время я создаю примеры, которые продолжают тему функционального программирования. В этих примерах я буду использовать игру в покер, чтобы продемонстрировать различные методы написания самодокументируемого и краткого функционального кода. Чтобы помочь визуализировать данные, используемые в примерах, я решил создать простой компонент для визуального модульного тестирования с использованием React. Компонент является частью простого приложения для обучения концепциям выигрыша в покер с использованием функционального программирования.

«Почему бы просто не использовать XYZ Framework?»

С таким количеством отличных платформ для модульного тестирования, доступных для React, было нелегко создать еще один метод тестирования кода. Тем не менее, я действительно хотел сделать что-то особенное для предмета, которое не вводило бы другую концепцию, такую ​​как инфраструктура модульного тестирования, которая имеет свою собственную кривую обучения. Вместо этого я хотел что-то, что позволило бы студентам сосредоточиться на коде, используемом в демоверсии.

Соединение концепции с визуальным

В своем контенте я стараюсь создавать визуальные элементы, которые помогают студентам соединиться с представляемой идеей. Я считаю, что игральные карты связаны друг с другом, поскольку они представляют собой объект реального мира. Еще одним удобным свойством игральных карт является то, что они отображают свои значения, что делает их легко различимыми.

Целью теста визуального блока является отображение руки с изображениями игральных карт вместе с их соответствующими значениями. В этом окне я добавлю желаемый результат покерного рейтинга, описание и значение пройденного / неудачного прохождения. Конечным результатом будет проект, который пользователи могут открыть с помощью StackBlitz и начать писать код для освещения модульных тестов. Все, что им нужно для начала работы, будет готово к использованию.

Детали компонента

Для создания компонента Visual Unit Test я использовал React. Я выбрал React, потому что тема функционального программирования часто связана со стилем разработки React. Кроме того, StackBlitz предлагает простые шаблоны для начала работы с React, предоставляя результаты в режиме реального времени через «Горячую перезагрузку по мере ввода», и это обеспечивает механизм для немедленной обратной связи с учеником.

Сам компонент Visual Unit Test состоит из сетки Kendo UI для отображения изображений игральных карт и соответствующих значений, используемых в тесте. Сопровождение сетки — это строка состояния с описанием того, что тестируется (т. Е. «Две карты одного значения»). Строка состояния также показывает результат теста по цвету и тексту. Чтобы помочь учащимся определить, что происходит в тесте, выходное значение отображается под строкой состояния.

Сетка Kendo UI

Сетка Kendo UI связывается практически с любым источником данных и предлагает широкий набор функций, которые обеспечивают интуитивно понятный дисплей для взаимодействия с данными. Привязка данных к сетке так же проста, как установка свойства данных. Для модульных тестов я использую локальные данные игральных карт, хранящиеся в виде файла JSON, который загружается в состояние компонента. Как только свойство данных установлено, сетка автоматически генерирует столбцы на основе объектов данных.

// test-data.json

"royalFlush": [
  {
    "suit": "HEARTS",
    "value": "QUEEN",
    "numValue": 12,
    "image": "https://deckofcardsapi.com/static/img/QH.png",
    "code": "QH"
  },
  // ... more cards
]

// VisualUnitTest.js

<Grid data={this.state.dataDisplay}>
</Grid>

// VisualUnitTest.js

<Grid data={this.state.dataDisplay}>
  <GridColumn field="image" title="Card" width="90" cell={ImageCell} />
  <GridColumn field="suit" title="Suit" />
  <GridColumn field="numValue" title="# Value" />
  <GridColumn field="code" title="Code" />
</Grid>

class ImageCell extends GridCell {
  render() {
    return (
      <td>
        <img src={this.props.dataItem[this.props.field]} width="60px" />
      </td>
    );
  }
}

<Grid .../>
<PassFail description={this.props.description} value={this.state.pass} />
<small>Output was: {JSON.stringify(this.props.actual)}</small>

class PassFail extends Component {
  constructor(props) {
    super(props);
    this.state = {passFailText: this.props.value  ? "pass" : "fail"}
  }
  render() {
    return (
      <div className={this.state.passFailText  + " output"}>
        <p>{this.props.description}
          <span>{this.state.passFailText}</span>
        </p>
      </div>
    );
  }
}

.fail {
  background-color:$fail-color; // #D24D57
}

.pass {
  background-color:$pass-color; // #6B9362
}

// test.js

// test data
import data from './test-data.json';
// Unit under test
import { getHandRank, getHighCard } from '../components/Scoring.js';

// An array of test configurations.
export { tests };

const tests = [
  {
    id: 11,
    name: "1. Royal Flush",
    data: data.royalFlush,
    actual: getHandRank(data.royalFlush),
    expected: "RoyalFlush",
    description: "A straight flush including ace, king, queen, jack, and ten all in the same suit."
  },
  // ...more tests
]

// VisualUnitTest.js

import deepEqual from 'deep-equal';

export default class VisualUnitTest extends Component {
    this.state = {
      pass: deepEqual(this.props.expected, this.props.actual),
      dataDisplay: this.props.data,
      // ...
    };

// ...
}

import VisualUnitTest from './tests/VisualUnitTest';
// Unit test definitions.
import { tests } from './tests/tests.js';

class App extends Component {
  constructor() {
    super();
    this.state = { tests: tests };
  }

  render() {
    return (
      <div>
          {this.state.tests.map(test => (
              <VisualUnitTest key={test.id}
                id={test.id}
                name={test.name}
                data={test.data}
                actual={test.actual}
                expected={test.expected}
                description={test.description}
              />
          ))}
      </div>
    );
  }
}

export { getHighCard, getHandRank }

// Use this file to complete the following functions and
// solve all of the unit tests displayed to the right.
//
// Try a functional approach. Complete all of the unit
// tests without defining a single variable.

// Test 1b. Get the highest card.
// The card with the highest value in the hand. (Deep Equals, return the full card object).
const getHighCard = function (cards) {
  return;
};

// Tests 1a - 10
// Score all of the hands of poker.
const getHandRank = function(cards) {
  return; // return the string "HighCard" to complete the first test.
};