Я хочу, чтобы действия надстройки сборника рассказов отображали стандартное сообщение журнала и фактический обработчик события компонента для обновления пользовательского интерфейса. - PullRequest
Новая
       3

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

0 голосов
/ 09 января 2020

Кажется, я не могу понять, как заставить мою функцию обработки событий выполнять свою логику c, чтобы обновить дополнение UI AND storybook - actions() для записи выходных данных.

Причина, по которой я хочу обновить пользовательский интерфейс, заключается в том, что мы используем cypress.io для тестирования. Мы взломали / заглушили обмен сообщениями о действиях (довольно круто, window.postMessage), чтобы получить доступ к сообщению действия, которое позволяет использовать action("functionName") вместо подключения функции обработки событий в [file].stories.tsx. Я хотел бы сделать оба для моего здравомыслия. Чтобы проверить действие сообщения, его несколько кликов. Я бы предпочел просто увидеть, как предмет был удален С этим, для тестирования, я хотел бы ожидать сообщения действия (я могу сделать это). Мы используем alert(), чтобы проверить, не сработало ли что-то, и я не фанат.

Если это просто кажется ненужным или противоречит интуитивному / продуктивному, продолжайте в деталях.

Если это поможет ... <List /> это просто так, но на каждом элементе есть кнопка action , чтобы удалить элемент из списка.

Использование onRemove={actionHandler} prop, ниже, в List, делает именно это в пользовательском интерфейсе, удаляет элемент, и Cypress счастлив, но для отслеживания требуется alert(). Но не могу подключить action() в любом месте и не войти в GUI.

Если УДАЛИТЬ onRemove={actionHandler} и раскомментировать // onRemove: action("removeItem"), я получаю необходимый журнал действий, но Предмет не удаляется.

Я понимаю, что действия должны имитировать c обработчики событий, но я бы хотел, чтобы это делалось И запускало фактическое событие ... если это возможно или разумно. 

List.stories.tsx
// storybook addons
import { withKnobs } from "@storybook/addon-knobs";

// deps
import React from "react";
import { action } from "@storybook/addon-actions";

// utils
import { CustomEvent } from "../../hooks";

// components
import { Item } from "./Item"
import { List } from "./ListItems"
import { InputHeader } from "../inputs/InputHeader";

// create test states for target dropdown
export default {
  component: List,
  title: "Lists|With Action",
  decorators: [withKnobs]
};

const listItemsData = {
    values: ['Test Value 1', 'Test Value 2', 'Test Value 3', 'Test Value 4', 'Test Value 5'],
    name: "test list story",
    // onRemove: action("removeItem")
};

export const listWithActionButton = () => {
    const [listItemState, setListItemState] = React.useState(listItemsData)
    const actionHandler = (event: CustomEvent<string[]>) => {
        // action("removeItem")()
        setListItemState(prevState => ({
            ...listItemState,
            values: event.target.value,
        }))
    };

    return (
        <>
        <InputHeader headerText="List with Action Buttons" />
        <br/>
        <List 
            {...listItemState}
            onRemove={actionHandler}
            />
        </>
    )
};

List.tsx
export const List = ({name, values, onRemove}) => {
  const removeItem = (index: number) => {
      // this is what I want to fire AS WELL as the action log.
      const top = values.slice(0, index);
      const bottom = values.slice(index + 1);
      const updatedOptions = [...top, ...bottom]

      // Fire a custom event to match what our useForm hook expects
      const event: CustomEvent<string[]> = {
        target: {
          value: updatedOptions,
          name
        },
      };
      return onRemove(event);
    };

    return (
        <ListStyle>
            {
                values.map((item, index) => {
                    return (
                        <Item 
                            key={index} 
                            value={item} 
                            removeItem={removeItem}
                            itemIndex={index}
                        />)
                })
            }
        </ListStyle>
    )
};

1 Ответ

0 голосов
/ 14 февраля 2020

Вы можете сделать что-то подобное, если хотите запустить действие и выполнить свою функцию. 

  <Button
    onClick={(e) => {
      action('click')(e);
      removeItem();
    }}
    selected={state}
  >
...