Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support MessageChannel in bridge.js #3566

Merged
merged 5 commits into from
Jul 21, 2021
Merged

Support MessageChannel in bridge.js #3566

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6dad72c
Add support for `MessagePort` in `shared/bridge.js`
esanzgar Jul 19, 2021
b30ed20
Add unit tests for calling `Bridge#createChannel` with a MessagePort
robertknight Jul 20, 2021
5e45547
Remove the need for some test-only code in Bridge
robertknight Jul 20, 2021
a0302db
Use PascalCase naming for types
robertknight Jul 20, 2021
a3c2040
Remove unused `Window` argument to `onConnect` callback
robertknight Jul 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/annotator/cross-frame.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,9 @@ export class CrossFrame {
};

// Initiate connection to the sidebar.
const onDiscoveryCallback = (source, origin, token) =>
bridge.createChannel(source, origin, token);
discovery.startDiscovery(onDiscoveryCallback);
discovery.startDiscovery((source, origin, token) =>
bridge.createChannel({ source, origin, token })
);
frameObserver.observe(injectIntoFrame, iframeUnloaded);

/**
Expand Down
6 changes: 5 additions & 1 deletion src/annotator/test/cross-frame-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,11 @@ describe('CrossFrame', () => {
createCrossFrame();
fakeDiscovery.startDiscovery.yield('SOURCE', 'ORIGIN', 'TOKEN');
assert.called(fakeBridge.createChannel);
assert.calledWith(fakeBridge.createChannel, 'SOURCE', 'ORIGIN', 'TOKEN');
assert.calledWith(fakeBridge.createChannel, {
source: 'SOURCE',
origin: 'ORIGIN',
token: 'TOKEN',
});
});
});

Expand Down
81 changes: 73 additions & 8 deletions src/shared/bridge.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default class Bridge {
this.links = [];
/** @type {Record<string, (...args: any[]) => void>} */
this.channelListeners = {};
/** @type {Array<(channel: RPC, window: Window) => void>} */
/** @type {Array<(channel: RPC) => void>} */
this.onConnectListeners = [];
}

Expand All @@ -27,18 +27,84 @@ export default class Bridge {
this.links.forEach(channel => channel.destroy());
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Array.from usage here was probably a hangover from semi-automated CoffeeScript => JS conversion. The decaffeinate tool that we used for some of this conversion added Array.from in some places to be conservative.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I makes sense.

}

/**
* Deprecated - Remove after MessagePort conversion
*
* @typedef WindowOptions
* @prop {Window} source - The source window
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think using the term source is potentially a little confusing here because this window is both a source of messages that trigger on callbacks and a target of messages sent with call. Also when the RPC channel is constructed, the source is passed as the destFrameOrPort argument.

Naming this target would be misleading for the same reason and naming it window could cause it to be confused with the window global. So perhaps just revising the documentation to something like @prop {Window} source - The window to communicate with would be enough for now.

* @prop {string} origin - The origin of the document in `source`
* @prop {string} token - Shared token between the `source` and this window
* agreed during the discovery process
*/

/**
* Create a communication channel between frames using either `MessagePort` or
* `Window`.
*
* The created channel is added to the list of channels which `call`
* and `on` send and receive messages over.
*
* @param {WindowOptions|MessagePort} options
* @return {RPC} - Channel for communicating with the window.
*/
createChannel(options) {
if (options instanceof MessagePort) {
return this._createChannelForPort(options);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR will result on a reduction in code coverage, which will be fix by #3598.

PR #3566 adds integration tests, but I don't see a reason not to add unit tests here.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I pushed a commit that adds a few extra tests to cover the new code paths.

} else {
// Deprecated - Remove after MessagePort conversion
return this._createChannelForWindow(options);
}
}

/**
* Create a communication channel using a `MessagePort`.
*
* The created channel is added to the list of channels which `call`
* and `on` send and receive messages over.
*
* @param {MessagePort} port
* @return {RPC} - Channel for communicating with the window.
*/
_createChannelForPort(port) {
const listeners = { connect: cb => cb(), ...this.channelListeners };

// Set up a channel
const channel = new RPC(
window /* dummy */,
port,
'*' /* dummy */,
listeners
);

let connected = false;
const ready = () => {
if (connected) {
return;
}
connected = true;
this.onConnectListeners.forEach(cb => cb(channel));
};

// Fire off a connection attempt
channel.call('connect', ready);

// Store the newly created channel in our collection
this.links.push(channel);

return channel;
}

/**
* Create a communication channel between this window and `source`.
*
* The created channel is added to the list of channels which `call`
* and `on` send and receive messages over.
*
* @param {Window} source - The source window.
* @param {string} origin - The origin of the document in `source`.
* @param {string} token
* @param {WindowOptions} options
* @return {RPC} - Channel for communicating with the window.
* @deprecated
*/
createChannel(source, origin, token) {
_createChannelForWindow({ source, origin, token }) {
let channel = null;
let connected = false;

Expand All @@ -47,13 +113,12 @@ export default class Bridge {
return;
}
connected = true;
this.onConnectListeners.forEach(cb => cb(channel, source));
this.onConnectListeners.forEach(cb => cb(channel));
};

const connect = (_token, cb) => {
if (_token === token) {
cb();
ready();
}
};

Expand Down Expand Up @@ -162,7 +227,7 @@ export default class Bridge {
/**
* Add a listener to be called upon a new connection.
*
* @param {(channel: RPC, window: Window) => void} listener
* @param {(channel: RPC) => void} listener
*/
onConnect(listener) {
this.onConnectListeners.push(listener);
Expand Down
147 changes: 102 additions & 45 deletions src/shared/test/bridge-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,16 @@ describe('shared/bridge', () => {
beforeEach(() => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The existing Bridge tests are unit tests that stub RPC.call. The new tests are integration tests that end up testing a lot of RPC-specific details. We generally try to avoid mixing unit and integration tests in the same module, as becomes unclear for developers making changes later which approach they should follow when adding a new test. Sometimes there might be cases where there is justification to have a test that deviates from the other tests in terms of its unit-ness. In that case it is good to call out the fact that these are an exception. For example with a specific "integration tests" describe block.

At the time when the Bridge tests were originally written I don't think we had a good mocking tool ($imports.$mock) which is probably why they create a real RPC and then stub call each time. This could be simplified to use $imports.$mock now. eg:

// Active channels
let channels = [];

class FakeRPC {
  constructor(sourceFrame, ...) {
    this.sourceFrame = sourceFrame;
    ...
    
    this.call = sinon.stub().resolves(...)
    channels.push(this);
  }
  
  destroy() {
    channels.splice(channels.indexOf(this), 1);
  }
}

...
$imports.$mock({ './frame-rpc': { RPC: FakeRPC }})

I think we are eventually going to want some integration tests for inter-frame messaging. Following the examples of src/{annotator, sidebar}/test/integration these could go in src/shared/test/integration/messaging-test.js.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is good to know about the integration tests.

Copy link
Contributor Author

@esanzgar esanzgar Jul 14, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Until this #3565, FrameRPC didn't have unit testing. I think the Bridge was supposed to unit test FrameRPC, however, because of the difficulty of creating two frames to communicate with each other, most of the methods in FrameRPC were mocked.

bridge = new Bridge();

createChannel = () =>
bridge.createChannel(fakeWindow, 'http://example.com', 'TOKEN');
createChannel = source => {
if (!source) {
source = {
source: fakeWindow,
origin: 'http://example.com',
token: 'TOKEN',
};
}
return bridge.createChannel(source);
};

fakeWindow = {
postMessage: sandbox.stub(),
Expand All @@ -39,18 +47,39 @@ describe('shared/bridge', () => {
});

describe('#createChannel', () => {
it('creates a new channel with the provided options', () => {
const channel = createChannel();
assert.equal(channel.sourceFrame, window);
assert.equal(channel.destFrame, fakeWindow);
assert.equal(channel.origin, 'http://example.com');
context('with a Window source', () => {
it('creates a new channel', () => {
const channel = createChannel();
assert.equal(channel.sourceFrame, window);
assert.equal(channel.destFrame, fakeWindow);
assert.equal(channel.origin, 'http://example.com');
});

it('adds the channel to the `links` property', () => {
const channel = createChannel();
assert.isTrue(
bridge.links.some(registeredChannel => registeredChannel === channel)
);
});
});

it('adds the channel to the .links property', () => {
const channel = createChannel();
assert.isTrue(
bridge.links.some(registeredChannel => registeredChannel === channel)
);
context('with a MessagePort source', () => {
it('creates a new channel', () => {
const messageChannel = new MessageChannel();

const channel = createChannel(messageChannel.port1);

assert.equal(channel.sourceFrame, window);
assert.equal(channel.destFrame, messageChannel.port1);
assert.equal(channel.origin, '*');
});

it('adds the channel to the `links` property', () => {
const channel = createChannel();
assert.isTrue(
bridge.links.some(registeredChannel => registeredChannel === channel)
);
});
});

it('registers any existing listeners on the channel', () => {
Expand Down Expand Up @@ -85,11 +114,11 @@ describe('shared/bridge', () => {

it('calls a callback when all channels return successfully', done => {
const channel1 = createChannel();
const channel2 = bridge.createChannel(
fakeWindow,
'http://example.com',
'NEKOT'
);
const channel2 = bridge.createChannel({
source: fakeWindow,
origin: 'http://example.com',
token: 'NEKOT',
});
channel1.call.yields(null, 'result1');
channel2.call.yields(null, 'result2');

Expand All @@ -105,11 +134,11 @@ describe('shared/bridge', () => {
it('calls a callback with an error when a channels fails', done => {
const error = new Error('Uh oh');
const channel1 = createChannel();
const channel2 = bridge.createChannel(
fakeWindow,
'http://example.com',
'NEKOT'
);
const channel2 = bridge.createChannel({
source: fakeWindow,
origin: 'http://example.com',
token: 'NEKOT',
});
channel1.call.throws(error);
channel2.call.yields(null, 'result2');

Expand Down Expand Up @@ -205,30 +234,60 @@ describe('shared/bridge', () => {
});

describe('#onConnect', () => {
it('adds a callback that is called when a channel is connected', () => {
// Simulate a Bridge attached to the other end of a channel receiving
// the `connect` RPC request and handling it using the `connect` handler
// registered by the Bridge.
const runConnectHandler = channel => {
const connectCall = channel.call
.getCalls()
.find(call => call.firstArg === 'connect');

// Invoke the `connect` handler. Here we're invoking it on `channel` but
// in the actual app this would be called on the counterpart channel in
// the other frame. This distinction doesn't matter because all the
// handler does is check a token (which is the same on both sides) and
// call the result callback.
channel.methods.connect(...connectCall.args.slice(1));
};

it('runs callbacks when a Window channel connects with correct token', () => {
const onConnectCallback = sinon.stub();
bridge.onConnect(onConnectCallback);

const channel = createChannel();

// Simulate "connect" RPC call by Bridge instance in channel's destination frame.
channel.methods.connect('TOKEN', sinon.stub());
runConnectHandler(channel);

assert.calledWith(onConnectCallback, channel, fakeWindow);
assert.calledWith(onConnectCallback, channel);
});

it('does not run `onConnect` callbacks if the token is wrong', () => {
it('does not run callback if a Window channel connects with wrong token', () => {
const onConnectCallback = sinon.stub();
bridge.onConnect(onConnectCallback);

const channel = createChannel();

// Simulate "connect" RPC call by Bridge instance in channel's destination frame.
channel.methods.connect('WRONG-TOKEN', sinon.stub());
const connectCall = channel.call
.getCalls()
.find(call => call.firstArg === 'connect');
channel.methods.connect('WRONG-TOKEN', connectCall.lastArg);

assert.notCalled(onConnectCallback);
});

it('runs callbacks when a MessagePort channel connects', () => {
const onConnectCallback = sinon.stub();
bridge.onConnect(onConnectCallback);

const messageChannel = new MessageChannel();
const channel = createChannel(messageChannel.port1);

runConnectHandler(channel);

assert.calledWith(onConnectCallback, channel);
});

it('allows multiple callbacks to be registered', () => {
const onConnectCallback1 = sinon.stub();
const onConnectCallback2 = sinon.stub();
Expand All @@ -237,11 +296,10 @@ describe('shared/bridge', () => {

const channel = createChannel();

// Simulate "connect" RPC call by Bridge instance in channel's destination frame.
channel.methods.connect('TOKEN', sinon.stub());
runConnectHandler(channel);

assert.calledWith(onConnectCallback1, channel, fakeWindow);
assert.calledWith(onConnectCallback2, channel, fakeWindow);
assert.calledWith(onConnectCallback1, channel);
assert.calledWith(onConnectCallback2, channel);
});

it('only invokes `onConnect` callback once', () => {
Expand All @@ -250,26 +308,25 @@ describe('shared/bridge', () => {

const channel = createChannel();

// Simulate "connect" RPC call by Bridge instance in channel's destination frame.
channel.methods.connect('TOKEN', sinon.stub());
channel.methods.connect('TOKEN', sinon.stub());
runConnectHandler(channel);
runConnectHandler(channel);

assert.calledOnce(onConnectCallback);
});
});

describe('#destroy', () =>
it('destroys all opened channels', () => {
const channel1 = bridge.createChannel(
fakeWindow,
'http://example.com',
'foo'
);
const channel2 = bridge.createChannel(
fakeWindow,
'http://example.com',
'bar'
);
const channel1 = bridge.createChannel({
source: fakeWindow,
origin: 'http://example.com',
token: 'foo',
});
const channel2 = bridge.createChannel({
source: fakeWindow,
origin: 'http://example.com',
token: 'bar',
});

bridge.destroy();

Expand Down
4 changes: 3 additions & 1 deletion src/sidebar/services/frame-sync.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,9 @@ export class FrameSyncService {
};

const discovery = new Discovery(window, { server: true });
discovery.startDiscovery(this._bridge.createChannel.bind(this._bridge));
discovery.startDiscovery((source, origin, token) =>
this._bridge.createChannel({ source, origin, token })
);
this._bridge.onConnect(addFrame);

this._setupSyncToFrame();
Expand Down