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.

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

Merged
merged 2 commits into from
Jan 20, 2022
Merged
Changes from 1 commit
Commits
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
178 changes: 178 additions & 0 deletions src/shared/test/integration/inter-frame-communication-test.js
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 () => {
Copy link
Member

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.

it('enables ... communication', async () => {
  const simulateGuest = async () => {
    // Guest steps here
  };

  const simulateHost = async () => {
    // Host steps here
  };

  return Promise.all([simulateGuest(), simulateHost()]);
});

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Very good idea! Thanks!

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();
});
});
Copy link
Member

Choose a reason for hiding this comment

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

The done resolver could potentially be replaced by doing the portFinder.discover call in the Promise callback:

const done = new Promise(resolve => {
  portFinder.discover('host').then(port => {
    hostRPC.connect(port);
    hostRPC.call('ping', response => {
      assert.equal(response, 'pong');
      resolve();
    });
  });
});

...

return done;

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Great idea! Thanks!


await delay(10); // add some realism
Copy link
Member

Choose a reason for hiding this comment

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

Can you clarify what you mean by realism here?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Guest can be ready before the Host frame. If that's the case, Guest will polls the Host. I was trying to simulate that scenario.


// host frame
const portProvider = new PortProvider(window.location.origin);
portProvider.listen();
const guestRPC = new PortRPC();

// Register RPC method *before* connection
Copy link
Member

Choose a reason for hiding this comment

The 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 on before connect.

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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({
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
const portFinder1 = new PortFinder({
const guestPortFinder = new PortFinder({

Alternatively, if you wrap each actor in a separate function, the variable names won't conflict.

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 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));
Copy link
Member

Choose a reason for hiding this comment

The 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 done be the promise as it is a name of a state (similar to loaded or completed), and call the resolver resolveDone. Alternatively, skip the resolver variable and just use the promise callback:

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;
});
});