fix: add cypress test skeleton (#186)

Author: bokuweb

cypress/fixtures/story.js

@@ -0,0 +1 @@
+exports.storyUrl = 'http://localhost:6096';

cypress/integration/sample.ts

@@ -0,0 +1,32 @@
+describe('SortablePane', () => {
+  const { storyUrl } = require('../../fixtures/story');
+
+  beforeEach(() => {
+    cy.visit(storyUrl);
+  });
+
+  context('Uncontrolled horizontal', () => {
+    it('should sort horizontal pane', () => {
+      selectStory('horizontal');
+      cy.get('#storybook-preview-iframe').then($iframe => {
+        const doc = $iframe.contents();
+        iget(doc, '.pane0').trigger('mousedown', { which: 1 });
+        iget($iframe.contents(), 'body').trigger('mousemove', { clientX: 200, clientY: 0 });
+        iget(doc, '.pane0').trigger('mouseup', { force: true });
+        iget(doc, '.panes div')
+          .eq(0)
+          .and('have.css', 'transform')
+          .and('match', /matrix\(1, 0, 0, 1, 140, 0\)/);
+        cy.screenshot('horizontal');
+      });
+    });
+  });
+});
+
+function iget(doc: JQuery<HTMLElement | Text | Comment>, selector: string) {
+  return cy.wrap(doc.find(selector));
+}
+
+function selectStory(name: string) {
+  cy.get(`a[data-name="${name}"]`).click();
+}

cypress/integration/simple/horizontal.ts

@@ -0,0 +1,32 @@
+describe('SortablePane', () => {
+  const { storyUrl } = require('../../fixtures/story');
+
+  beforeEach(() => {
+    cy.visit(storyUrl);
+  });
+
+  context('Uncontrolled vertical', () => {
+    it('should sort vertical pane', () => {
+      selectStory('vertical');
+      cy.get('#storybook-preview-iframe').then($iframe => {
+        const doc = $iframe.contents();
+        iget(doc, '.pane0').trigger('mousedown', { which: 1 });
+        iget($iframe.contents(), 'body').trigger('mousemove', { clientX: 0, clientY: 200 });
+        iget(doc, '.pane0').trigger('mouseup', { force: true });
+        iget(doc, '.panes div')
+          .eq(0)
+          .and('have.css', 'transform')
+          .and('match', /matrix\(1, 0, 0, 1, 0, 140\)/);
+        cy.screenshot('vertical');
+      });
+    });
+  });
+});
+
+function iget(doc: JQuery<HTMLElement | Text | Comment>, selector: string) {
+  return cy.wrap(doc.find(selector));
+}
+
+function selectStory(name: string) {
+  cy.get(`a[data-name="${name}"]`).click();
+}

cypress/integration/simple/vertical.ts

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
-
+import './commands';
+// import './helper'
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

cypress/support/index.js

@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 import './styles.css';
 
 import SimpleVertical from './simple/vertical';
-import SimpleHorizontal from './simple/horizontal.stories';
+import SimpleHorizontal from './simple/horizontal';
 
 import ControlledOrder from './controlled/order';
 import ControlledSize from './controlled/size';

stories/index.tsx

@@ -4,13 +4,13 @@ import { textStyle, paneStyle } from '../styles';
 
 export default function SimpleVertical() {
   const panes = [0, 1, 2].map(key => (
-    <Pane key={key} defaultSize={{ width: 120, height: '100%' }} style={paneStyle}>
+    <Pane key={key} className={`pane${key}`} defaultSize={{ width: 120, height: '100%' }} style={paneStyle}>
       <p style={textStyle}>00{key}</p>
     </Pane>
   ));
   return (
     <div style={{ padding: '10px' }}>
-      <SortablePane direction="horizontal" margin={20}>
+      <SortablePane direction="horizontal" margin={20} className="panes">
         {panes}
       </SortablePane>
     </div>

stories/simple/horizontal.stories.tsx renamed to stories/simple/horizontal.tsx

@@ -4,13 +4,13 @@ import { textStyle, paneStyle } from '../styles';
 
 export default function SimpleVertical() {
   const panes = [0, 1, 2].map(key => (
-    <Pane key={key} defaultSize={{ width: '100%', height: 120 }} style={paneStyle}>
+    <Pane key={key} className={`pane${key}`} defaultSize={{ width: '100%', height: 120 }} style={paneStyle}>
       <p style={textStyle}>00{key}</p>
     </Pane>
   ));
   return (
     <div style={{ padding: '10px' }}>
-      <SortablePane direction="vertical" margin={20}>
+      <SortablePane direction="vertical" margin={20} className="panes">
         {panes}
       </SortablePane>
     </div>