From 5ff6a22b0fedd4be319ec6d760ce4eb15204d870 Mon Sep 17 00:00:00 2001 From: macintoshhelper Date: Sun, 10 May 2020 01:14:03 +0100 Subject: [PATCH 01/16] create initial e2e test examples module --- __tests__/examples/package.json | 26 +++++++++ __tests__/examples/src/main.js | 67 +++++++++++++++++++++++ __tests__/examples/src/manifest.json | 17 ++++++ __tests__/examples/webpack.skpm.config.js | 24 ++++++++ 4 files changed, 134 insertions(+) create mode 100644 __tests__/examples/package.json create mode 100644 __tests__/examples/src/main.js create mode 100644 __tests__/examples/src/manifest.json create mode 100644 __tests__/examples/webpack.skpm.config.js diff --git a/__tests__/examples/package.json b/__tests__/examples/package.json new file mode 100644 index 00000000..ad5398d1 --- /dev/null +++ b/__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 ", + "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" + } +} diff --git a/__tests__/examples/src/main.js b/__tests__/examples/src/main.js new file mode 100644 index 00000000..ac5e7e2c --- /dev/null +++ b/__tests__/examples/src/main.js @@ -0,0 +1,67 @@ +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 = () => ( + + {pages.map(({ name, component: Component, data }) => ( + + + + ))} + +); + +export default () => { + render(, sketch.getSelectedDocument()); +}; diff --git a/__tests__/examples/src/manifest.json b/__tests__/examples/src/manifest.json new file mode 100644 index 00000000..849b2c96 --- /dev/null +++ b/__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" + ] + } +} diff --git a/__tests__/examples/webpack.skpm.config.js b/__tests__/examples/webpack.skpm.config.js new file mode 100644 index 00000000..ea5a82df --- /dev/null +++ b/__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; + }, {}), + }, + }; +}; From d1218ecb885fc8b0439176f3744258cfeb127366 Mon Sep 17 00:00:00 2001 From: macintoshhelper Date: Sun, 10 May 2020 01:15:35 +0100 Subject: [PATCH 02/16] export app components from examples for pure test imports --- examples/basic-setup/src/my-command.js | 2 +- examples/basic-svg/src/my-command.js | 2 +- examples/colors/src/main.js | 2 +- examples/form-validation/src/main.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/basic-setup/src/my-command.js b/examples/basic-setup/src/my-command.js index cfd34a0b..98ece84d 100644 --- a/examples/basic-setup/src/my-command.js +++ b/examples/basic-setup/src/my-command.js @@ -42,7 +42,7 @@ const Color = { Swatch.propTypes = Color; -const Document = ({ colors }) => ( +export const Document = ({ colors }) => ( ( +export const Document = () => ( { +export const Document = ({ colors, steps }) => { const color = chroma.scale(colors); return ( diff --git a/examples/form-validation/src/main.js b/examples/form-validation/src/main.js index f2f136d4..d115133b 100644 --- a/examples/form-validation/src/main.js +++ b/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 }) => ( Form Validation w/ DOM elements and React Primitives Date: Sun, 10 May 2020 01:16:11 +0100 Subject: [PATCH 03/16] migrate emotion example to use @emotion/primitives + @emotion/core --- examples/emotion/package.json | 3 ++- examples/emotion/src/my-command.js | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/examples/emotion/package.json b/examples/emotion/package.json index eab42181..80667627 100644 --- a/examples/emotion/package.json +++ b/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" diff --git a/examples/emotion/src/my-command.js b/examples/emotion/src/my-command.js index 92bf3f4c..de3b4bad 100644 --- a/examples/emotion/src/my-command.js +++ b/examples/emotion/src/my-command.js @@ -1,5 +1,5 @@ import React from 'react'; -import emotion from 'emotion-primitives'; +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 ( From 2c118113f6560b9a4baed39fffd0e52bf002b278 Mon Sep 17 00:00:00 2001 From: macintoshhelper Date: Sun, 10 May 2020 01:16:52 +0100 Subject: [PATCH 04/16] remove flow types from form validation TextBox component --- .../src/components/TextBox/index.sketch.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/examples/form-validation/src/components/TextBox/index.sketch.js b/examples/form-validation/src/components/TextBox/index.sketch.js index 539a5793..63ac4b38 100644 --- a/examples/form-validation/src/components/TextBox/index.sketch.js +++ b/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, -}; - -const TextBox = ({ label, value, children }: Props) => ( +const TextBox = ({ label, value, children }) => ( {label} From 78c317019391eaa6ea0505c09bdb2e7a2c1ccf76 Mon Sep 17 00:00:00 2001 From: macintoshhelper Date: Sun, 10 May 2020 01:31:12 +0100 Subject: [PATCH 05/16] fix svg export for es2015 #515 --- src/components/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/index.ts b/src/components/index.ts index 8038ca64..e77e97d5 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -5,5 +5,5 @@ export { Image } from './Image'; export { RedBox } from './RedBox'; export { View } from './View'; export { Text } from './Text'; -import * as Svg from './Svg'; +import Svg from './Svg'; export { Svg }; From 863a2ed461c6fc4069908f56df8fddf40d87d8c2 Mon Sep 17 00:00:00 2001 From: macintoshhelper Date: Sun, 10 May 2020 01:46:15 +0100 Subject: [PATCH 06/16] add test:e2e:examples script to root package.json --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 7eaf27dc..7c0b8006 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "test:unit": "jest --config jest.config.js --no-watchman", "test:ci": "npm run test:unit -- --runInBand", "test:e2e": "skpm-test", + "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\"" From 9c0ce94cc334db05552e74126213c4759ca3476d Mon Sep 17 00:00:00 2001 From: macintoshhelper Date: Sun, 10 May 2020 01:48:41 +0100 Subject: [PATCH 07/16] add e2e examples comment [ci skip] --- __tests__/examples/src/main.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/__tests__/examples/src/main.js b/__tests__/examples/src/main.js index ac5e7e2c..aec88e7c 100644 --- a/__tests__/examples/src/main.js +++ b/__tests__/examples/src/main.js @@ -63,5 +63,6 @@ const App = () => ( ); export default () => { - render(, sketch.getSelectedDocument()); + // FIXME: Get this working with skpm-test instead for CLI / CI stdout feedback + render(, sketch.getSelectedDocument() || new sketch.Document()); }; From 91cd02c78748bbdb046bc979b87981ecf23553f7 Mon Sep 17 00:00:00 2001 From: macintoshhelper Date: Sun, 10 May 2020 09:54:45 +0100 Subject: [PATCH 08/16] undo import Svg fix attempt --- src/components/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/index.ts b/src/components/index.ts index e77e97d5..8038ca64 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -5,5 +5,5 @@ export { Image } from './Image'; export { RedBox } from './RedBox'; export { View } from './View'; export { Text } from './Text'; -import Svg from './Svg'; +import * as Svg from './Svg'; export { Svg }; From bd95ed3aeb077ade2ca5a578eac55cc3c365d210 Mon Sep 17 00:00:00 2001 From: macintoshhelper Date: Mon, 25 May 2020 01:59:10 +0100 Subject: [PATCH 09/16] downgrade @skpm/test-runner to fix e2e tests --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 7c0b8006..391587a4 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "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", @@ -82,7 +82,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", From 38509316039db65e1f7cca9449e01a1573dd61e0 Mon Sep 17 00:00:00 2001 From: macintoshhelper Date: Mon, 25 May 2020 01:59:39 +0100 Subject: [PATCH 10/16] use import alias to work with e2e tests --- examples/emotion/src/my-command.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/emotion/src/my-command.js b/examples/emotion/src/my-command.js index de3b4bad..f52bfaa0 100644 --- a/examples/emotion/src/my-command.js +++ b/examples/emotion/src/my-command.js @@ -1,4 +1,4 @@ -import React from 'react'; +import * as React from 'react'; import emotion from '@emotion/primitives'; import { render } from 'react-sketchapp'; From fd830e393a509c89c42dd272cbe3a945d5645209 Mon Sep 17 00:00:00 2001 From: macintoshhelper Date: Mon, 25 May 2020 02:00:54 +0100 Subject: [PATCH 11/16] add babel/webpack setup for e2e example tests --- __tests__/skpm/.babelrc | 14 ++++++++++++++ __tests__/skpm/package.json | 23 +++++++++++++++++++++++ __tests__/skpm/webpack.skpm.config.js | 24 ++++++++++++++++++++++++ 3 files changed, 61 insertions(+) create mode 100644 __tests__/skpm/.babelrc create mode 100644 __tests__/skpm/package.json create mode 100644 __tests__/skpm/webpack.skpm.config.js diff --git a/__tests__/skpm/.babelrc b/__tests__/skpm/.babelrc new file mode 100644 index 00000000..4499ae21 --- /dev/null +++ b/__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 + } + ] + ] +} diff --git a/__tests__/skpm/package.json b/__tests__/skpm/package.json new file mode 100644 index 00000000..98447fdb --- /dev/null +++ b/__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" + } +} diff --git a/__tests__/skpm/webpack.skpm.config.js b/__tests__/skpm/webpack.skpm.config.js new file mode 100644 index 00000000..88042a54 --- /dev/null +++ b/__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.sketch.js'), + + ...aliasedModules.reduce((acc, mod) => { + acc[mod] = path.resolve(__dirname, `../examples/node_modules/${mod}`); + return acc; + }, {}), + }, + }; +}; From 1981ae8611c20eeeecb853ceaf10a253cf9c5f2b Mon Sep 17 00:00:00 2001 From: macintoshhelper Date: Mon, 25 May 2020 02:01:23 +0100 Subject: [PATCH 12/16] add e2e examples test --- __tests__/skpm/examples.test.js | 96 +++++++++++++++++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 __tests__/skpm/examples.test.js diff --git a/__tests__/skpm/examples.test.js b/__tests__/skpm/examples.test.js new file mode 100644 index 00000000..e8bfe61e --- /dev/null +++ b/__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 = () => ( + + {examplePages.map(({ name, component: Component, data }) => ( + + + + ))} + + ); + + render(, 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); + } +}); From 31a64780baeabc957c0149732a2168315687136c Mon Sep 17 00:00:00 2001 From: macintoshhelper Date: Mon, 25 May 2020 02:06:58 +0100 Subject: [PATCH 13/16] fix e2e examples webpack module alias --- __tests__/skpm/webpack.skpm.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/__tests__/skpm/webpack.skpm.config.js b/__tests__/skpm/webpack.skpm.config.js index 88042a54..85381990 100644 --- a/__tests__/skpm/webpack.skpm.config.js +++ b/__tests__/skpm/webpack.skpm.config.js @@ -13,7 +13,7 @@ module.exports = (config) => { ...config.resolve, alias: { ...config.resolve.alias, - 'react-sketchapp': path.resolve(__dirname, '../../lib/index.sketch.js'), + 'react-sketchapp': path.resolve(__dirname, '../../lib/index.js'), ...aliasedModules.reduce((acc, mod) => { acc[mod] = path.resolve(__dirname, `../examples/node_modules/${mod}`); From 29779eb7788e7bff5941cba4368cacca4f7bb3dc Mon Sep 17 00:00:00 2001 From: macintoshhelper Date: Mon, 25 May 2020 17:09:02 +0100 Subject: [PATCH 14/16] migrate skpm webpack.config to __tests__/examples --- __tests__/examples/webpack.skpm.config.js | 12 ++++------- __tests__/skpm/webpack.skpm.config.js | 25 ++--------------------- 2 files changed, 6 insertions(+), 31 deletions(-) diff --git a/__tests__/examples/webpack.skpm.config.js b/__tests__/examples/webpack.skpm.config.js index ea5a82df..84e84484 100644 --- a/__tests__/examples/webpack.skpm.config.js +++ b/__tests__/examples/webpack.skpm.config.js @@ -1,19 +1,15 @@ const path = require('path'); -const aliasedModules = [ - 'chroma-js', - 'ramda', - 'react-primitives', - '@emotion/primitives', - '@emotion/core', -]; +const pkg = require(path.resolve(__dirname, 'package.json')); + +const aliasedModules = Object.keys(pkg.dependencies); module.exports = (config) => { config.resolve = { ...config.resolve, alias: { ...config.resolve.alias, - 'react-sketchapp': path.resolve(__dirname, '../../'), + 'react-sketchapp': path.resolve(__dirname, '../../lib'), ...aliasedModules.reduce((acc, mod) => { acc[mod] = path.resolve(__dirname, `./node_modules/${mod}`); diff --git a/__tests__/skpm/webpack.skpm.config.js b/__tests__/skpm/webpack.skpm.config.js index 85381990..6518ad5d 100644 --- a/__tests__/skpm/webpack.skpm.config.js +++ b/__tests__/skpm/webpack.skpm.config.js @@ -1,24 +1,3 @@ -const path = require('path'); +const webpackConfig = require('../examples/webpack.skpm.config'); -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; - }, {}), - }, - }; -}; +module.exports = webpackConfig; From 38bb39ca34a4ab06066c324c62b49991b914f1e7 Mon Sep 17 00:00:00 2001 From: macintoshhelper Date: Mon, 25 May 2020 17:10:08 +0100 Subject: [PATCH 15/16] add prepublishOnly script for installing/building e2e examples dependencies --- __tests__/examples/README.md | 3 +++ __tests__/skpm/package.json | 12 ++---------- package.json | 7 ++++--- 3 files changed, 9 insertions(+), 13 deletions(-) create mode 100644 __tests__/examples/README.md diff --git a/__tests__/examples/README.md b/__tests__/examples/README.md new file mode 100644 index 00000000..850f1603 --- /dev/null +++ b/__tests__/examples/README.md @@ -0,0 +1,3 @@ +# Aggregate of All Examples + +This is used for `__tests__/skpm/examples.test.js` (dependencies), and can be used to test that `skpm-build` works for all examples. diff --git a/__tests__/skpm/package.json b/__tests__/skpm/package.json index 98447fdb..58f4729b 100644 --- a/__tests__/skpm/package.json +++ b/__tests__/skpm/package.json @@ -9,15 +9,7 @@ } }, "scripts": { - "test:e2e": "../../node_modules/.bin/skpm-test" + "test": "../../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" - } + "license": "MIT" } diff --git a/package.json b/package.json index 15d50f32..bf409340 100644 --- a/package.json +++ b/package.json @@ -30,14 +30,15 @@ "docs:watch": "npm run docs:prepare && gitbook serve", "docs:publish": "npm run docs:clean && npm run docs:build && cd _book && git init && git commit --allow-empty -m 'update book' && git fetch https://github.com/airbnb/react-sketchapp gh-pages && git checkout -b gh-pages && git add . && git commit -am 'update book' && git push https://github.com/airbnb/react-sketchapp gh-pages --force", "lint-staged": "lint-staged", - "prepublishOnly": "npm run clean && npm run test:ci && npm run build", + "prepublishOnly": "npm run clean && npm run test:ci && npm run install:e2e && npm run build", "prettier:base": "prettier --write", "prettify": "npm run prettier:base \"src/**/*.(j|t)sx?\" \"examples/**/*.(j|t)sx?\" \"__tests__/**/*.(j|t)sx?\" \"docs/**/*.md\"", + "install:e2e": "npm install --prefix __tests__/examples", "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": "npm run test:e2e --prefix __tests__/skpm", - "test:e2e:examples": "npm run build --prefix __tests__/examples/", + "test:e2e": "npm run test --prefix __tests__/skpm", + "test:e2e:build": "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\"" From 2bcf86c67b27a9d83bd58b268e5da6a21f5e9f78 Mon Sep 17 00:00:00 2001 From: macintoshhelper Date: Mon, 25 May 2020 17:19:06 +0100 Subject: [PATCH 16/16] re-use aggregate example App code/imports for e2e example --- __tests__/examples/src/main.js | 2 +- __tests__/skpm/examples.test.js | 60 +-------------------------------- 2 files changed, 2 insertions(+), 60 deletions(-) diff --git a/__tests__/examples/src/main.js b/__tests__/examples/src/main.js index aec88e7c..a4f774ed 100644 --- a/__tests__/examples/src/main.js +++ b/__tests__/examples/src/main.js @@ -52,7 +52,7 @@ const pages = [ }, ]; -const App = () => ( +export const App = () => ( {pages.map(({ name, component: Component, data }) => ( diff --git a/__tests__/skpm/examples.test.js b/__tests__/skpm/examples.test.js index e8bfe61e..97237d78 100644 --- a/__tests__/skpm/examples.test.js +++ b/__tests__/skpm/examples.test.js @@ -2,73 +2,15 @@ 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'; +import { App } from '../examples/src/main'; 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 = () => ( - - {examplePages.map(({ name, component: Component, data }) => ( - - - - ))} - - ); - render(, doc); const pageByName = doc.pages.reduce((acc, page) => {