From 75a209e04fa26f195b1522ab3f79fa3ff2e4ab86 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 26 Aug 2022 15:06:22 +0200
Subject: [PATCH] Upgrade to Cypress 10, add first login test

---
 client/src/views/CockpitView.vue              |   2 +-
 client/src/views/LoginView.vue                |   1 +
 cypress.config.js                             |  23 +++
 cypress.json                                  |  14 --
 cypress/e2e/login.cy.js                       |  17 ++
 .../integration/simpletodo/simpletodo.spec.js | 148 ------------------
 cypress/support/{index.js => e2e.js}          |   0
 package.json                                  |   8 +-
 server/vbv_lernwelt/completion/models.py      |   4 +-
 9 files changed, 46 insertions(+), 171 deletions(-)
 create mode 100644 cypress.config.js
 delete mode 100644 cypress.json
 create mode 100644 cypress/e2e/login.cy.js
 delete mode 100644 cypress/integration/simpletodo/simpletodo.spec.js
 rename cypress/support/{index.js => e2e.js} (100%)

diff --git a/client/src/views/CockpitView.vue b/client/src/views/CockpitView.vue
index b0dd0a70..ff53dac3 100644
--- a/client/src/views/CockpitView.vue
+++ b/client/src/views/CockpitView.vue
@@ -10,7 +10,7 @@ const userStore = useUserStore();
 
 <template>
   <main class="px-8 py-8 lg:px-12 lg:py-12 bg-gray-200">
-    <h1>Willkommen, {{userStore.first_name}}</h1>
+    <h1 data-cy="welcome-message">Willkommen, {{userStore.first_name}}</h1>
 
     <h2 class="mt-12">Deine Kurse</h2>
 
diff --git a/client/src/views/LoginView.vue b/client/src/views/LoginView.vue
index 9f38b1a8..b3695464 100644
--- a/client/src/views/LoginView.vue
+++ b/client/src/views/LoginView.vue
@@ -48,6 +48,7 @@ const userStore = useUserStore();
 
       <div>
         <input
+          data-cy="login-button"
           type="submit"
           value="Login"
           class="btn-primary"
diff --git a/cypress.config.js b/cypress.config.js
new file mode 100644
index 00000000..8c6fd94d
--- /dev/null
+++ b/cypress.config.js
@@ -0,0 +1,23 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  watchForFileChanges: false,
+  video: false,
+  retries: {
+    runMode: 1,
+    openMode: 0,
+  },
+  reporter: 'junit',
+  reporterOptions: {
+    mochaFile: 'cypress/test-reports/cypress-results-[hash].xml',
+    toConsole: true,
+  },
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config)
+    },
+    baseUrl: 'http://localhost:8001',
+  },
+})
diff --git a/cypress.json b/cypress.json
deleted file mode 100644
index 419d99e8..00000000
--- a/cypress.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "baseUrl": "http://localhost:8001",
-  "watchForFileChanges": false,
-  "video": false,
-  "retries": {
-    "runMode": 1,
-    "openMode": 0
-  },
-  "reporter": "junit",
-  "reporterOptions": {
-    "mochaFile": "cypress/test-reports/cypress-results-[hash].xml",
-    "toConsole": true
-  }
-}
diff --git a/cypress/e2e/login.cy.js b/cypress/e2e/login.cy.js
new file mode 100644
index 00000000..6446aacc
--- /dev/null
+++ b/cypress/e2e/login.cy.js
@@ -0,0 +1,17 @@
+describe('login', () => {
+  beforeEach(() => {
+    cy.manageCommand('cypress_reset');
+  })
+
+  it('can login to app with username/password', () => {
+    cy.visit('/');
+
+    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');
+  });
+
+})
diff --git a/cypress/integration/simpletodo/simpletodo.spec.js b/cypress/integration/simpletodo/simpletodo.spec.js
deleted file mode 100644
index 7024b6d0..00000000
--- a/cypress/integration/simpletodo/simpletodo.spec.js
+++ /dev/null
@@ -1,148 +0,0 @@
-/// <reference types="cypress" />
-
-// Welcome to Cypress!
-//
-// This spec file contains a variety of sample tests
-// for a todo list app that are designed to demonstrate
-// the power of writing tests in Cypress.
-//
-// To learn more about how Cypress works and
-// what makes it such an awesome testing tool,
-// please read our getting started guide:
-// https://on.cypress.io/introduction-to-cypress
-
-describe('example to-do app', () => {
-  beforeEach(() => {
-    cy.manageCommand('cypress_reset');
-
-    cy.visit('/todo/');
-    cy.get("#username").type("cypress@example.com");
-    cy.get("#password").type("test");
-    cy.get('[data-cy="submit"]').click();
-  })
-
-  it.skip('can access simple todo page', () => {
-    cy.get('[data-cy="simple-list-title"]').should('contain', 'Todos');
-  });
-
-  // it('displays two todo items by default', () => {
-  //   // We use the `cy.get()` command to get all elements that match the selector.
-  //   // Then, we use `should` to assert that there are two matched items,
-  //   // which are the two default items.
-  //   cy.get('.todo-list li').should('have.length', 2)
-  //
-  //   // We can go even further and check that the default todos each contain
-  //   // the correct text. We use the `first` and `last` functions
-  //   // to get just the first and last matched elements individually,
-  //   // and then perform an assertion with `should`.
-  //   cy.get('.todo-list li').first().should('have.text', 'Pay electric bill')
-  //   cy.get('.todo-list li').last().should('have.text', 'Walk the dog')
-  // })
-
-  // it('can add new todo items', () => {
-  //   // We'll store our item text in a variable so we can reuse it
-  //   const newItem = 'Feed the cat'
-  //
-  //   // Let's get the input element and use the `type` command to
-  //   // input our new list item. After typing the content of our item,
-  //   // we need to type the enter key as well in order to submit the input.
-  //   // This input has a data-test attribute so we'll use that to select the
-  //   // element in accordance with best practices:
-  //   // https://on.cypress.io/selecting-elements
-  //   cy.get('[data-test=new-todo]').type(`${newItem}{enter}`)
-  //
-  //   // Now that we've typed our new item, let's check that it actually was added to the list.
-  //   // Since it's the newest item, it should exist as the last element in the list.
-  //   // In addition, with the two default items, we should have a total of 3 elements in the list.
-  //   // Since assertions yield the element that was asserted on,
-  //   // we can chain both of these assertions together into a single statement.
-  //   cy.get('.todo-list li')
-  //     .should('have.length', 3)
-  //     .last()
-  //     .should('have.text', newItem)
-  // })
-
-  // it('can check off an item as completed', () => {
-  //   // In addition to using the `get` command to get an element by selector,
-  //   // we can also use the `contains` command to get an element by its contents.
-  //   // However, this will yield the <label>, which is lowest-level element that contains the text.
-  //   // In order to check the item, we'll find the <input> element for this <label>
-  //   // by traversing up the dom to the parent element. From there, we can `find`
-  //   // the child checkbox <input> element and use the `check` command to check it.
-  //   cy.contains('Pay electric bill')
-  //     .parent()
-  //     .find('input[type=checkbox]')
-  //     .check()
-  //
-  //   // Now that we've checked the button, we can go ahead and make sure
-  //   // that the list element is now marked as completed.
-  //   // Again we'll use `contains` to find the <label> element and then use the `parents` command
-  //   // to traverse multiple levels up the dom until we find the corresponding <li> element.
-  //   // Once we get that element, we can assert that it has the completed class.
-  //   cy.contains('Pay electric bill')
-  //     .parents('li')
-  //     .should('have.class', 'completed')
-  // })
-  //
-  // context('with a checked task', () => {
-  //   beforeEach(() => {
-  //     // We'll take the command we used above to check off an element
-  //     // Since we want to perform multiple tests that start with checking
-  //     // one element, we put it in the beforeEach hook
-  //     // so that it runs at the start of every test.
-  //     cy.contains('Pay electric bill')
-  //       .parent()
-  //       .find('input[type=checkbox]')
-  //       .check()
-  //   })
-  //
-  //   it('can filter for uncompleted tasks', () => {
-  //     // We'll click on the "active" button in order to
-  //     // display only incomplete items
-  //     cy.contains('Active').click()
-  //
-  //     // After filtering, we can assert that there is only the one
-  //     // incomplete item in the list.
-  //     cy.get('.todo-list li')
-  //       .should('have.length', 1)
-  //       .first()
-  //       .should('have.text', 'Walk the dog')
-  //
-  //     // For good measure, let's also assert that the task we checked off
-  //     // does not exist on the page.
-  //     cy.contains('Pay electric bill').should('not.exist')
-  //   })
-  //
-  //   it('can filter for completed tasks', () => {
-  //     // We can perform similar steps as the test above to ensure
-  //     // that only completed tasks are shown
-  //     cy.contains('Completed').click()
-  //
-  //     cy.get('.todo-list li')
-  //       .should('have.length', 1)
-  //       .first()
-  //       .should('have.text', 'Pay electric bill')
-  //
-  //     cy.contains('Walk the dog').should('not.exist')
-  //   })
-  //
-  //   it('can delete all completed tasks', () => {
-  //     // First, let's click the "Clear completed" button
-  //     // `contains` is actually serving two purposes here.
-  //     // First, it's ensuring that the button exists within the dom.
-  //     // This button only appears when at least one task is checked
-  //     // so this command is implicitly verifying that it does exist.
-  //     // Second, it selects the button so we can click it.
-  //     cy.contains('Clear completed').click()
-  //
-  //     // Then we can make sure that there is only one element
-  //     // in the list and our element does not exist
-  //     cy.get('.todo-list li')
-  //       .should('have.length', 1)
-  //       .should('not.have.text', 'Pay electric bill')
-  //
-  //     // Finally, make sure that the clear button no longer exists.
-  //     cy.contains('Clear completed').should('not.exist')
-  //   })
-  // })
-})
diff --git a/cypress/support/index.js b/cypress/support/e2e.js
similarity index 100%
rename from cypress/support/index.js
rename to cypress/support/e2e.js
diff --git a/package.json b/package.json
index 62ff2d66..d8e6babe 100644
--- a/package.json
+++ b/package.json
@@ -5,13 +5,9 @@
     "build": "npm install --prefix client && npm run build --prefix client && npm run build:tailwind --prefix client",
     "test": "echo \"Error: no test specified\" && exit 1",
     "cypress:open": "cypress open",
-    "cypress:run": "cypress run",
-    "cypress:ci": "cypress run --config baseUrl=http://localhost:8001",
-    "cypress:ci:open": "cypress open --config baseUrl=http://localhost:8001"
+    "cypress:ci": "cypress run"
   },
   "devDependencies": {
-    "@tailwindcss/forms": "^0.5.2",
-    "@tailwindcss/typography": "^0.5.2",
-    "cypress": "^9.4.1"
+    "cypress": "^10.6.0"
   }
 }
diff --git a/server/vbv_lernwelt/completion/models.py b/server/vbv_lernwelt/completion/models.py
index 5eff0fbc..1dea7994 100644
--- a/server/vbv_lernwelt/completion/models.py
+++ b/server/vbv_lernwelt/completion/models.py
@@ -14,8 +14,8 @@ class CircleCompletion(models.Model):
     # Page can either be a LearningContent or a LearningUnitQuestion for now
     page_key = models.UUIDField()
     page_type = models.CharField(max_length=255, default='', blank=True)
-    circle_key = models.UUIDField()
-    learning_path_key = models.UUIDField()
+    circle_key = models.UUIDField(blank=True, default='')
+    learning_path_key = models.UUIDField(blank=True, default='')
 
     completed = models.BooleanField(default=False)
     json_data = models.JSONField(default=dict, blank=True)