e2e tests for examples

__tests__/examples/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "example-tests",
+  "version": "1.0.0",
+  "description": "",
+  "skpm": {
+    "main": "example-tests.sketchplugin",
+    "manifest": "src/manifest.json"
+  },
+  "scripts": {
+    "build": "../../node_modules/.bin/skpm-build",
+    "watch": "../../node_modules/.bin/skpm-build --watch",
+    "render": "../../node_modules/.bin/skpm-build --watch --run",
+    "render:once": "../../node_modules/.bin/skpm-build --run",
+    "postinstall": "npm run build && ../../node_modules/.bin/skpm-link"
+  },
+  "author": "Macintosh Helper <github@macintoshhelper.com>",
+  "license": "MIT",
+  "dependencies": {
+    "@emotion/core": "^10.0.28",
+    "@emotion/primitives": "^10.0.30",
+    "chroma-js": "^1.2.2",
+    "emotion-primitives": "^1.0.0-beta.0",
+    "ramda": "^0.27.0",
+    "react-primitives": "^0.8.1"
+  }
+}

__tests__/examples/src/main.js

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import sketch from 'sketch';
+import { render, Document, Page } from 'react-sketchapp';
+
+import { Document as BasicSetup } from '../../../examples/basic-setup/src/my-command';
+import { Document as BasicSvg } from '../../../examples/basic-svg/src/my-command';
+import { Document as Colors } from '../../../examples/colors/src/main';
+import { App as Emotion } from '../../../examples/emotion/src/my-command';
+import { Page as FormValidation } from '../../../examples/form-validation/src/main';
+
+import formValidationData from '../../../examples/form-validation/src/data';
+
+const pages = [
+  {
+    component: BasicSetup,
+    name: 'Basic Setup',
+    data: {
+      colors: {
+        Haus: '#F3F4F4',
+        Night: '#333',
+        Sur: '#96DBE4',
+        'Sur Dark': '#24828F',
+        Peach: '#EFADA0',
+        'Peach Dark': '#E37059',
+        Pear: '#93DAAB',
+        'Pear Dark': '#2E854B',
+      },
+    },
+  },
+  {
+    component: BasicSvg,
+    name: 'Basic Svg',
+  },
+  {
+    component: Colors,
+    name: 'Colors',
+    data: {
+      colors: ['#01FFD8', '#C137E3', '#8702ED'],
+      steps: 50,
+    },
+  },
+  {
+    component: Emotion,
+    name: 'Emotion',
+  },
+  {
+    component: FormValidation,
+    name: 'Form Validation',
+    data: {
+      sessions: formValidationData,
+    },
+  },
+];
+
+const App = () => (
+  <Document>
+    {pages.map(({ name, component: Component, data }) => (
+      <Page key={name} name={name}>
+        <Component {...data} />
+      </Page>
+    ))}
+  </Document>
+);
+
+export default () => {
+  // FIXME: Get this working with skpm-test instead for CLI / CI stdout feedback
+  render(<App />, sketch.getSelectedDocument() || new sketch.Document());
+};

__tests__/examples/src/manifest.json

@@ -0,0 +1,17 @@
+{
+	"compatibleVersion": 3,
+	"bundleVersion": 1,
+	"commands": [
+		{
+			"name": "react-sketchapp: Example Tests",
+			"identifier": "main",
+			"script": "./main.js"
+		}
+	],
+	"menu": {
+		"isRoot": true,
+		"items": [
+			"main"
+		]
+	}
+}

__tests__/examples/webpack.skpm.config.js

@@ -0,0 +1,24 @@
+const path = require('path');
+
+const aliasedModules = [
+  'chroma-js',
+  'ramda',
+  'react-primitives',
+  '@emotion/primitives',
+  '@emotion/core',
+];
+
+module.exports = (config) => {
+  config.resolve = {
+    ...config.resolve,
+    alias: {
+      ...config.resolve.alias,
+      'react-sketchapp': path.resolve(__dirname, '../../'),
+
+      ...aliasedModules.reduce((acc, mod) => {
+        acc[mod] = path.resolve(__dirname, `./node_modules/${mod}`);
+        return acc;
+      }, {}),
+    },
+  };
+};

__tests__/skpm/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "module:@skpm/babel-preset"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    [
+      "@babel/plugin-transform-modules-commonjs",
+      {
+        "noInterop": true
+      }
+    ]
+  ]
+}

__tests__/skpm/examples.test.js

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import sketch from 'sketch';
+import { render, Document, Page } from 'react-sketchapp';
+
+import { Document as BasicSetup } from '../../examples/basic-setup/src/my-command';
+import { Document as BasicSvg } from '../../examples/basic-svg/src/my-command';
+import { Document as Colors } from '../../examples/colors/src/main';
+import { App as Emotion } from '../../examples/emotion/src/my-command';
+import { Page as FormValidation } from '../../examples/form-validation/src/main';
+
+import formValidationData from '../../examples/form-validation/src/data';
+
+function getDoc(document) {
+  return sketch.getSelectedDocument() || document;
+}
+
+const examplePages = [
+  {
+    component: BasicSetup,
+    name: 'Basic Setup',
+    data: {
+      colors: {
+        Haus: '#F3F4F4',
+        Night: '#333',
+        Sur: '#96DBE4',
+        'Sur Dark': '#24828F',
+        Peach: '#EFADA0',
+        'Peach Dark': '#E37059',
+        Pear: '#93DAAB',
+        'Pear Dark': '#2E854B',
+      },
+    },
+  },
+  {
+    component: BasicSvg,
+    name: 'Basic Svg',
+  },
+  {
+    component: Colors,
+    name: 'Colors',
+    data: {
+      colors: ['#01FFD8', '#C137E3', '#8702ED'],
+      steps: 50,
+    },
+  },
+  {
+    component: Emotion,
+    name: 'Emotion',
+  },
+  {
+    component: FormValidation,
+    name: 'Form Validation',
+    data: {
+      sessions: formValidationData,
+    },
+  },
+];
+
+test('should render examples', (context, document) => {
+  const doc = getDoc(document);
+
+  const App = () => (
+    <Document>
+      {examplePages.map(({ name, component: Component, data }) => (
+        <Page key={name} name={name}>
+          <Component {...data} />
+        </Page>
+      ))}
+    </Document>
+  );
+
+  render(<App />, doc);
+
+  const pageByName = doc.pages.reduce((acc, page) => {
+    if (page.name) {
+      acc[page.name] = page;
+    }
+    return acc;
+  }, {});
+
+  const expectedLayerNames = {
+    'Basic Setup': 'Swatches',
+    'Basic Svg': 'Sketch Logo',
+    Colors: 'View',
+    Emotion: 'View',
+    'Form Validation': 'View',
+  };
+
+  for (const pageName in pageByName) {
+    const page = pageByName[pageName];
+
+    const layerName = page.layers[0].name;
+    const expectedLayerName = expectedLayerNames[pageName];
+    expect(layerName).toBe(expectedLayerName);
+  }
+});

__tests__/skpm/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "example-tests",
+  "version": "1.0.0",
+  "description": "",
+  "private": true,
+  "skpm": {
+    "test": {
+      "testRegex": "/.*.(test|spec).jsx?$"
+    }
+  },
+  "scripts": {
+    "test:e2e": "../../node_modules/.bin/skpm-test"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@emotion/core": "^10.0.28",
+    "@emotion/primitives": "^10.0.30",
+    "chroma-js": "^1.2.2",
+    "emotion-primitives": "^1.0.0-beta.0",
+    "ramda": "^0.27.0",
+    "react-primitives": "^0.8.1"
+  }
+}

__tests__/skpm/webpack.skpm.config.js

@@ -0,0 +1,24 @@
+const path = require('path');
+
+const aliasedModules = [
+  'chroma-js',
+  'ramda',
+  'react-primitives',
+  '@emotion/primitives',
+  '@emotion/core',
+];
+
+module.exports = (config) => {
+  config.resolve = {
+    ...config.resolve,
+    alias: {
+      ...config.resolve.alias,
+      'react-sketchapp': path.resolve(__dirname, '../../lib/index.js'),
+
+      ...aliasedModules.reduce((acc, mod) => {
+        acc[mod] = path.resolve(__dirname, `../examples/node_modules/${mod}`);
+        return acc;
+      }, {}),
+    },
+  };
+};

examples/basic-setup/src/my-command.js

@@ -42,7 +42,7 @@ const Color = {
 
 Swatch.propTypes = Color;
 
-const Document = ({ colors }) => (
+export const Document = ({ colors }) => (
   <Artboard
     name="Swatches"
     style={{

examples/basic-svg/src/my-command.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render, Artboard, Svg } from 'react-sketchapp';
 
-const Document = () => (
+export const Document = () => (
   <Artboard
     name="Sketch Logo"
     style={{

examples/colors/src/main.js

@@ -14,7 +14,7 @@ const styles = StyleSheet.create({
   },
 });
 
-const Document = ({ colors, steps }) => {
+export const Document = ({ colors, steps }) => {
   const color = chroma.scale(colors);
 
   return (

examples/emotion/package.json

@@ -18,7 +18,8 @@
     "@skpm/builder": "^0.4.3"
   },
   "dependencies": {
-    "emotion-primitives": "^1.0.0-beta.6",
+    "@emotion/core": "^10.0.28",
+    "@emotion/primitives": "^10.0.30",
     "react": "^16.4.1",
     "react-primitives": "^0.6.0",
     "react-sketchapp": "^3.0.0"

examples/emotion/src/my-command.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import emotion from 'emotion-primitives';
+import * as React from 'react';
+import emotion from '@emotion/primitives';
 import { render } from 'react-sketchapp';
 
 const Container = emotion.View`
@@ -21,7 +21,7 @@ const Image = emotion.Image`
 
 const emotionLogo = 'https://avatars3.githubusercontent.com/u/31557565?s=400&v=4';
 
-class App extends React.Component {
+export class App extends React.Component {
   render() {
     return (
       <Container borderRadius="10px">

examples/form-validation/src/components/TextBox/index.sketch.js

@@ -2,13 +2,7 @@ import * as React from 'react';
 import { View, Text } from 'react-primitives';
 import styles from './style';
 
-type Props = {
-  label: string,
-  value: string,
-  children?: React$Element<any>,
-};
-
-const TextBox = ({ label, value, children }: Props) => (
+const TextBox = ({ label, value, children }) => (
   <View style={styles.formElement}>
     <Text style={styles.label}>{label}</Text>
     <View style={styles.textbox}>

examples/form-validation/src/main.js

@@ -6,7 +6,7 @@ import DATA from './data';
 import Register from './components/Register';
 import Space from './components/Space';
 
-const Page = ({ sessions }) => (
+export const Page = ({ sessions }) => (
   <View>
     <Text style={typography.Heading}>Form Validation w/ DOM elements and React Primitives</Text>
     <View

package.json

@@ -36,7 +36,8 @@
     "test": "npm run test:unit && npm run test:e2e",
     "test:unit": "jest --config jest.config.js --no-watchman",
     "test:ci": "npm run test:unit -- --runInBand",
-    "test:e2e": "skpm-test",
+    "test:e2e": "npm run test:e2e --prefix __tests__/skpm",
+    "test:e2e:examples": "npm run build --prefix __tests__/examples/",
     "test:update": "npm run test -- --updateSnapshot",
     "test:e2e:watch": "npm run test:e2e -- --watch",
     "watch": "run-s clean build:main && run-p \"build:main -- -w\" \"test:unit -- --watch\""
@@ -80,7 +81,7 @@
   },
   "devDependencies": {
     "@skpm/babel-preset": "^0.2.1",
-    "@skpm/test-runner": "^0.4.1",
+    "@skpm/test-runner": "^0.3.2",
     "@types/airbnb-prop-types": "^2.13.1",
     "@types/invariant": "^2.2.31",
     "@types/jest": "^25.2.1",