Cypress login with helper function

client/src/components/MainNavigationBar.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import * as log from 'loglevel';
 
-import { onMounted, reactive} from 'vue';
+import {onMounted, reactive} from 'vue';
-import { useUserStore } from '@/stores/user';
+import {useUserStore} from '@/stores/user';
-import { useLearningPathStore } from '@/stores/learningPath';
+import {useLearningPathStore} from '@/stores/learningPath';
-import { useRoute, useRouter } from 'vue-router';
+import {useRoute, useRouter} from 'vue-router';
-import { useAppStore } from '@/stores/app';
+import {useAppStore} from '@/stores/app';
 import IconLogout from "@/components/icons/IconLogout.vue";
 import IconSettings from "@/components/icons/IconSettings.vue";
 import ItDropdown from "@/components/ui/ItDropdown.vue";
@@ -146,6 +146,7 @@ const profileDropdownData = [
                 v-if="userStore.loggedIn"
                 to="/messages"
                 class="nav-item flex flex-row items-center"
+                data-cy="messages-link"
               >
                 <it-icon-message class="w-8 h-8 mr-6"/>
               </router-link>
@@ -213,6 +214,7 @@ const profileDropdownData = [
             <router-link
               to="/messages"
               class="nav-item flex flex-row items-center"
+              data-cy="messages-link"
             >
               <it-icon-message class="w-8 h-8 mr-6"/>
             </router-link>

cypress.config.js

@@ -13,6 +13,7 @@ module.exports = defineConfig({
     toConsole: true,
   },
   e2e: {
+    experimentalSessionAndOrigin: true,
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {

cypress/e2e/helpers.js

@@ -0,0 +1,7 @@
+export const login = (username, password) => {
+  cy.request({
+    method: 'POST',
+    url: '/core/login/',
+    body: { username, password },
+  })
+}

cypress/e2e/login.cy.js

@@ -1,28 +1,47 @@
-describe('login', () => {
+import { login } from "./helpers";
+
+describe("login", () => {
   beforeEach(() => {
-    cy.manageCommand('cypress_reset');
+    cy.manageCommand("cypress_reset");
-  })
+  });
 
-  it('can login to app with username/password', () => {
+  it("can login to app with username/password", () => {
-    cy.visit('/');
+    cy.visit("/");
 
-    cy.get('#username').type('admin');
+    cy.get("#username").type("admin");
-    cy.get('#password').type('test');
+    cy.get("#password").type("test");
+
+    cy.get('[data-cy="login-button"]').click();
+    cy.request("/api/core/me").its("status").should("eq", 200);
+
+    cy.get('[data-cy="welcome-message"]').should(
+      "contain",
+      "Willkommen, Peter"
+    );
+  });
+
+  it("can login with helper function", () => {
+    login("admin", "test");
+    cy.visit("/");
+    cy.request("/api/core/me").its("status").should("eq", 200);
+    cy.get('[data-cy="welcome-message"]').should(
+      "contain",
+      "Willkommen, Peter"
+    );
+  });
+
+  it("login will redirect to requestet page", () => {
+    cy.visit("/learningpath/versicherungsvermittlerin");
+    cy.get("h1").should("contain", "Login");
+
+    cy.get("#username").type("admin");
+    cy.get("#password").type("test");
 
     cy.get('[data-cy="login-button"]').click();
 
-    cy.get('[data-cy="welcome-message"]').should('contain', 'Willkommen, Peter');
+    cy.get('[data-cy="learning-path-title"]').should(
+      "contain",
+      "Versicherungsvermittler"
+    );
   });
-
+});
-  it('login will redirect to requestet page', () => {
-    cy.visit('/learningpath/versicherungsvermittlerin');
-    cy.get('h1').should('contain', 'Login');
-
-    cy.get('#username').type('admin');
-    cy.get('#password').type('test');
-
-    cy.get('[data-cy="login-button"]').click();
-
-    cy.get('[data-cy="learning-path-title"]').should('contain', 'Versicherungsvermittler');
-  });
-})

cypress/support/commands.js

@@ -53,7 +53,7 @@
 const _ = Cypress._;
 
 Cypress.Commands.add('manageCommand', (command, preCommand = '') => {
-  const execCommand = `${preCommand} python3 server/manage.py ${command} --settings=config.settings.test_cypress`;
+  const execCommand = `${preCommand} python server/manage.py ${command} --settings=config.settings.test_cypress`;
   console.log(execCommand);
   return cy.exec(execCommand);
 });