Получить определенный член enum из int в Typescript

Question

У меня есть особый случай, когда у меня есть кнопка React, у которой есть класс, определяемый перечислением, кнопка выбирает правильный класс с помощью оператора switch, проверяя каждого члена перечисления. Это жестко закодировано, и этот компонент работает нормально (код ниже).

import * as React from 'react';
import './SquareButton.css';

export interface Props {
    buttonType: ButtonType;
    style?: object;
}

const SquareButton = ({ buttonType, style }: Props) => {

    var className = "";
    switch (buttonType) {
        case ButtonType.Hamburger:
            className = "zmdi zmdi-menu zmdi-hc-2x";
            break;
        case ButtonType.Clock:
            className = "zmdi zmdi-time zmdi-hc-2x";
            break;
        case ButtonType.Wifi:
            className = "zmdi zmdi-network-wifi zmdi-hc-2x";
            break;
        default:
            break;
    }

    return (
        <div className="squareButton" style={style} >
            <i className={className} />
        </div>
    )
}

export enum ButtonType {
    Wifi,
    Hamburger,
    Clock
}

export default SquareButton;

Проблема, с которой я сталкиваюсь, заключается в тестировании этого компонента, так как этот список enum ButtonType может увеличиваться. Я хочу иметь возможность циклически проходить по каждому типу кнопок без необходимости писать отдельные тесты или добавлять новые каждый раз, когда есть новая кнопка. Пример теста ниже.

for (var i = 0; i < Object.keys(ButtonType).length / 2; i++) {
    test(ButtonType[i] + 'square button icon class must contain zmdi', () => {
        const button = Enzyme.shallow(<SquareButton buttonType={i as ButtonType} />)
        expect(button.find('div').find('i').hasClass("zmdi")).toEqual(true);
    });
}

Это успешно зацикливает каждый член перечисления, но я не могу понять, как получить конкретный экземпляр перечисления в цикле для передачи компоненту. Передача i as ButtonType по-прежнему передает только значение int, и по умолчанию в переключателе используется значение. Я пробовал много вариантов / преобразований строк и т. Д., Но ничего из того, что я пробовал, не работает (тесты работают, если я жестко кодирую (например,) ButtonType.Wifi значение).

Как получить определенный член перечисления из целочисленного значения?

Answer 1

В этом случае i целое число уже является желаемым значением, ButtonType.Hamburger === 0 и т. Д.

Проблема с итерацией по enum заключается в том, что значения enum не обязательно являются числами, и нет необходимости, чтобы половина перечисленияключи являются числовыми индексами.

enum A {
        B,
        C,
        D = 'D'
}

приводит к следующим ключам:

["0", "1", "B", "C", "D"]

Безопасный способ будет выглядеть так:

for (const enumKey of Object.keys(ButtonType).filter(key => isNaN(+key))) {
  const enumVal = ButtonType[enumKey] as ButtonType;

  test(`ButtonType.${enumKey} square button icon class must contain zmdi`, () => {
    const button = Enzyme.shallow(<SquareButton buttonType={enumVal} />)
    ...
  })
}

Так как предпочтительно такжетестовые классы, специфичные для ButtonType, такие как zmdi-menu, также должны быть соответствующие тесты, поэтому общие тесты с итерацией могут не понадобиться.