-
Notifications
You must be signed in to change notification settings - Fork 198
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.
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
Add integration test to check inter-frame communication #4090
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -0,0 +1,178 @@ | ||||||
import { delay } from '../../../test-util/wait'; | ||||||
import { PortRPC as PortRPC_ } from '../../port-rpc'; | ||||||
import { ListenerCollection as ListenerCollection_ } from '../../listener-collection'; | ||||||
import { PortFinder as PortFinder_ } from '../../port-finder'; | ||||||
import { PortProvider as PortProvider_ } from '../../port-provider'; | ||||||
import { isMessageEqual } from '../../port-util'; | ||||||
|
||||||
describe('PortProvider-PortFinder-PortRPC integration', () => { | ||||||
let destroyables; | ||||||
|
||||||
// These proxy classes are to keep track of instances that need to be destroyed. | ||||||
class PortRPC extends PortRPC_ { | ||||||
constructor() { | ||||||
super(); | ||||||
destroyables.push(this); | ||||||
} | ||||||
} | ||||||
|
||||||
class ListenerCollection extends ListenerCollection_ { | ||||||
constructor() { | ||||||
super(); | ||||||
destroyables.push(this); | ||||||
} | ||||||
destroy() { | ||||||
this.removeAll(); | ||||||
} | ||||||
} | ||||||
|
||||||
class PortFinder extends PortFinder_ { | ||||||
constructor(...args) { | ||||||
super(...args); | ||||||
destroyables.push(this); | ||||||
} | ||||||
} | ||||||
|
||||||
class PortProvider extends PortProvider_ { | ||||||
constructor(...args) { | ||||||
super(...args); | ||||||
destroyables.push(this); | ||||||
} | ||||||
} | ||||||
|
||||||
beforeEach(() => { | ||||||
destroyables = []; | ||||||
}); | ||||||
|
||||||
afterEach(() => { | ||||||
destroyables.forEach(instance => instance.destroy()); | ||||||
}); | ||||||
|
||||||
it('enables the communication between guest-host', async () => { | ||||||
let done; | ||||||
const promise = new Promise(resolve => (done = resolve)); | ||||||
|
||||||
// guest frame | ||||||
esanzgar marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
const portFinder = new PortFinder({ | ||||||
hostFrame: window, | ||||||
source: 'guest', | ||||||
}); | ||||||
const hostRPC = new PortRPC(); | ||||||
|
||||||
portFinder.discover('host').then(port => { | ||||||
hostRPC.connect(port); | ||||||
hostRPC.call('ping', response => { | ||||||
assert.equal(response, 'pong'); | ||||||
done(); | ||||||
}); | ||||||
}); | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The const done = new Promise(resolve => {
portFinder.discover('host').then(port => {
hostRPC.connect(port);
hostRPC.call('ping', response => {
assert.equal(response, 'pong');
resolve();
});
});
});
...
return done; There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Great idea! Thanks! |
||||||
|
||||||
await delay(10); // add some realism | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can you clarify what you mean by realism here? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||||||
|
||||||
// host frame | ||||||
const portProvider = new PortProvider(window.location.origin); | ||||||
portProvider.listen(); | ||||||
const guestRPC = new PortRPC(); | ||||||
|
||||||
// Register RPC method *before* connection | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I suggest to remove these comments, and leave it to the PortRPC docs to explain that correct usage of the class requires calling There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍🏼 |
||||||
guestRPC.on('ping', cb => cb('pong')); | ||||||
|
||||||
portProvider.on('frameConnected', (source, port) => { | ||||||
if (source === 'guest') { | ||||||
guestRPC.connect(port); | ||||||
} | ||||||
}); | ||||||
|
||||||
return promise; | ||||||
}); | ||||||
|
||||||
it('enables the communication between guest-sidebar', async () => { | ||||||
let done; | ||||||
const promise = new Promise(resolve => (done = resolve)); | ||||||
|
||||||
// guest frame; | ||||||
const portFinder1 = new PortFinder({ | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
Alternatively, if you wrap each actor in a separate function, the variable names won't conflict. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I use separate functions. |
||||||
hostFrame: window, | ||||||
source: 'guest', | ||||||
}); | ||||||
const sidebarRPC = new PortRPC(); | ||||||
|
||||||
portFinder1.discover('sidebar').then(port => { | ||||||
sidebarRPC.connect(port); | ||||||
sidebarRPC.call('ping', response => { | ||||||
assert.equal(response, 'pong'); | ||||||
done(); | ||||||
}); | ||||||
}); | ||||||
|
||||||
await delay(10); // add some realism | ||||||
|
||||||
// sidebar frame | ||||||
const portFinder2 = new PortFinder({ | ||||||
hostFrame: window, | ||||||
source: 'sidebar', | ||||||
}); | ||||||
const guestRPC = new PortRPC(); | ||||||
|
||||||
// Register RPC method *before* connection | ||||||
guestRPC.on('ping', cb => cb('pong')); | ||||||
|
||||||
const listenerCollection = new ListenerCollection(); | ||||||
portFinder2.discover('host').then(port => { | ||||||
listenerCollection.add(port, 'message', ({ data, ports }) => { | ||||||
if ( | ||||||
isMessageEqual(data, { | ||||||
frame1: 'guest', | ||||||
frame2: 'sidebar', | ||||||
type: 'offer', | ||||||
}) | ||||||
) { | ||||||
guestRPC.connect(ports[0]); | ||||||
} | ||||||
}); | ||||||
port.start(); // `start` method would be triggered by `hostRPC.connect(port)` | ||||||
}); | ||||||
|
||||||
// host frame | ||||||
const portProvider = new PortProvider(window.location.origin); | ||||||
portProvider.listen(); | ||||||
|
||||||
return promise; | ||||||
}); | ||||||
|
||||||
it('enables the communication between sidebar-host', async () => { | ||||||
let done; | ||||||
const promise = new Promise(resolve => (done = resolve)); | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. If you are going to use this pattern, I'd suggest to let const done = new Promise(resolve => {
...
hostRPC.call('ping', response => { ...; resolve(); });
}); |
||||||
|
||||||
// sidebar frame | ||||||
const portFinder = new PortFinder({ | ||||||
hostFrame: window, | ||||||
source: 'sidebar', | ||||||
}); | ||||||
const hostRPC = new PortRPC(); | ||||||
|
||||||
portFinder.discover('host').then(port => { | ||||||
hostRPC.connect(port); | ||||||
hostRPC.call('ping', response => { | ||||||
assert.equal(response, 'pong'); | ||||||
done(); | ||||||
}); | ||||||
}); | ||||||
|
||||||
// host frame | ||||||
const portProvider = new PortProvider(window.location.origin); | ||||||
portProvider.listen(); | ||||||
const sidebarRPC = new PortRPC(); | ||||||
|
||||||
// Register RPC method *before* connection | ||||||
sidebarRPC.on('ping', cb => cb('pong')); | ||||||
|
||||||
portProvider.on('frameConnected', (source, port) => { | ||||||
if (source === 'sidebar') { | ||||||
sidebarRPC.connect(port); | ||||||
} | ||||||
}); | ||||||
|
||||||
return promise; | ||||||
}); | ||||||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
To summarize what these tests are doing, each runs a bunch of concurrent activities that simulate the guest, host and sidebar roles in the inter-frame communication process. All the only communication between frames has to go via message channels (no shared variables). One way to make this structure more obvious might be to wrap each "actor" in a function and then run all the actors concurrently at the end.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Very good idea! Thanks!