docs: update story configs and add e2e story

.eslintrc

@@ -13,8 +13,7 @@
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
     "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:testing-library/recommended"
+    "plugin:@typescript-eslint/recommended"
   ],
   "env": {
     "browser": true,

.storybook/main.ts

@@ -1,10 +1,15 @@
 const path = require('path');
+
 const codesandbox = require('remark-codesandbox');
 
-module.exports = {
+const storybookConfig = {
   addons: [
-    '@storybook/addon-viewport',
-    '@storybook/addon-controls',
+    '@storybook/addon-links',
+    '@storybook/addon-console',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/jest',
+    '@storybook/addon-coverage',
     '@storybook/addon-storysource',
     {
       name: '@storybook/addon-docs',
@@ -20,10 +25,9 @@ module.exports = {
         },
       },
     },
-    '@storybook/addon-actions/register',
   ],
   /** Files to load as stories */
-  stories: ['../docs/**/*.story.@(mdx|tsx)'],
+  stories: ['../docs/**/*.stories.@(mdx|tsx)'],
   /** Customise webpack config */
   webpackFinal: async (config) => {
     // @HACK Horrific hack to shoehorn `remark-codesandbox` plugin into presets
@@ -66,3 +70,5 @@ module.exports = {
     return config;
   },
 };
+
+module.exports = storybookConfig;

docs/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": "../.eslintrc",
+  "rules": {
+    "no-console": 0
+  }
+}

docs/00-intro.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Docs/Intro" />
 

docs/01-api.stories.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Description, Meta } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Description, Meta } from '@storybook/addon-docs';
 
 import { ReactCompareSlider, ReactCompareSliderHandle, ReactCompareSliderImage, styleFitContainer } from 'react-compare-slider';
 

docs/02-images.stories.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 
 import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
 

docs/03-handles.stories.mdx

@@ -1,4 +1,4 @@
-import { Canvas, ArgsTable, Meta, Story } from '@storybook/addon-docs/blocks';
+import { Canvas, ArgsTable, Meta, Story } from '@storybook/addon-docs';
 
 import { ReactCompareSliderHandle } from 'react-compare-slider';
 

docs/05-only-handle-draggable.stories.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 
 import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
 

docs/06-bounds-padding.stories.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 
 import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
 

docs/07-change-position-on-hover.stories.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 
 import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
 

docs/stories/99-e2e-tests.stories.tsx

@@ -0,0 +1,101 @@
+import { jest, expect } from '@storybook/jest';
+import type { Meta, Story } from '@storybook/react';
+import { userEvent, waitFor, within } from '@storybook/testing-library';
+import React from 'react';
+
+import {
+  ReactCompareSlider,
+  ReactCompareSliderHandle,
+  ReactCompareSliderImage as BaseReactCompareSliderImage,
+  ReactCompareSliderDetailedProps,
+  styleFitContainer,
+} from '../../src';
+
+export default {
+  title: 'Tests/E2E',
+} as Meta;
+
+const getArgs = (args: Partial<ReactCompareSliderDetailedProps> = {}) => ({
+  'data-testid': 'rcs-root',
+  onPositionChange: jest.fn(console.log),
+  style: { width: '100%', height: '100vh' },
+  itemOne: (
+    <BaseReactCompareSliderImage
+      src="https://raw.githubusercontent.com/nerdyman/stuff/main/libs/react-compare-slider/demo-images/e2e-test-1.png"
+      alt="one"
+    />
+  ),
+  itemTwo: (
+    <BaseReactCompareSliderImage
+      src="https://raw.githubusercontent.com/nerdyman/stuff/main/libs/react-compare-slider/demo-images/e2e-test-2.png"
+      alt="two"
+    />
+  ),
+  ...args,
+});
+
+const Template: Story<ReactCompareSliderDetailedProps> = (args) => (
+  <ReactCompareSlider {...args} />
+);
+
+/** Test default props. */
+export const Default = Template.bind({});
+Default.args = getArgs();
+
+Default.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const rootComponent = canvas.queryByTestId(Default.args['data-testid']) as Element;
+
+  // Should have elements on mount.
+  await new Promise((resolve) => setTimeout(resolve, 500));
+  await waitFor(() => expect(rootComponent).toBeInTheDocument());
+  await waitFor(() => expect(canvas.getByAltText('one')).toBeInTheDocument());
+  await waitFor(() => expect(canvas.getByAltText('two')).toBeInTheDocument());
+
+  // Should have initial position on mount.
+  await waitFor(() => expect(Default.args.onPositionChange).toHaveBeenLastCalledWith(50));
+
+  // On click.
+  userEvent.click(rootComponent, {
+    clientX: rootComponent.clientWidth * 0.25,
+    clientY: rootComponent.clientHeight * 0.25,
+  });
+
+  await waitFor(() => expect(Default.args.onPositionChange).toHaveBeenLastCalledWith(25));
+};
+
+/** Test `handle`. */
+export const CustomHandle = Template.bind({});
+
+CustomHandle.args = getArgs({
+  handle: <ReactCompareSliderHandle data-testid="handlearoo" />,
+});
+
+CustomHandle.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  waitFor(() => expect(canvas.queryByTestId('handlearoo')).toBeInTheDocument());
+};
+
+/** Default image. */
+export const ReactCompareSliderImage = (args) => (
+  <BaseReactCompareSliderImage {...args} />
+);
+
+ReactCompareSliderImage.args = {
+  alt: 'testaroo',
+  src: 'https://raw.githubusercontent.com/nerdyman/stuff/main/libs/react-compare-slider/demo-images/e2e-test-1.png',
+};
+
+ReactCompareSliderImage.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  await waitFor(() =>
+    expect(canvas.getByAltText(ReactCompareSliderImage.args.alt)).toBeInTheDocument()
+  );
+
+  // Ensure default styles have been applied to `ReactCompareSliderImage`.
+  expect(canvas.getByAltText(ReactCompareSliderImage.args.alt).style).toMatchObject(
+    styleFitContainer() as Record<string, unknown>
+  );
+};