-
Notifications
You must be signed in to change notification settings - Fork 821
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
e2e tests for examples #516
base: master
Are you sure you want to change the base?
Changes from 15 commits
5ff6a22
d1218ec
8d95bee
2c11811
78c3170
863a2ed
9c0ce94
91cd02c
5100750
bd95ed3
3850931
fd830e3
1981ae8
746b8e7
31a6478
29779eb
38bb39c
2bcf86c
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 <[email protected]>", | ||
"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" | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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()); | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
{ | ||
"compatibleVersion": 3, | ||
"bundleVersion": 1, | ||
"commands": [ | ||
{ | ||
"name": "react-sketchapp: Example Tests", | ||
"identifier": "main", | ||
"script": "./main.js" | ||
} | ||
], | ||
"menu": { | ||
"isRoot": true, | ||
"items": [ | ||
"main" | ||
] | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
}, {}), | ||
}, | ||
}; | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
{ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. why do you need this file? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I pulled it from before the TypeScript refactor. I believe Without the undefined is not an object (evaluating 'module.exports.tests = __skpm_tests__') |
||
"presets": [ | ||
"module:@skpm/babel-preset" | ||
], | ||
"plugins": [ | ||
"@babel/plugin-proposal-class-properties", | ||
[ | ||
"@babel/plugin-transform-modules-commonjs", | ||
{ | ||
"noInterop": true | ||
} | ||
] | ||
] | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 = [ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. a lot fo this is duplicated in |
||
{ | ||
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); | ||
} | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
}, {}), | ||
}, | ||
}; | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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/", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Maybe |
||
"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", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. hum that's unfortunate. I'll try to see what's up |
||
"@types/airbnb-prop-types": "^2.13.1", | ||
"@types/invariant": "^2.2.31", | ||
"@types/jest": "^25.2.1", | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
could we get this list from the package.json? Just to make sure nothing is missing