Velin Georgiev
Vesa Juvonen
parent
92072988ac
commit
3499fe91cc
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"version": "1.1.3",
|
||||
"version": "1.4.1",
|
||||
"libraryName": "react-rxjs-event-emitter",
|
||||
"libraryId": "323ec3b8-b5de-4184-99a6-7e0f9c276412",
|
||||
"environment": "spo"
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ This sample shows how we can use the [ReactiveX (RxJs)](http://reactivex.io/) li
|
|||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
|
|
@ -30,6 +30,7 @@ react-rxjs-event-emitter | Velin Georgiev ( [@VelinGeorgiev](https://twitter.com
|
|||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
0.0.1|August 22, 2017 | Initial commit
|
||||
0.0.2|April 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.**
|
||||
|
|
|
|||
|
|
@ -1,24 +1,35 @@
|
|||
{
|
||||
"entries": [
|
||||
{
|
||||
"entry": "./lib/libraries/rxJsEventEmitter/RxJsEventEmitter.js",
|
||||
"manifest": "./src/libraries/rxJsEventEmitter/RxJsEventEmitter.manifest.json",
|
||||
"outputPath": "./dist/rxjs-event-emitter.bundle.js"
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||
"version": "2.0",
|
||||
"bundles": {
|
||||
"rxjseventemitter": {
|
||||
"components": [
|
||||
{
|
||||
"entrypoint": "./lib/libraries/rxJsEventEmitter/RxJsEventEmitter.js",
|
||||
"manifest": "./src/libraries/rxJsEventEmitter/RxJsEventEmitter.manifest.json"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"entry": "./lib/webparts/broadcaster/BroadcasterWebPart.js",
|
||||
"manifest": "./src/webparts/broadcaster/BroadcasterWebPart.manifest.json",
|
||||
"outputPath": "./dist/broadcaster.bundle.js"
|
||||
"broadcaster": {
|
||||
"components": [
|
||||
{
|
||||
"entrypoint": "./lib/webparts/broadcaster/BroadcasterWebPart.js",
|
||||
"manifest": "./src/webparts/broadcaster/BroadcasterWebPart.manifest.json"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"entry": "./lib/webparts/receiver/ReceiverWebPart.js",
|
||||
"manifest": "./src/webparts/receiver/ReceiverWebPart.manifest.json",
|
||||
"outputPath": "./dist/receiver.bundle.js"
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||
"deployCdnPath": "temp/deploy"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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-rxjs-event-emitter",
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||
"solution": {
|
||||
"name": "react-rxjs-event-emitter-client-side-solution",
|
||||
"id": "323ec3b8-b5de-4184-99a6-7e0f9c276412",
|
||||
"version": "1.0.0.0",
|
||||
"skipFeatureDeployment": false
|
||||
"includeClientSideAssets": true
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/react-rxjs-event-emitter.sppkg"
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,34 +1,30 @@
|
|||
{
|
||||
"name": "react-rxjs-event-emitter",
|
||||
"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",
|
||||
"sp-pnp-js":"^2.0.7",
|
||||
"@types/rx-lite":"4.0.4",
|
||||
"rx-lite":"^4.0.4"
|
||||
"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/rx-lite": "4.0.5",
|
||||
"rx-lite": "^4.0.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/sp-build-web": "~1.1.0",
|
||||
"@microsoft/sp-module-interfaces": "~1.1.1",
|
||||
"@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",
|
||||
"@types/sinon": "^2.3.3",
|
||||
"chai-enzyme": "^0.8.0",
|
||||
"ajv": "~5.2.2",
|
||||
"enzyme": "^2.9.1",
|
||||
"react-addons-test-utils": "^15.6.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,11 +1,8 @@
|
|||
{
|
||||
"$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
|
||||
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx/client-side-library-manifest.schema.json",
|
||||
"id": "0ef3f066-d4d8-41b8-a683-aeb4e3a7848a",
|
||||
"alias": "RxJsEventEmitter",
|
||||
"componentType": "Library",
|
||||
|
||||
// The "*" signifies that the version should be taken from the package.json
|
||||
"version": "*",
|
||||
"manifestVersion": 2
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ export class RxJsEventEmitter {
|
|||
}
|
||||
|
||||
this.subjects[fnName].subscribe(handler);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Unsubscribes Observer (Subscriber) from event.
|
||||
|
|
@ -75,7 +75,7 @@ export class RxJsEventEmitter {
|
|||
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Not tested.
|
||||
|
|
@ -91,7 +91,7 @@ export class RxJsEventEmitter {
|
|||
}
|
||||
|
||||
this.subjects = {};
|
||||
};
|
||||
}
|
||||
|
||||
private _createName(name: string): string {
|
||||
return `$${name}`;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
{
|
||||
"$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
|
||||
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||
"id": "d0c6977d-b995-46ff-a246-14ff43495e0e",
|
||||
"alias": "BroadcasterWebPart",
|
||||
"componentType": "WebPart",
|
||||
|
|
|
|||
|
|
@ -1,32 +1,37 @@
|
|||
/// <reference types="mocha" />
|
||||
/// <reference types="sinon" />
|
||||
|
||||
import * as React from 'react';
|
||||
import { expect } from 'chai';
|
||||
import { assert } from 'chai';
|
||||
import { mount, ReactWrapper } from 'enzyme';
|
||||
import Broadcaster from "../components/Broadcaster";
|
||||
|
||||
import { EventData } from "../../../libraries/rxJsEventEmitter/EventData";
|
||||
import { RxJsEventEmitter } from "../../../libraries/rxJsEventEmitter/RxJsEventEmitter";
|
||||
|
||||
declare const sinon: any;
|
||||
declare const sinon: sinon.SinonStatic;
|
||||
|
||||
describe('BroadcasterWebPart', () => {
|
||||
|
||||
let rxJsEventEmitterEmitSpy: any;
|
||||
let broadcastDataSpy: any;
|
||||
let rxJsEventEmitterEmitSpy: sinon.SinonSpy;
|
||||
let broadcastDataSpy: sinon.SinonSpy;
|
||||
let broadcaster: ReactWrapper<Broadcaster, any>;
|
||||
|
||||
before(() => {
|
||||
beforeEach(() => {
|
||||
|
||||
// create spies so we test if event is triggered.
|
||||
rxJsEventEmitterEmitSpy = sinon.spy(RxJsEventEmitter.prototype, "emit");
|
||||
broadcastDataSpy = sinon.spy(Broadcaster.prototype, "broadcastData");
|
||||
rxJsEventEmitterEmitSpy = sinon.spy((RxJsEventEmitter.prototype as any), "emit");
|
||||
broadcastDataSpy = sinon.spy((Broadcaster.prototype as any), "broadcastData");
|
||||
|
||||
// mount the Broadcaster so we can test it.
|
||||
broadcaster = mount(<Broadcaster />);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
broadcaster.unmount();
|
||||
rxJsEventEmitterEmitSpy.restore();
|
||||
broadcastDataSpy.restore();
|
||||
});
|
||||
|
||||
it('should broadcast message with number 1', () => {
|
||||
|
||||
let currentEventNumber: number = 1;
|
||||
|
|
@ -35,42 +40,45 @@ 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(rxJsEventEmitterEmitSpy.calledOnce).to.be.true;
|
||||
expect(rxJsEventEmitterEmitSpy.calledWith("myCustomEvent:start",
|
||||
{ currentNumber: currentEventNumber } as EventData)).to.be.true;
|
||||
assert(broadcastDataSpy.calledOnce === true);
|
||||
assert(broadcaster.state().eventNumber === currentEventNumber);
|
||||
assert(rxJsEventEmitterEmitSpy.calledOnce === true);
|
||||
assert(rxJsEventEmitterEmitSpy.calledWith("myCustomEvent:start",
|
||||
{ currentNumber: currentEventNumber } as EventData) === true);
|
||||
});
|
||||
|
||||
|
||||
it('should broadcast message with number 2', () => {
|
||||
|
||||
let currentEventNumber: number = 2;
|
||||
|
||||
|
||||
broadcaster.find("#BroadcastButton").simulate("click");
|
||||
// broadcast second event and check the data send.
|
||||
broadcaster.find("#BroadcastButton").simulate("click");
|
||||
|
||||
expect(broadcastDataSpy.calledTwice).to.be.true;
|
||||
expect(broadcaster.state().eventNumber).to.be.eq(currentEventNumber);
|
||||
expect(rxJsEventEmitterEmitSpy.calledTwice).to.be.true;
|
||||
expect(rxJsEventEmitterEmitSpy.calledWith("myCustomEvent:start",
|
||||
{ currentNumber: currentEventNumber } as EventData)).to.be.true;
|
||||
assert(broadcastDataSpy.calledTwice === true);
|
||||
assert(broadcaster.state().eventNumber === currentEventNumber);
|
||||
assert(rxJsEventEmitterEmitSpy.calledTwice === true);
|
||||
assert(rxJsEventEmitterEmitSpy.calledWith("myCustomEvent:start",
|
||||
{ currentNumber: currentEventNumber } as EventData) === true);
|
||||
});
|
||||
|
||||
|
||||
it('should fail on wrong message', () => {
|
||||
|
||||
let currentEventNumber: number = 3;
|
||||
let wrongEventNumber: number = 99999;
|
||||
|
||||
broadcaster.find("#BroadcastButton").simulate("click");
|
||||
// broadcast second event and check the data send.
|
||||
broadcaster.find("#BroadcastButton").simulate("click");
|
||||
// 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(rxJsEventEmitterEmitSpy.calledThrice).to.be.true;
|
||||
expect(rxJsEventEmitterEmitSpy.calledWith("myCustomEvent:start",
|
||||
{ currentNumber: wrongEventNumber } as EventData)).to.be.false;
|
||||
assert(broadcastDataSpy.calledThrice === true);
|
||||
assert(broadcaster.state().eventNumber === currentEventNumber);
|
||||
assert(rxJsEventEmitterEmitSpy.calledThrice === true);
|
||||
assert(rxJsEventEmitterEmitSpy.calledWith("myCustomEvent:start",
|
||||
{ currentNumber: wrongEventNumber } as EventData) === false);
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
{
|
||||
"$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
|
||||
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||
"id": "891b997e-67da-4da3-a6e1-3caf8bb264be",
|
||||
"alias": "ReceiverWebPart",
|
||||
"componentType": "WebPart",
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
"safeWithCustomScriptDisabled": false,
|
||||
|
||||
"preconfiguredEntries": [{
|
||||
"groupId": "891b997e-67da-4da3-a6e1-3caf8bb264be",
|
||||
"group": { "default": "Under Development" },
|
||||
|
|
|
|||
|
|
@ -1,24 +1,23 @@
|
|||
/// <reference types="mocha" />
|
||||
/// <reference types="sinon" />
|
||||
|
||||
import * as React from 'react';
|
||||
import { expect } from 'chai';
|
||||
import { assert } from 'chai';
|
||||
import { mount, ReactWrapper } from 'enzyme';
|
||||
import Receiver from "../components/Receiver";
|
||||
|
||||
import { EventData } from "../../../libraries/rxJsEventEmitter/EventData";
|
||||
import { RxJsEventEmitter } from "../../../libraries/rxJsEventEmitter/RxJsEventEmitter";
|
||||
|
||||
declare const sinon: any;
|
||||
declare const sinon: sinon.SinonStatic;
|
||||
|
||||
describe('ReceiverWebPart', () => {
|
||||
|
||||
let rxJsEventEmitterOnSpy: any;
|
||||
let receivedEventSpy: any;
|
||||
let rxJsEventEmitterOnSpy: sinon.SinonSpy;
|
||||
let receivedEventSpy: sinon.SinonSpy;
|
||||
let receiver: ReactWrapper<Receiver, any>;
|
||||
let eventEmitter: RxJsEventEmitter = RxJsEventEmitter.getInstance();
|
||||
|
||||
before(() => {
|
||||
beforeEach(() => {
|
||||
|
||||
// create spies so we test if event is triggered.
|
||||
rxJsEventEmitterOnSpy = sinon.spy(RxJsEventEmitter.prototype, "on");
|
||||
|
|
@ -28,10 +27,16 @@ describe('ReceiverWebPart', () => {
|
|||
receiver = mount(<Receiver />);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
receiver.unmount();
|
||||
rxJsEventEmitterOnSpy.restore();
|
||||
receivedEventSpy.restore();
|
||||
});
|
||||
|
||||
it('should Receiver be subscribed by event name', () => {
|
||||
|
||||
expect(rxJsEventEmitterOnSpy.calledOnce).to.be.true;
|
||||
expect(rxJsEventEmitterOnSpy.calledWith("myCustomEvent:start", sinon.match.any)).to.be.true;
|
||||
assert(rxJsEventEmitterOnSpy.calledOnce === true);
|
||||
assert(rxJsEventEmitterOnSpy.calledWith("myCustomEvent:start", sinon.match.any) === true);
|
||||
});
|
||||
|
||||
it('should Receive an event and call the receivedEvent function', () => {
|
||||
|
|
@ -41,7 +46,7 @@ describe('ReceiverWebPart', () => {
|
|||
// emit the data so we can test if it has been received by the receivedEvent function.
|
||||
eventEmitter.emit("myCustomEvent:start", data);
|
||||
|
||||
expect(receivedEventSpy.calledOnce).to.be.true;
|
||||
expect(receivedEventSpy.calledWith(data)).to.be.true;
|
||||
assert(receivedEventSpy.calledOnce === true);
|
||||
assert(receivedEventSpy.calledWith(data) === true);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue