test: Improve snapshot infrastructure and organization

[anicholls]

Addresses infrastructure improvements in #683

• Use component + variant name in story name so it's more obvious in Chromatic
• Pull visual testing stories into their own Testing top level section within storybook.
• Switch to CSF format for these stories
• Update create-component to use CSF and create a visual testing story for you
• Add helper to enable chromatic snapshots as it's easy to typo right now:

• The CSF decorator can be used on an entire file of stories, or a single story. It only works for CSF formats.

• All stories in a file:

  export default withSnapshotsEnabled({
    // CSF details (title, component, etc.)
  });

• Specific story:

  export const MyVisualStory = () => {
    // story contents
  };
  
  withSnapshotsEnabled(MyVisualStory);

New "Testing" section:

[anicholls]

One thought: I wonder if we could update our storybook config to automatically enable chromatic if the story is in the Testing| top level category.

[cypress]

---

Test summary

317 • 0 • 0 • 0

---

Run details

Project	canvas-kit
Status	Passed
Commit	4f86de8 ℹ️
Started	Jun 1, 2020 7:46 PM
Ended	Jun 1, 2020 7:50 PM
Duration	03:10 💡
OS	Linux Ubuntu Linux - 18.04
Browser	Electron 80

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[anicholls]

Note: I looked at making this a regular storybook decorator so you could do something like

export default {
  title: 'My Story',
  decorators: [withSnapshotsEnabled]
}

However, editing the storyFn.story object doesn't seem to work from within the decorator function. This must be a limitation of the Storybook decorator API.

[mannycarrera4]

NB: Within our testing is it worth noting the difference between States as in hover, active, ect.. and then other stories where States mean visual states where the component changes based on props?

[anicholls]

@mannycarrera4 Yeah it's worth considering. I don't think it's been a point of confusion so far though. Not sure what I would want to see instead.