Skip to content
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

Open
wants to merge 18 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
5ff6a22
create initial e2e test examples module
macintoshhelper May 10, 2020
d1218ec
export app components from examples for pure test imports
macintoshhelper May 10, 2020
8d95bee
migrate emotion example to use @emotion/primitives + @emotion/core
macintoshhelper May 10, 2020
2c11811
remove flow types from form validation TextBox component
macintoshhelper May 10, 2020
78c3170
fix svg export for es2015 #515
macintoshhelper May 10, 2020
863a2ed
add test:e2e:examples script to root package.json
macintoshhelper May 10, 2020
9c0ce94
add e2e examples comment [ci skip]
macintoshhelper May 10, 2020
91cd02c
undo import Svg fix attempt
macintoshhelper May 10, 2020
5100750
Merge branch 'master' into dev/e2e-example-tests
macintoshhelper May 10, 2020
bd95ed3
downgrade @skpm/test-runner to fix e2e tests
macintoshhelper May 25, 2020
3850931
use import alias to work with e2e tests
macintoshhelper May 25, 2020
fd830e3
add babel/webpack setup for e2e example tests
macintoshhelper May 25, 2020
1981ae8
add e2e examples test
macintoshhelper May 25, 2020
746b8e7
Merge branch 'dev/e2e-example-tests' of github.com:macintoshhelper/re…
macintoshhelper May 25, 2020
31a6478
fix e2e examples webpack module alias
macintoshhelper May 25, 2020
29779eb
migrate skpm webpack.config to __tests__/examples
macintoshhelper May 25, 2020
38bb39c
add prepublishOnly script for installing/building e2e examples depend…
macintoshhelper May 25, 2020
2bcf86c
re-use aggregate example App code/imports for e2e example
macintoshhelper May 25, 2020
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions __tests__/examples/package.json
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"
}
}
68 changes: 68 additions & 0 deletions __tests__/examples/src/main.js
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());
};
17 changes: 17 additions & 0 deletions __tests__/examples/src/manifest.json
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"
]
}
}
24 changes: 24 additions & 0 deletions __tests__/examples/webpack.skpm.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
const path = require('path');

const aliasedModules = [
Copy link
Collaborator

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

'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;
}, {}),
},
};
};
2 changes: 1 addition & 1 deletion examples/basic-setup/src/my-command.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const Color = {

Swatch.propTypes = Color;

const Document = ({ colors }) => (
export const Document = ({ colors }) => (
<Artboard
name="Swatches"
style={{
Expand Down
2 changes: 1 addition & 1 deletion examples/basic-svg/src/my-command.js
Original file line number Diff line number Diff line change
@@ -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={{
Expand Down
2 changes: 1 addition & 1 deletion examples/colors/src/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const styles = StyleSheet.create({
},
});

const Document = ({ colors, steps }) => {
export const Document = ({ colors, steps }) => {
const color = chroma.scale(colors);

return (
Expand Down
3 changes: 2 additions & 1 deletion examples/emotion/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions examples/emotion/src/my-command.js
Original file line number Diff line number Diff line change
@@ -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`
Expand All @@ -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">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
2 changes: 1 addition & 1 deletion examples/form-validation/src/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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/",
Copy link
Contributor Author

@macintoshhelper macintoshhelper May 10, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe npm run render:once --prefix ... is better for now? Later on this should probably run with test:e2e, together with the other e2e tests.

"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\""
Expand Down
2 changes: 1 addition & 1 deletion src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
mathieudutour marked this conversation as resolved.
Show resolved Hide resolved
export { Svg };