Skip to content

Commit

Permalink
Merge pull request #2386 from concord-consortium/183810075-cycle-thro…
Browse files Browse the repository at this point in the history 
…ugh-workspaces-in-sort-view

feat: Cycle through workspaces in sort view (PT-183810075)
  • Loading branch information
@scytacki
scytacki committed Sep 20, 2024
2 parents 5355131 + c3486e2 commit 01448c3
Show file tree
Hide file tree
Showing 28 changed files with 915 additions and 365 deletions.
2 changes: 1 addition & 1 deletion cypress/e2e/functional/document_tests/canvas_test_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,7 @@ context('Test Canvas', function () {
cy.log('delete elements from canvas');
//star a document to verify delete
cy.openSection("my-work", "workspaces");
cy.get('.list.workspaces [data-test=workspaces-list-items] .footer').contains(renameTitlePencil).parents().siblings('.icon-holder').find('.icon-star').click();
cy.get('.documents-list.workspaces [data-test=workspaces-list-items] .footer').contains(renameTitlePencil).parents().siblings('.icon-holder').find('.icon-star').click();
cy.openDocumentWithTitle('my-work', 'workspaces', 'QA 1.1 Solving a Mystery with Proportional Reasoning');

cy.log('will delete elements from canvas');
Expand Down
2 changes: 1 addition & 1 deletion cypress/e2e/functional/document_tests/workspace_test_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ context('Test the overall workspace', function () {
const section = "learning-log";
cy.openSection('my-work', section);
cy.get('[data-test=subtab-learning-log]').should('be.visible');
cy.get('.list.' + section + ' [data-test=' + section + '-list-items] .footer').should('contain', "My First Learning Log");
cy.get('.documents-list.' + section + ' [data-test=' + section + '-list-items] .footer').should('contain', "My First Learning Log");

cy.log('verify click on document thumbnail opens document in nav panel');
cy.openDocumentWithTitle('my-work', 'learning-log', 'My First Learning Log');
Expand Down
100 changes: 75 additions & 25 deletions cypress/e2e/functional/teacher_tests/teacher_sort_work_view_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,21 +45,54 @@ describe('SortWorkView Tests', () => {
beforeTest(queryParams1);
cy.log('verify clicking the sort menu');
sortWork.getPrimarySortByMenu().click(); // Open the sort menu
cy.wait(1000);

cy.wait(500);
sortWork.getPrimarySortByNameOption().click(); //Select 'Name' sort type
cy.wait(1000);

cy.wait(500);
sortWork.getPrimarySortByMenu().click(); // Open the sort menu again
cy.wait(1000);

cy.wait(500);
sortWork.getPrimarySortByGroupOption().click(); // Select 'Group' sort type
cy.wait(1000);
cy.wait(500);

cy.log('verify opening and closing a document from the sort work view');
cy.get('.section-header-arrow').click({multiple: true}); // Open the sections
sortWork.getSortWorkItem().eq(1).click(); // Open the first document in the list
resourcesPanel.getEditableDocumentContent().should('be.visible');

cy.log('verify document scroller is visible, populated, and functions');
let prevFocusDocKey = "";
let selectedDocIndex = 0;
resourcesPanel.getEditableDocumentContent().invoke('attr', 'data-focus-document').then((focusDocKey) => {
prevFocusDocKey = focusDocKey;
});
resourcesPanel.getDocumentScroller().should('be.visible').and($el => {
expect($el.find('[data-testid="document-thumbnail"]')).to.have.length.greaterThan(1);
expect($el.find('[data-testid="document-thumbnail"].selected')).to.have.length(1);
selectedDocIndex = $el.find('[data-testid="document-thumbnail"]')
.index($el.find('[data-testid="document-thumbnail"].selected'));
});
resourcesPanel.getDocumentScrollerLeftBtn().should('not.exist');
cy.get('[data-testid="document-thumbnail"]').first().should('be.visible');
resourcesPanel.getDocumentScrollerRightBtn().should('exist').click();
cy.get('[data-testid="document-thumbnail"]').first().should('not.be.visible');
resourcesPanel.getDocumentScrollerLeftBtn().should('exist').click();
cy.get('[data-testid="document-thumbnail"]').first().should('be.visible');
cy.get('[data-testid="document-thumbnail"]').eq(selectedDocIndex + 1).click();
resourcesPanel.getEditableDocumentContent().invoke('attr', 'data-focus-document')
.should('not.eq', prevFocusDocKey).then((focusDocKey) => {
prevFocusDocKey = focusDocKey;
});

cy.log('verify document scroller is collapsible, and that switch document buttons appear when it is collapsed');
resourcesPanel.getDocumentSwitchBtnPrev().should('not.exist');
resourcesPanel.getDocumentSwitchBtnNext().should('not.exist');
resourcesPanel.getDocumentScrollerToggle().should('exist').click();
resourcesPanel.getDocumentScroller().should('not.exist');
resourcesPanel.getDocumentSwitchBtnPrev().should('exist').and('not.have.class', 'disabled').click();
resourcesPanel.getDocumentSwitchBtnPrev().should('have.class', 'disabled');
resourcesPanel.getEditableDocumentContent().invoke('attr', 'data-focus-document')
.should('not.eq', prevFocusDocKey);
resourcesPanel.getDocumentSwitchBtnNext().should('exist').and('not.have.class', 'disabled');

resourcesPanel.getDocumentCloseButton().click();
cy.get('.section-header-arrow').click({multiple: true}); // Open the sections
sortWork.getSortWorkItem().should('be.visible'); // Verify the document is closed
Expand All @@ -79,22 +112,16 @@ describe('SortWorkView Tests', () => {
cy.get("[data-test=sort-work-list-items]").should("have.length.greaterThan", 0);
cy.get("[data-test=simple-document-item]").should("not.exist");
sortWork.getShowForMenu().click();
cy.wait(500);
sortWork.getShowForInvestigationOption().click();
cy.wait(500);
// For the "Investigation", "Unit", and "All" options, documents should be listed using the smaller "simple" view
cy.get("[data-test=sort-work-list-items]").should("not.exist");
cy.get("[data-test=simple-document-item]").should("have.length.greaterThan", 0);
sortWork.getShowForMenu().click();
cy.wait(500);
sortWork.getShowForUnitOption().click();
cy.wait(500);
cy.get("[data-test=sort-work-list-items]").should("not.exist");
cy.get("[data-test=simple-document-item]").should("have.length.greaterThan", 0);
sortWork.getShowForMenu().click();
cy.wait(500);
sortWork.getShowForAllOption().click();
cy.wait(500);
cy.get("[data-test=sort-work-list-items]").should("not.exist");
cy.get("[data-test=simple-document-item]").should("have.length.greaterThan", 0);
cy.get("[data-test=simple-document-item]").should("have.attr", "title").and("not.be.empty");
Expand Down Expand Up @@ -142,8 +169,6 @@ describe('SortWorkView Tests', () => {
sortWork.getSecondarySortByBookmarkedOption().should("exist");
sortWork.getSecondarySortByToolsOption().should("exist");
sortWork.getSecondarySortByNameOption().should("exist").click();
cy.wait(500);

sortWork.getSecondarySortByNoneOption().should("not.have.class", "selected");
sortWork.getSecondarySortByNameOption().should("have.class", "selected");
cy.get("[data-testid=section-sub-header]").each($el => {
Expand All @@ -166,7 +191,6 @@ describe('SortWorkView Tests', () => {
sortWork.getSecondarySortByNameOption().should("have.class", "selected");
sortWork.getPrimarySortByMenu().click();
sortWork.getPrimarySortByNameOption().click();
cy.wait(500);
sortWork.getPrimarySortByGroupOption().should("not.have.class", "selected");
sortWork.getPrimarySortByNameOption().should("have.class", "selected");
sortWork.getSecondarySortByGroupOption().should("have.class", "enabled");
Expand All @@ -176,19 +200,16 @@ describe('SortWorkView Tests', () => {
});

it("should open Sort Work tab and test sorting by group", () => {

const students = ["student:1", "student:2", "student:3", "student:4"];
const students = ["student:1", "student:2", "student:3"];
const studentProblemDocs = [
`Student 1: ${title}`,
`Student 2: ${title}`,
`Student 3: ${title}`,
`Student 4: ${title}`
`Student 3: ${title}`
];
const studentPersonalDocs = [
`Student 1: ${copyTitle}`,
`Student 2: ${copyTitle}`,
`Student 3: ${copyTitle}`,
`Student 4: ${copyTitle}`
`Student 3: ${copyTitle}`
];
const exemplarDocs = [
`Ivan Idea: First Exemplar`
Expand Down Expand Up @@ -283,7 +304,7 @@ describe('SortWorkView Tests', () => {
cy.wait(1000);
sortWork.getPrimarySortByNameOption().click();
sortWork.checkSectionHeaderLabelsExist([
"1, Student", "1, Teacher", "2, Student", "3, Student", "4, Student", "Idea, Ivan"
"1, Student", "1, Teacher", "2, Student", "3, Student", "Idea, Ivan"
]);
cy.get('.section-header-arrow').click({multiple: true}); // Open the sections
sortWork.checkDocumentInGroup("Idea, Ivan", exemplarDocs[0]);
Expand Down Expand Up @@ -340,7 +361,9 @@ describe('SortWorkView Tests', () => {
cy.visit(queryParams2);
cy.waitForLoad();
cy.openTopTab('sort-work');
cy.wait(1000);
cy.wait(500);
sortWork.getPrimarySortByMenu().click();
sortWork.getPrimarySortByGroupOption().click();
cy.get('.section-header-arrow').click({multiple: true}); // Open the sections
sortWork.checkDocumentInGroup("Group 6", studentProblemDocs[0]);
sortWork.checkDocumentInGroup("Group 6", studentPersonalDocs[0]);
Expand All @@ -357,10 +380,37 @@ describe('SortWorkView Tests', () => {
cy.visit(queryParams2);
cy.waitForLoad();
cy.openTopTab('sort-work');
cy.wait(1000);
cy.wait(500);
cy.get('.section-header-arrow').click({multiple: true}); // Open the sections
sortWork.checkDocumentInGroup("No Group", studentProblemDocs[0]);
sortWork.checkDocumentInGroup("No Group", studentPersonalDocs[0]);
sortWork.checkGroupDoesNotExist("Group 6");
});

// The test below fails because the sort selections aren't persisting across page reloads for some
// unknown reason. Sort selection persistence occurs in other tests, though, and appears to work
// fine when tested manually in a web browser.
it.skip("should open Sort Work tab and test that sort selections persist", () => {
beforeTest(queryParams1);

cy.log("check initial state of primary and secondary sort selections and modify both");
sortWork.getPrimarySortByMenu().click();
sortWork.getPrimarySortByGroupOption().should("have.class", "selected");
sortWork.getPrimarySortByNameOption().click();
cy.wait(1000);
sortWork.getPrimarySortByNameOption().should("have.class", "selected");
sortWork.getSecondarySortByMenu().click();
sortWork.getSecondarySortByNoneOption().should("have.class", "selected");
sortWork.getSecondarySortByGroupOption().click();
cy.wait(1000);
sortWork.getSecondarySortByGroupOption().should("have.class", "selected");

cy.log("reload page and check that modified sort selections persist");
cy.visit(queryParams1);
cy.waitForLoad();
cy.openTopTab("sort-work");
cy.wait(1000);
sortWork.getPrimarySortByNameOption().should("have.class", "selected");
sortWork.getSecondarySortByGroupOption().should("have.class", "selected");
});
});
2 changes: 1 addition & 1 deletion cypress/e2e/smoke/single_student_canvas_test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ context('single student functional test', () => {
const section = "learning-log";
cy.openSection('my-work', section);
cy.get('[data-test=subtab-learning-log]').should('be.visible');
cy.get('.list.' + section + ' [data-test=' + section + '-list-items] .footer').should('contain', "My First Learning Log");
cy.get('.documents-list.' + section + ' [data-test=' + section + '-list-items] .footer').should('contain', "My First Learning Log");

cy.log('verify click on document thumbnail opens document in nav panel');
cy.openDocumentWithTitle('my-work', 'learning-log', 'My First Learning Log');
Expand Down
10 changes: 5 additions & 5 deletions cypress/support/commands.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,19 +151,19 @@ Cypress.Commands.add("openSection", (tab, section) => {//doc-tab my-work workspa
// is passed in. Passing the tab is safer, otherwise this can find document items
// in other tabs.
Cypress.Commands.add("getCanvasItemTitle", (section) => {
cy.get('.list.'+section+' [data-test='+section+'-list-items] .footer');
cy.get('.documents-list.'+section+' [data-test='+section+'-list-items] .footer');
});
Cypress.Commands.add("openDocumentThumbnail", (navTab,section,title) => { //opens thumbnail into the nav panel
cy.get('.document-tabs.'+navTab+' .list.'+section+' [data-test='+section+'-list-items] .footer').contains(title).parent().parent().siblings('.scaled-list-item-container').click({force:true});
cy.get('.document-tabs.'+navTab+' .documents-list.'+section+' [data-test='+section+'-list-items] .footer').contains(title).parent().parent().siblings('.scaled-list-item-container').click({force:true});
});
Cypress.Commands.add("openDocumentWithTitle", (tab, section, title) => {
cy.openSection(tab,section);
cy.get('.document-tabs.'+tab+' .list.'+section+' [data-test='+section+'-list-items] .footer').contains(title).parent().parent().siblings('.scaled-list-item-container').click({force:true});
cy.get('.document-tabs.'+tab+' .documents-list.'+section+' [data-test='+section+'-list-items] .footer').contains(title).parent().parent().siblings('.scaled-list-item-container').click({force:true});
cy.get('.document-tabs.'+tab+' [data-test=subtab-'+section+'] .edit-button').click();
});
Cypress.Commands.add("openDocumentWithIndex", (tab, section, docIndex) => {
cy.openSection(tab,section);
cy.get('.list.'+section+' [data-test='+section+'-list-items] .footer').eq(docIndex).siblings('.scaled-list-item-container').click({force:true});
cy.get('.document-list.'+section+' [data-test='+section+'-list-items] .footer').eq(docIndex).siblings('.scaled-list-item-container').click({force:true});
cy.get('.edit-button').click();
});
Cypress.Commands.add("clickProblemResourceTile", (subsection, tileIndex = 0) => {
Expand Down Expand Up @@ -246,5 +246,5 @@ Cypress.Commands.add('unlinkTableToDataflow', (program, table) => {
});
});
Cypress.Commands.add("deleteDocumentThumbnail", (tab, section,title) => {
cy.get('.'+tab+' .list.'+section+' [data-test='+section+'-list-items] .footer .icon-delete-document').eq(1).click({force:true});
cy.get('.'+tab+' .documents-list.'+section+' [data-test='+section+'-list-items] .footer .icon-delete-document').eq(1).click({force:true});
});
28 changes: 26 additions & 2 deletions cypress/support/elements/common/ResourcesPanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,11 @@ class ResourcesPanel{
// TODO: this is duplicated in commands.js, however in that case the tab
// isn't passed in.
getCanvasItemTitle(tab, section){
return cy.get('.document-tabs.'+tab+' .list.'+section+' [data-test='+section+'-list-items] .footer');
return cy.get('.document-tabs.'+tab+' .documents-list.'+section+' [data-test='+section+'-list-items] .footer');
}

starCanvasItem(tab, section,title){
cy.get('.list.'+section+' .list-item[data-test='+section+'-list-items]').contains('.footer', title).siblings('.icon-holder').find('.icon-star').click();
cy.get('.documents-list.'+section+' .list-item[data-test='+section+'-list-items]').contains('.footer', title).siblings('.icon-holder').find('.icon-star').click();
}

getCanvasStarIcon(tab,section,title){
Expand All @@ -59,6 +59,30 @@ class ResourcesPanel{
return cy.get('.resource-and-chat-panel .editable-document-content .document-content');
}

getDocumentScroller() {
return cy.get('[data-testid="document-thumbnail-scroller"]');
}

getDocumentScrollerLeftBtn() {
return cy.get('[data-testid="scroll-arrow-left"]');
}

getDocumentScrollerRightBtn() {
return cy.get('[data-testid="scroll-arrow-right"]');
}

getDocumentScrollerToggle() {
return cy.get('[data-testid="toggle-document-scroller"]');
}

getDocumentSwitchBtnPrev() {
return cy.get('[data-testid="switch-document-button-previous"]');
}

getDocumentSwitchBtnNext() {
return cy.get('[data-testid="switch-document-button-next"]');
}

closePrimaryWorkspaceTab(tab){
cy.get('#primaryWorkspaceTab-'+tab+'.tab').click();
cy.wait(2000);
Expand Down
12 changes: 6 additions & 6 deletions cypress/support/elements/common/SortedWork.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ class SortedWork {
return cy.get('.custom-select.sort-work-sort-menu.primary-sort-menu [data-test="list-item-group"]');
}
getPrimarySortByTagOption(){
return cy.get('.custom-select.sort-work-sort-menu.primary-sort-menu [data-test="list-item-identify-design approach"]');
return cy.get('.custom-select.sort-work-sort-menu.primary-sort-menu [data-test="list-item-strategy"]');
}
getPrimarySortByBookmarkedOption(){
return cy.get('.custom-select.sort-work-sort-menu.primary-sort-menu [data-test="list-item-bookmarked"]');
Expand Down Expand Up @@ -43,7 +43,7 @@ class SortedWork {
return cy.get('.custom-select.sort-work-sort-menu.secondary-sort-menu [data-test="list-item-group"]');
}
getSecondarySortByTagOption(){
return cy.get('.custom-select.sort-work-sort-menu.secondary-sort-menu [data-test="list-item-identify-design approach"]');
return cy.get('.custom-select.sort-work-sort-menu.secondary-sort-menu [data-test="list-item-strategy"]');
}
getSecondarySortByBookmarkedOption(){
return cy.get('.custom-select.sort-work-sort-menu.secondary-sort-menu [data-test="list-item-bookmarked"]');
Expand All @@ -70,10 +70,10 @@ class SortedWork {
return cy.get(".sort-work-view .sorted-sections .section-header-label").contains(sectionLabel).get(".section-header-right .section-header-arrow").click({multiple: true});
}
checkDocumentInGroup(groupName, doc) {
this.getSortWorkGroup(groupName).find(".list .list-item .footer .info").should("contain", doc);
this.getSortWorkGroup(groupName).find(".documents-list .list-item .footer .info").should("contain", doc);
}
checkDocumentNotInGroup(groupName, doc) {
this.getSortWorkGroup(groupName).find(".list .list-item .footer .info").should("not.contain", doc);
this.getSortWorkGroup(groupName).find(".documents-list .list-item .footer .info").should("not.contain", doc);
}
checkSimpleDocumentInGroup(groupName, doc) {
this.getSortWorkGroup(groupName).find('[data-testid="section-document-list"] [data-test="simple-document-item"]').should("have.attr", "title", doc);
Expand All @@ -87,7 +87,7 @@ class SortedWork {
: '[data-testid="doc-group-list"] [data-test="simple-document-item"]';

// Assign the documents list to a variable to simplify the code
cy.get(".section-header-left").contains(groupName).parent().parent()
cy.get(".section-header").contains(groupName).parent().parent()
.siblings('[data-testid="section-document-list"]')
.within(() => {
cy.get(docSelector).as("groupDocs");
Expand All @@ -103,7 +103,7 @@ class SortedWork {
}
checkGroupIsEmpty(groupName){
cy.get(".sort-work-view .sorted-sections .section-header-label")
.contains(groupName).parent().parent().parent().find(".list").should('be.empty');
.contains(groupName).parent().parent().parent().find(".documents-list").should('be.empty');
}
checkGroupDoesNotExist(group) {
cy.get(".sort-work-view .sorted-sections .section-header-label").should("not.contain", group);
Expand Down
2 changes: 1 addition & 1 deletion src/assets/scroll-arrow-icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/assets/scroll-arrow-small-icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions src/assets/show-hide-thumbnail-view-small-icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 01448c3

Please sign in to comment.