Add testing library add-on for Storybook

Storybook's play function allows initializing the components to
specific states by mimicking user actions. Ideally components'
hard-to-reach states can be shown without user having to manually
interact with the component.

The examples included in this commit are rather lame, but they work as
an showcase for what can be done with Storybook.

Storybook also provides tools for visual, accessibility and snapshot
testing, but the current components didn't entice me to check these out
at this time. Maybe later when more suitable components are created.

Author: anttimaki

apps/storybook/.storybook/main.js

@@ -10,6 +10,7 @@ module.exports = {
   "addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
     "@snek-at/storybook-addon-chakra-ui",  // Must come after @storybook addons
   ],
   "framework": "@storybook/react",

apps/storybook/package.json

@@ -23,8 +23,11 @@
     "@babel/plugin-transform-spread": "^7.16.0",
     "@storybook/addon-actions": "^6.4.3",
     "@storybook/addon-essentials": "^6.4.3",
+    "@storybook/addon-interactions": "^6.4.3",
     "@storybook/addon-links": "^6.4.3",
+    "@storybook/jest": "^0.0.5",
     "@storybook/react": "^6.4.3",
+    "@storybook/testing-library": "^0.0.7",
     "babel-loader": "^8.2.3",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-polyfill-corejs3": "^0.4.0",

apps/storybook/stories/components/MultiSelect.stories.tsx

@@ -1,5 +1,6 @@
 import { MultiSelect } from "@thunderstore/components";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { within, userEvent } from "@storybook/testing-library";
 import React from "react";
 
 import * as SelectStories from "./Select.stories";
@@ -10,7 +11,29 @@ const Template: ComponentStory<typeof MultiSelect> = (args) => (
   <MultiSelect {...args} />
 );
 
-const Multi = Template.bind({});
-Multi.args = { ...SelectStories.Select.args };
+const NoneSelected = Template.bind({});
+NoneSelected.args = { ...SelectStories.Select.args };
 
-export { meta as default, Multi as MultiSelect };
+const OneSelected = Template.bind({});
+OneSelected.args = { ...SelectStories.Select.args };
+OneSelected.play = ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const input = canvas.getByPlaceholderText("Search...");
+  userEvent.click(input);
+  const options = canvas.getAllByRole("option");
+  userEvent.click(options[1]);
+};
+
+const MultipleSelected = Template.bind({});
+MultipleSelected.args = { ...SelectStories.Select.args };
+MultipleSelected.play = ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const input = canvas.getByPlaceholderText("Search...");
+  userEvent.click(input);
+  const options = canvas.getAllByRole("option");
+  userEvent.click(options[1]);
+  userEvent.click(input);
+  userEvent.click(options[2]);
+};
+
+export { meta as default, NoneSelected, OneSelected, MultipleSelected };