Skip to content

Commit 4b47806

Browse files
committed
Merge branch '0.9'
2 parents d7c3561 + 7ac60e7 commit 4b47806

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+8080
-11121
lines changed

.babelrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
"presets": [
33
"./config/babel/node-ssr"
44
]
5-
}
5+
}

.circleci/config.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
defaults: &defaults
22
docker:
3-
- image: circleci/node:8.11.2
3+
- image: circleci/node:10.14.2
44

55
version: 2
66
jobs:

.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
__coverage__
22
dist
3-
node_modules
3+
node_modules
4+
topcoder-react-utils-*.*.*.tgz

.nvmrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
v8.11.2
1+
v10.14.2

CHANGELOG.md

+19
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,24 @@
11
# Topcoder React Utils Changelog
22

3+
### v0.9.0
4+
- NodeJS updated to the latest LTS version (10.14.2);
5+
- NPM dependencies updated to the latest versions. In particular:
6+
- Babel updated from v6 to v7;
7+
- Misc related fixes.
8+
- Support of `npm link` for lib development;
9+
- `disabled` prop for `<Link>` and `<NavLink>`;
10+
- Default theme for `<Button>`;
11+
- `box-sizing`: `border-box` for all HTML elements by default.
12+
13+
### v0.8.2
14+
- Adds [**`Modal`**](docs/modal.md) component.
15+
16+
### v0.8.1
17+
- Adds `https` option to the [standard server factory](docs/server.md),
18+
which makes it easy to run the app on HTTPS instead of HTTP.
19+
- Adds `workbox` option to the Wepback configuration factory for app
20+
([**`config/webpack/app-base`**](docs/webpack-config.md#configuration-details)).
21+
322
### v0.7.7
423
- Adds [**`Modal`**](docs/modal.md) component.
524

README.md

+53-35
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ external ReactJS projects developed by the Topcoder community.
1717
- [Redux Templates](#redux-templates)
1818
- [Utilities](#utilities)
1919
- [Development](#development)
20+
- [Local Testing of Library Updates within a Host Project](#local-testing-of-library-updates-within-a-host-project)
21+
- [Library Releases to NPM](#library-releases-to-npm)
2022
- [License](#license)
2123

2224
## Installation
@@ -94,41 +96,57 @@ $ ./node_modules/.bin/topcoder-lib-setup
9496
Webpack bundling process.
9597

9698
## Development
97-
For convenient development you can link this package into your host package:
98-
1. Clone [`topcoder-react-utils`](https://github.com/topcoder-platform/topcoder-react-utils)
99-
to your machine, and checkout the branch you are going to work with;
100-
2. Inside `topcoder-react-utils` folder:
101-
- Install dependencies with `$ npm install`;
102-
- Locate `node_modules/extract-css-chunks-webpack-plugin/index.js` and
103-
inside the `isChunk(..)` function (line #358) add `return true;` statement,
104-
so that this function always returns *true*. This step is necessary at
105-
the moment, because the check `chunk instanceof Chunk` check inside this
106-
function does not work as expected when Webpack config is spread across
107-
multiple inter-linked packages.
108-
- Run the dev build `$ npm run build:dev`. It will compile the package, and
109-
also will watch for the file changes to automatically re-compile it as
110-
necessary.
111-
3. Inside the host package execute
112-
`$ npm link PATH_TO_TOPCODER_REACT_UTILS_FOLDER`. It will create a symlink
113-
from `HOST_PACKAGE/node_modules/topcoder-react-utils` to your local copy of
114-
the `topcoder-react-utils` package, so that any changes you do there become
115-
automatically available to the host package.
116-
117-
CI/CD is set up with CircleCI 2.0 for this repo. A commit to any branch, beside
118-
`master` will trigger testing of the commited code (it will run `$ npm test` and
119-
ensures that it does not fail). A commit to the protected `master` branch (only
120-
organization members and repo admins can commit to `master`) will trigger the
121-
testing, and, if successful, release of the updated package to the NPM registry.
122-
123-
For successful release to NPM you should bump the package version in the
124-
`package.json`. To do it conveniently you can use `$ npm version UPDATE_TYPE`
125-
command, where `UPDATE_TYPE` stays for one of `patch`/`minor`/`major` to bump up
126-
`2`, `1`, or `0` in a sample version number `v0.1.2`. This command will update
127-
`package.json` and `package-lock.json`, and create a new commit and tag in the
128-
checked-out Git branch. Mind that `patch` updates should not introduce
129-
any breaking changes into the codebase! Breaking changes should be done via
130-
`minor` or `major` update, and they should be documented in
131-
the [CHANGELOG](CHANGELOG.md).
99+
100+
Whenever you are to do any changes in the library, keep in mind the following:
101+
102+
- Different projects rely on this library, the tooling it provides should be as
103+
generic and flexible as possible. When you change existing components, do your
104+
best to keep backward compatibility of the updated components, any changes
105+
that demand updates in the projects relying on the library, must be
106+
documented in the [changelog](CHANGELOG.md).
107+
108+
- Rely on unit tests to verify your changes, and prevent regression. Update
109+
existing unit tests to keep up with your changes, and add new unit tests
110+
when necessary.
111+
112+
- For the final testing of your updates within a host project relying on this
113+
lib, see the next section.
114+
115+
- The library use semantic versioning. In case your changes demand any changes
116+
in the project relying on the library, you should release it as a minor
117+
library update (more severe comparing to patch update). Consider to use
118+
a new branch, called after the minor version, and to not merge your changes
119+
into the main **develop** / **master** branches until everybody is prepared
120+
for that.
121+
122+
### Local Testing of Library Updates within a Host Project
123+
124+
To locally test how your library updates work within a host project relying on
125+
the lib (without releasing them to NPM), use
126+
[`npm link`](https://docs.npmjs.com/cli/link.html) to link local copy of the lib
127+
into the host project, then run `npm run build:dev:watch` in the library root to
128+
automatically re-build the lib when you change it, and use the host project to
129+
see the final effect of changes you make.
130+
131+
### Library Releases to NPM
132+
133+
Continious Integration and Delivery (CI/CD) is set up for this repository with
134+
CircleCI 2.0. Commits to all branches trigger testing of the code with
135+
`$ npm test` (it runs linters and unit tests), and also build the library.
136+
CI/CD flow is interrupted in case of any problems.
137+
138+
To release updated library version to NPM do the following:
139+
140+
- Bump library version in `package.json` and `package-lock.json` by
141+
`$ npm version UPDATE_TYPE --no-git-tag` command, where `UPDATE_TYPE` should
142+
be one of `patch` / `minor` / `major` to update current version `x.y.z`
143+
to `x.y.(z+1)` / `x.(y+1).0` / `(x+1).0.0`. The `--no-git-tag` flag prevents
144+
automatic creation of the Git tag with the same name as the version.
145+
146+
- Tag the commit to be released with the git tag like `v0.1.2`, where `0.1.2` is
147+
the new version set in the previous step.
148+
149+
- Commit the tag to GitHub repository.
132150

133151
## License
134152
Topcoder React Utils is [MIT Licensed](LICENSE.md)

__tests__/.babelrc

+7-4
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,13 @@
33
"../config/babel/node-ssr"
44
],
55
"plugins": [
6-
["module-resolver", {
7-
"alias": {
8-
"topcoder-react-utils/dist": "./src"
6+
[
7+
"module-resolver",
8+
{
9+
"alias": {
10+
"topcoder-react-utils/dist": "./src"
11+
}
912
}
10-
}]
13+
]
1114
]
1215
}

__tests__/__snapshots__/index.js.snap

+1
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ Object {
8181
"animationEnd": [Function],
8282
"animationIteration": [Function],
8383
"animationStart": [Function],
84+
"auxClick": [Function],
8485
"beforeInput": [Function],
8586
"blur": [Function],
8687
"canPlay": [Function],

__tests__/server/__snapshots__/renderer.jsx.snap

+14-2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ exports[`Base rendering of HTML template 1`] = `
66
<head>
77
88
9+
910
<meta name=\\"theme-color\\" content=\\"#FFFFFF\\"/>
1011
<link rel=\\"manifest\\" href=\\"/test/public/path/manifest.json\\">
1112
<link
@@ -22,6 +23,7 @@ exports[`Base rendering of HTML template 1`] = `
2223
/>
2324
</head>
2425
<body>
26+
2527
<div id=\\"react-view\\"></div>
2628
<script id=\\"inj\\" type=\\"application/javascript\\">
2729
window.SPLITS = {}
@@ -46,6 +48,7 @@ exports[`Config overriding for injection 1`] = `
4648
<head>
4749
4850
51+
4952
<meta name=\\"theme-color\\" content=\\"#FFFFFF\\"/>
5053
<link rel=\\"manifest\\" href=\\"/test/public/path/manifest.json\\">
5154
<link
@@ -62,6 +65,7 @@ exports[`Config overriding for injection 1`] = `
6265
/>
6366
</head>
6467
<body>
68+
6569
<div id=\\"react-view\\"></div>
6670
<script id=\\"inj\\" type=\\"application/javascript\\">
6771
window.SPLITS = {}
@@ -84,6 +88,7 @@ exports[`Hemlet integration works 1`] = `
8488
"<!DOCTYPE html>
8589
<html lang=\\"en\\">
8690
<head>
91+
8792
<title data-react-helmet=\\"true\\">Test Page Title</title>
8893
<meta data-react-helmet=\\"true\\" property=\\"description\\" content=\\"Test Page Description\\"/>
8994
<meta name=\\"theme-color\\" content=\\"#FFFFFF\\"/>
@@ -102,6 +107,7 @@ exports[`Hemlet integration works 1`] = `
102107
/>
103108
</head>
104109
<body>
110+
105111
<div id=\\"react-view\\"><div data-reactroot=\\"\\"><p>Hello World!</p><p>Goodbye World!</p></div></div>
106112
<script id=\\"inj\\" type=\\"application/javascript\\">
107113
window.SPLITS = {}
@@ -124,6 +130,7 @@ exports[`Injection of additional JS scripts 1`] = `
124130
"<!DOCTYPE html>
125131
<html lang=\\"en\\">
126132
<head>
133+
<script>1-st script after opening <head></script><script>2-nd script after opening <head></script>
127134
128135
129136
<meta name=\\"theme-color\\" content=\\"#FFFFFF\\"/>
@@ -142,6 +149,7 @@ exports[`Injection of additional JS scripts 1`] = `
142149
/>
143150
</head>
144151
<body>
152+
<script>1-st script after opening <body></script><script>2-nd script after opening <body></script>
145153
<div id=\\"react-view\\"></div>
146154
<script id=\\"inj\\" type=\\"application/javascript\\">
147155
window.SPLITS = {}
@@ -151,7 +159,7 @@ exports[`Injection of additional JS scripts 1`] = `
151159
src=\\"/test/public/path/polyfills-1511941200000.js\\"
152160
type=\\"application/javascript\\"
153161
></script>
154-
<script>Dummy JS Sript</script><script>Another Dummy JS Script</script>
162+
<script>Dummy JS Sript</script><script>Another Dummy JS Script</script><script>Yet another Dummy JS Script</script>
155163
<script
156164
src=\\"/test/public/path/main-1511941200000.js\\"
157165
type=\\"application/javascript\\"
@@ -164,6 +172,7 @@ exports[`Server-side rendering (SSR); injection of CSS chunks & Redux state 1`]
164172
"<!DOCTYPE html>
165173
<html lang=\\"en\\">
166174
<head>
175+
167176
<title data-react-helmet=\\"true\\"></title>
168177
169178
<meta name=\\"theme-color\\" content=\\"#FFFFFF\\"/>
@@ -182,7 +191,8 @@ exports[`Server-side rendering (SSR); injection of CSS chunks & Redux state 1`]
182191
/>
183192
</head>
184193
<body>
185-
<div id=\\"react-view\\"><div data-reactroot=\\"\\">Hello Wold!</div></div>
194+
195+
<div id=\\"react-view\\"><div>Hello Wold!</div></div>
186196
<script id=\\"inj\\" type=\\"application/javascript\\">
187197
window.SPLITS = {}
188198
window.INJ=\\"MDEyMzQ1Njc4OTAxMjM0NTY3ODkwMTIzNDU2Nzg5MDGF1OkTQprU3+cINSXQietFqgqagolJ5j9NlQutv03F1TZonSyrmykHqLzmKxXS0DLPyBqGDNu0Yb+sEvg3s2Nv7ZYfzgAL5LpxryHNGWLiWYlCFgBW1NkdubXDUzuNfddcSwOHmA68IbAvuQnY81RZWKcs/M+w/CFPnw0PiVYASg==\\"
@@ -205,6 +215,7 @@ exports[`Setting of response HTTP status the server-side rendering 1`] = `
205215
<!DOCTYPE html>
206216
<html lang=\\"en\\">
207217
<head>
218+
208219
<title data-react-helmet=\\"true\\"></title>
209220
210221
<meta name=\\"theme-color\\" content=\\"#FFFFFF\\"/>
@@ -223,6 +234,7 @@ exports[`Setting of response HTTP status the server-side rendering 1`] = `
223234
/>
224235
</head>
225236
<body>
237+
226238
<div id=\\"react-view\\"><div data-reactroot=\\"\\">404 Error Test</div></div>
227239
<script id=\\"inj\\" type=\\"application/javascript\\">
228240
window.SPLITS = {}

__tests__/server/renderer.jsx

+17-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import _ from 'lodash';
2-
import factory from 'server/renderer';
2+
import factory, { SCRIPT_LOCATIONS } from 'server/renderer';
33
import fs from 'fs';
44
import React from 'react';
55

@@ -142,7 +142,22 @@ test('Injection of additional JS scripts',
142142
beforeRender: async () => ({
143143
extraScripts: [
144144
'<script>Dummy JS Sript</script>',
145-
'<script>Another Dummy JS Script</script>',
145+
'<script>Another Dummy JS Script</script>', {
146+
code: '<script>Yet another Dummy JS Script</script>',
147+
location: SCRIPT_LOCATIONS.DEFAULT,
148+
}, {
149+
code: '<script>1-st script after opening <head></script>',
150+
location: SCRIPT_LOCATIONS.HEAD_OPEN,
151+
}, {
152+
code: '<script>1-st script after opening <body></script>',
153+
location: SCRIPT_LOCATIONS.BODY_OPEN,
154+
}, {
155+
code: '<script>2-nd script after opening <body></script>',
156+
location: SCRIPT_LOCATIONS.BODY_OPEN,
157+
}, {
158+
code: '<script>2-nd script after opening <head></script>',
159+
location: SCRIPT_LOCATIONS.HEAD_OPEN,
160+
},
146161
],
147162
}),
148163
}));

__tests__/shared/components/Modal.jsx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import Modal, { BaseModal } from 'components/Modal';
2+
import React from 'react';
3+
import ReactDom from 'react-dom';
4+
import {
5+
findInDomByClass,
6+
renderDom,
7+
simulate,
8+
snapshot,
9+
} from 'utils/jest';
10+
11+
beforeAll(() => {
12+
/* Modal uses ReactJS portals to ensure proper rendering. react-test-renderer,
13+
* used by utils/jest under the hood, does not support it properly, thus this
14+
* simple mock for the createPortal(..) function. */
15+
ReactDom.createPortal = jest.fn(element => (
16+
<div className="MOCK_PORTAL">
17+
{element}
18+
</div>
19+
));
20+
});
21+
22+
test('Snapshot match', () => {
23+
snapshot(<Modal>CONTENT</Modal>);
24+
});
25+
26+
test('onCancel', () => {
27+
const onCancel = jest.fn();
28+
const dom = renderDom((
29+
<BaseModal
30+
onCancel={onCancel}
31+
theme={{ overlay: 'overlay' }}
32+
/>
33+
));
34+
const overlay = findInDomByClass(dom, 'overlay');
35+
simulate.click(overlay);
36+
expect(onCancel).toHaveBeenCalled();
37+
});
38+
39+
test('onWheel', () => {
40+
const dom = renderDom((
41+
<BaseModal
42+
theme={{ container: 'container' }}
43+
/>
44+
));
45+
const container = findInDomByClass(dom, 'container');
46+
const stopPropagation = jest.fn();
47+
simulate.wheel(container, { stopPropagation });
48+
expect(stopPropagation).toHaveBeenCalled();
49+
});

0 commit comments

Comments
 (0)