Skip to content

Commit 2af17a8

Browse files
davidgomesdavidgomes
authored
Merge pull request #5 from paulmolluzzo/add-tests
Adds some tests to the external API.
2 parents c89d35a + 4a4b64f commit 2af17a8

File tree

7 files changed

+1505
-43
lines changed

7 files changed

+1505
-43
lines changed

‎.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@
1313
"env": {
1414
"commonjs": {
1515
"plugins": ["transform-es2015-modules-commonjs"]
16+
},
17+
"test": {
18+
"plugins": ["transform-es2015-modules-commonjs"]
1619
}
1720
}
1821
}

‎.gitignore

+4-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ node_modules
1212
# Optional REPL history
1313
.node_repl_history
1414

15+
package-lock.json
16+
1517
dist/
1618
es/
17-
lib/
19+
lib/
20+
coverage/

‎package.json

+7-3
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,17 @@
66
"module": "es/index.js",
77
"scripts": {
88
"build": "yarn run build:commonjs && yarn run build:es && npm run build:umd && npm run build:umd:min",
9-
"build:es": "babel src -d es",
10-
"build:commonjs": "cross-env BABEL_ENV=commonjs babel src -d lib",
9+
"build:es": "babel src -d es --ignore '**/*.test.js'",
10+
"build:commonjs": "cross-env BABEL_ENV=commonjs babel src -d lib --ignore '**/*.test.js'",
1111
"build:umd": "cross-env BABEL_ENV=commonjs NODE_ENV=development webpack src/index.js --output dist/graphql-css.js --mode development",
1212
"build:umd:min": "cross-env BABEL_ENV=commonjs NODE_ENV=production webpack src/index.js --output dist/graphql-css.min.js --mode production",
1313
"clean": "rimraf lib dist es",
1414
"dev": "yarn run clean && cross-env BABEL_ENV=commonjs babel src -d lib --watch",
1515
"dev:server": "cross-env NODE_ENV=dev-server webpack-dev-server examples --config webpack.config.js --content-base examples --inline --hot --mode development",
1616
"lint": "eslint src/ --ext .js,.jsx",
1717
"prepublishOnly": "yarn run clean && yarn run build",
18-
"test": "echo \"No tests available\" && exit 0"
18+
"test": "jest --coverage",
19+
"test:watch": "jest --watchAll --coverage"
1920
},
2021
"repository": {
2122
"type": "git",
@@ -60,8 +61,11 @@
6061
"glamor": "^2.20.40",
6162
"graphql": "^0.13.1",
6263
"graphql-tag": "^2.8.0",
64+
"jest": "^22.4.2",
65+
"jest-glamor-react": "^4.2.0",
6366
"react": "^16.2.0",
6467
"react-dom": "^16.2.0",
68+
"react-testing-library": "^1.3.0",
6569
"rimraf": "^2.6.2",
6670
"webpack": "^4.1.1",
6771
"webpack-cli": "^2.0.11",

‎src/__snapshots__/index.test.js.snap

+159
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`GqlCSS it renders component without styles 1`] = `
4+
<div>
5+
<div
6+
class="css-nil"
7+
>
8+
Using component
9+
</div>
10+
</div>
11+
`;
12+
13+
exports[`GqlCSSProvider it supports the Provider/Subscriber pattern 1`] = `
14+
.css-0,
15+
[data-css-0] {
16+
font-size: 36px;
17+
font-weight: 700;
18+
margin-left: 32px;
19+
color: green;
20+
}
21+
22+
.css-1,
23+
[data-css-1] {
24+
font-size: 52px;
25+
font-weight: 700;
26+
margin-left: 24px;
27+
color: red;
28+
margin-top: 30px;
29+
}
30+
31+
<div>
32+
<span>
33+
<div>
34+
<div>
35+
<span>
36+
<div
37+
class="css-0"
38+
>
39+
Using provider
40+
</div>
41+
</span>
42+
</div>
43+
<div
44+
class="css-1"
45+
>
46+
Also using provider
47+
</div>
48+
</div>
49+
</span>
50+
</div>
51+
`;
52+
53+
exports[`WithGqlCSS it supports the render props pattern 1`] = `
54+
<div>
55+
<div
56+
style="font-size: 36px; font-weight: 700; margin-left: 32px; color: green;"
57+
>
58+
Render props component
59+
</div>
60+
</div>
61+
`;
62+
63+
exports[`gqlCSS it returns a styled component by not passing any component 1`] = `
64+
.css-0,
65+
[data-css-0] {
66+
font-size: 36px;
67+
font-weight: 700;
68+
margin-left: 32px;
69+
color: green;
70+
}
71+
72+
<div>
73+
<div
74+
class="css-0"
75+
/>
76+
</div>
77+
`;
78+
79+
exports[`gqlCSS it returns a styled component by passing a div 1`] = `
80+
.css-0,
81+
[data-css-0] {
82+
font-size: 36px;
83+
font-weight: 700;
84+
margin-left: 32px;
85+
color: green;
86+
}
87+
88+
<div>
89+
<div
90+
class="css-0"
91+
/>
92+
</div>
93+
`;
94+
95+
exports[`gqlCSS it supports variables and stateful components 1`] = `
96+
.css-0,
97+
[data-css-0] {
98+
font-size: 36px;
99+
background-color: red;
100+
padding: 24px;
101+
cursor: pointer;
102+
}
103+
104+
<div>
105+
<div
106+
class="css-0"
107+
data-testid="stateful-component"
108+
>
109+
Using stateful component
110+
</div>
111+
<div
112+
class="css-0"
113+
>
114+
Other sharing state
115+
</div>
116+
</div>
117+
`;
118+
119+
exports[`gqlCSS it supports variables and stateful components 2`] = `
120+
.css-0,
121+
[data-css-0] {
122+
font-size: 36px;
123+
background-color: green;
124+
padding: 24px;
125+
cursor: pointer;
126+
}
127+
128+
<div>
129+
<div
130+
class="css-0"
131+
data-testid="stateful-component"
132+
>
133+
Using stateful component
134+
</div>
135+
<div
136+
class="css-0"
137+
>
138+
Other sharing state
139+
</div>
140+
</div>
141+
`;
142+
143+
exports[`withGqlCSS it supports the HOC pattern 1`] = `
144+
.css-0,
145+
[data-css-0] {
146+
font-size: 52px;
147+
font-weight: 700;
148+
margin-left: 4em;
149+
color: blue;
150+
}
151+
152+
<div>
153+
<div
154+
class="css-0"
155+
>
156+
test
157+
</div>
158+
</div>
159+
`;

‎src/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const smoosh = object => {
1919
);
2020
};
2121

22-
const resolver = (fieldName, root = {}, args = {}, context, { resultKey }) => {
22+
const resolver = (fieldName, root, args, context, { resultKey }) => {
2323
// if it's an aliased query add alias as prop
2424
if (fieldName !== resultKey) {
2525
return {

‎src/index.test.js

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
/* eslint-env jest */
2+
3+
import React from "react";
4+
import gql from "graphql-tag";
5+
import { render, Simulate } from "react-testing-library";
6+
import serializer from "jest-glamor-react";
7+
import { Div } from "glamorous";
8+
9+
import gqlCSS, { GqlCSS, GqlCSSProvider, WithGqlCSS, withGqlCSS } from "./index";
10+
import styles from "../examples/styleguide";
11+
import { h1Styles, h2Styles, customH1Styles, stateStyles } from "../examples/styleQueries";
12+
13+
expect.addSnapshotSerializer(serializer);
14+
15+
describe("gqlCSS", () => {
16+
it("it allows the extraction of styles by passing false", () => {
17+
const extractedStyles = gqlCSS(styles)(h2Styles, false);
18+
expect(extractedStyles).toEqual({
19+
color: "green",
20+
fontSize: "36px",
21+
fontWeight: 700,
22+
marginLeft: 32,
23+
});
24+
});
25+
26+
it("it returns a styled component by passing a div", () => {
27+
const StyledComponent = gqlCSS(styles)(h2Styles, "div");
28+
const { container } = render(<StyledComponent />);
29+
expect(container).toMatchSnapshot();
30+
});
31+
32+
it("it returns a styled component by not passing any component", () => {
33+
const StyledComponent = gqlCSS(styles)(h2Styles);
34+
const { container } = render(<StyledComponent />);
35+
expect(container).toMatchSnapshot();
36+
});
37+
38+
it("it supports variables and stateful components", () => {
39+
class StatefulComponent extends React.Component {
40+
constructor(props) {
41+
super(props);
42+
this.state = {
43+
variant: "normal",
44+
};
45+
this.toggleVariant = this.toggleVariant.bind(this);
46+
}
47+
48+
toggleVariant() {
49+
this.setState(state => ({
50+
variant: state.variant === "normal" ? "done" : "normal",
51+
}));
52+
}
53+
54+
render() {
55+
const { variant } = this.state;
56+
const OtherComponent = gqlCSS(styles)(stateStyles, null, { variant });
57+
58+
return (
59+
<React.Fragment>
60+
<GqlCSS
61+
styles={styles}
62+
query={stateStyles}
63+
variables={{ variant }}
64+
onClick={this.toggleVariant}
65+
data-testid="stateful-component"
66+
>
67+
Using stateful component
68+
</GqlCSS>
69+
<OtherComponent>Other sharing state</OtherComponent>
70+
</React.Fragment>
71+
);
72+
}
73+
}
74+
75+
const { container, queryByTestId } = render(<StatefulComponent />);
76+
77+
expect(container).toMatchSnapshot();
78+
79+
Simulate.click(queryByTestId("stateful-component"));
80+
81+
expect(container).toMatchSnapshot();
82+
});
83+
});
84+
85+
describe("GqlCSS", () => {
86+
it("it renders component without styles", () => {
87+
const { container } = render(<GqlCSS query={h2Styles}>Using component</GqlCSS>);
88+
89+
expect(container).toMatchSnapshot();
90+
});
91+
});
92+
93+
describe("GqlCSSProvider", () => {
94+
it("it supports the Provider/Subscriber pattern", () => {
95+
const SubscriberComponent = () => (
96+
<div>
97+
<div>
98+
<span>
99+
<GqlCSS query={h2Styles}>Using provider</GqlCSS>
100+
</span>
101+
</div>
102+
<GqlCSS query={h1Styles} css={{ marginTop: 30 }}>
103+
Also using provider
104+
</GqlCSS>
105+
</div>
106+
);
107+
const { container } = render(
108+
<GqlCSSProvider styles={styles}>
109+
<SubscriberComponent />
110+
</GqlCSSProvider>
111+
);
112+
113+
expect(container).toMatchSnapshot();
114+
});
115+
});
116+
117+
describe("WithGqlCSS", () => {
118+
it("it supports the render props pattern", () => {
119+
const { container } = render(
120+
<WithGqlCSS styles={styles} query={h2Styles}>
121+
{({ gqlStyles }) => <div style={gqlStyles}>Render props component</div>}
122+
</WithGqlCSS>
123+
);
124+
125+
expect(container).toMatchSnapshot();
126+
});
127+
});
128+
129+
describe("withGqlCSS", () => {
130+
it("it supports the HOC pattern", () => {
131+
const ExistingComponent = ({ gqlStyles, ...rest }) => (
132+
<Div css={gqlStyles} {...rest}>
133+
test
134+
</Div>
135+
);
136+
137+
const HOC = withGqlCSS(styles, customH1Styles)(ExistingComponent);
138+
const { container } = render(<HOC />);
139+
140+
expect(container).toMatchSnapshot();
141+
});
142+
});

0 commit comments

Comments
 (0)