Как проверить работоспособность функциональных реквизитов в сборнике рассказов? - PullRequest
Новая
       18

Как проверить работоспособность функциональных реквизитов в сборнике рассказов?

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

У меня есть родительский компонент <AssetSelectorMenu>, который состоит из двух дочерних компонентов: 

export const AssetSelectorMenu = (({ assets, sortByName }) => {

  return (
    <>
      <AssetSelectorHeader sortByName={sortByName} />
      {assets && assets.map((asset) => (
        <AssetSelectorRow key={asset} />
      ))}
    </>
  );
});

сборник рассказов для AssetSelectorMenu: 

export const Default = () => (
  <AssetSelectorMenu sortByName={action("sortByName")} assets={assets} />
);

Внутри сборника рассказов для AssetSelectorMenu, я хотел бы проверить, что функция prop sortByName действительно визуально сортирует активы по имени. На данный момент он только гарантирует, что функция вызывается, но визуально не сортирует ресурсы. Как я могу это сделать?

1 Ответ

2 голосов
/ 28 мая 2020

Если вы хотите использовать состояние в примерах из Storybook, чтобы ваши компоненты полностью работали на основе взаимодействия, вам необходимо использовать функцию createElement из React.

Вот простой пример использования компонента Checkbox, значение которого управляется состоянием, которое имитирует использование диспетчера состояний, такого как Redux или Context et c. 

import { Fragment, useState, createElement } from 'react'

<Preview>
  <Story name="Default">
    {createElement(() => {
      const [value, setValue] = useState(['Yes'])
      const onChange = (event, value) => {
        setValue(value)
      }
      return (
        <Checkbox
          name="checkbox"
          values={[
            { label: 'Yes', value: 'Yes' },
            { label: 'No', value: 'No' }
          ]}
          value={value}
          onChange={onChange}
        />
      )
    })}
  </Story>
</Preview>
...