Skip to content

Commit 39f38ac

Browse files
jeffchewjeffchew
authored
feat(deploy-preview): introduce deploy previews (#447)
* feat(deploy-preview): introduce deploy previews * chore(deploy-preview): switch test script to deploy preview folder * chore(gitignore): update to gitignore * chore(node): remove yarn build from prepare (debug) * fix(script): fix to uppercase bug in Linux * fix(script): fix to uppercase bug in Linux * chore(script): remove console log * feat(percy): add percy functionality and cypress e2e testing * chore(gitignore): add tmp directory for cypress cache
1 parent 11111c9 commit 39f38ac

File tree

17 files changed

+4556
-824
lines changed

17 files changed

+4556
-824
lines changed

‎.gitignore

+5-1
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,8 @@ zip
88
**/.DS_Store
99
.vercel
1010
.parcel-cache
11-
dist
11+
.idea
12+
dist
13+
/deploy-preview
14+
/tmp
15+
.env

‎.huskyrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"hooks": {
3+
"commit-msg": "commitlint -e $HUSKY_GIT_PARAMS",
4+
"pre-commit": "lint-staged"
5+
}
6+
}

‎cypress/.percy.json

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"version": 2,
3+
"snapshot": {
4+
"widths": [
5+
375,
6+
1280
7+
]
8+
}
9+
}

‎cypress/cypress.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"baseUrl": "http://localhost:8080",
3+
"browser": "chrome",
4+
"headless": true,
5+
"fixturesFolder": false,
6+
"video": false,
7+
"screenshotsFolder": "cypress/screenshots",
8+
"videosFolder": "cypress/videos",
9+
"integrationFolder": "cypress/integration",
10+
"supportFile": "cypress/support/index.js",
11+
"pluginsFile": "cypress/plugins/index.js",
12+
"testFiles": "**/*.e2e.js",
13+
"pageLoadTimeout": 80000,
14+
"defaultCommandTimeout": 80000,
15+
"retries": {
16+
"runMode": 2,
17+
"openMode": 0
18+
},
19+
"numTestsKeptInMemory": 0
20+
}

‎cypress/integration/test/test.e2e.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/**
2+
* Copyright IBM Corp. 2021
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
'use strict';
9+
10+
describe('Plex test page', () => {
11+
it('should load the basic test page', () => {
12+
cy.visit('/index.html', { timeout: 10000 });
13+
14+
cy.wait(5000);
15+
16+
// Take a snapshot for visual diffing
17+
cy.percySnapshot('test | basic');
18+
});
19+
});

‎cypress/plugins/index.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* Copyright IBM Corp. 2021
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
// eslint-disable-next-line no-unused-vars
9+
module.exports = (on, config) => {
10+
// `on` is used to hook into various events Cypress emits
11+
// `config` is the resolved Cypress config
12+
};

‎cypress/support/commands.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/**
2+
* Copyright IBM Corp. 2021
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
// ***********************************************
9+
// This example commands.js shows you how to
10+
// create various custom commands and overwrite
11+
// existing commands.
12+
//
13+
// For more comprehensive examples of custom
14+
// commands please read more here:
15+
// https://on.cypress.io/custom-commands
16+
// ***********************************************
17+
//
18+
//
19+
// -- This is a parent command --
20+
// Cypress.Commands.add('login', (email, password) => { ... })
21+
//
22+
//
23+
// -- This is a child command --
24+
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
25+
//
26+
//
27+
// -- This is a dual command --
28+
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
29+
//
30+
//
31+
// -- This will overwrite an existing command --
32+
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

‎cypress/support/index.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* Copyright IBM Corp. 2021
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import '@percy/cypress';
9+
import './commands';

‎gulp-tasks/build.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* @license
3+
*
4+
* Copyright IBM Corp. 2021
5+
*
6+
* This source code is licensed under the Apache-2.0 license found in the
7+
* LICENSE file in the root directory of this source tree.
8+
*/
9+
10+
'use strict';
11+
12+
require('./build/deploy-preview');

‎gulp-tasks/build/deploy-preview.js

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/**
2+
* @license
3+
*
4+
* Copyright IBM Corp. 2021
5+
*
6+
* This source code is licensed under the Apache-2.0 license found in the
7+
* LICENSE file in the root directory of this source tree.
8+
*/
9+
10+
'use strict';
11+
12+
const gulp = require('gulp');
13+
const config = require('../config');
14+
15+
/**
16+
* Copies test file to the deploy-preview folder
17+
*
18+
* @returns {*} gulp stream
19+
*/
20+
function _copyTest() {
21+
return gulp
22+
.src([config.testSrc])
23+
.pipe(gulp.dest(config.deployPreviewPath));
24+
}
25+
26+
/**
27+
* Copies dist files to the deploy-preview folder. Must run `gulp build` first!
28+
*
29+
* @returns {*} gulp stream
30+
*/
31+
function _copyCss() {
32+
return gulp
33+
.src([`${config.cssSrc}/**/*`])
34+
.pipe(gulp.dest(config.deployPreviewCSSPath));
35+
}
36+
37+
/**
38+
* Copies font files to the dist folder
39+
*
40+
* @returns {*} gulp stream
41+
*/
42+
function _copyFonts() {
43+
return gulp
44+
.src(['IBM-Plex-*/fonts/**/*.*'])
45+
.pipe(gulp.dest(config.deployPreviewFontsPath));
46+
}
47+
48+
gulp.task('build:deploy-preview:test', _copyTest);
49+
gulp.task('build:deploy-preview:css', _copyCss);
50+
gulp.task('build:deploy-preview:fonts', _copyFonts);
51+
gulp.task('build:deploy-preview', gulp.parallel('build:deploy-preview:test','build:deploy-preview:css','build:deploy-preview:fonts'));

‎gulp-tasks/clean.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/**
2+
* @license
3+
*
4+
* Copyright IBM Corp. 2020, 2021
5+
*
6+
* This source code is licensed under the Apache-2.0 license found in the
7+
* LICENSE file in the root directory of this source tree.
8+
*/
9+
10+
'use strict';
11+
12+
const del = require('del');
13+
const gulp = require('gulp');
14+
const config = require('./config');
15+
16+
/**
17+
* Clean task
18+
*
19+
* @returns {Promise} Promise after all folders are cleaned
20+
* @private
21+
*/
22+
function _clean() {
23+
return Promise.all([
24+
del(config.deployPreviewPath),
25+
]);
26+
}
27+
28+
// Clean task
29+
gulp.task('clean', _clean);

‎gulp-tasks/config.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/**
2+
* Copyright IBM Corp. 2020
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
'use strict';
9+
10+
module.exports = {
11+
cssSrc: 'css',
12+
testSrc: 'test/*.*',
13+
deployPreviewPath: 'deploy-preview',
14+
deployPreviewCSSPath: 'deploy-preview/assets/css',
15+
deployPreviewFontsPath: 'deploy-preview/assets',
16+
};

‎gulpfile.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/**
2+
* @license
3+
*
4+
* Copyright IBM Corp. 2020, 2021
5+
*
6+
* This source code is licensed under the Apache-2.0 license found in the
7+
* LICENSE file in the root directory of this source tree.
8+
*/
9+
10+
'use strict';
11+
12+
require('./gulp-tasks/build');
13+
require('./gulp-tasks/clean');
14+
15+
process.once('SIGINT', () => {
16+
process.exit(0);
17+
});

‎package.json

+19-7
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,22 @@
2323
"!IBM-Plex-Sans-JP/fonts/hinted/**/woff"
2424
],
2525
"scripts": {
26-
"clean": "rimraf css scss",
27-
"build": "yarn run clean && yarn run build:scss && yarn run build:css",
26+
"clean": "rimraf css scss deploy-preview",
27+
"build": "yarn clean && yarn build:scss && yarn build:css && yarn build:deploy-preview",
2828
"build:zip": "yarn build && node ./scripts/prepare-zip.js && sh scripts/zip.sh",
2929
"build:css": "node ./scripts/compile-css.js",
3030
"build:scss": "node ./scripts/generate-scss.js",
31-
"test": "parcel serve ./test/index.html",
31+
"build:deploy-preview": "gulp build:deploy-preview",
32+
"test": "parcel serve ./deploy-preview/index.html",
3233
"precommit": "lint-staged",
3334
"prettier": "prettier --write \"**/*.{scss}\"",
34-
"prepare": "yarn build"
35+
"prepare": "husky install && yarn build",
36+
"test:e2e:local": "start-server-and-test 'http-server -c-1 deploy-preview --silent' 8080 'percy exec --config cypress/.percy.json -- cypress run --config-file cypress/cypress.json'",
37+
"test:e2e:local:no-percy": "start-server-and-test 'http-server -c-1 deploy-preview --silent' 8080 'cypress run --config-file cypress/cypress.json'"
3538
},
3639
"devDependencies": {
40+
"@commitlint/cli": "^17.0.1",
41+
"@commitlint/config-conventional": "^17.0.0",
3742
"@parcel/optimizer-cssnano": "2.0.0-nightly.611",
3843
"@parcel/optimizer-htmlnano": "2.0.0-nightly.611",
3944
"@parcel/packager-css": "2.0.0-nightly.611",
@@ -42,15 +47,22 @@
4247
"@parcel/transformer-html": "2.0.0-nightly.611",
4348
"@parcel/transformer-postcss": "2.0.0-nightly.611",
4449
"@parcel/transformer-posthtml": "2.0.0-nightly.611",
50+
"@percy/cli": "^1.2.1",
51+
"@percy/cypress": "^3.1.1",
4552
"archiver": "^3.0.0",
53+
"cypress": "^9.7.0",
54+
"del": "^6.1.1",
4655
"fs-extra": "^7.0.0",
47-
"husky": "^0.14.3",
48-
"lint-staged": "^4.3.0",
56+
"gulp": "^4.0.2",
57+
"http-server": "^14.1.0",
58+
"husky": "^7.0.4",
59+
"lint-staged": "^12.4.2",
4960
"parcel": "^2.0.0-beta.1",
5061
"postcss": "^8.2.1",
5162
"prettier": "^1.7.4",
5263
"rimraf": "^2.6.2",
53-
"sass": "^1.51.0"
64+
"sass": "^1.51.0",
65+
"start-server-and-test": "^1.14.0"
5466
},
5567
"prettier": {
5668
"printWidth": 80,

‎scripts/generate-scss.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ const filesToWrite = families
113113

114114
const fontFileRoot = family.preferredName || family.type;
115115

116-
const filename = `${OUTPUT_DIRECTORY}/${fontFileRoot
116+
const filename = `${OUTPUT_DIRECTORY}/${fontFileRoot.toLowerCase()
117117
.split(' ')
118118
.join('-')}/${family.ownStyleSheet ? 'index.scss' : '_index.scss'}`;
119119

0 commit comments

Comments
 (0)