feat: Add basic cypress testing

Part-of: <https://dev.funkwhale.audio/funkwhale/funkwhale/-/merge_requests/1795>

front/cypress/e2e/favorite.cy.ts

@@ -0,0 +1,31 @@
+describe('Favorites', () => {
+  it('can be done from album list view', () => {
+    cy.login()
+
+    cy.visit('/')
+    cy.wait(4000)
+
+    cy.get('.item.collapse-button-wrapper').click()
+    cy.contains('Albums').click()
+
+    cy.get('.component-album-card').first().within(() => {
+      cy.get('a').first().click()
+    })
+
+    cy.get('.track-row.row').first().trigger('hover').within(() => {
+      cy.get('.favorite-icon').then(($favButton) => {
+        $favButton.click()
+        // In case everything worked the favorite button should be pink
+        cy.wrap($favButton).should('have.class', 'pink')
+
+      })
+
+      cy.get('.favorite-icon.pink').then(($unfavButton) => {
+        $unfavButton.click()
+        // In case everything worked the favorite button shouldn't be pink
+        // anymore
+        cy.wrap($unfavButton).should('not.have.class', 'pink')
+      })
+    })
+  })
+})

front/cypress/e2e/login.cy.ts

@@ -0,0 +1,19 @@
+describe('The login', () => {
+  it('is working with UI', () => {
+    cy.fixture('testuser.json').then((user) => {
+      cy.visit('/login')
+      cy.get('input[name=username]').type(user['username'])
+      cy.get('input[name=password]').type(`${user['password']}{enter}`)
+    })
+
+    cy.url().should('include', '/library')
+    cy.getCookie('sessionid').should('exist')
+  })
+
+  it('is working without UI', () => {
+    cy.login()
+    cy.visit('/library')
+    cy.get('.ui.avatar.circular.label').should('exist')
+    cy.getCookie('sessionid').should('exist')
+  })
+})

front/cypress/fixtures/testuser.json

@@ -0,0 +1,4 @@
+{
+  "username": "demo",
+  "password": "testing1234"
+}

front/cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

front/cypress/support/commands.ts

@@ -0,0 +1,27 @@
+// Currently we cannot login purely programmatically, so we need to use the
+// graphical login until the vue3 branch is merged
+Cypress.Commands.add('login', () => {
+  cy.fixture('testuser.json').then((user) => {
+    var username = user["username"]
+    var password = user["password"]
+    cy.visit('/login')
+    cy.wait(1000)
+    cy.getCookie('csrftoken').then(($cookie) => {
+      const csrfToken = $cookie?.value
+
+      cy.request({
+        method: 'POST',
+        url: '/api/v1/users/login',
+        form: true,
+        headers: {
+          'X-CSRFTOKEN': csrfToken,
+          Referer: Cypress.config().baseUrl + '/login',
+        },
+        body: {
+          username,
+          password
+        },
+      })
+    })
+  })
+})

front/cypress/support/e2e.ts

@@ -0,0 +1,9 @@
+import './commands'
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      login(): Chainable<JQuery<HTMLElement>>
+    }
+  }
+}

front/cypress/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "node"]
+  },
+  "include": ["**/*.ts"],
+  "isolatedModules": false
+}