Frontend component testen

.github/workflows/web-lint.yml

@@ -30,3 +30,5 @@ jobs:
                 run: npm run build
             -   name: "Check for linting and errors"
                 run: npm run test
+            -   name: "Cypress component testing"
+                run : npx cypress run --component

api/package.json

@@ -58,6 +58,7 @@
     "eslint-config-prettier": "^8.6.0",
     "jest": "^29.5.0",
     "prettier": "^2.8.8",
+    "prisma": "^4.14.0",
     "supertest": "^6.3.3",
     "ts-jest": "^29.0.5",
     "typescript": "^5.0.4"

web/cypress.config.ts

@@ -3,6 +3,7 @@ import { defineConfig } from "cypress";
 export default defineConfig({
   e2e: {
     supportFile: "cypress/support/e2e.ts",
+    // baseUrl: "https://sel2-1.ugent.be/",
     baseUrl: "http://localhost:3000/",
     setupNodeEvents(on, config) {
       // implement node event listeners here

web/cypress/component/building.cy.ts

@@ -0,0 +1,17 @@
+import SyndicusButtons from '@/components/building/SyndicusButtons.vue'
+
+describe("building component test", () => {
+  it('syndicus buttons test', () => {
+    cy.mount(SyndicusButtons, {
+      props: {
+        phone: "0123456789",
+        email: "[email protected]",
+        clickPhone: () => {} ,
+        clickEmail: () => {},
+      }
+    })
+    // all info present
+    cy.contains("0123456789").should('be.visible')
+    cy.contains("E-mail").should('be.visible')
+  })
+})

web/cypress/component/buttons.cy.ts

@@ -0,0 +1,34 @@
+import SimpleButton from '@/components/buttons/SimpleButton.vue'
+import AddButton from '@/components/buttons/AddButton.vue'
+import Button from '@/components/models/Button';
+
+describe("buttons test", () => {
+  it('simplebutton test', () => {
+    cy.mount(SimpleButton, {
+      slots: {
+        default: 'Click me!',
+      }
+    })
+    cy.contains("Click me!")
+  })
+
+  it('addbutton test', () => {
+    cy.mount(AddButton, {
+      props: {
+        icon: 'mdi-domain',
+        items: [<Button>{title: "test1"}, <Button>{title: "test2"}]
+      },
+    })
+    // the buttons from the item list shouldn't be visible now, in fact not even exist yet
+    cy.contains("test1").should('not.exist')
+    cy.contains("test2").should('not.exist')
+    cy.get('#menu-activator').click()
+    // now these buttons are visible
+    cy.contains("test1").should('be.visible')
+    cy.contains("test2").should('be.visible')
+    cy.get('#menu-activator').click()
+    // now these buttons are not visible anymore, but they do still exist
+    cy.contains("test1").should('not.be.visible')
+    cy.contains("test2").should('not.be.visible')
+  })
+})

web/cypress/component/chips.cy.ts

@@ -0,0 +1,13 @@
+import RoundedInfoChip from '@/components/chips/RoundedInfoChip.vue'
+
+describe('chips tests', () => {
+  it('roundedinfochip test', () => {
+    cy.mount(RoundedInfoChip, {
+      props: {
+        icon: "mdi-pencil",
+        text: "test",
+      }
+    })
+    cy.contains("test").should('be.visible')
+  })
+});

web/cypress/component/error.cy.ts

@@ -0,0 +1,8 @@
+import ErrorHandler from '@/components/errors/ErrorHandler.vue'
+
+describe("error handler test", () => {
+  it('error handler test', () => {
+    // this cant really be tested, since it reacts to errors not props,
+    // but we can test if it mounts correctly, if it doesn't, this test will fail
+  })
+})

web/cypress/component/forms.cy.ts

@@ -0,0 +1,167 @@
+import AdressForm from '@/components/forms/AddressForm.vue'
+import ContactForm from '@/components/forms/ContactForm.vue'
+import RolesForm from '@/components/forms/RolesForm.vue'
+
+
+describe("form tests", () => {
+  describe('addressform tests', () => {
+    it('addressform correct input test', () => {
+      cy.mount(AdressForm, {
+        props:{
+          // these are the default props
+          readonly: false,
+          street: "",
+          number: "0",
+          city: "",
+          zip_code: "0",
+        }
+      })
+      // fill in the fields with correct input
+      cy.get('#street').type("Teststraat")
+      cy.get('#city').type('Gent')
+      cy.get('#streetnr').type('{backspace}17')
+      cy.get('#zipcodefield').get('#zipcode').type('{backspace}9000')
+      // we have to do {backspace} because the field first contains a 0, else we would have 017 en 09000
+      cy.get('#street').should('have.value', 'Teststraat')
+      cy.get('#streetnrfield').get('#streetnr').should('have.value', '17')
+      cy.get('#city').should('have.value', 'Gent')
+      cy.get('#zipcode').should('have.value', '9000')
+    })
+
+    it('addressform incorrect input test', () => {
+      cy.mount(AdressForm, {
+        // default props
+        props:{
+          readonly: false,
+        }
+      })
+      // fill in the fields with incorrect input
+      cy.get('#streetnrfield').then(()=>{
+        cy.get('#streetnr').type('hallo')
+        cy.get('#streetnr').should('have.value', '0')
+      }) // you can only enter numbers
+      cy.get('#zipcodefield').then(() => {
+        cy.get('#zipcode').type('hallo') // you can only enter numbers
+        cy.get('#zipcode').should('have.value', '0')
+        cy.get('#zipcode').type('9000')
+      })// without backspace, the zip code will be 09000, which is an incorrect zipcode
+      cy.contains('Ongeldige postcode')
+    })
+
+    it('addressform readonly test', () => {
+      cy.mount(AdressForm, {
+        props:{
+          readonly: true,
+        }
+      })
+      // everything should now be readonly
+      cy.get('#street').should('have.attr', 'readonly', 'readonly')
+      cy.get('#city').should('have.attr', 'readonly', 'readonly')
+      cy.get('#streetnrfield').get('#streetnr').should('have.attr', 'readonly', 'readonly')
+      cy.get('#zipcodefield').get('#zipcode').should('have.attr', 'readonly', 'readonly')
+    })
+
+    it('addressform empty test', () => {
+      cy.mount(AdressForm, {
+        // default props
+      })
+      // empty fields should contain a warning
+      cy.get('#street').type('x{backspace}')
+      cy.get('#city').type('x{backspace}')
+      cy.get('#streetnrfield').get('#streetnr').clear()
+      cy.get('#zipcodefield').get('#zipcode').clear()
+      cy.contains('Geef een straat op.').should('be.visible')
+      cy.contains('Geef een stad op.').should('be.visible')
+      cy.get('#streetnr-messages > .v-messages__message').contains('Geef een huisnummer.').should('be.visible')
+      cy.get('#zipcode-messages > .v-messages__message').contains('Geef een postcode.').should('be.visible')
+    })
+  })
+
+  describe('conctactform test', () => {
+    it('contactform correct input test', () => {
+      cy.mount(ContactForm, {
+        props: {
+          // thse are the default props
+          readonly: false,
+          phone: "",
+          email: "",
+        },
+      })
+      // fill in the field with correct input
+      cy.get('#phone').type('0123456789')
+      cy.get('#email').type('[email protected]')
+      cy.get('#phone').should('have.value', '0123456789')
+      cy.get('#email').should('have.value', '[email protected]')
+    })
+
+    it('contactform incorrect input test', () => {
+      cy.mount(ContactForm, {
+        // default props
+      })
+      // fill in the field with incorrect input
+      cy.get('#phone').type("012345") // phone number too short
+      cy.contains('Telefoonnummer moet minimaal 9 tekens lang zijn.')
+      cy.get('#email').type('thisisnotanemail') // email has to have the correct template
+      cy.contains('Ongeldig e-mail adres.')
+    })
+
+    it('contactform empty test', () => {
+      cy.mount(ContactForm, {
+        // default props
+      })
+      // empty fields should contain a warning
+      cy.get('#phone').type('x{backspace}')
+      cy.contains('Geef een telefoonnummer op.')
+      cy.get('#email').type('x{backspace}')
+      cy.contains('Geef een e-mail adres op.')
+    })
+
+    it('contactform readonly test', () => {
+      cy.mount(ContactForm, {
+        props:{
+          readonly: true,
+        }
+      })
+      // the fields should be readonly
+      cy.get('#phone').should('have.attr', 'readonly', 'readonly')
+      cy.get('#email').should('have.attr', 'readonly', 'readonly')
+    })
+  })
+
+  describe('roleform test', () => {
+    it('roleform input test', () => {
+      cy.mount(RolesForm, {
+        props: {
+          modelValue: [],
+          readonly: false,
+        },
+      })
+      // checkboxes can be checked and unchecked
+      cy.get('#student').check()
+      cy.get('#superstudent').check()
+      cy.get('#administrator').check()
+      cy.get('#student').should('be.checked')
+      cy.get('#superstudent').should('be.checked')
+      cy.get('#administrator').should('be.checked')
+      cy.get('#student').uncheck()
+      cy.get('#superstudent').uncheck()
+      cy.get('#administrator').uncheck()
+      cy.get('#student').should('not.be.checked')
+      cy.get('#superstudent').should('not.be.checked')
+      cy.get('#administrator').should('not.be.checked')
+    })
+
+    it('rolesform readonly test', () => {
+      cy.mount(RolesForm, {
+        props:{
+          readonly: true,
+        }
+      })
+      // checkboxes are now readonly
+      cy.get('#student').should('have.attr', 'disabled', 'disabled')
+      cy.get('#superstudent').should('have.attr', 'disabled', 'disabled')
+      cy.get('#administrator').should('have.attr', 'disabled', 'disabled')
+    })
+  })
+
+})

web/cypress/component/general.cy.ts

@@ -0,0 +1,33 @@
+import Avatar from '@/components/Avatar.vue'
+import Badge from '@/components/Badge.vue'
+import PhotoButton from '@/components/PhotoButton.vue'
+
+
+describe("component tests", () => {
+  it('avatar test', () => {
+    cy.mount(Avatar, {
+      props: {
+        name: "test gebruiker",
+        size: "small",
+      },
+    })
+    cy.contains('tg').should('be.visible')
+  })
+
+  it('badge test', () => {
+    cy.mount(Badge, {
+      props: {
+        value: 10,
+      },
+    })
+    cy.contains('10').should('be.visible')
+  })
+
+  it('photobutton test', () => {
+    cy.mount(PhotoButton, {})
+    cy.contains("File input").should('be.visible')
+    cy.get("#input").selectFile('src/assets/images/drtroittoir_logo.png')
+    cy.contains("drtroittoir_logo.png").should('be.visible')
+  })
+
+})