From ebce0a3a34d665b7622d959d2f285fb2ae324eba Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 26 Aug 2022 15:51:22 +0200
Subject: [PATCH] Cypress login with helper function

---
 client/src/components/MainNavigationBar.vue | 12 ++--
 cypress.config.js                           |  1 +
 cypress/e2e/helpers.js                      |  7 +++
 cypress/e2e/login.cy.js                     | 61 ++++++++++++++-------
 cypress/support/commands.js                 |  2 +-
 5 files changed, 56 insertions(+), 27 deletions(-)
 create mode 100644 cypress/e2e/helpers.js

diff --git a/client/src/components/MainNavigationBar.vue b/client/src/components/MainNavigationBar.vue
index ec3a2f6b..14ba362e 100644
--- a/client/src/components/MainNavigationBar.vue
+++ b/client/src/components/MainNavigationBar.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import * as log from 'loglevel';
 
-import { onMounted, reactive} from 'vue';
-import { useUserStore } from '@/stores/user';
-import { useLearningPathStore } from '@/stores/learningPath';
-import { useRoute, useRouter } from 'vue-router';
-import { useAppStore } from '@/stores/app';
+import {onMounted, reactive} from 'vue';
+import {useUserStore} from '@/stores/user';
+import {useLearningPathStore} from '@/stores/learningPath';
+import {useRoute, useRouter} from 'vue-router';
+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>
diff --git a/cypress.config.js b/cypress.config.js
index 8c6fd94d..f0e2baa4 100644
--- a/cypress.config.js
+++ b/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) {
diff --git a/cypress/e2e/helpers.js b/cypress/e2e/helpers.js
new file mode 100644
index 00000000..362b9496
--- /dev/null
+++ b/cypress/e2e/helpers.js
@@ -0,0 +1,7 @@
+export const login = (username, password) => {
+  cy.request({
+    method: 'POST',
+    url: '/core/login/',
+    body: { username, password },
+  })
+}
diff --git a/cypress/e2e/login.cy.js b/cypress/e2e/login.cy.js
index e0c12afd..20d073f9 100644
--- a/cypress/e2e/login.cy.js
+++ b/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', () => {
-    cy.visit('/');
+  it("can login to app with username/password", () => {
+    cy.visit("/");
 
-    cy.get('#username').type('admin');
-    cy.get('#password').type('test');
+    cy.get("#username").type("admin");
+    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');
-  });
-})
+});
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index a11df3cc..9706678f 100644
--- a/cypress/support/commands.js
+++ b/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);
 });