docs: update sb, ssr and example

nerdyman · Aug 26, 2023 · 11bc94d · 11bc94d
1 parent 95cc205
commit 11bc94d
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 41 deletions.
diff --git a/docs/example/README.md b/docs/example/README.md
@@ -1,4 +1,14 @@
-# React + TypeScript + Vite
+<div align="center">
+
+# React Compare Slider Demo
+
+👉 [CodeSandbox Demo](https://codesandbox.io/p/sandbox/github/nerdyman/react-compare-slider/tree/main/docs/example) 👈
+
+</div>
+
+---
+
+## React + TypeScript + Vite
 
 This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
@@ -7,7 +17,7 @@ Currently, two official plugins are available:
 - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
 - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 
-## Expanding the ESLint configuration
+### Expanding the ESLint configuration
 
 If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
 

diff --git a/docs/example/index.html b/docs/example/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>React Compare Slider Example</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/docs/example/package.json b/docs/example/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "poop",
+  "name": "react-compare-slider-example",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -11,10 +11,11 @@
   },
   "dependencies": {
     "react": "^18.2.0",
+    "react-compare-slider": "latest",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.15",
+    "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",

diff --git a/docs/ssr-tests/package.json b/docs/ssr-tests/package.json
@@ -8,9 +8,11 @@
   "type": "module",
   "license": "MIT",
   "scripts": {
-    "test": "rm -rf ./coverage && NODE_V8_COVERAGE='../../coverage/ssr-tests' node --experimental-test-coverage --test"
+    "test": "rm -rf ./coverage && NODE_V8_COVERAGE='./coverage' node --experimental-test-coverage --test"
   },
   "devDependencies": {
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "react-compare-slider": "latest",
+    "react-dom": "^18.2.0"
   }
 }
diff --git a/docs/ssr-tests/ssr.test.mjs b/docs/ssr-tests/ssr.test.mjs
@@ -1,8 +1,10 @@
 const assert = await import('node:assert');
 const { describe, it } = await import('node:test');
+
 const React = await import('react');
+const { renderToStaticMarkup } = await import('react-dom/server');
 
-const { ReactCompareSlider, ReactCompareSliderImage } = await import('../../dist/index.mjs');
+const { ReactCompareSlider, ReactCompareSliderImage } = await import('react-compare-slider');
 
 describe('SSR', () => {
   it('should render without error', () => {
@@ -18,5 +20,8 @@ describe('SSR', () => {
     });
 
     assert.strictEqual(React.isValidElement(root), true);
+    assert.strictEqual(renderToStaticMarkup(root).includes('data-rcs="root"'), true);
+    assert.strictEqual(renderToStaticMarkup(root).includes('example-1.jpg'), true);
+    assert.strictEqual(renderToStaticMarkup(root).includes('example-2.jpg'), true);
   });
 });
diff --git a/docs/storybook/content/stories/99-tests/initial-position.test.stories.tsx b/docs/storybook/content/stories/99-tests/initial-position.test.stories.tsx
diff --git a/docs/storybook/content/stories/99-tests/position.test.stories.tsx b/docs/storybook/content/stories/99-tests/position.test.stories.tsx
@@ -0,0 +1,81 @@
+import { expect } from '@storybook/jest';
+import type { Meta, StoryFn } from '@storybook/react';
+import { fireEvent, userEvent, waitFor, within } from '@storybook/testing-library';
+import { useState } from 'react';
+import type { ReactCompareSliderProps } from 'react-compare-slider';
+import { ReactCompareSlider } from 'react-compare-slider';
+
+import { Template, getArgs } from './test-utils.test';
+
+export default {
+  title: 'Tests/Browser/Position',
+} as Meta;
+
+export const StartAt0 = Template.bind({});
+StartAt0.args = getArgs({ position: 0 });
+
+StartAt0.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const sliderRoot = canvas.queryByTestId(StartAt100.args?.['data-testid']) as Element;
+
+  await waitFor(() => expect(sliderRoot).toBeInTheDocument());
+  await waitFor(() => expect(canvas.getByRole('slider').getAttribute('aria-valuenow')).toBe('0'));
+};
+
+export const StartAt100 = Template.bind({});
+StartAt100.args = getArgs({ position: 100 });
+
+StartAt100.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const sliderRoot = canvas.queryByTestId(StartAt100.args?.['data-testid']) as Element;
+
+  await waitFor(() => expect(sliderRoot).toBeInTheDocument());
+  await waitFor(() => expect(canvas.getByRole('slider').getAttribute('aria-valuenow')).toBe('100'));
+};
+
+/**
+ * Switch orientation and ensure position is maintained.
+ */
+export const ToggleOrientation: StoryFn<ReactCompareSliderProps> = (args) => {
+  const [portrait, setPortrait] = useState(false);
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <ReactCompareSlider {...args} portrait={portrait} />
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          display: 'flex',
+          gap: '.5rem',
+          padding: '.5rem',
+          backgroundColor: 'rgba(0, 0, 0, .75)',
+        }}
+      >
+        <button onClick={() => setPortrait((prev) => !prev)}>Toggle orientation</button>
+      </div>
+    </div>
+  );
+};
+ToggleOrientation.args = getArgs({ position: 25, style: { width: 200, height: 200 } });
+
+ToggleOrientation.play = async ({ canvasElement }) => {
+  const user = userEvent.setup();
+  const canvas = within(canvasElement);
+  const sliderRoot = canvas.queryByTestId(StartAt100.args?.['data-testid']) as Element;
+
+  await waitFor(() => expect(sliderRoot).toBeInTheDocument());
+
+  await user.click(canvas.getByText('Toggle orientation'));
+  expect(canvas.getByRole('slider').getAttribute('aria-valuenow')).toBe('25');
+
+  await user.click(canvas.getByText('Toggle orientation'));
+  expect(canvas.getByRole('slider').getAttribute('aria-valuenow')).toBe('25');
+
+  fireEvent.pointerDown(sliderRoot, { clientX: 100, clientY: 100 });
+  expect(canvas.getByRole('slider').getAttribute('aria-valuenow')).toBe('50');
+
+  await user.click(canvas.getByText('Toggle orientation'));
+  expect(canvas.getByRole('slider').getAttribute('aria-valuenow')).toBe('50');
+};
diff --git a/docs/storybook/content/stories/99-tests/use-react-compare-slider-ref.test.stories.tsx b/docs/storybook/content/stories/99-tests/use-react-compare-slider-ref.test.stories.tsx
@@ -1,5 +1,5 @@
 import { expect, jest } from '@storybook/jest';
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import { fireEvent, waitFor, within } from '@storybook/testing-library';
 import { useReactCompareSliderRef } from 'react-compare-slider';
 
@@ -43,7 +43,7 @@ UseReactCompareSliderRef.play = async ({ canvasElement }) => {
   });
 };
 
-export const UseReactCompareSliderRefUninstantied = () => {
+export const UseReactCompareSliderRefUninstantied: StoryFn = () => {
   console.warn = jest.fn();
   const ref = useReactCompareSliderRef();