Rename Stories in the test runner with more descriptive names.

[ShaunEvening]

Is your feature request related to a problem? Please describe.

Will writing some test-only stories for components, the usual "Variable name as Story name" gets very hard to read. Here's an example for some tests I wrote for a Checkbox component

I would love to be able to provide something more akin to a "It should ... when ..." title for each test instead.

Describe the solution you'd like

I had expected (and hoped) that by changing the name or storyName property of a story object would have accomplished this for me. Is this possible to do?

Describe alternatives you've considered

It would be extra awesome if I could write a JSDoc comment for the story play function to provide the test case statement.

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

I would very much like to do the work to implement this feature if that's cool with the core team ❤️

[JReinhold]

I had expected (and hoped) that by changing the name or storyName property of a story object would have accomplished this for me. Is this possible to do?

I would also have expected that to work, I haven't used the test-runner much though. However I see in the code, there's a FIXME for exactly that 😅

https://github.com/storybookjs/test-runner/blob/next/src/csf/transformCsf.ts#L45

So I think that is just ready to go, if you want to implement it. You could consider it a breaking change to change all users' test names, but given the test runner is still in 0.X land, we are free to make breaking changes.

It would be extra awesome if I could write a JSDoc comment for the story play function to provide the test case statement.

I'm not totally sure I get this. First of all, this collides slightly with the docs descriptions, which are also pulled from stories' leading comments. second I'm not sure what this would look like, can you give an example?

[ShaunEvening]

I'd be happy to through up a PR for the test runner 😀

Here's an example of the JSDoc comment idea:

export const IsNotClickableInReadOnlyState: Story = {
  tags: ['test-only'],
  args: {
    'aria-label': 'test checkbox',
    readOnly: true,
  },
  /**
   * @description It should not be clickable when in a read-only state
   */
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement)

    const nativeCheckbox = canvas.getByRole('checkbox')
    const svgCheckbox = nativeCheckbox.nextSibling as HTMLElement

    expect(nativeCheckbox).toBeInTheDocument()
    expect(nativeCheckbox).not.toBeChecked()
    expect(svgCheckbox).toBeInTheDocument()

    await userEvent.click(svgCheckbox)

    expect(nativeCheckbox).not.toBeChecked()
  },
}

[yannbf]

Hey @ShaunEvening! You could try to see whether CsfTools provides the storyName property e.g.

csf._storyAnnotations[key]

and pass it down this line of code

then use that if provided!

[shilman]

And here's the corresponding line in csf-tools:

https://github.com/storybookjs/storybook/blob/next/code/core/src/csf-tools/CsfFile.ts#L480

This is the name field, which is also called storyName in CSF2