test: [#232] added tests for generating the magnet link on torrents list page

Author: MMelchor

components/torrent/TorrentList.vue

@@ -32,7 +32,7 @@
                 <ArrowDownTrayIcon class="w-6" />
               </div>
               <div class="flex flex-col items-center justify-center w-10 h-10 ml-2 duration-500 cursor-pointer text-base-content/50 hover:text-base-content shrink-0 rounded-2xl">
-                <a class="flex items-center" :href="`magnet:?xt=urn:btih:${torrent.info_hash}`" @click.stop>
+                <a data-cy="torrent-list-magnet-link" class="flex items-center" :href="`magnet:?xt=urn:btih:${torrent.info_hash}`" @click.stop>
                   <LinkIcon class="w-6" />
                 </a>
               </div>

components/torrent/TorrentTable.vue

@@ -37,7 +37,7 @@
                   <ArrowDownTrayIcon class="w-5" />
                 </div>
                 <div class="flex flex-col items-center justify-center w-10 h-10 ml-2 duration-500 cursor-pointer text-base-content/50 hover:text-base-content shrink-0">
-                  <a class="flex items-center" :href="`magnet:?xt=urn:btih:${torrent.info_hash}`">
+                  <a data-cy="torrent-table-magnet-link" class="flex items-center" :href="`magnet:?xt=urn:btih:${torrent.info_hash}`">
                     <LinkIcon class="w-5" />
                   </a>
                 </div>

cypress/e2e/contexts/torrent/specs/list/magnet_link.cy.ts

@@ -0,0 +1,43 @@
+import { RegistrationForm, random_user_registration_data } from "../../../user/registration";
+import { generateRandomTestTorrentInfo } from "../../test_torrent_info";
+
+describe("A guest user", () => {
+  let registration_form: RegistrationForm;
+
+  before(() => {
+    registration_form = random_user_registration_data();
+    cy.register_and_login(registration_form);
+    // Generates and upload a random torrent file for the tests
+    const torrent_info = generateRandomTestTorrentInfo();
+    Cypress.env("torrent_info", torrent_info);
+    cy.upload_torrent(torrent_info);
+    // Stores the infoHash in the Cypress's env variables
+    cy.get("[data-cy=\"torrent-action-info-hash\"]").invoke("text").then((infoHash) => {
+      Cypress.env("infoHash", infoHash);
+    });
+  });
+
+  beforeEach(() => {
+    cy.visit("/torrents");
+  });
+
+  after(() => {
+    cy.delete_user_from_database(registration_form.username);
+  });
+
+  it("should be able get the a torrent magnet link from the torrents list", () => {
+    // Get the magnet link
+    cy.get("[data-cy=\"torrent-list-magnet-link\"]").invoke("attr", "href").then((href) => {
+      expect(href).to.include(`magnet:?xt=urn:btih:${Cypress.env("infoHash")}`);
+    });
+  });
+
+  it("should be able get the a torrent magnet link from the torrents table", () => {
+    // Sets the layout to "table"
+    cy.get("[data-cy=\"torrents-table-layout-selector\"]").click();
+    // Gets the magnet link
+    cy.get("[data-cy=\"torrent-table-magnet-link\"]").invoke("attr", "href").then((href) => {
+      expect(href).to.include(`magnet:?xt=urn:btih:${Cypress.env("infoHash")}`);
+    });
+  });
+});

pages/torrents.vue

@@ -33,7 +33,7 @@
         <button class="tab" :class="{ 'tab-active': layout === 'default' }" @click="layout = 'default'">
           Default
         </button>
-        <button class="tab" :class="{ 'tab-active': layout === 'table' }" @click="layout = 'table'">
+        <button data-cy="torrents-table-layout-selector" class="tab" :class="{ 'tab-active': layout === 'table' }" @click="layout = 'table'">
           Table
         </button>
       </div>