ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Upgrade to Cypress 10, add first login test

This commit is contained in:
Daniel Egger 2022-08-26 15:06:22 +02:00
parent 01ff7c2f79
commit 75a209e04f
9 changed files with 46 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/views/CockpitView.vue
View File

@ -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>

1
client/src/views/LoginView.vue
View File

@ -48,6 +48,7 @@ const userStore = useUserStore();
<div>
<input
data-cy="login-button"
type="submit"
value="Login"
class="btn-primary"

23
cypress.config.js Normal file
View File

@ -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',
},
})

14
cypress.json
View File

@ -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
}
}

17
cypress/e2e/login.cy.js Normal file
View File

@ -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');
});
})

148
cypress/integration/simpletodo/simpletodo.spec.js
View File

@ -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')
// })
// })
})

0
cypress/support/index.js → cypress/support/e2e.js
View File

8
package.json
View File

@ -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"
}
}

4
server/vbv_lernwelt/completion/models.py
View File

@ -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)