react events aggregator updated to version 1.4.1 of the SPFx (#455)

Readme updated

samples/react-events-aggregator/.yo-rc.json

@@ -1,6 +1,6 @@
 {
   "@microsoft/generator-sharepoint": {
-    "version": "1.1.1",
+    "version": "1.4.1",
     "libraryName": "react-events-aggregator",
     "libraryId": "0443cb2b-2068-4b30-9893-ef6eeabe2a01",
     "environment": "spo"

samples/react-events-aggregator/README.md

@@ -10,7 +10,7 @@ This sample shows how we can use the SPFx Event Aggregator to communicate betwee
 
 
 ## Used SharePoint Framework Version 
-![drop](https://img.shields.io/badge/drop-1.1-green.svg)
+![drop](https://img.shields.io/badge/drop-1.4.1-green.svg)
 
 ## Applies to
 
@@ -33,6 +33,7 @@ react-events-aggregator | Miguel Rabaca ( [Spanish Point](http://www.spanishpoin
 Version|Date|Comments
 -------|----|--------
 0.0.1|August 22, 2017 | Initial commit
+0.0.2|March 20, 2018 | Updated to SPFx v1.4.1
 
 ## Disclaimer
 **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**

samples/react-events-aggregator/config/config.json

@@ -1,19 +1,27 @@
 {
-  "entries": [
+  "$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "version": "2.0",
+  "bundles": {
+    "broadcaster": {
+      "components": [
         {
-      "entry": "./lib/webparts/broadcaster/BroadcasterWebPart.js",
-      "manifest": "./src/webparts/broadcaster/BroadcasterWebPart.manifest.json",
-      "outputPath": "./dist/broadcaster.bundle.js"
-    },
-    {
-      "entry": "./lib/webparts/receiver/ReceiverWebPart.js",
-      "manifest": "./src/webparts/receiver/ReceiverWebPart.manifest.json",
-      "outputPath": "./dist/receiver.bundle.js"
+          "entrypoint": "./lib/webparts/broadcaster/BroadcasterWebPart.js",
+          "manifest": "./src/webparts/broadcaster/BroadcasterWebPart.manifest.json"
         }
-  ],
+      ]
+    },
+    "receiver": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/receiver/ReceiverWebPart.js",
+          "manifest": "./src/webparts/receiver/ReceiverWebPart.manifest.json"
+        }
+      ]
+    }
+  },
   "externals": {},
   "localizedResources": {
-    "broadcasterStrings": "webparts/broadcaster/loc/{locale}.js",
-    "receiverStrings": "webparts/receiver/loc/{locale}.js"
+    "broadcasterStrings": "lib/webparts/broadcaster/loc/{locale}.js",
+    "receiverStrings": "lib/webparts/receiver/loc/{locale}.js"
   }
 }

samples/react-events-aggregator/config/copy-assets.json

@@ -1,3 +1,4 @@
 {
+  "$schema": "https://dev.office.com/json-schemas/spfx-build/copy-assets.schema.json",
   "deployCdnPath": "temp/deploy"
 }

samples/react-events-aggregator/config/deploy-azure-storage.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "https://dev.office.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
   "workingDir": "./temp/deploy/",
   "account": "<!-- STORAGE ACCOUNT NAME -->",
   "container": "react-events-aggregator",

samples/react-events-aggregator/config/package-solution.json

@@ -1,8 +1,10 @@
 {
+  "$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json",
   "solution": {
     "name": "react-events-aggregator-client-side-solution",
     "id": "0443cb2b-2068-4b30-9893-ef6eeabe2a01",
-    "version": "1.0.0.0"
+    "version": "1.0.0.0",
+    "includeClientSideAssets": true
   },
   "paths": {
     "zippedPackage": "solution/react-events-aggregator.sppkg"

samples/react-events-aggregator/config/serve.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "https://dev.office.com/json-schemas/core-build/serve.schema.json",
   "port": 4321,
   "initialPage": "https://localhost:5432/workbench",
   "https": true,

samples/react-events-aggregator/config/tslint.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "https://dev.office.com/json-schemas/core-build/tslint.schema.json",
   // Display errors as warnings
   "displayAsWarning": true,
   // The TSLint task may have been configured with several custom lint rules
@@ -29,7 +30,6 @@
       "no-switch-case-fall-through": true,
       "no-unnecessary-semicolons": true,
       "no-unused-expression": true,
-      "no-unused-imports": true,
       "no-use-before-declare": true,
       "no-with-statement": true,
       "semicolon": true,

samples/react-events-aggregator/config/write-manifests.json

@@ -1,3 +1,4 @@
 {
+  "$schema": "https://dev.office.com/json-schemas/spfx-build/write-manifests.schema.json",
   "cdnBasePath": "<!-- PATH TO CDN -->"
 }

samples/react-events-aggregator/gulpfile.js

@@ -2,5 +2,6 @@
 
 const gulp = require('gulp');
 const build = require('@microsoft/sp-build-web');
+build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
 
 build.initialize(gulp);

samples/react-events-aggregator/package.json

@@ -1,31 +1,30 @@
 {
   "name": "react-events-aggregator",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": true,
   "engines": {
     "node": ">=0.10.0"
   },
   "dependencies": {
-    "@microsoft/sp-core-library": "~1.1.0",
-    "@microsoft/sp-webpart-base": "~1.1.1",
-    "@types/webpack-env": ">=1.12.1 <1.14.0",
-    "react": "15.4.2",
-    "react-dom": "15.4.2",
-    "@types/react": "0.14.46",
-    "@types/react-dom": "0.14.18",
-    "@types/react-addons-shallow-compare": "0.14.17",
-    "@types/react-addons-update": "0.14.14",
-    "@types/react-addons-test-utils": "0.14.15"
+    "react": "15.6.2",
+    "react-dom": "15.6.2",
+    "@types/react": "15.6.6",
+    "@types/react-dom": "15.5.6",
+    "@microsoft/sp-core-library": "~1.4.1",
+    "@microsoft/sp-webpart-base": "~1.4.1",
+    "@microsoft/sp-lodash-subset": "~1.4.1",
+    "@microsoft/sp-office-ui-fabric-core": "~1.4.1",
+    "@types/webpack-env": ">=1.12.1 <1.14.0"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "~1.1.0",
-    "@microsoft/sp-module-interfaces": "~1.1.0",
-    "@microsoft/sp-webpart-workbench": "~1.1.0",
+    "@microsoft/sp-build-web": "~1.4.1",
+    "@microsoft/sp-module-interfaces": "~1.4.1",
+    "@microsoft/sp-webpart-workbench": "~1.4.1",
     "gulp": "~3.9.1",
     "@types/chai": ">=3.4.34 <3.6.0",
     "@types/mocha": ">=2.2.33 <2.6.0",
+    "ajv": "~5.2.2",
     "@types/sinon": "^2.3.3",
-    "chai-enzyme": "^0.8.0",
     "enzyme": "^2.9.1",
     "react-addons-test-utils": "^15.6.0"
   },

samples/react-events-aggregator/src/webparts/broadcaster/tests/Broadcaster.test.tsx

@@ -2,34 +2,40 @@
 /// <reference types="sinon" />
 
 import * as React from 'react';
-import { expect } from 'chai';
+import { assert } from 'chai';
 import { mount, ReactWrapper } from 'enzyme';
 import { IEventAggregator, IEvent } from "@microsoft/sp-webpart-base/lib";
 import EventAggregator from "@microsoft/sp-webpart-base/lib/core/events/EventAggregator";
 import Broadcaster from "../components/Broadcaster";
 import { EventData } from "../../../sharedLibs/EventData";
 
-declare const sinon: any;
+declare const sinon: sinon.SinonStatic;
 
 describe('BroadcasterWebPart', () => {
 
-  let raiseEventSpy: any;
-  let broadcastDataSpy: any;
+  let raiseEventSpy: sinon.SinonSpy;
+  let broadcastDataSpy: sinon.SinonSpy;
   let broadcaster: ReactWrapper<Broadcaster, any>;
 
-  before(() => {
+  beforeEach(() => {
 
     // new instance of the event aggregator to be used with the react broadcaster.
     let eventAggregator: IEventAggregator = new EventAggregator();
 
     // create spies so we test if event is triggered.
-    raiseEventSpy = sinon.spy(EventAggregator.prototype, "raiseEvent");
-    broadcastDataSpy = sinon.spy(Broadcaster.prototype, "broadcastData");
+    raiseEventSpy = sinon.spy((EventAggregator.prototype as any), "raiseEvent");
+    broadcastDataSpy = sinon.spy((Broadcaster.prototype as any), "broadcastData");
 
     // mount the Broadcaster so we can test it.
     broadcaster = mount(<Broadcaster eventAggregator={eventAggregator} />);
   });
 
+  afterEach(()=> {
+    broadcaster.unmount();
+    raiseEventSpy.restore();
+    broadcastDataSpy.restore();
+  });
+
   it('should broadcast message with number 1', () => {
 
     let currentEventNumber: number = 1;
@@ -38,15 +44,15 @@ describe('BroadcasterWebPart', () => {
     broadcaster.find("#BroadcastButton").simulate("click");
 
     // check if event is broadcasted.
-    expect(broadcastDataSpy.calledOnce).to.be.true;
-    expect(broadcaster.state().eventNumber).to.be.eq(currentEventNumber);
-    expect(raiseEventSpy.calledOnce).to.be.true;
-    expect(raiseEventSpy.calledWith("myCustomEvent:start",
+    assert(broadcastDataSpy.calledOnce === true);
+    assert(broadcaster.state().eventNumber === currentEventNumber);
+    assert(raiseEventSpy.calledOnce === true);
+    assert(raiseEventSpy.calledWith("myCustomEvent:start",
       {
         data: { currentNumber: currentEventNumber },
         sourceId: "BroadcasterWebPart",
         targetId: "ReceiverWebPart"
-      } as IEvent<EventData>)).to.be.true;
+      } as IEvent<EventData>) === true);
   });
 
 
@@ -56,35 +62,36 @@ describe('BroadcasterWebPart', () => {
     
     // broadcast second event and check the data send.
     broadcaster.find("#BroadcastButton").simulate("click");
+    broadcaster.find("#BroadcastButton").simulate("click");
 
-    expect(broadcastDataSpy.calledTwice).to.be.true;
-    expect(broadcaster.state().eventNumber).to.be.eq(currentEventNumber);
-    expect(raiseEventSpy.calledTwice).to.be.true;
-    expect(raiseEventSpy.calledWith("myCustomEvent:start",
+    assert(broadcastDataSpy.calledTwice === true);
+    assert(broadcaster.state().eventNumber === currentEventNumber);
+    assert(raiseEventSpy.calledTwice === true);
+    assert(raiseEventSpy.calledWith("myCustomEvent:start",
       {
         data: { currentNumber: currentEventNumber },
         sourceId: "BroadcasterWebPart",
         targetId: "ReceiverWebPart"
-      } as IEvent<EventData>)).to.be.true;
+      } as IEvent<EventData>) === true);
   });
 
 
   it('should fail on wrong message', () => {
 
-    let currentEventNumber: number = 3;
+    let currentEventNumber: number = 1;
 
     // broadcast third event and check the data send.
     broadcaster.find("#BroadcastButton").simulate("click");
 
-    expect(broadcastDataSpy.calledThrice).to.be.true;
-    expect(broadcaster.state().eventNumber).to.be.eq(currentEventNumber);
-    expect(raiseEventSpy.calledThrice).to.be.true;
-    expect(raiseEventSpy.calledWith("myCustomEvent:start",
+    assert(broadcastDataSpy.calledOnce === true);
+    assert(broadcaster.state().eventNumber === currentEventNumber);
+    assert(raiseEventSpy.calledOnce === true);
+    
+    assert(raiseEventSpy.calledWith("myCustomEvent:start",
       {
         data: { currentNumber: currentEventNumber },
         sourceId: "<Wrong_Message>",
         targetId: "ReceiverWebPart"
-      } as IEvent<EventData>)).to.be.false;
+      } as IEvent<EventData>) === false);
   });
-
 });

samples/react-events-aggregator/src/webparts/receiver/tests/Receiver.test.tsx

@@ -2,38 +2,45 @@
 /// <reference types="sinon" />
 
 import * as React from 'react';
-import { expect } from 'chai';
+import { assert } from 'chai';
 import { mount, ReactWrapper } from 'enzyme';
 import { IEventAggregator, IEvent } from "@microsoft/sp-webpart-base/lib";
 import EventAggregator from "@microsoft/sp-webpart-base/lib/core/events/EventAggregator";
 import Receiver from "../components/Receiver";
 import { EventData } from "../../../sharedLibs/EventData";
 
-declare const sinon: any;
+declare const sinon: sinon.SinonStatic;
 
 describe('ReceiverWebPart', () => {
 
-  let subscribeByEventNameSpy: any;
-  let subscribeBySourceIdSpy: any;
-  let receivedEventSpy: any;
+  let subscribeByEventNameSpy: sinon.SinonSpy;
+  let subscribeBySourceIdSpy: sinon.SinonSpy;
+  let receivedEventSpy: sinon.SinonSpy;
   let receiver: ReactWrapper<Receiver, any>;
   let eventAggregator: IEventAggregator = new EventAggregator();
 
-  before(() => {
+  beforeEach(() => {
 
     // create spies so we test if event is triggered.
     subscribeByEventNameSpy = sinon.spy(EventAggregator.prototype, "subscribeByEventName");
     subscribeBySourceIdSpy = sinon.spy(EventAggregator.prototype, "subscribeBySourceId");
-    receivedEventSpy = sinon.spy(Receiver.prototype, "receivedEvent");
+    receivedEventSpy = sinon.spy((Receiver.prototype as any), "receivedEvent");
 
     // mount the Receiver so we can test it.
     receiver = mount(<Receiver eventAggregator={eventAggregator} subscriberId="123" />);
   });
 
+  afterEach(()=>{
+    receiver.unmount();
+    subscribeByEventNameSpy.restore();
+    subscribeBySourceIdSpy.restore();
+    receivedEventSpy.restore();
+  });
+
   it('should Receiver be subscribed by event name', () => {
 
-    expect(subscribeByEventNameSpy.calledOnce).to.be.true;
-    expect(subscribeByEventNameSpy.calledWith("myCustomEvent:start", "123", sinon.match.any)).to.be.true;
+    assert(subscribeByEventNameSpy.calledOnce === true);
+    assert(subscribeByEventNameSpy.calledWith("myCustomEvent:start", "123", sinon.match.any) === true);
   });
 
   it('should Receive an event and call the receivedEvent function', () => {
@@ -49,7 +56,7 @@ describe('ReceiverWebPart', () => {
     // raiseEvent so we can test if it has been received by the receivedEvent function.
     eventAggregator.raiseEvent(eventName, eventObject);
 
-    expect(receivedEventSpy.calledOnce).to.be.true;
-    expect(receivedEventSpy.calledWith(eventName, eventObject)).to.be.true;
+    assert(receivedEventSpy.calledOnce === true);
+    assert(receivedEventSpy.calledWith(eventName, eventObject) === true);
   });
 });

samples/react-events-aggregator/tsconfig.json

@@ -7,10 +7,19 @@
     "declaration": true,
     "sourceMap": true,
     "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "typeRoots": [
+      "./node_modules/@types",
+      "./node_modules/@microsoft"
+    ],
     "types": [
       "es6-promise",
-      "es6-collections",
       "webpack-env"
+    ],
+    "lib": [
+      "es5",
+      "dom",
+      "es2015.collection"
     ]
   }
 }