Testing topics + adding code to add new configuration test-int

.gitignore

@@ -6,3 +6,4 @@ scripts
 
 backend/src/main/resources/static/images/questions/
 data/
+frontend/cypress.env.json

backend/src/main/resources/application-prod.properties.example

@@ -1,18 +1,18 @@
 ## Datasource
-spring.datasource.url=jdbc:postgresql://localhost:<DATABASE PORT>/<DATABASE NAME>
-spring.datasource.username= <DATABASE USERNAME>
-spring.datasource.password= <DATABASE PASSWORD>
+spring.datasource.url=jdbc:postgresql://localhost:5432/tutortestdb
+spring.datasource.username=
+spring.datasource.password=
 
 ## Jpa
 spring.jpa.database-platform=org.hibernate.dialect.PostgreSQL9Dialect
 
 ## Resources
-figures.dir=<DIRECTORY_WITH_FIGURES>
-export.dir=<DIRECTORY_TO_EXPORT>
-load.dir=<DIRECTORY_FOR_LOAD>
+figures.dir=./folder
+export.dir=./folder
+load.dir=./folder
 
 ## Fenix oauth
 oauth.consumer.key=<FENIX CLIENT KEY>
 oauth.consumer.secret=<FENIX SECRET>
 callback.url=<URL FENIX REDIRECTS TO>
-base.url=https://fenix.tecnico.ulisboa.pt
+base.url=https://fenix.tecnico.ulisboa.pt

backend/src/main/resources/application-test-int.properties

@@ -0,0 +1,18 @@
+## Datasource
+spring.datasource.url=jdbc:postgresql://${PSQL_INT_TEST_DB_HOST}:${PSQL_INT_TEST_DB_PORT}/${PSQL_INT_TEST_DB_NAME}
+spring.datasource.username= ${PSQL_INT_TEST_DB_USERNAME}
+spring.datasource.password = ${PSQL_INT_TEST_DB_PASSWORD}
+
+## Jpa
+spring.jpa.database-platform=org.hibernate.dialect.PostgreSQL9Dialect
+
+## Resources
+figures.dir=./folder
+export.dir=./folder
+load.dir=./folder
+
+## Fenix oauth
+oauth.consumer.key=<FENIX CLIENT KEY>
+oauth.consumer.secret=<FENIX SECRET>
+callback.url=http://localhost:8081/login
+base.url=https://fenix.tecnico.ulisboa.pt

frontend/cypress.env.json.example

@@ -0,0 +1,7 @@
+{
+  "psql_db_name": "<DB NAME>",
+  "psql_db_username": "<USERNAME>",
+  "psql_db_password": "<PASSWORD>",
+  "psql_db_host": "<HOST>",
+  "psql_db_port": "5432"
+}

frontend/example.env

@@ -3,4 +3,4 @@ VUE_APP_ROOT_API=http://localhost:8080
 VUE_APP_FENIX_CLIENT_ID=<FENIX CLIENT KEY>
 VUE_APP_FENIX_CLIENT_SECRET=<FENIX CLIENT SECRET>
 VUE_APP_FENIX_REDIRECT_URI=http://localhost:8081/login
-VUE_APP_FENIX_URL=https://fenix.tecnico.ulisboa.pt/oauth/userdialog?client_id=${VUE_APP_FENIX_CLIENT_ID}&redirect_uri=${VUE_APP_FENIX_REDIRECT_URI}
+VUE_APP_FENIX_URL=https://fenix.tecnico.ulisboa.pt/oauth/userdialog?client_id=${VUE_APP_FENIX_CLIENT_ID}&redirect_uri=${VUE_APP_FENIX_REDIRECT_URI}

frontend/src/components/TopBar.vue

@@ -47,7 +47,7 @@
 
         <v-menu offset-y v-if="isTeacher && currentCourse" open-on-hover>
           <template v-slot:activator="{ on }">
-            <v-btn v-on="on" text dark>
+            <v-btn v-on="on" text dark data-cy="managementMenuButton">
               Management
               <v-icon>fas fa-file-alt</v-icon>
             </v-btn>
@@ -61,7 +61,7 @@
                 <v-list-item-title>Questions</v-list-item-title>
               </v-list-item-content>
             </v-list-item>
-            <v-list-item to="/management/topics">
+            <v-list-item to="/management/topics" data-cy="manageTopicsMenuButton">
               <v-list-item-action>
                 <v-icon>category</v-icon>
               </v-list-item-action>

frontend/src/views/teacher/TopicsView.vue

@@ -8,6 +8,7 @@
       :mobile-breakpoint="0"
       :items-per-page="50"
       :footer-props="{ itemsPerPageOptions: [15, 30, 50, 100] }"
+      data-cy="topicsGrid"
     >
       <template v-slot:top>
         <v-card-title>
@@ -19,14 +20,14 @@
             hide-details
           />
           <v-spacer />
-          <v-btn color="primary" dark @click="newTopic">New Topic</v-btn>
+          <v-btn color="primary" dark @click="newTopic" data-cy="topicsNewTopicBtn">New Topic</v-btn>
         </v-card-title>
       </template>
       <template v-slot:item.action="{ item }">
         <v-tooltip bottom>
           <template v-slot:activator="{ on }">
             <v-icon class="mr-2" v-on="on" @click="editTopic(item)"
-              >edit</v-icon
+              data-cy="topicsGridEditButton">edit</v-icon
             >
           </template>
           <span>Edit Topic</span>
@@ -38,7 +39,7 @@
               v-on="on"
               @click="deleteTopic(item)"
               color="red"
-              >delete</v-icon
+              data-cy="topicsGridDeleteButton">delete</v-icon
             >
           </template>
           <span>Delete Topic</span>
@@ -55,13 +56,13 @@
     </footer>
 
     <v-dialog v-model="topicDialog" max-width="75%">
-      <v-card>
+      <v-card data-cy="topicsCreateOrEditDialog">
         <v-card-title>
           <span class="headline">{{ formTitle() }}</span>
         </v-card-title>
 
         <v-card-text v-if="editedTopic">
-          <v-text-field v-model="editedTopic.name" label="Topic" />
+          <v-text-field v-model="editedTopic.name" label="Topic" data-cy="topicsFormTopicNameInput"/>
         </v-card-text>
 
         <v-card-actions>

frontend/tests/e2e/specs/teacher/manageTopics.js

@@ -0,0 +1,107 @@
+describe('Manage Topics Walk-through', () => {
+
+  function createTopicWithName(topicName){
+    cy.get('[data-cy="topicsNewTopicBtn"]', { force: true }).click();
+
+    cy.get('[data-cy="topicsCreateOrEditDialog"]')
+      .should('be.visible');
+
+    cy.get('[data-cy="topicsFormTopicNameInput"]')
+      .should('be.empty')
+      .type(topicName);
+
+    cy.route('POST', '/courses/*/topics/').as('postTopic');
+
+    cy.get('button')
+      .contains('Save')
+      .click();
+
+    cy.wait('@postTopic')
+      .its('status')
+      .should('eq', 200);
+  }
+
+  beforeEach(() => {
+    cy.cleanTestTopics();
+    cy.demoTeacherLogin();
+    cy.server();
+    cy.route('GET', '/courses/*/topics').as('getTopics');
+    cy.get('[data-cy="managementMenuButton"]').click();
+    cy.get('[data-cy="manageTopicsMenuButton"]').click();
+
+    cy.wait('@getTopics')
+      .its('status')
+      .should('eq', 200);
+  });
+
+  afterEach(() => {
+    cy.logout();
+  });
+
+  it('Can create a new topic', function() {
+    let topicName = `CY - Test topic ${new Date().toJSON()}`
+
+    createTopicWithName(topicName);
+
+    cy.get('[data-cy="topicsGrid"]')
+      .first()
+      .should('contain', topicName);
+  });
+
+  it('Can edit created new topics', function() {
+    let topicName = `CY - Test topic ${new Date().toJSON()}`
+
+    createTopicWithName(topicName);
+
+    cy.get('[data-cy="topicsGrid"] table > tbody > tr:first')
+      .should('contain', topicName)
+      .within(() => {
+        cy.get('[data-cy="topicsGridEditButton"]').click();
+      })
+
+    cy.get('[data-cy="topicsCreateOrEditDialog"]')
+      .should('be.visible');
+
+    cy.get('[data-cy="topicsFormTopicNameInput"]')
+      .should('contain.value', topicName)
+      .clear()
+      .type('CY - EDITED');
+
+    cy.route('PUT', '/topics/*').as('putTopic');
+
+    cy.get('button')
+      .contains('Save')
+      .click();
+
+    cy.wait('@putTopic')
+      .its('status')
+      .should('eq', 200);
+
+    cy.get('[data-cy="topicsGrid"]')
+      .first()
+      .should('contain', 'CY - EDITED');
+  });
+
+  it('Can delete created topics', function() {
+    let topicName = `CY - Test topic ${new Date().toJSON()}`
+
+    createTopicWithName(topicName);
+
+    cy.route('DELETE', '/topics/*').as('deleteTopic');
+
+    cy.get('[data-cy="topicsGrid"]').contains(topicName).should('exist');
+
+    cy.get('[data-cy="topicsGrid"] table > tbody > tr:first')
+      .should('contain', topicName)
+      .within(() => {
+        cy.get('[data-cy="topicsGridDeleteButton"]').click();
+      })
+
+    cy.wait('@deleteTopic')
+      .its('status')
+      .should('eq', 200);
+
+    cy.get('[data-cy="topicsGrid"]').contains(topicName).should('not.exist');
+  });
+});
+

frontend/tests/e2e/support/database.js

@@ -0,0 +1,27 @@
+function dbPasswordCommand(password){
+    if (Cypress.platform === 'win32'){
+        return `set PGPASSWORD=${password}&& `
+    }
+    else{
+        return `PGPASSWORD=${password} `
+    }
+}
+
+function dbCommand(command){
+    return cy.exec(
+        dbPasswordCommand(Cypress.env('psql_db_password')) +
+        `psql -d ${Cypress.env('psql_db_name')} ` +
+        `-U ${Cypress.env('psql_db_username')} ` +
+        `-h ${Cypress.env('psql_db_host')} ` +
+        `-p ${Cypress.env('psql_db_port')} ` +
+        `-c "${command.replace(/\r?\n/g, " ")}"`
+    );
+}
+
+Cypress.Commands.add('cleanTestTopics', () => {
+    dbCommand(`
+        DELETE FROM topics
+        WHERE name like 'CY%'
+    `)
+});
+

frontend/tests/e2e/support/index.js

@@ -16,3 +16,4 @@
 // Import commands.js using ES2015 syntax:
 import './login';
 import './commands';
+import './database';