diff --git a/cypress/e2e/course_board/changeBoardLayout.feature b/cypress/e2e/course_board/changeBoardLayout.feature new file mode 100644 index 00000000..d0e618d3 --- /dev/null +++ b/cypress/e2e/course_board/changeBoardLayout.feature @@ -0,0 +1,82 @@ +# @regression_test +# @stable_test +# Note: the test can be set to stable when the feature is on staging +@unstable +Feature: Course Board - To change the board layout + + As a teacher I want to change the board layout + + # @stable_test + @unstable + Scenario: Teacher changes board layout + Given I am logged in as a '' at '' + + # pre-condition: teacher creates a course + When I go to courses overview + When I click on FAB to create a new course depending on sub menu + Then I see section one area on the course create page + When I enter the course title '' + Then I see teacher '' is selected by default + When I click on button Next Steps after entering the course detail in section one + Then I see section two area on the course create page + When I click on button Next Steps after selecting course participant details + Then I see the section three area as the finish page + When I click on button To Course Overview on the finish page + Then I see the course '' on the course overview page + + # teacher adds a board with multiple columns and cards to the course + When I go to course '' + Then I see course page '' + When I click on FAB to create new content + When I click on the button FAB New Column Board + Then I see a dialog box for column board + Then I see in dialog box option for multi-column board + Then I see in dialog box option for single column board + When I choose multi-column board in the dialog box + Then I see the page Course Board details + When I click on the button Add column in the course board + When I click on the page outside of the column + When I click on the button Add column in the course board + When I click on the page outside of the column + When I click on plus icon to add card in column + When I click on the page outside of the card + Then I see a board card + + # teacher changes board layout to signle column + When I click on three dot menu in the board header + When I click on the option Change layout in three dot menu in course board + Then I see a dialog box for column board + Then I see in dialog box option for multi-column board + Then I see in dialog box option for single column board + When I choose single-column board in the dialog box + Then I see the single-column board + + # teacher changes board layout to multi column + When I click on three dot menu in the board header + When I click on the option Change layout in three dot menu in course board + Then I see a dialog box for column board + Then I see in dialog box option for multi-column board + Then I see in dialog box option for single column board + When I choose multi-column board in the dialog box + Then I see the multi-column board + + # post-condition: teacher deletes course + When I go to courses overview + When I go to course '' + When I open page Edit course + When I click on the button delete course + Then I see the modal to confirm the deletion + When I click on the button delete on the modal to confirm the course deletion + Then I do not see the course '' on the course overview page + + @staging_test + Examples: + | teacher | namespace | course_name | fullname_teacher | + | teacher1_nbc | nbc | Cypress Test Course | Karl Herzog | + + @school_api_test + Examples: + | teacher | namespace | course_name | fullname_teacher | + | teacher1_nbc | nbc | Cypress Test Course | cypress teacher_1 | + + diff --git a/cypress/support/pages/course_board/pageBoard.js b/cypress/support/pages/course_board/pageBoard.js index ca9a0b27..1820603d 100644 --- a/cypress/support/pages/course_board/pageBoard.js +++ b/cypress/support/pages/course_board/pageBoard.js @@ -33,6 +33,7 @@ class Board { static #externalToolElement = '[data-testid="board-external-tool-element"]'; static #deletedElement = '[data-testid="board-deleted-element"]'; static #boardMenuActionPublish = '[data-testid="kebab-menu-action-publish"]'; + static #boardMenuActionChangeLayout = '[data-testid="board-menu-action-change-layout"]'; static #boardLayoutDialogBoxTitle = '[data-testid="board-layout-dialog-title"]'; static #multiColumnBoardOptionInDialogBox = '[data-testid="dialog-add-multi-column-board"]'; @@ -43,6 +44,7 @@ class Board { '[data-testid="board-external-tool-element-alert"]'; static #boardCard = '[data-testid="board-card-0-0"]'; static #copyBoardCardLinkButton = '[data-testid="board-menu-action-share-link"]'; + static #firstBoardColumn = '[data-testid="board-column-0"]' clickPlusIconToAddCardInColumn() { cy.get(Board.#addCardInColumnButton).click(); @@ -78,6 +80,10 @@ class Board { cy.get(Board.#boardMenuActionPublish).click(); } + clickChangeLayoutOptionInThreeDotMenuInCourseBoard() { + cy.get(Board.#boardMenuActionChangeLayout).click(); + } + clickOnFABToCreateNewColumnBoard() { cy.get(Board.#newColumnBoardFABInCourseDetail).click(); } @@ -421,5 +427,17 @@ class Board { seeFocusedBoardCard() { cy.get(Board.#boardCard).should("be.focused"); } + + seeSingleColumnBoard(){ + cy.get(Board.#firstBoardColumn) + .should("have.class", "d-flex flex-column align-stretch my-0") + .should("not.have.attr", "style", "min-width: 400px; max-width: 400px;"); + } + + seeMultiColumnBoard(){ + cy.get(Board.#firstBoardColumn) + .should("have.class", "px-4") + .should("have.attr", "style", "min-width: 400px; max-width: 400px;"); + } } export default Board; diff --git a/cypress/support/step_definition/course_board/commonBoardSteps.spec.js b/cypress/support/step_definition/course_board/commonBoardSteps.spec.js index 18d5d71a..9a82cb9c 100644 --- a/cypress/support/step_definition/course_board/commonBoardSteps.spec.js +++ b/cypress/support/step_definition/course_board/commonBoardSteps.spec.js @@ -47,6 +47,10 @@ When("I click on the option Publish in three dot menu in course board", () => { board.clickPublishOptionInThreeDotMenuInCourseBoard(); }); +When("I click on the option Change layout in three dot menu in course board", () => { + board.clickChangeLayoutOptionInThreeDotMenuInCourseBoard(); +}); + Then("I see the chip Draft in the course board", () => { board.seeDraftChipOnCourseBoard(); }); diff --git a/cypress/support/step_definition/course_board/createEditDeleteMultiColumnInBoardSteps.spec.js b/cypress/support/step_definition/course_board/createEditDeleteMultiColumnInBoardSteps.spec.js index 00472631..da6581d2 100644 --- a/cypress/support/step_definition/course_board/createEditDeleteMultiColumnInBoardSteps.spec.js +++ b/cypress/support/step_definition/course_board/createEditDeleteMultiColumnInBoardSteps.spec.js @@ -98,3 +98,11 @@ When("I choose multi-column board in the dialog box", () => { When("I choose single-column board in the dialog box", () => { board.clickOnSingleColumnBoardOptionInDialogBox(); }); + +When("I see the single-column board", () => { + board.seeSingleColumnBoard(); +}); + +When("I see the multi-column board", () => { + board.seeMultiColumnBoard(); +});