Optimize questionnaire

Author: janslifka

cypress/e2e/knowledge-models/preview.spec.js

@@ -46,7 +46,7 @@ describe('Knowledge Models / Preview', () => {
             if (withQuestionUuid) {
                 project.checkAnswerChecked('Answer 2')
                 project.checkAnswerChecked('Answer 3')
-                cy.get('label').contains('Deep Nested Answer Item Question').should('exist')
+                cy.getCy('questionnaire_question-title').contains('Deep Nested Answer Item Question').should('exist')
             }
         })
     })

cypress/e2e/projects/anonymous.spec.js

@@ -67,7 +67,7 @@ describe('Anonymous projects', () => {
         // check that the answer is selected
         project.checkAnswerChecked('Answer 2')
         project.checkAnswerChecked('Answer 3')
-        cy.get('label').contains('Deep Nested Answer Item Question').should('exist')
+        cy.getCy('questionnaire_question-title').contains('Deep Nested Answer Item Question').should('exist')
     })
 
     it('can be added to user projects', () => {

cypress/e2e/projects/detail/comments.spec.js

@@ -97,7 +97,7 @@ describe('Comments', () => {
         testNoPrivateNotes()
     })
 
-    it('as Viewver', () => {
+    it('as Viewer', () => {
         project.addUser('Nikola Tesla', 'Viewer')
         cy.logout()
         cy.loginAs('datasteward')
@@ -269,12 +269,12 @@ describe('Comments', () => {
         cy.getCy('comments_comment_resolve').click()
 
         cy.get('.item').contains('Comments').click()
-        cy.get('.comments-overview .form-check-label').should('contain', 'View resolved comments').click()
-        cy.get('.comments-overview .fa-ul li').should('contain', 'Options Question 1')
-        cy.get('.comments-overview .fa-ul li .bg-success.rounded-pill').should('contain', '1')
-        cy.get('.comments-overview .fa-ul li a').click()
+        cy.getCy('question_comments_overview').find('.form-check-toggle').should('contain', 'View resolved comments').click()
+        cy.getCy('question_comments_overview').find('.fa-ul li').should('contain', 'Options Question 1')
+        cy.getCy('question_comments_overview').find('.fa-ul li .bg-success.rounded-pill').should('contain', '1')
+        cy.getCy('question_comments_overview').find('.fa-ul li a').click()
 
-        cy.get('.CommentThread.CommentThread--Resolved').should('exist')
+        cy.get('.questionnaireComments__commentThread--resolved').should('exist')
     })
 
     it('navigate between comments', () => {
@@ -287,23 +287,23 @@ describe('Comments', () => {
 
         project.openCommentsFor('Options Question 1')
         cy.getCy('comments_nav_count').should('contain', '1/3')
-        cy.get('.Comment_MD').contains('Thread 1').should('exist')
+        cy.get('.questionnaireComments__commentText').contains('Thread 1').should('exist')
 
         cy.getCy('comments_nav_next').click()
         cy.getCy('comments_nav_count').should('contain', '2/3')
-        cy.get('.Comment_MD').contains('Thread 2').should('exist')
+        cy.get('.questionnaireComments__commentText').contains('Thread 2').should('exist')
 
         cy.getCy('comments_nav_next').click()
         cy.getCy('comments_nav_count').should('contain', '3/3')
-        cy.get('.Comment_MD').contains('Thread 3').should('exist')
+        cy.get('.questionnaireComments__commentText').contains('Thread 3').should('exist')
 
         cy.getCy('comments_nav_next').click()
         cy.getCy('comments_nav_count').should('contain', '1/3')
-        cy.get('.Comment_MD').contains('Thread 1').should('exist')
+        cy.get('.questionnaireComments__commentText').contains('Thread 1').should('exist')
 
         cy.getCy('comments_nav_prev').click()
         cy.getCy('comments_nav_count').should('contain', '3/3')
-        cy.get('.Comment_MD').contains('Thread 3').should('exist')
+        cy.get('.questionnaireComments__commentText').contains('Thread 3').should('exist')
     })
 
     it('websocket', () => {
@@ -327,7 +327,7 @@ describe('Comments', () => {
         project.expectCommentCount(0)
         cy.wsSend(`/projects/${projectUuid}/websocket`, msg)
         project.openCommentsFor('Options Question 1')
-        cy.get('.Comment_MD').contains('This is a comment').should('exist')
+        cy.get('.questionnaireComments__commentText').contains('This is a comment').should('exist')
     })
 
     it('assign comments', () => {
@@ -338,23 +338,23 @@ describe('Comments', () => {
         // assign it to user
         cy.getCy('comments_comment_assign').click()
         cy.getCy('project_comment-assign_user-suggestion').contains('Isaac').click()
-        cy.get('.CommentThread__AssignedHeader--You').should('be.visible')
+        cy.get('.questionnaireComments__commentThreadAssignedHeader--you').should('be.visible')
 
         // check that it is visible on the dashboard
         cy.visitApp('/dashboard')
         cy.get('.Dashboard__ItemList a').contains('Please do this').click()
-        cy.get('.CommentThread__AssignedHeader--You').should('be.visible')
-        cy.get('.Comment_MD').contains('Please do this').should('be.visible')
+        cy.get('.questionnaireComments__commentThreadAssignedHeader--you').should('be.visible')
+        cy.get('.questionnaireComments__commentText').contains('Please do this').should('be.visible')
 
         // check that it is visible on the the comments overview
         cy.visitApp('/comments?resolved=false')
         cy.clickListingItem('Please do this')
-        cy.get('.CommentThread__AssignedHeader--You').should('be.visible')
-        cy.get('.Comment_MD').contains('Please do this').should('be.visible')
+        cy.get('.questionnaireComments__commentThreadAssignedHeader--you').should('be.visible')
+        cy.get('.questionnaireComments__commentText').contains('Please do this').should('be.visible')
 
         // resolve comment
         cy.getCy('comments_comment_resolve').click()
-        cy.get('.CommentThread__AssignedHeader--You').should('not.exist')
+        cy.get('.questionnaireComments__commentThreadAssignedHeader--you').should('not.exist')
 
         // check that it is not visible on the dashboard
         cy.visitApp('/dashboard')
@@ -373,24 +373,24 @@ describe('Comments', () => {
         // assign it to user
         cy.getCy('comments_comment_assign').click()
         cy.getCy('project_comment-assign_user-suggestion').contains('Isaac').click()
-        cy.get('.CommentThread__AssignedHeader--You').should('be.visible')
+        cy.get('.questionnaireComments__commentThreadAssignedHeader--you').should('be.visible')
 
         // check that it is visible on the dashboard
         cy.visitApp('/dashboard')
         cy.get('.Dashboard__ItemList a').contains('Please do this').click()
-        cy.get('.CommentThread__AssignedHeader--You').should('be.visible')
-        cy.get('.Comment_MD').contains('Please do this').should('be.visible')
+        cy.get('.questionnaireComments__commentThreadAssignedHeader--you').should('be.visible')
+        cy.get('.questionnaireComments__commentText').contains('Please do this').should('be.visible')
 
         // check that it is visible on the the comments overview
         cy.visitApp('/comments?resolved=false')
         cy.clickListingItem('Please do this')
-        cy.get('.CommentThread__AssignedHeader--You').should('be.visible')
-        cy.get('.Comment_MD').contains('Please do this').should('be.visible')
+        cy.get('.questionnaireComments__commentThreadAssignedHeader--you').should('be.visible')
+        cy.get('.questionnaireComments__commentText').contains('Please do this').should('be.visible')
 
         // remove assignement
         cy.getCy('comments_comment_menu').click()
         cy.get('.dropdown-item').contains('Remove assignment').click()
-        cy.get('.CommentThread__AssignedHeader--You').should('not.exist')
+        cy.get('.questionnaireComments__commentThreadAssignedHeader--you').should('not.exist')
 
         // check that it is not visible on the dashboard
         cy.visitApp('/dashboard')

cypress/e2e/projects/detail/files.spec.js

@@ -38,7 +38,7 @@ describe('Project Files', () => {
         })
         cy.clickModalAction()
 
-        cy.get('.questionnaire-file').contains('users.csv').should('exist')
+        cy.get('.questionnaireContent__file').contains('users.csv').should('exist')
 
         project.openFiles()
         cy.getListingItem('users.csv').should('exist')
@@ -69,10 +69,10 @@ describe('Project Files', () => {
         cy.getCy('file-delete').click()
         cy.clickModalAction()
 
-        cy.get('.questionnaire-file').should('not.exist')
+        cy.get('.questionnaireContent__file').should('not.exist')
     })
 
-    it('Delete file from question', () => {
+    it('Delete file from project files', () => {
         project.open(projectName)
 
         cy.getCy('file-upload').click()
@@ -85,7 +85,7 @@ describe('Project Files', () => {
         cy.clickListingItemAction('users.csv', 'delete')
         cy.clickModalAction()
 
-        project.openQuestionnaire()
+        project.open(projectName)
         project.expectWarningFor('Choose your file')
         project.expectWarningCount(1)
     })

cypress/e2e/projects/detail/questionnaire/basic.spec.js

@@ -44,23 +44,23 @@ describe('Basic Questionnaire Tests', () => {
     it('answer, advice & clear answer', () => {
         // select answer
         project.selectAnswer('Answer 1.1')
-        cy.get('.alert-info').contains('This is an advice for answer 1.').should('be.visible')
+        cy.get('.questionnaireContent__advice').contains('This is an advice for answer 1.').should('be.visible')
         project.awaitSave()
 
         // reopen and check the answer
         project.open(projectName)
         project.checkAnswerChecked('Answer 1.1')
-        cy.get('.alert-info').contains('This is an advice for answer 1.').should('be.visible')
+        cy.get('.questionnaireContent__advice').contains('This is an advice for answer 1.').should('be.visible')
 
         // clear answer and save
         cy.clickLink('Clear answer')
         project.checkAnswerNotChecked('Answer 1.1')
-        cy.get('.alert-info').should('not.be.visible')
+        cy.get('.questionnaireContent__advice').should('not.exist')
 
         // reopen and check it was cleared
         project.open(projectName)
         project.checkAnswerNotChecked('Answer 1.1')
-        cy.get('.alert-info').should('not.be.visible')
+        cy.get('.questionnaireContent__advice').should('not.exist')
     })
 
 
@@ -89,7 +89,7 @@ describe('Basic Questionnaire Tests', () => {
     it('add & remove item answer', () => {
         // Add item and answer a question
         cy.clickBtn('Add')
-        cy.get('.item').should('exist')
+        cy.get('.questionnaireContent__itemHeader').should('exist')
         cy.get('.badge').contains('2.a.1').should('exist')
         project.selectAnswer('Item answer 1.2')
 
@@ -105,9 +105,9 @@ describe('Basic Questionnaire Tests', () => {
         project.checkAnswerChecked('Item answer 1.2')
 
         // Remove items and save
-        cy.get(`.item:first-child() ${dataCy('item-delete')}`).click()
+        cy.get('.questionnaireContent__itemHeader').first().find(`${dataCy('item-delete')}`).click()
         cy.clickModalAction()
-        cy.get(`.item:first-child() ${dataCy('item-delete')}`).click()
+        cy.get('.questionnaireContent__itemHeader').first().find(`${dataCy('item-delete')}`).click()
         cy.clickModalAction()
         cy.get('.badge').contains('2.a.1').should('not.exist')
         cy.get('.badge').contains('2.b.1').should('not.exist')
@@ -127,49 +127,50 @@ describe('Basic Questionnaire Tests', () => {
         project.selectAnswer('Item answer 1.2')
 
         // Collapse item
-        cy.get(`.item:first-child() ${dataCy('item-collapse')}`).click()
+        cy.get('.questionnaireContent__itemHeader').first().find(`${dataCy('item-collapse')}`).click()
 
         // Reopen project and check that the item is collapsed
         project.open(projectName)
-        cy.get('.item:first-child()').should('have.class', 'item-collapsed')
+        cy.get('.questionnaireContent__itemHeader').first().should('have.class', 'questionnaireContent__itemHeader--collapsed')
 
         // Expand item
-        cy.get(`.item:first-child() ${dataCy('item-expand')}`).click()
+        cy.get('.questionnaireContent__itemHeader').first().find(`${dataCy('item-expand')}`).click()
 
         // Reopen project and check that the item is expanded
         project.open(projectName)
-        cy.get('.item:first-child()').should('not.have.class', 'item-collapsed')
+        cy.get('.questionnaireContent__itemHeader').first().should('not.have.class', 'questionnaireContent__itemHeader--collapsed')
     })
 
     it('reorder item answer', () => {
         // Add item and answer a question
         cy.clickBtn('Add')
-        cy.get('.item').should('exist')
+        cy.get('.questionnaireContent__itemHeader').should('exist')
         cy.get('.badge').contains('2.a.1').should('exist')
         project.selectAnswer('Item answer 1.2')
 
         // Add another item and don't answer the question
         cy.clickBtn('Add')
-        cy.get('.item').should('exist')
+        cy.get('.questionnaireContent__itemHeader').should('exist')
         cy.get('.badge').contains('2.a.1').should('exist')
 
         // Move the first item down and check that now the first one
-        cy.get(`.item:first-child() ${dataCy('item-move-down')}`).click()
-        cy.get('.item:first-child() label').contains('Item answer 1.2').closest('label').find('input').should('not.be.checked')
+        cy.get('.questionnaireContent__itemHeader').first().find(`${dataCy('item-move-down')}`).click()
+        project.getQuestionContainer('Item Question 1').find('label').contains('Item answer 1.2').closest('label').find('input').should('not.be.checked')
         project.awaitSave()
 
         // Reopen project and check it still works
         project.open(projectName)
-        cy.get('.item:first-child() label').contains('Item answer 1.2').closest('label').find('input').should('not.be.checked')
+        project.getQuestionContainer('Item Question 1').find('label').contains('Item answer 1.2').closest('label').find('input').should('not.be.checked')
 
         // Move items back and check that the first one is checked
-        cy.get(`.item:last-child() ${dataCy('item-move-up')}`).click()
-        cy.get('.item:first-child() label').contains('Item answer 1.2').closest('label').find('input').should('be.checked')
+        cy.get('.questionnaireContent__itemHeader').last().find(`${dataCy('item-move-up')}`).click()
+        project.getQuestionContainer('Item Question 1').find('label').contains('Item answer 1.2').closest('label').find('input').should('be.checked')
+        // cy.get('.item:first-child() label').contains('Item answer 1.2').closest('label').find('input').should('be.checked')
         project.awaitSave()
 
         // Reopen project and check it still works
         project.open(projectName)
-        cy.get('.item:first-child() label').contains('Item answer 1.2').closest('label').find('input').should('be.checked')
+        project.getQuestionContainer('Item Question 1').find('label').contains('Item answer 1.2').closest('label').find('input').should('be.checked')
     })
 
 
@@ -319,10 +320,10 @@ describe('Basic Questionnaire Tests', () => {
     it('keep sidepanel open after refresh', () => {
         // open comments tab
         cy.get('.item').contains('Comments').click()
-        cy.get('.comments-overview').should('be.visible')
+        cy.getCy('question_comments_overview').should('be.visible')
 
         // check that it remains open after reopening the page
         cy.reload()
-        cy.get('.comments-overview').should('be.visible')
+        cy.getCy('question_comments_overview').should('be.visible')
     })
 })

cypress/e2e/projects/detail/questionnaire/search.spec.js

@@ -16,13 +16,19 @@ describe('Questionnaire Search', () => {
     }
 
     const getFirstResult = () => {
-        return cy.get('.questionnaire__right-panel .list-group-item').first()
+        return cy.getCy('questionnaire_search').find('.list-group-item').first()
     }
 
     const expectNoResults = () => {
         cy.getCy('flash_alert-info').contains('No results')
     }
 
+    const expectHighlightedQuestion = (questionTitle) => {
+        project.getQuestionContainer(questionTitle)
+            .find('.questionnaireContent__questionHeader')    
+            .should('have.class', 'questionnaireContent__scrollTargetHighlight')
+    }
+
     before(() => {
         cy.task('knowledgeModelPackage:delete', { km_id: kmId })
         cy.clearServerCache()
@@ -49,44 +55,44 @@ describe('Questionnaire Search', () => {
     it('search in chapter title', () => {
         search('Chapter 1')
         getFirstResult().click()
-        cy.get('.questionnaire__form').should('have.class', 'scroll-target-highlight')
+        cy.get('.questionnaireContent__chapter').should('have.class', 'questionnaireContent__scrollTargetHighlight')
     })
 
     it('search in chapter description', () => {
         search('chapter text')
         getFirstResult().click()
-        cy.get('.questionnaire__form').should('have.class', 'scroll-target-highlight')
+        cy.get('.questionnaireContent__chapter').should('have.class', 'questionnaireContent__scrollTargetHighlight')
     })
 
     it('search in question title', () => {
         search('multi-choice question')
         getFirstResult().click()
-        cy.get('#question-5def822c-4d94-40a3-94dc-d8569567357b').should('have.class', 'scroll-target-highlight')
+        expectHighlightedQuestion('Multi-Choice Question 1')
     })
 
     it('search in question description', () => {
         search('cross-referencing')
         getFirstResult().click()
-        cy.get('#question-18d8316d-a126-4b44-9c41-dafb8b37a127').should('have.class', 'scroll-target-highlight')
+        expectHighlightedQuestion('Reference Question 2')
     })
 
     it('search in answer', () => {
         search('answer 1')
         getFirstResult().click()
-        cy.get('#question-49cdf436-5de7-43d9-8226-a33dfabbce3e').should('have.class', 'scroll-target-highlight')
+        expectHighlightedQuestion('Options Question 1')
     })
 
     it('search in choice', () => {
         search('choice 2')
         getFirstResult().click()
-        cy.get('#question-1d277ab7-d8dc-46d7-b42d-7b7e2dbf8cd1').should('have.class', 'scroll-target-highlight')
+        expectHighlightedQuestion('Question 2')
     })
 
     it('search in value question', () => {
         project.typeAnswer('Value Question 1', 'zebra')
         search('zebra')
         getFirstResult().click()
-        cy.get('#question-0cfd88c9-13ea-41b2-b4e8-1a1ab98bac6c').should('have.class', 'scroll-target-highlight')
+        expectHighlightedQuestion('Value Question 1')
     })
 
     it('search in closed follow-up question', () => {
@@ -103,7 +109,7 @@ describe('Questionnaire Search', () => {
         getFirstResult().should('exist')
 
         // clear the answer and search again
-        project.clearAnswer('Answer 1')
+        project.clearAnswer('Options Question 1')
         search('lion', false)
         expectNoResults()
 

cypress/e2e/projects/detail/questionnaire/typehints.spec.js

@@ -1,6 +1,6 @@
 import * as project from '../../../../support/project-helpers'
 
-describe('Questionnaires Typehints', () => {
+describe.skip('Questionnaires Typehints', () => {
     const projectName = 'Typehints Test Questionnaire'
     const kmId = 'test-integrations'
     const errorMessage = 'Unable to get type hints'