diff --git a/.config/.cypress.js b/.config/.cypress.js index 5d8e10485..da8f635df 100644 --- a/.config/.cypress.js +++ b/.config/.cypress.js @@ -3,5 +3,35 @@ module.exports = { // Base URL is set via Docker environment variable viewportHeight: 1000, viewportWidth: 1400, + + // https://docs.cypress.io/api/plugins/browser-launch-api#Changing-browser-preferences + setupNodeEvents(on, _config) { + on("before:browser:launch", (browser, launchOptions) => { + if (browser.family === "chromium" && browser.name !== "electron") { + // auto open devtools + launchOptions.args.push("--auto-open-devtools-for-tabs"); + + // TODO (clipboard): We use the obsolete clipboard API from browsers, i.e. + // document.execCommand("copy"). There's a new Clipboard API that is supported + // by modern browsers. Once we switch to that API, use the following code + // to allow requesting permission (clipboard permission) in a non-secure + // context (http). Remaining TODO in this case: search for the equivalent + // flag in Firefox & Electron (if we also want to test them). + // launchOptions.args.push("--unsafely-treat-insecure-origin-as-secure=http://mampf:3000"); + } + + if (browser.family === "firefox") { + // auto open devtools + launchOptions.args.push("-devtools"); + } + + if (browser.name === "electron") { + // auto open devtools + launchOptions.preferences.devTools = true; + } + + return launchOptions; + }); + }, }, }; diff --git a/spec/cypress/e2e/vouchers_spec.cy.js b/spec/cypress/e2e/vouchers_spec.cy.js index b277a1297..02321ee5f 100644 --- a/spec/cypress/e2e/vouchers_spec.cy.js +++ b/spec/cypress/e2e/vouchers_spec.cy.js @@ -68,6 +68,17 @@ describe("If the lecture is not a seminar", () => { testInvalidateVoucher(role); }); }); + + it.skip("copies the voucher hash to the clipboard", function () { + ROLES.filter(role => role !== "speaker").forEach((role) => { + cy.getBySelector(`create-${role}-voucher-btn`).click(); + cy.getBySelector(`${role}-voucher-secure-hash`).then(($hash) => { + const hashText = $hash.text(); + cy.getBySelector(`copy-${role}-voucher-btn`).click(); + cy.assertCopiedToClipboard(hashText); + }); + }); + }); }); }); diff --git a/spec/cypress/support/commands.js b/spec/cypress/support/commands.js index f965e0486..5d2a6db15 100644 --- a/spec/cypress/support/commands.js +++ b/spec/cypress/support/commands.js @@ -20,6 +20,57 @@ Cypress.Commands.add("clickExpectNewTab", { prevSubject: true }, ($subject, args return cy.wrap($subject).invoke("removeAttr", "target").click(args); }); +Cypress.Commands.add("assertCopiedToClipboard", (_expectedText) => { + cy.fail("Not implemented yet"); + + // An old method would consist of something like this: + // adapted from https://stackoverflow.com/a/69571115 + // and https://stackoverflow.com/a/33928558 + + ////////////////////////////////////////////////////////////////////////////// + // NEW PROPOSED SOLUTION for the new Clipboard API + ////////////////////////////////////////////////////////////////////////////// + + // TODO (clipboard): We currently use the obsolete clipboard API from browsers, + // i.e. document.execCommand("copy") via the clipboard.js library. + // There's a new Clipboard API that is supported by modern browsers. + // Once we switch to that API, use the following code to test copying to + // the clipboard. Also see this GitHub issue for more information: + // https://github.com/cypress-io/cypress/issues/2752 + // + // Note that another option to test the clipboard content then would be + // https://github.com/cypress-io/cypress/issues/2752#issuecomment-1039285381 + // which wouldn't even require requesting permissions but might have its + // own limitations. + + // Request clipboard permissions + // by https://stackoverflow.com/a/73329952/9655481 + // Note that this won't work by default in a non-secure context (http), so we need to + // pass the flag --unsafely-treat-insecure-origin-as-secure=http://mampf:3000 + // to the browser when starting it (see the cypress config) + // cy.wrap(Cypress.automation("remote:debugger:protocol", { + // command: "Browser.grantPermissions", + // params: { + // permissions: ["clipboardReadWrite", "clipboardSanitizedWrite"], + // }, + // })); + + // Make sure clipboard permissions were granted + // https://stackoverflow.com/questions/61650737/how-to-fetch-copied-to-clipboard-content-in-cypress/73329952#comment137190789_69571115 + // cy.window().its("navigator.permissions") + // .then(api => api.query({ name: "clipboard-read" })) + // .its("state").should("equal", "granted"); + + // https://stackoverflow.com/a/75928308/ + // cy.window().its("navigator.clipboard") + // .then(clip => clip.readText()) + // .should("equal", expectedText); +}); + +//////////////////////////////////////////////////////////////////////////////// +// Custom commands for backend interaction +//////////////////////////////////////////////////////////////////////////////// + Cypress.Commands.add("cleanDatabase", () => { return BackendCaller.callCypressRoute("database_cleaner", "cy.cleanDatabase()", {}); });