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

Adding tests for remote playback API #35827

Merged
merged 5 commits into from
Sep 5, 2023
Merged

Adding tests for remote playback API #35827

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b9766a8
Implemented some tests for remote-playback api
FritzHeiden Aug 11, 2022
d389514
Implemented all API tests
FritzHeiden Aug 12, 2022
8b35bac
Implemented all tests
FritzHeiden Aug 16, 2022
22f0f6c
Added test results
FritzHeiden Aug 16, 2022
d51fbb8
Made changes according to PR feedback
FritzHeiden Mar 7, 2023
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
83 changes: 83 additions & 0 deletions remote-playback/event-handlers-manual.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html>
<title>
Test that all event handlers are called.
</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/media.js"></script>
<body>
<div id="prep">
<p>Please make sure a device for remote playback is <b>available.</b></p>
markafoltz marked this conversation as resolved.
Show resolved Hide resolved
<button id="prompt-button-prep">Show devices</button>
markafoltz marked this conversation as resolved.
Show resolved Hide resolved
<button id="start-button">Start test</button>
</div>
<div id="pick-device" style="display: none">
<p>
Click the button below to prompt for a remote playback device and select
one! After connecting to the device, please click again and disconnect
from device.
</p>
<button id="prompt-button">Pick device</button>
<button id="disconnect-button" style="display: none">
Disconnect device
</button>
</div>
</body>
<script>
var v = document.createElement("video");
Copy link
Member

Choose a reason for hiding this comment

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

It looks like newer tests in the repo can use more modern Javascript syntax, meaning:

  • let, const instead of var
  • () => instead of function ()

Since most of the Javascript I deal with is modern, I have a slight preference to using the modern syntax in these tests.

v.src = getVideoURI("/media/movie_5");

var startButton = document.getElementById("start-button");
startButton.onclick = function () {
var prep = document.getElementById("prep");
markafoltz marked this conversation as resolved.
Show resolved Hide resolved
prep.style.display = "none";
var pickDeviceOptions = document.getElementById("pick-device");
pickDeviceOptions.style.display = "block";
};
var promptPrepButton = document.getElementById("prompt-button-prep");
promptPrepButton.onclick = function () {
v.remote
.prompt()
.then(() => {})
.catch(() => {});
};
setup({
explicit_timeout: true,
});
async_test((t) => {
var onConnectingCalled = false;
var onConnectCalled = false;
var onDisconnectCalled = false;
v.remote.onconnecting = function () {
onConnectingCalled = true;
};

v.remote.onconnect = function () {
onConnectCalled = true;
};

v.remote.ondisconnect = function () {
onDisconnectCalled = true;
};

var button = document.getElementById("prompt-button");
var disconnectButton = document.getElementById("disconnect-button");
button.onclick = function () {
promise_test(() => {
return v.remote.prompt().then(() => {
button.style.display = "none";
disconnectButton.style.display = "inline";
});
}, "Prompt to connect device");
};
disconnectButton.onclick = function () {
v.remote.prompt().then(t.step_func_done(() => {
assert_true(onConnectingCalled, "onconnecting was called");
assert_true(onConnectCalled, "onconnect was called");
assert_true(onDisconnectCalled, "ondisconnect was called");
}));
};
}, "Test that all event handlers are called.");
markafoltz marked this conversation as resolved.
Show resolved Hide resolved
</script>
</html>
34 changes: 34 additions & 0 deletions remote-playback/prompt-and-cancel-selection-manual.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<title>
Test that promise is rejected when user cancels device selection.
</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/media.js"></script>
markafoltz marked this conversation as resolved.
Show resolved Hide resolved
<body>
<p>
Click the button below to prompt for a remote playback device and <b>cancel
the selection</b> of a device!
</p>
<button id="prompt-button">Pick device</button>
</body>
<script>
async_test((t) => {
var v = document.createElement("video");
v.src = getVideoURI("/media/movie_5");

var button = document.getElementById("prompt-button");
button.onclick = t.step_func(() => {
v.remote
.prompt()
.then(t.unreached_func())
.catch(
t.step_func_done((error) =>
assert_equals(error.name, "NotAllowedError")
)
);
});
}, "Test that promise is rejected when user cancels device selection.");
markafoltz marked this conversation as resolved.
Show resolved Hide resolved
</script>
</html>
51 changes: 51 additions & 0 deletions remote-playback/prompt-and-select-device-manual.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<title>Test that promise is resolved when user selects a device.</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/media.js"></script>
<body>
<div id="prep">
<p>Please make sure a device for remote playback is <b>available.</b></p>
<button id="prompt-button-prep">Show devices</button>
<button id="start-button">Start test</button>
</div>
<div id="pick-device" style="display: none">
<p>
Click the button below to prompt for a remote playback device and select
one!
</p>
<button id="prompt-button">Pick device</button>
</div>
</body>
<script>
var v = document.createElement("video");
markafoltz marked this conversation as resolved.
Show resolved Hide resolved
v.src = getVideoURI("/media/movie_5");

var startButton = document.getElementById("start-button");
startButton.onclick = function () {
var prep = document.getElementById("prep");
prep.style.display = "none";
var pickDeviceOptions = document.getElementById("pick-device");
pickDeviceOptions.style.display = "block";
};
var promptPrepButton = document.getElementById("prompt-button-prep");
promptPrepButton.onclick = function () {
v.remote
.prompt()
.then(() => {})
.catch(() => {});
};
setup({
explicit_timeout: true,
});
async_test((t) => {
var button = document.getElementById("prompt-button");
button.onclick = t.step_func_done(() => {
promise_test(() => {
return v.remote.prompt();
}, "Prompt resolves");
});
}, "Test that promise is resolved when user selects a device.");
markafoltz marked this conversation as resolved.
Show resolved Hide resolved
</script>
</html>
65 changes: 65 additions & 0 deletions remote-playback/prompt-and-watch-availability-no-device-manual.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html>
<title>
Test that watchAvailability returned false when there is no device for the user to select.
</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/media.js"></script>
<body>
<div id="prep">
<p>Please make sure <b>no device is available</b> for remote playback.</p>
<button id="prompt-button-prep">Show devices</button>
<button id="start-button">Start test</button>
</div>
<div id="pick-device" style="display: none">
<p>
Click the button below to prompt for a remote playback device and select
Copy link
Member

Choose a reason for hiding this comment

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

This instruction needs updating.

one if available, otherwise cancel!
</p>
<button id="prompt-button">Pick device</button>
</div>
</body>
<script>
var v = document.createElement("video");
v.src = getVideoURI("/media/movie_5");

var startButton = document.getElementById("start-button");
startButton.onclick = function () {
var prep = document.getElementById("prep");
prep.style.display = "none";
var pickDeviceOptions = document.getElementById("pick-device");
pickDeviceOptions.style.display = "block";
};
var promptPrepButton = document.getElementById("prompt-button-prep");
promptPrepButton.onclick = function () {
v.remote.prompt().then(() => {}).catch(() => {});
};
setup({
explicit_timeout: true,
});
async_test((t) => {
var deviceAvailable = false;

function callback(available) {
deviceAvailable = available;
}

var button = document.getElementById("prompt-button");
button.onclick = function () {
v.remote.watchAvailability(t.step_func(callback)).then(
t.step_func(() => {
v.remote
.prompt()
.then(t.unreached_func("A device was selected."))
.catch(() => {
Copy link
Member

Choose a reason for hiding this comment

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

My reading of the spec is that this must be rejected with NotFoundError. Can you add an expectation for that?

If remote playback is unavailable and will remain so before the request for user permission is complete, reject promise with a NotFoundError exception and abort all remaining steps.

assert_false(deviceAvailable);
t.done();
});
}),
t.unreached_func()
);
};
}, "Test that watchAvailability returned false when there is no device for the user to select.");
markafoltz marked this conversation as resolved.
Show resolved Hide resolved
</script>
</html>
69 changes: 69 additions & 0 deletions remote-playback/prompt-and-watch-availability-with-device-manual.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html>
<title>
Test that watchAvailability returned true when user selects device.
</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/media.js"></script>
<body>
<div id="prep">
<p>Please make sure a device for remote playback is <b>available.</b></p>
<button id="prompt-button-prep">Show devices</button>
<button id="start-button">Start test</button>
</div>
<div id="pick-device" style="display: none">
<p>
Click the button below to prompt for a remote playback device and select
one!
</p>
<button id="prompt-button">Pick device</button>
</div>
</body>
<script>
var v = document.createElement("video");
v.src = getVideoURI("/media/movie_5");

var startButton = document.getElementById("start-button");
startButton.onclick = function () {
var prep = document.getElementById("prep");
prep.style.display = "none";
var pickDeviceOptions = document.getElementById("pick-device");
pickDeviceOptions.style.display = "block";
};
var promptPrepButton = document.getElementById("prompt-button-prep");
promptPrepButton.onclick = function () {
v.remote.prompt().then(() => {}).catch(() => {});
};
setup({
explicit_timeout: true,
});
async_test((t) => {
var deviceAvailable = false;

function callback(available) {
deviceAvailable = available;
}

var button = document.getElementById("prompt-button");
button.onclick = function () {
v.remote.watchAvailability(t.step_func(callback)).then(
t.step_func(() => {
v.remote
.prompt()
.then(() => {
assert_true(deviceAvailable);
t.done();
})
.catch(
t.unreached_func(
"Selecting a remote device was not successful."
)
);
}),
t.unreached_func()
);
};
}, "Test that watchAvailability returned true when user selects device.");
markafoltz marked this conversation as resolved.
Show resolved Hide resolved
</script>
</html>
74 changes: 74 additions & 0 deletions remote-playback/remote-video-control-pausing-manual.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html>
<title>Test if video is playing on remote device.</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/media.js"></script>
<style>
Copy link
Member

Choose a reason for hiding this comment

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

This is a super minor thing, but consider putting this in an external stylesheet so it can be used by all the tests.

button {
padding: 2em;
}
</style>
<body>
<div id="pick-device">
<p>
Click the button below to prompt for a remote playback device and select
one!
</p>
<p>
<button id="prompt-button">Pick device</button>
</p>
</div>
<video src="/media/green-at-15.mp4" id="video"></video>
<div id="evaluate" style="display: none">
<p>Did the playback on the remote device pause and show the following timestamp? (can vary by some frames)</p>
<p id="timestamp" style="font-weight:bold;"></p>
<p>
<button id="yes">Yes</button>
</p>
<p>
<button id="no">No</button>
</p>
</div>
</body>
<script>
var v = document.getElementById("video");

setup({
explicit_timeout: true,
});
async_test((t) => {
var button = document.getElementById("prompt-button");
button.onclick = t.step_func(() => {
promise_test(() => {
return v.remote.prompt().then(() => {
v.play();
});
}, "Prompt resolves");
});

var timestampLabel = document.getElementById("timestamp");
v.ontimeupdate = function () {
var seconds = Math.floor(v.currentTime) + "";
var frames = Math.ceil((v.currentTime - seconds) * 30) + "";
timestampLabel.innerText = seconds.padStart(2, "0") + ":" + frames.padStart(2, "0");
if (v.currentTime >= 2) {
v.pause();
document.getElementById("evaluate").style.display = "block";
}
}

function evaluate(success) {
assert_true(success, "Video paused and has correct play position.");
}
var yesButton = document.getElementById("yes");
var noButton = document.getElementById("no");
yesButton.onclick = t.step_func_done(function () {
Copy link
Member

Choose a reason for hiding this comment

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

Shorter as:

document.getElementById("yes").onclick = ...

evaluate(true);
});
noButton.onclick = t.step_func_done(function () {
evaluate(false);
});
}, "Test if video is playing on remote device.");
markafoltz marked this conversation as resolved.
Show resolved Hide resolved
</script>
</html>
Loading