test: add functional test (#79)

* test: add functional test

* build: bump version

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Youtube Share Clip",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Share sections of Youtube videos.",
   "icons": {
     "16": "images/icon-16.png",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "youtube-share-clip",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Share sections of Youtube videos.",
   "author": "Elias Papavasileiou",
   "license": "ISC",

src/extension.js

@@ -337,7 +337,7 @@ const main = () => {
 Sentry.init({
   dsn: "https://ca0cb03d7d29fbb1b09c52fcba66144d@o4507045965660160.ingest.us.sentry.io/4507046846464000",
   attachStacktrace: true,
-  release: "0.6.0",
+  release: "0.6.1",
   environment: process.env.NODE_ENV,
   integrations: [captureConsoleIntegration({ levels: ["error"] })],
 });

src/tests/constants.js

@@ -5,8 +5,12 @@ export const pollingTimeoutInSeconds = 30;
 export const youtubeLandingPage = "https://www.youtube.com/";
 export const youtubeTestVideoPage =
   "https://www.youtube.com/watch?v=Czvldzei4DI";
+export const youtubeTestVideoLink =
+  "https://www.youtube.com/embed/Czvldzei4DI?start=5&end=10&autoplay=true";
 export const testVideoSearchTerm = "phonodia tourdion";
 export const testVideoTitle = "Tourdion";
+export const testStartAtTime = "0:05";
+export const testEndAtTime = "0:10";
 export const menuIconPathSelector =
   'path[d="M12 16.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5zM10.5 12c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5-1.5.67-1.5 1.5zm0-6c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5-1.5.67-1.5 1.5z"]';
 export const languageIconPathSelector =

src/tests/extension.test.js

@@ -2,6 +2,7 @@ import { youtubeLandingPage, youtubeTestVideoPage } from "./constants.js";
 import { test } from "./fixtures.js";
 import {
   clickOnAVideo,
+  gets5SecondsLink,
   rejectCookies,
   rendersInputElements,
   searchForVideo,
@@ -39,3 +40,14 @@ test.describe("Renders input elements", () => {
     await rendersInputElements(page);
   });
 });
+
+test.describe("Gets a link to a section of a video", () => {
+  test("Gets link", async ({ page, context }) => {
+    await visitPage(page, youtubeTestVideoPage);
+    await rejectCookies(page);
+    await rendersInputElements(page);
+    await context.grantPermissions(["clipboard-read"]);
+    await gets5SecondsLink(page);
+    await context.clearPermissions();
+  });
+});

src/tests/utils.js

@@ -15,8 +15,11 @@ import {
   pollingTimeoutInSeconds,
   singleActionTimeout,
   sleepTime,
+  testEndAtTime,
+  testStartAtTime,
   testVideoSearchTerm,
   testVideoTitle,
+  youtubeTestVideoLink,
 } from "./constants.js";
 import { sleep } from "../utils/other.js";
 
@@ -222,3 +225,69 @@ export const switchLanguage = async (page, language) => {
   });
   await languageButton.click();
 };
+
+/**
+ * @param {Page} page
+ */
+const clickStartAtCheckbox = async (page) => {
+  let startAtCheckbox = page.locator(
+    `#${startAtContainerID} #checkboxContainer`,
+  );
+  await startAtCheckbox.click();
+};
+
+/**
+ * @param {Page} page
+ */
+const fillStartAtInput = async (page) => {
+  let startAtInput = page.locator(
+    `#${startAtContainerID} #start-at-timestamp input`,
+  );
+  await startAtInput.fill(testStartAtTime);
+};
+
+/**
+ * @param {Page} page
+ */
+const clickEndAtCheckbox = async (page) => {
+  let endAtCheckbox = page.locator(`#${endAtContainerID} #checkboxContainer`);
+  await endAtCheckbox.click();
+};
+
+/**
+ * @param {Page} page
+ */
+const fillEndAtInput = async (page) => {
+  let endAtInput = page.locator(
+    `#${endAtContainerID} #start-at-timestamp input`,
+  );
+  await endAtInput.fill(testEndAtTime);
+};
+
+/**
+ * @param {Page} page
+ */
+const clickCopyLinkButton = async (page) => {
+  let copyLinkButton = page.locator("#copy-link button");
+  await copyLinkButton.click();
+};
+
+/**
+ * @param {Page} page
+ * @returns {Promise<string>}
+ */
+const readClipboard = async (page) =>
+  page.evaluate(() => navigator.clipboard.readText());
+
+/**
+ * @param {Page} page
+ */
+export const gets5SecondsLink = async (page) => {
+  await clickStartAtCheckbox(page);
+  await fillStartAtInput(page);
+  await clickEndAtCheckbox(page);
+  await fillEndAtInput(page);
+  await clickCopyLinkButton(page);
+  const clipboardContents = await readClipboard(page);
+  expect(clipboardContents).toBe(youtubeTestVideoLink);
+};