storybook [Bug]:不应该能够以静默形式写入 翻译结果:[Bug]:不应能以静默形式写入

d7v8vwbk  于 6个月前  发布在  其他
关注(0)|答案(4)|浏览(46)

描述bug

当表单处于静默状态时,测试考虑您可以编写并认为它是启用的,但实际上它们失败了。

重现步骤

https://stackblitz.com/edit/github-h8mbsw?file=src%2Fstories%2FCase.stories.tsx

系统信息

Storybook Environment Info:

  System:
    OS: macOS 14.4.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.17.0/bin/yarn <----- active
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm
  Browsers:
    Chrome: 124.0.6367.201
    Edge: 124.0.2478.97
    Firefox: 125.0.3
    Safari: 17.4.1
  npmPackages:
    @storybook/addon-actions: 8.0.9 => 8.0.9 
    @storybook/addon-essentials: 8.0.9 => 8.0.9 
    @storybook/addon-interactions: 8.0.9 => 8.0.9 
    @storybook/addon-links: 8.0.9 => 8.0.9 
    @storybook/react: 8.0.9 => 8.0.9 
    @storybook/react-vite: 8.0.9 => 8.0.9 
    @storybook/test: ^8.0.9 => 8.0.9 
    chromatic: ^11.3.0 => 11.3.0 
    eslint-plugin-storybook: 0.8.0 => 0.8.0 
    msw-storybook-addon: 2.0.0 => 2.0.0 
    storybook: 8.0.9 => 8.0.9 
    storybook-addon-pseudo-states: 3.1.0 => 3.1.0 
    storybook-dark-mode: 4.0.1 => 4.0.1

其他上下文

  • 无响应*
gdx19jrr

gdx19jrr1#

Leaving this here in case the sandbox gets deleted

import type { Meta, StoryObj } from '@storybook/react';
import { within, userEvent, expect } from '@storybook/test';
import { ComponentProps } from 'react';

function Case(props: ComponentProps<'form'>) {
  return (
    <form {...props}>
      <input placeholder="not focusable" />
    </form>
  );
}

const meta = {
  title: 'Case',
  component: Case,
  parameters: {
    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
    layout: 'fullscreen',
  },
} satisfies Meta<typeof Case>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Enabled: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const input = canvas.getByPlaceholderText('not focusable');
    await expect(input).toBeEnabled();
    await userEvent.type(input, 'can write');
    await expect(canvas.queryByDisplayValue('can write')).toBeInTheDocument();
  },
};

export const Disabled: Story = {
  args: {
    inert: '',
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const input = canvas.getByPlaceholderText('not focusable');
    await expect(input).toBeEnabled();
    await userEvent.type(input, 'can write');
  },
};

export const RedundantTest: Story = {
  args: {
    inert: '',
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const input = canvas.getByPlaceholderText('not focusable');
    await expect(input).toBeEnabled();
    await userEvent.type(input, 'can write');
    await expect(
      canvas.queryByDisplayValue('can write')
    ).not.toBeInTheDocument();
  },
};

export const Expected: Story = {
  args: {
    inert: '',
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const input = canvas.getByPlaceholderText('not focusable');
    // to pass
    await expect(input).toBeDisabled();
    // to fail
    await userEvent.type(input, 'can write');
  },
};
qacovj5a

qacovj5a2#

看起来问题出在这里。

ttvkxqim

ttvkxqim4#

好的,抓住了@codingedgar。看起来你已经在这里提交了它 $x_{1e0f1}x$

相关问题