Merge pull request #20 from XbyOrange/v1.1.0

V1.1.0

Author: javierbrea

Diff for: .travis.yml

@@ -20,7 +20,7 @@ script:
   - npm run lint
   - npm run test-ci
   - npm run build
-#  - npm run coveralls
+  - npm run coveralls
   - 'if [ "$TRAVIS_PULL_REQUEST" = "false" ]; then sonar-scanner; fi'
 
 deploy:

Diff for: CHANGELOG.md

@@ -11,9 +11,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Removed
 ### BREAKING CHANGES
 
+## [1.1.0] - 2019-08-21
+### Added
+- Add server side data behavior tests and documentation.
+
 ## [1.1.0-beta.2] - 2019-08-19
 ### Added
-- Add helper for registering sources that should be loaded during server side data rendering.
+- Add method for registering sources that should be loaded during server side data rendering.
 
 ### Fixed
 - Fix server side data connect. Load data in client when no server data is available

Diff for: README.md

@@ -177,6 +177,71 @@ export const ConnectedModule = connect(
 
 > This parser function should not be used as a replacement to Mercury Selectors. As a good practice, the preference is to use Selectors if possible instead of this function.
 
+## Prefetching data on server side rendering
+
+Methods for prefetching data on server side rendering are available too. When data is prefetched in server side, the connect function will pass the `value` property calculated on server side to the components directly. It will not modify the `loading` property until the first load on client side is finished (At first client-side load, the resource will not be considered as `loading` to maintain the server-side value in the component until it finish loading).
+
+### Server side data methods and components
+
+* `addServerSideData(source)`
+	* Arguments
+		* source - `<Object> or <Array> of <Objects>` Mercury source or sources that should be read when `readServerSideData` method is executed. Can be Mercury origins or selectors of any type, queried or not.
+* `readServerSideData([source])`
+	* Arguments
+		* source - `<Object> or <Array> of <Objects>` Mercury source or sources that should be read when `readServerSideData` method is executed. Can be Mercury origins or selectors of any type, queried or not.
+	* Returns
+		* `<Object>` This method is asynchronous, and returns an object containing all server side data ready to be set on the `<ServerSideData>` context component.
+* `<ServerSideData data={data} clientSide={true}><App/></ServerSideData>` Component that sets the result of the `readServerSideData` method in a context to make it available from all mercury connected children components.
+	* Props
+		* data - `<Object>` Object containing the result of the `readServerSideData` method.
+		* clientSide - `<Boolean>` If false, the connect method will not dispatch automatically the read method of the sources marked as "server-side", so, for example, api requests will not be repeated on client side, and data retrieved in server side will be always passed to connected components.
+
+### Example of server side prefecth implementation in a Next project:
+
+In the next example, the data of the "myDataSource" mercury source will be fetched on server side and request will not be repeated on client side. The component will be rendered directly with server side data, and no loading state will be set:
+
+```jsx
+// src/home.js
+import { addServerSideData, connect } from "@xbyorange/react-mercury";
+import { myDataSource } from "src/data";
+
+addServerSideData(myDataSource); // source is marked to be read when readServerSideData method is executed.
+
+export const HomeComponent = ({data}) => {
+  if(data.loading) {
+    return <div>Loading...</div>
+  }
+  return <div>{data.value}</div>
+};
+
+export const mapDataSourceToProps = () => ({
+  data: myDataSource.read
+});
+
+export const Home = connect(mapDataSourceToProps)(HomeComponent)
+
+```
+
+```jsx
+// pages/index.js
+import { readServerSideData, ServerSideData } from "@xbyorange/react-mercury";
+import { Home } from "src/home";
+
+const Page = ({ serverSideData }) => (
+  <ServerSideData data={serverSideData} clientSide={false} >
+    <Home/>
+  </ServerSideData>
+);
+
+Page.getInitialProps = async () => {
+  return {
+    serverSideData: await readServerSideData()
+  }
+}
+
+export default Page;
+```
+
 ## Demo
 
 To run a real implementation example in a React app, you can clone the project and execute the provided demo:

Diff for: jest.config.js

@@ -17,10 +17,10 @@ module.exports = {
   // An object that configures minimum threshold enforcement for coverage results
   coverageThreshold: {
     global: {
-      branches: 75,
-      functions: 75,
-      lines: 80,
-      statements: 80
+      branches: 100,
+      functions: 100,
+      lines: 100,
+      statements: 100
     }
   },
 

Diff for: package-lock.json

@@ -32,7 +32,8 @@
     "coveralls": "cat ./coverage/lcov.info | coveralls"
   },
   "peerDependencies": {
-    "react": "^16.7.0"
+    "react": "^16.7.0",
+    "@xbyorange/mercury": "^1.1.0"
   },
   "dependencies": {
     "hoist-non-react-statics": "^3.2.1",
@@ -42,7 +43,8 @@
     "@babel/core": "^7.4.5",
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
-    "@xbyorange/mercury-api": "1.0.1",
+    "@xbyorange/mercury-api": "1.2.0",
+    "@xbyorange/mercury": "^1.1.0",
     "axios": "^0.19.0",
     "axios-retry": "^3.1.2",
     "babel-core": "^7.0.0-bridge.0",

Diff for: package.json

@@ -22,15 +22,15 @@ const resultsToObject = results => {
 };
 
 export const addServerSideData = sources => {
-  const sourcesToAdd = isArray(sources) ? sources : [sources];
-  sourcesToAdd.forEach(source => {
-    serverSideData.add(source);
-  });
+  if (sources) {
+    const sourcesToAdd = isArray(sources) ? sources : [sources];
+    sourcesToAdd.forEach(source => {
+      serverSideData.add(source);
+    });
+  }
 };
 
-export const readServerSideData = (...args) => {
-  args.forEach(source => {
-    addServerSideData(source);
-  });
+export const readServerSideData = sources => {
+  addServerSideData(sources);
   return Promise.all(Array.from(serverSideData).map(getSourceData)).then(resultsToObject);
 };

Diff for: src/readServerSideData.js

@@ -3,8 +3,10 @@ import Enzyme, { shallow, mount } from "enzyme";
 import Adapter from "enzyme-adapter-react-16";
 import PropTypes from "prop-types";
 import AxiosMock from "./Axios.mock.js";
+import { Selector } from "@xbyorange/mercury";
 import { Api } from "@xbyorange/mercury-api";
-import { connect } from "../src/index";
+import sinon from "sinon";
+import { connect, readServerSideData, addServerSideData, ServerSideData } from "../src/index";
 
 import jsdom from "jsdom";
 const { JSDOM } = jsdom;
@@ -81,19 +83,35 @@ describe("react connect plugin", () => {
       author: "Hemingway"
     }
   ];
+  let sandbox;
   let books;
+  let booksServerSide;
   let axios;
 
   beforeAll(() => {
+    sandbox = sinon.createSandbox();
     axios = new AxiosMock();
     books = new Api("/books", {
       defaultValue: []
     });
+    booksServerSide = new Api("/books", {
+      defaultValue: []
+    });
+
     books.client = axios._stub;
+    booksServerSide.client = axios._stub;
+    sandbox.spy(booksServerSide, "read");
+
+    addServerSideData(booksServerSide);
   });
 
   afterAll(() => {
     axios.restore();
+    sandbox.restore();
+  });
+
+  afterEach(() => {
+    sandbox.reset();
   });
 
   beforeEach(() => {
@@ -134,6 +152,178 @@ describe("react connect plugin", () => {
     wrapper.unmount();
   });
 
+  it("if source is not server side, it should pass source properties to component and update value when finish loading even when clientSide is disabled in context", async () => {
+    expect.assertions(2);
+    const mapDataSourceToProps = () => ({
+      books: books.read
+    });
+    const ConnectedBooks = connect(mapDataSourceToProps)(BooksList);
+
+    const wrapper = mount(
+      <ServerSideData data={{}} clientSide={false}>
+        <ConnectedBooks />
+      </ServerSideData>
+    );
+    books.clean();
+    wrapper.update();
+    expect(wrapper.find(".loading").length).toEqual(1);
+    await books.read();
+    wrapper.update();
+    expect(wrapper.find("li.book").length).toEqual(2);
+    wrapper.unmount();
+  });
+
+  it("should render serverSide properties, update value when finish loading, and do not update loading property", async () => {
+    expect.assertions(6);
+    const mapDataSourceToProps = () => ({
+      books: booksServerSide.read
+    });
+    const ConnectedBooks = connect(mapDataSourceToProps)(BooksList);
+
+    const serverSideData = await readServerSideData();
+
+    const wrapper = mount(
+      <ServerSideData data={serverSideData} clientSide={true}>
+        <ConnectedBooks />
+      </ServerSideData>
+    );
+
+    expect(wrapper.find(".loading").length).toEqual(0);
+    expect(wrapper.find("li.book").length).toEqual(2);
+
+    booksServerSide.read();
+    wrapper.update();
+    expect(wrapper.find(".loading").length).toEqual(0);
+    expect(wrapper.find("li.book").length).toEqual(2);
+
+    await booksServerSide.read();
+    wrapper.update();
+    expect(wrapper.find(".loading").length).toEqual(0);
+    expect(wrapper.find("li.book").length).toEqual(2);
+    wrapper.unmount();
+  });
+
+  it("should render serverSide properties, update value when finish loading, and do not update loading property when passing a selector", async () => {
+    expect.assertions(6);
+    const booksServerSideSelector = new Selector(booksServerSide, result => result, []);
+    addServerSideData(booksServerSideSelector);
+    const mapDataSourceToProps = () => ({
+      books: booksServerSideSelector.read
+    });
+    const ConnectedBooks = connect(mapDataSourceToProps)(BooksList);
+
+    const serverSideData = await readServerSideData();
+
+    const wrapper = mount(
+      <ServerSideData data={serverSideData}>
+        <ConnectedBooks />
+      </ServerSideData>
+    );
+
+    expect(wrapper.find(".loading").length).toEqual(0);
+    expect(wrapper.find("li.book").length).toEqual(2);
+
+    booksServerSideSelector.read();
+    wrapper.update();
+    expect(wrapper.find(".loading").length).toEqual(0);
+    expect(wrapper.find("li.book").length).toEqual(2);
+
+    await booksServerSideSelector.read();
+    wrapper.update();
+    expect(wrapper.find(".loading").length).toEqual(0);
+    expect(wrapper.find("li.book").length).toEqual(2);
+    wrapper.unmount();
+  });
+
+  it("serverSideData behavior should work when adding many sources to readServerSideData", async () => {
+    expect.assertions(6);
+    const booksServerSideSelector = new Selector(booksServerSide, result => result, []);
+    addServerSideData([booksServerSideSelector, booksServerSide]);
+    const mapDataSourceToProps = () => ({
+      books: booksServerSideSelector.read
+    });
+    const ConnectedBooks = connect(mapDataSourceToProps)(BooksList);
+
+    const serverSideData = await readServerSideData(booksServerSideSelector);
+
+    const wrapper = mount(
+      <ServerSideData data={serverSideData} clientSide={true}>
+        <ConnectedBooks />
+      </ServerSideData>
+    );
+
+    expect(wrapper.find(".loading").length).toEqual(0);
+    expect(wrapper.find("li.book").length).toEqual(2);
+
+    booksServerSideSelector.read();
+    wrapper.update();
+    expect(wrapper.find(".loading").length).toEqual(0);
+    expect(wrapper.find("li.book").length).toEqual(2);
+
+    await booksServerSideSelector.read();
+    wrapper.update();
+    expect(wrapper.find(".loading").length).toEqual(0);
+    expect(wrapper.find("li.book").length).toEqual(2);
+    wrapper.unmount();
+  });
+
+  it("serverSideData behavior should work with queried selectors and getters", async () => {
+    expect.assertions(6);
+    const booksServerSideSelector = new Selector(booksServerSide, result => result, []);
+    const queriedBooksServerSideSelector = booksServerSideSelector.query("foo");
+    addServerSideData(queriedBooksServerSideSelector);
+    const mapDataSourceToProps = () => ({
+      booksValue: queriedBooksServerSideSelector.read.getters.value,
+      booksLoading: queriedBooksServerSideSelector.read.getters.loading,
+      booksError: queriedBooksServerSideSelector.read.getters.error
+    });
+    const ConnectedBooks = connect(mapDataSourceToProps)(BooksList);
+
+    const serverSideData = await readServerSideData();
+
+    const wrapper = mount(
+      <ServerSideData data={serverSideData} clientSide={true}>
+        <ConnectedBooks />
+      </ServerSideData>
+    );
+
+    expect(wrapper.find(".loading").length).toEqual(0);
+    expect(wrapper.find("li.book").length).toEqual(2);
+
+    queriedBooksServerSideSelector.read();
+    wrapper.update();
+    expect(wrapper.find(".loading").length).toEqual(0);
+    expect(wrapper.find("li.book").length).toEqual(2);
+
+    await queriedBooksServerSideSelector.read();
+    wrapper.update();
+    expect(wrapper.find(".loading").length).toEqual(0);
+    expect(wrapper.find("li.book").length).toEqual(2);
+    wrapper.unmount();
+  });
+
+  it("should render serverSide properties and do not dispath read if clientSide is disabled", async () => {
+    expect.assertions(3);
+    const mapDataSourceToProps = () => ({
+      books: booksServerSide.read
+    });
+    const ConnectedBooks = connect(mapDataSourceToProps)(BooksList);
+
+    const serverSideData = await readServerSideData();
+
+    const wrapper = mount(
+      <ServerSideData data={serverSideData} clientSide={false}>
+        <ConnectedBooks />
+      </ServerSideData>
+    );
+
+    expect(wrapper.find(".loading").length).toEqual(0);
+    expect(wrapper.find("li.book").length).toEqual(2);
+    expect(booksServerSide.read.callCount).toEqual(1);
+
+    wrapper.unmount();
+  });
+
   it("should be able to pass string properties to component", async () => {
     expect.assertions(2);
     const mapDataSourceToProps = () => ({