test: [#229] E2E test for deleting tags

Author: MMelchor

cypress.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from "cypress";
 import { grantAdminRole, deleteUser } from "./cypress/e2e/contexts/user/tasks";
 import { deleteTorrent } from "./cypress/e2e/contexts/torrent/tasks";
 import { deleteCategory, addCategory } from "./cypress/e2e/contexts/category/tasks";
+import { deleteTag, addTag } from "./cypress/e2e/contexts/tag/tasks";
 import { DatabaseConfig } from "./cypress/e2e/common/database";
 
 function databaseConfig (config: Cypress.PluginConfigOptions): DatabaseConfig {
@@ -22,6 +23,13 @@ export default defineConfig({
         addCategory: ({ name }) => {
           return addCategory(name, databaseConfig(config));
         },
+        // Tag context
+        deleteTag: ({ name }) => {
+          return deleteTag(name, databaseConfig(config));
+        },
+        addTag: ({ name }) => {
+          return addTag(name, databaseConfig(config));
+        },
         // Torrent context
         deleteTorrent: ({ infohash }) => {
           return deleteTorrent(infohash, databaseConfig(config));

cypress/e2e/contexts/tag/commands.ts

@@ -0,0 +1,9 @@
+// Custom commands for tag context
+
+Cypress.Commands.add("delete_tag_from_database", (name) => {
+  cy.task("deleteTag", { name });
+});
+
+Cypress.Commands.add("add_tag_to_database", (name) => {
+  cy.task("addTag", { name });
+});

cypress/e2e/contexts/tag/fixtures.ts

@@ -0,0 +1,7 @@
+export function random_tag_name (): string {
+  return `tag-${random_tag_id()}`;
+}
+
+function random_tag_id (): number {
+  return Math.floor(Math.random() * 1000000);
+}

cypress/e2e/contexts/tag/specs/delete.cy.ts

@@ -0,0 +1,64 @@
+import { RegistrationForm, random_user_registration_data } from "../../user/registration";
+import { random_tag_name } from "../fixtures";
+
+describe("The admin user", () => {
+  let registration_form: RegistrationForm;
+
+  before(() => {
+    registration_form = random_user_registration_data();
+    cy.register_as_admin_and_login(registration_form);
+  });
+
+  after(() => {
+    cy.delete_user_from_database(registration_form.username);
+  });
+
+  it("should be able to delete a tag", () => {
+    const tag_name = random_tag_name();
+
+    cy.add_tag_to_database(tag_name);
+
+    cy.go_to_settings();
+
+    // Click tags tab
+    cy.contains("a", "tags").click();
+
+    // Delete the tag
+    cy.get(`button[data-cy="delete-tag-${tag_name}"]`).click();
+
+    // Confirm alert should pop up
+    cy.on("window:confirm", (str) => {
+      expect(str).to.equal(`Are you sure you want to delete ${tag_name}?`);
+    });
+
+    // Confirm delete
+    cy.on("window:confirm", () => true);
+
+    cy.get(`[data-cy="delete-tag-${tag_name}"]`).should("not.exist");
+  });
+});
+
+describe("A non admin authenticated user", () => {
+  let registration_form: RegistrationForm;
+
+  before(() => {
+    registration_form = random_user_registration_data();
+    cy.register_and_login(registration_form);
+  });
+
+  after(() => {
+    cy.delete_user_from_database(registration_form.username);
+  });
+
+  it("should not be able to delete tags", () => {
+    cy.visit("/admin/settings/tags");
+    cy.contains("Please login to manage admin settings.");
+  });
+});
+
+describe("A guest user", () => {
+  it("should not be able to delete a tag", () => {
+    cy.visit("/admin/settings/tags");
+    cy.contains("Please login to manage admin settings.");
+  });
+});

cypress/e2e/contexts/tag/tasks.ts

@@ -0,0 +1,39 @@
+// Custom tasks for tag context
+
+import { DatabaseConfig, DatabaseQuery, runDatabaseQuery } from "../../common/database";
+
+// Task to delete a tag
+export const deleteTag = async (name: string, db_config: DatabaseConfig): Promise<string> => {
+  try {
+    const result = await runDatabaseQuery(deleteTagQuery(name), db_config);
+    return name;
+  } catch (err) {
+    return await Promise.reject(err);
+  }
+};
+
+// Task to add a new tag
+export const addTag = async (name: string, db_config: DatabaseConfig): Promise<string> => {
+  try {
+    const result = await runDatabaseQuery(addTagQuery(name), db_config);
+    return name;
+  } catch (err) {
+    return await Promise.reject(err);
+  }
+};
+
+// Database query specifications
+
+function deleteTagQuery (name: string): DatabaseQuery {
+  return {
+    query: "DELETE FROM torrust_torrent_tags WHERE name = ?",
+    params: [name]
+  };
+}
+
+function addTagQuery (name: string): DatabaseQuery {
+  return {
+    query: "INSERT INTO torrust_torrent_tags (name) VALUES (?)",
+    params: [name]
+  };
+}

cypress/support/commands.ts

@@ -1,6 +1,7 @@
 import "../e2e/contexts/user/commands";
 import "../e2e/contexts/torrent/commands";
 import "../e2e/contexts/category/commands";
+import "../e2e/contexts/tag/commands";
 import "../e2e/common/commands";
 import { TestTorrentInfo } from "cypress/e2e/contexts/torrent/test_torrent_info";
 import { RegistrationForm } from "../e2e/contexts/user/registration";
@@ -31,6 +32,10 @@ declare global {
       // Category context
       delete_category_from_database(name: string): Chainable<void>
       add_category_to_database(name: string): Chainable<void>
+
+      // Tag context
+      delete_tag_from_database(name: string): Chainable<void>
+      add_tag_to_database(name: string): Chainable<void>
     }
   }
 }

pages/admin/settings/tags.vue

@@ -4,7 +4,7 @@
       <template v-for="tag in tags">
         <div class="flex justify-between p-2 rounded bg-base-100">
           <span class="text-base-content">{{ tag.name }}</span>
-          <button class="text-error-content hover:text-error" @click="deleteTag(tag)">
+          <button :data-cy="getDeleteButtonDataCy(tag.name)" class="text-error-content hover:text-error" @click="deleteTag(tag)">
             Delete
           </button>
         </div>
@@ -31,6 +31,14 @@ const rest = useRestApi().value;
 const newTag = ref("");
 const addingTag = ref(false);
 
+onBeforeMount(() => {
+  getTags();
+});
+
+function getDeleteButtonDataCy (name: string) {
+  return "delete-tag-" + name.toLowerCase().replace(/ /g, "-");
+}
+
 function addTag () {
   if (newTag.value) {
     addingTag.value = true;