Skip to content

Commit

Permalink
tests: add basic test with puppeteer for the website
Browse files Browse the repository at this point in the history
  • Loading branch information
satya164 committed Oct 23, 2017
1 parent 99c3490 commit 849e0ba
Show file tree
Hide file tree
Showing 15 changed files with 326 additions and 74 deletions.
4 changes: 4 additions & 0 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,11 @@ jobs:
- attach_workspace:
at: ~/linaria
- run: |
bash .circleci/install-chrome-deps.sh
yarn run test:integration:ci
- store_artifacts:
path: website/__integration-tests__/__image_snapshots__/__diff_output__
destination: website-snapshot-diffs
build-website:
<<: *defaults
steps:
Expand Down
Empty file modified .circleci/install-chrome-deps.sh
100755 → 100644
Empty file.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -49,3 +49,4 @@ android/keystores/debug.keystore
# jest
coverage/
example/dist/
__diff_output__
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,9 @@
"flow-copy-source": "^1.2.1",
"glob": "^7.1.2",
"jest": "^21.1.0",
"jest-image-snapshot": "^1.0.1",
"prettier": "^1.6.1",
"puppeteer": "^0.12.0",
"strip-ansi": "^4.0.0"
},
"jest": {
Expand Down
9 changes: 7 additions & 2 deletions setupJest.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
/* @flow */
import stripAnsi from 'strip-ansi'; // eslint-disable-line import/no-extraneous-dependencies
import escapeStringRegexp from 'escape-string-regexp'; // eslint-disable-line import/no-extraneous-dependencies
/* eslint-disable import/no-extraneous-dependencies */

import { toMatchImageSnapshot } from 'jest-image-snapshot';
import stripAnsi from 'strip-ansi';
import escapeStringRegexp from 'escape-string-regexp';

/* istanbul ignore next */
const serialize = val =>
Expand All @@ -15,3 +18,5 @@ expect.addSnapshotSerializer({
test: val => val && val.toString && val.toString().includes(process.cwd()),
serialize,
});

expect.extend({ toMatchImageSnapshot });
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
70 changes: 70 additions & 0 deletions website/__integration-tests__/website.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
/* @flow */

import path from 'path';
import child_process from 'child_process'; // eslint-disable-line camelcase
import puppeteer from 'puppeteer'; // eslint-disable-line import/no-extraneous-dependencies

jasmine.DEFAULT_TIMEOUT_INTERVAL = 60000; // eslint-disable-line no-undef

describe('website', () => {
let server;
let browser;
let page;

beforeAll(async () => {
server = child_process.spawn('yarn', ['start'], {
cwd: path.join(__dirname, '..'),
});

await new Promise((resolve, reject) => {
server.stdout.on('data', data => {
if (data.toString().includes('webpack: Compiled successfully.')) {
resolve(data);
}
});

server.stderr.on('data', data => {
reject(data);
});
});
});

afterAll(async () => {
server.kill();
});

beforeEach(async () => {
browser = await puppeteer.launch();
page = await browser.newPage();
});

afterEach(async () => {
browser.close();
});

it('should launch website with webpack', async () => {
await page.setViewport({ width: 800, height: 3260 });
await page.goto('http://localhost:3000', { waitUntil: 'networkidle' });

const screenshot = await page.screenshot();

/* $FlowFixMe */
expect(screenshot).toMatchImageSnapshot();
});

it('should have babel preset configured', async done => {
page.on('console', message => {
if (
message.args.some(m =>
String(m).includes('Babel preset for Linaria is not configured')
)
) {
done.fail('Babel preset is not configured');
}
});

await page.goto('http://localhost:3000', { waitUntil: 'networkidle' });

done();
});
});
9 changes: 5 additions & 4 deletions website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@
"description": "Linaria website",
"scripts": {
"build:all": "yarn build:server && yarn build",
"build:server": "NODE_ENV=production BABEL_ENV=server babel src --out-dir static/server --ignore '{src/index.js,*.css}'",
"build": "NODE_ENV=production webpack -p --env.NODE_ENV production",
"build:server": "cross-env NODE_ENV=production BABEL_ENV=server babel src --out-dir static/server --ignore '{src/index.js,*.css}'",
"build": "cross-env NODE_ENV=production webpack -p --env.NODE_ENV production",
"clean": "del static/build",
"postinstall": "cd .. && yarn link && cd website && yarn link linaria",
"prebuild": "yarn run clean",
"server": "node static/server/server.js",
"start-server-render": "yarn build:all && yarn server",
"start": "webpack-dev-server"
"start": "cross-env NODE_ENV=development webpack-dev-server"
},
"dependencies": {
"compression": "^1.7.1",
Expand All @@ -32,7 +32,8 @@
"babel-loader": "^7.0.0",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.1.0",
"css-loader": "^0.28.5",
"del-cli": "^1.0.0",
"eslint-plugin-react": "^7.3.0",
Expand Down
5 changes: 1 addition & 4 deletions website/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,7 @@ export default function Index() {
<div>
<Container>
<Heading type="h2" className={getStarted} id="get-started">
Get Started!{' '}
<span role="img" aria-labelledby="stars">
</span>
Get Started!
</Heading>
<Heading type="h3">Installation and setup</Heading>
<p>Install it like a regular npm package:</p>
Expand Down
2 changes: 1 addition & 1 deletion website/src/components/Terminal.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const block = css`
padding: 20px;
background: ${theme.backdrop};
color: ${theme.primary};
font-family: monospace;
font-family: 'Fira Mono', monospace;
`;

const codeLine = css`
Expand Down
9 changes: 8 additions & 1 deletion website/src/server.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,17 +31,24 @@ app.get('/', (req, res) => {
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Linaria – zero-runtime CSS in JS library</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300,600">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Mono">
<style type="text/css">${globalStyles}</style>
<style type="text/css">${critical}</style>
<script defer src="/build/manifest.js"></script>
<script defer src="/build/vendor.js"></script>
<script defer src="/build/main.js"></script>
</head>
<body>
<div id="root">${html}</div>
<link rel="stylesheet" href="/vendor/prism.css">
<link rel="stylesheet" href="/styles/${slug}" />
<link rel="stylesheet" href="/styles/${slug}">
</body>
</html>
`);
Expand Down
6 changes: 6 additions & 0 deletions website/static/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,20 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Linaria – zero-runtime CSS in JS library</title>

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300,600">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Mono">

<script defer src="/build/manifest.js"></script>
<script defer src="/build/vendor.js"></script>
<script defer src="/build/main.js"></script>
</head>

<body>
<div id="root"></div>

<link rel="stylesheet" href="/vendor/prism.css">
</body>

Expand Down
2 changes: 1 addition & 1 deletion website/static/vendor/prism.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
code[class*='language-'],
pre[class*='language-'] {
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-family: 'Fira Mono', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
Expand Down
70 changes: 12 additions & 58 deletions website/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -287,14 +287,6 @@ babel-generator@^6.26.0:
source-map "^0.5.6"
trim-right "^1.0.1"

babel-helper-bindify-decorators@^6.24.1:
version "6.24.1"
resolved "https://registry.yarnpkg.com/babel-helper-bindify-decorators/-/babel-helper-bindify-decorators-6.24.1.tgz#14c19e5f142d7b47f19a52431e52b1ccbc40a330"
dependencies:
babel-runtime "^6.22.0"
babel-traverse "^6.24.1"
babel-types "^6.24.1"

babel-helper-builder-binary-assignment-operator-visitor@^6.24.1:
version "6.24.1"
resolved "https://registry.yarnpkg.com/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.24.1.tgz#cce4517ada356f4220bcae8a02c2b346f9a56664"
Expand Down Expand Up @@ -337,15 +329,6 @@ babel-helper-explode-assignable-expression@^6.24.1:
babel-traverse "^6.24.1"
babel-types "^6.24.1"

babel-helper-explode-class@^6.24.1:
version "6.24.1"
resolved "https://registry.yarnpkg.com/babel-helper-explode-class/-/babel-helper-explode-class-6.24.1.tgz#7dc2a3910dee007056e1e31d640ced3d54eaa9eb"
dependencies:
babel-helper-bindify-decorators "^6.24.1"
babel-runtime "^6.22.0"
babel-traverse "^6.24.1"
babel-types "^6.24.1"

babel-helper-function-name@^6.24.1:
version "6.24.1"
resolved "https://registry.yarnpkg.com/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz#d3475b8c03ed98242a25b48351ab18399d3580a9"
Expand Down Expand Up @@ -441,18 +424,6 @@ babel-plugin-syntax-async-generators@^6.5.0:
version "6.13.0"
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-generators/-/babel-plugin-syntax-async-generators-6.13.0.tgz#6bc963ebb16eccbae6b92b596eb7f35c342a8b9a"

babel-plugin-syntax-class-properties@^6.8.0:
version "6.13.0"
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de"

babel-plugin-syntax-decorators@^6.13.0:
version "6.13.0"
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz#312563b4dbde3cc806cee3e416cceeaddd11ac0b"

babel-plugin-syntax-dynamic-import@^6.18.0:
version "6.18.0"
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz#8d6a26229c83745a9982a441051572caa179b1da"

babel-plugin-syntax-exponentiation-operator@^6.8.0:
version "6.13.0"
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
Expand Down Expand Up @@ -489,25 +460,6 @@ babel-plugin-transform-async-to-generator@^6.22.0, babel-plugin-transform-async-
babel-plugin-syntax-async-functions "^6.8.0"
babel-runtime "^6.22.0"

babel-plugin-transform-class-properties@^6.24.1:
version "6.24.1"
resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz#6a79763ea61d33d36f37b611aa9def81a81b46ac"
dependencies:
babel-helper-function-name "^6.24.1"
babel-plugin-syntax-class-properties "^6.8.0"
babel-runtime "^6.22.0"
babel-template "^6.24.1"

babel-plugin-transform-decorators@^6.24.1:
version "6.24.1"
resolved "https://registry.yarnpkg.com/babel-plugin-transform-decorators/-/babel-plugin-transform-decorators-6.24.1.tgz#788013d8f8c6b5222bdf7b344390dfd77569e24d"
dependencies:
babel-helper-explode-class "^6.24.1"
babel-plugin-syntax-decorators "^6.13.0"
babel-runtime "^6.22.0"
babel-template "^6.24.1"
babel-types "^6.24.1"

babel-plugin-transform-es2015-arrow-functions@^6.22.0:
version "6.22.0"
resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
Expand Down Expand Up @@ -799,15 +751,6 @@ babel-preset-react@^6.24.1:
babel-plugin-transform-react-jsx-source "^6.22.0"
babel-preset-flow "^6.23.0"

babel-preset-stage-2@^6.24.1:
version "6.24.1"
resolved "https://registry.yarnpkg.com/babel-preset-stage-2/-/babel-preset-stage-2-6.24.1.tgz#d9e2960fb3d71187f0e64eec62bc07767219bdc1"
dependencies:
babel-plugin-syntax-dynamic-import "^6.18.0"
babel-plugin-transform-class-properties "^6.24.1"
babel-plugin-transform-decorators "^6.24.1"
babel-preset-stage-3 "^6.24.1"

babel-preset-stage-3@^6.24.1:
version "6.24.1"
resolved "https://registry.yarnpkg.com/babel-preset-stage-3/-/babel-preset-stage-3-6.24.1.tgz#836ada0a9e7a7fa37cb138fb9326f87934a48395"
Expand Down Expand Up @@ -1384,7 +1327,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
safe-buffer "^5.0.1"
sha.js "^2.4.8"

cross-spawn@^5.0.1:
cross-env@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.1.0.tgz#1f12d6b3777d5847dcf9cf39fbee3c6a76dd5058"
dependencies:
cross-spawn "^5.1.0"
is-windows "^1.0.0"

cross-spawn@^5.0.1, cross-spawn@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
dependencies:
Expand Down Expand Up @@ -2619,6 +2569,10 @@ is-utf8@^0.2.0:
version "0.2.1"
resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"

is-windows@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.1.tgz#310db70f742d259a16a369202b51af84233310d9"

isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
Expand Down
Loading

0 comments on commit 849e0ba

Please sign in to comment.