Skip to content

Commit

Permalink
states: add e2e tests
Browse files Browse the repository at this point in the history
and fix misc bugs and terminology
  • Loading branch information
fippo committed Apr 25, 2022
1 parent b43b2b1 commit 85980ee
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 21 deletions.
11 changes: 5 additions & 6 deletions src/content/peerconnection/states/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@ <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC

<div id="states">
<div>
<div class="label">PC1 state:</div>
<div id="pc1State" class="value"></div>
<div class="label">PC1 signaling state:</div>
<div id="pc1SignalState" class="value"></div>
</div>
<div>
<div class="label">PC1 ICE state:</div>
Expand All @@ -59,8 +59,8 @@ <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC
<div id="pc1ConnState" class="value"></div>
</div>
<div>
<div class="label">PC2 state:</div>
<div id="pc2State" class="value"></div>
<div class="label">PC2 signaling state:</div>
<div id="pc2SignalState" class="value"></div>
</div>
<div>
<div class="label">PC2 ICE state:</div>
Expand All @@ -73,8 +73,7 @@ <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC
</div>

<p>View the console to see logging. The <code>MediaStream</code> object <code>localStream</code>, and the <code>RTCPeerConnection</code>
objects <code>localPeerConnection</code> and <code>remotePeerConnection</code> are in global scope, so you can
inspect them in the console as well.</p>
objects <code>pc1</code> and <code>pc2</code> are in global scope, so you can inspect them in the console as well.</p>

<p>For more information about RTCPeerConnection, see <a href="http://www.html5rocks.com/en/tutorials/webrtc/basics/"
title="HTML5 Rocks article about WebRTC by Sam Dutton">Getting
Expand Down
35 changes: 20 additions & 15 deletions src/content/peerconnection/states/js/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@ startButton.onclick = start;
callButton.onclick = call;
hangupButton.onclick = hangup;

const pc1StateDiv = document.querySelector('div#pc1State');
const pc1SignalStateDiv = document.querySelector('div#pc1SignalState');
const pc1IceStateDiv = document.querySelector('div#pc1IceState');
const pc1ConnStateDiv = document.querySelector('div#pc1ConnState');
const pc2StateDiv = document.querySelector('div#pc2State');
const pc2SignalStateDiv = document.querySelector('div#pc2SignalState');
const pc2IceStateDiv = document.querySelector('div#pc2IceState');
const pc2ConnStateDiv = document.querySelector('div#pc2ConnState');

let localstream;
let localStream;
let pc1;
let pc2;

Expand All @@ -40,7 +40,7 @@ const offerOptions = {
function gotStream(stream) {
console.log('Received local stream');
video1.srcObject = stream;
localstream = stream;
localStream = stream;
callButton.disabled = false;
}

Expand All @@ -60,8 +60,8 @@ function call() {
callButton.disabled = true;
hangupButton.disabled = false;
console.log('Starting call');
const videoTracks = localstream.getVideoTracks();
const audioTracks = localstream.getAudioTracks();
const videoTracks = localStream.getVideoTracks();
const audioTracks = localStream.getAudioTracks();
if (videoTracks.length > 0) {
console.log(`Using Video device: ${videoTracks[0].label}`);
}
Expand All @@ -72,25 +72,28 @@ function call() {

pc1 = new RTCPeerConnection(servers);
console.log('Created local peer connection object pc1');
pc1StateDiv.textContent = pc1.signalingState || pc1.readyState;
pc1.onsignalingstatechange = stateCallback1;

pc1SignalStateDiv.textContent = pc1.signalingState;
pc1IceStateDiv.textContent = pc1.iceConnectionState;
pc1ConnStateDiv.textContent = pc1.connectionState;

pc1.oniceconnectionstatechange = iceStateCallback1;
pc1.onconnectionstatechange = connStateCallback1;
pc1.onicecandidate = e => onIceCandidate(pc1, e);

pc2 = new RTCPeerConnection(servers);
console.log('Created remote peer connection object pc2');
pc2StateDiv.textContent = pc2.signalingState || pc2.readyState;
pc2.onsignalingstatechange = stateCallback2;

pc2SignalStateDiv.textContent = pc2.signalingState;
pc2IceStateDiv.textContent = pc2.iceConnectionState;
pc2ConnStateDiv.textContent = pc2.connectionState;
pc2.oniceconnectionstatechange = iceStateCallback2;
pc2.onconnectionstatechange = connStateCallback2;
pc2.onicecandidate = e => onIceCandidate(pc2, e);
pc2.ontrack = gotRemoteStream;
localstream.getTracks().forEach(track => pc1.addTrack(track, localstream));
localStream.getTracks().forEach(track => pc1.addTrack(track, localStream));
console.log('Adding Local Stream to peer connection');
pc1.createOffer(offerOptions).then(gotDescription1, onCreateSessionDescriptionError);
}
Expand All @@ -116,10 +119,12 @@ function hangup() {
console.log('Ending call');
pc1.close();
pc2.close();
pc1StateDiv.textContent += ` => ${pc1.signalingState}` || pc1.readyState;
pc2StateDiv.textContent += ` => ${pc2.signalingState}` || pc2.readyState;
pc1SignalStateDiv.textContent += ` => ${pc1.signalingState}`;
pc2SignalStateDiv.textContent += ` => ${pc2.signalingState}`;
pc1IceStateDiv.textContent += ` => ${pc1.iceConnectionState}`;
pc2IceStateDiv.textContent += ` => ${pc2.iceConnectionState}`;
pc1ConnStateDiv.textContent += ` => ${pc1.connectionState}`;
pc2ConnStateDiv.textContent += ` => ${pc2.connectionState}`;
pc1 = null;
pc2 = null;
hangupButton.disabled = true;
Expand All @@ -136,18 +141,18 @@ function gotRemoteStream(e) {
function stateCallback1() {
let state;
if (pc1) {
state = pc1.signalingState || pc1.readyState;
state = pc1.signalingState;
console.log(`pc1 state change callback, state: ${state}`);
pc1StateDiv.textContent += ` => ${state}`;
pc1SignalStateDiv.textContent += ` => ${state}`;
}
}

function stateCallback2() {
let state;
if (pc2) {
state = pc2.signalingState || pc2.readyState;
state = pc2.signalingState;
console.log(`pc2 state change callback, state: ${state}`);
pc2StateDiv.textContent += ` => ${state}`;
pc2SignalStateDiv.textContent += ` => ${state}`;
}
}

Expand Down
79 changes: 79 additions & 0 deletions src/content/peerconnection/states/js/test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
/*
* Copyright (c) 2022 The WebRTC project authors. All Rights Reserved.
*
* Use of this source code is governed by a BSD-style license
* that can be found in the LICENSE file in the root of the source
* tree.
*/
/* eslint-env node, mocha */

'use strict';
const webdriver = require('selenium-webdriver');
const seleniumHelpers = require('../../../../../test/webdriver');
const {expect} = require('chai');

let driver;
const path = '/src/content/peerconnection/states/index.html';
const url = `${process.env.BASEURL ? process.env.BASEURL : ('file://' + process.cwd())}${path}`;

describe('peerconnection states', () => {
before(() => {
driver = seleniumHelpers.buildDriver();
});
after(() => {
return driver.quit();
});

beforeEach(() => {
return driver.get(url);
});

it('establishes a connection and hangs up', async () => {
await driver.findElement(webdriver.By.id('startButton')).click();

await driver.wait(() => driver.executeScript(() => {
return localStream !== null; // eslint-disable-line no-undef
}));

await driver.wait(() => driver.findElement(webdriver.By.id('callButton')).isEnabled());
await driver.findElement(webdriver.By.id('callButton')).click();

await Promise.all([
await driver.wait(() => driver.executeScript(() => {
return pc1 && pc1.connectionState === 'connected'; // eslint-disable-line no-undef
})),
await driver.wait(() => driver.executeScript(() => {
return pc2 && pc2.connectionState === 'connected'; // eslint-disable-line no-undef
})),
]);

await driver.wait(() => driver.executeScript(() => {
return document.getElementById('video2').readyState === HTMLMediaElement.HAVE_ENOUGH_DATA;
}));

const pc1States = {
signaling: await driver.findElement(webdriver.By.id('pc1SignalState')).getAttribute('innerText'),
ice: await driver.findElement(webdriver.By.id('pc1IceState')).getAttribute('innerText'),
connection: await driver.findElement(webdriver.By.id('pc1ConnState')).getAttribute('innerText'),
};
expect(pc1States.signaling).to.equal('stable => have-local-offer => stable');
expect(pc1States.ice).to.equal('new => checking => connected');
expect(pc1States.connection).to.equal('new => connecting => connected');

const pc2States = {
signaling: await driver.findElement(webdriver.By.id('pc2SignalState')).getAttribute('innerText'),
ice: await driver.findElement(webdriver.By.id('pc2IceState')).getAttribute('innerText'),
connection: await driver.findElement(webdriver.By.id('pc2ConnState')).getAttribute('innerText'),
};
expect(pc2States.signaling).to.equal('stable => have-remote-offer => stable');
expect(pc2States.ice).to.equal('new => checking => connected');
expect(pc2States.connection).to.equal('new => connecting => connected');

await driver.findElement(webdriver.By.id('hangupButton')).click();

await driver.wait(() => driver.executeScript(() => {
return pc1 === null; // eslint-disable-line no-undef
}));
});
});

0 comments on commit 85980ee

Please sign in to comment.