From c90d88cf97455651f695454be3d6355cc2cd18b5 Mon Sep 17 00:00:00 2001 From: Ashwin Kumar Date: Fri, 22 Nov 2024 15:43:08 -0800 Subject: [PATCH] test(react-storage): add upload copy and delete e2e tests (#6147) * test(react-storage): add upload copy and delete e2e tests * make testing multiple files a variable --- .../e2e/cypress/integration/common/shared.ts | 52 ++++++- .../integration/common/storagebrowser.ts | 22 +++ .../storage-browser/action-menu.feature | 141 ++++++++++++++++++ .../storage-browser/create-folder.feature | 63 -------- 4 files changed, 210 insertions(+), 68 deletions(-) create mode 100644 packages/e2e/features/ui/components/storage/storage-browser/action-menu.feature delete mode 100644 packages/e2e/features/ui/components/storage/storage-browser/create-folder.feature diff --git a/packages/e2e/cypress/integration/common/shared.ts b/packages/e2e/cypress/integration/common/shared.ts index 806b919b2d..904689cf1e 100644 --- a/packages/e2e/cypress/integration/common/shared.ts +++ b/packages/e2e/cypress/integration/common/shared.ts @@ -8,7 +8,13 @@ import { get, escapeRegExp } from 'lodash'; let language = 'en-US'; let window = null; let stub = null; -const randomFileName = `fileName${Math.random() * 10000}`; +export const randomFileName = `fileName${Math.random() * 10000}`; + +const doesDocumentContainText = (text: string) => { + cy.findByRole('document') + .contains(new RegExp(escapeRegExp(text), 'i')) + .should('exist'); +}; const clickButtonWithText = (name: string) => { cy.findByRole('button', { @@ -20,6 +26,22 @@ const typeInInputHandler = (field: string, value: string) => { cy.findInputField(field).type(value); }; +const fileInputUpload = (fileCount: number = 1, folderName?: string) => { + const folderFiles = []; + for (let i = 1; i <= fileCount; i++) { + const fileName = folderName + ? `${folderName}/${randomFileName}-${i}` + : `${randomFileName}-${i}`; + + folderFiles.push({ + contents: Cypress.Buffer.from(`File ${i} content`), + fileName, + mimeType: 'text/plain', + }); + } + cy.get('input[type="file"]').selectFile(folderFiles, { force: true }); +}; + const getRoute = (routeMatcher: { headers: { [key: string]: string } }) => { return `${routeMatcher.headers?.['X-Amz-Target'] || 'route'}`; }; @@ -270,6 +292,10 @@ When('I click the {string}', (id: string) => { cy.findByTestId(id).click(); }); +When('I click the element with id attribute {string}', (id: string) => { + cy.get(`#${id}`).click({ force: true }); +}); + When('I click the {string} button', (name: string) => { cy.findByRole('button', { name: new RegExp(`^${escapeRegExp(name)}$`, 'i'), @@ -362,10 +388,12 @@ Then('I see tab {string}', (search: string) => { cy.findAllByRole('tab').first().should('be.visible').contains(search); }); -Then('I see {string}', (message: string) => { - cy.findByRole('document') - .contains(new RegExp(escapeRegExp(message), 'i')) - .should('exist'); +Then('I see {string}', doesDocumentContainText); + +Then('I see {string} files with random names', (count: string) => { + for (let i = 1; i <= parseInt(count); i++) { + doesDocumentContainText(`${randomFileName}-${i}`); + } }); Then('I do not see {string}', (message: string) => { @@ -581,6 +609,10 @@ Then('I click the submit button', () => { }).click(); }); +Then('I click the label containing text {string}', (labelText: string) => { + cy.contains('label', labelText).should('be.visible').click({ force: true }); +}); + Then('I confirm {string} error is accessible in password field', () => { // input field should be invalid cy.findInputField('Password') @@ -645,3 +677,13 @@ Then('I see the {string} radio button checked', (label: string) => { 'be.checked' ); }); + +When('I upload {string} files with random names', (count: string) => + fileInputUpload(parseInt(count)) +); + +When( + 'I upload a folder {string} with {string} files with random names', + (folderName: string, count: string) => + fileInputUpload(parseInt(count), folderName) +); diff --git a/packages/e2e/cypress/integration/common/storagebrowser.ts b/packages/e2e/cypress/integration/common/storagebrowser.ts index 4254656b82..8e8be9742d 100644 --- a/packages/e2e/cypress/integration/common/storagebrowser.ts +++ b/packages/e2e/cypress/integration/common/storagebrowser.ts @@ -1,4 +1,14 @@ import { When, Then } from '@badeball/cypress-cucumber-preprocessor'; +import { randomFileName } from './shared'; + +const selectTableRowCheckBox = (name: string) => { + cy.contains('table tbody td:nth-child(2)', new RegExp('^' + name + '$')) + .siblings() + .first() + .within(() => { + cy.get('label').click({ force: true }); + }); +}; When( 'I drag and drop a file into the storage browser with file name {string}', @@ -65,3 +75,15 @@ Then('I click and see download succeed for {string}', (name: string) => { }); }); }); + +Then('I click checkbox for file {string}', selectTableRowCheckBox); + +Then( + 'I click checkbox for with {string} files with random names', + (count: string) => { + const fileCount = parseInt(count); + for (let i = 1; i <= fileCount; i++) { + selectTableRowCheckBox(`${randomFileName}-${i}`); + } + } +); diff --git a/packages/e2e/features/ui/components/storage/storage-browser/action-menu.feature b/packages/e2e/features/ui/components/storage/storage-browser/action-menu.feature new file mode 100644 index 0000000000..7371490c47 --- /dev/null +++ b/packages/e2e/features/ui/components/storage/storage-browser/action-menu.feature @@ -0,0 +1,141 @@ +Feature: Create folder with Storage Browser + + Background: + Given I'm running the example "ui/components/storage/storage-browser/default-auth" + + @react + Scenario: Create folder successfully creates a new empty folder + When I type my "email" with status "CONFIRMED" + Then I type my password + Then I click the "Sign in" button + When I click the first button containing "public" + When I click the first button containing "DoNotDeleteThisFolder_CanDeleteAllChildren" + Then I see the "Menu Toggle" button + When I click the "Menu Toggle" button + Then I see the "Create Folder" menuitem + When I click the "Create Folder" menuitem + Then I see "Folder name" + Then I see the "Create Folder" button + Then the "Create Folder" button is disabled + When I type a new "Folder name" with random value + Then I see the "Create Folder" button + When I click the "Create Folder" button + Then I see "Folder created" + # verify folder creation + When I click the "Exit" button + Then I click the button containing random name + Then I see "No files" + # TODO: delete created folder + + @react + Scenario: Create folder fails on overwrite of existing folder name + When I type my "email" with status "CONFIRMED" + Then I type my password + Then I click the "Sign in" button + When I click the first button containing "public" + Then I see the "Menu Toggle" button + When I click the "Menu Toggle" button + Then I see the "Create Folder" menuitem + When I click the "Create Folder" menuitem + Then I see "Folder name" + Then I see the "Create Folder" button + Then the "Create Folder" button is disabled + When I type a new "Folder name" with value "Blackberry" + Then I see the "Create Folder" button + When I click the "Create Folder" button + Then I see "A folder already exists with the provided name" + + @react + Scenario: Create folder input shows error message when folder name contains "/" + When I type my "email" with status "CONFIRMED" + Then I type my password + Then I click the "Sign in" button + When I click the first button containing "public" + Then I see the "Menu Toggle" button + When I click the "Menu Toggle" button + Then I see the "Create Folder" menuitem + When I click the "Create Folder" menuitem + Then I see "Folder name" + Then I see the "Create Folder" button + Then the "Create Folder" button is disabled + When I type a new "Folder name" with value "Blackberry/" + When I lose focus on "Folder name" input + Then I see 'Folder name cannot contain \"/\", nor end or start with \".\"' + + @react + Scenario: upload, list, copy and delete a file using toggle menu + When I type my "email" with status "CONFIRMED" + Then I type my password + Then I click the "Sign in" button + When I click the first button containing "public" + Then I see the "Menu Toggle" button + When I click the "Menu Toggle" button + # upload file + Then I see the "Upload" menuitem + When I click the "Upload" menuitem + Then the "Upload" button is disabled + Then I upload "1" files with random names + Then I see "Not started" + Then I click the label containing text "Overwrite existing files" + When I click the "Upload" button + Then I see "100%" + Then I see "All files uploaded" + When I click the "Exit" button + # list uploaded file + Then I see "1" files with random names + # copy file + Then I click checkbox for with "1" files with random names + When I click the "Menu Toggle" button + When I click the "Copy" menuitem + Then I see "Copy destination" + Then I click the "DoNotDeleteThisFolder_CanDeleteAllChildren/" button + Then I click the "Copy" button + Then I see "All files copied" + When I click the "Exit" button + # delete file + Then I click checkbox for with "1" files with random names + When I click the "Menu Toggle" button + Then I click the "Delete" menuitem + Then I click the "Delete" button + Then I see "All files deleted" + When I click the "Exit" button + # delete file copy + When I click the first button containing "DoNotDeleteThisFolder_CanDeleteAllChildren" + Then I click checkbox for with "1" files with random names + When I click the "Menu Toggle" button + Then I click the "Delete" menuitem + Then I click the "Delete" button + Then I see "All files deleted" + + @react + Scenario: upload a folder + When I type my "email" with status "CONFIRMED" + Then I type my password + Then I click the "Sign in" button + When I click the first button containing "public" + Then I see the "Menu Toggle" button + When I click the "Menu Toggle" button + # upload file + Then I see the "Upload" menuitem + When I click the "Upload" menuitem + Then the "Upload" button is disabled + Then I upload a folder "e2eTemp" with "2" files with random names + Then I see "Not started" + Then I click the label containing text "Overwrite existing files" + When I click the "Upload" button + Then I see "100%" + Then I see "All files uploaded" + When I click the "Exit" button + # list uploaded file + When I click the first button containing "e2eTemp" + Then I see "2" files with random names + # delete created file + Then I click the element with id attribute "header-checkbox" + When I click the "Menu Toggle" button + Then I click the "Delete" menuitem + Then I click the "Delete" button + Then I see "All files deleted" + When I click the "Exit" button + # verify all files are deleted + Then I see "No files" + diff --git a/packages/e2e/features/ui/components/storage/storage-browser/create-folder.feature b/packages/e2e/features/ui/components/storage/storage-browser/create-folder.feature deleted file mode 100644 index be60123313..0000000000 --- a/packages/e2e/features/ui/components/storage/storage-browser/create-folder.feature +++ /dev/null @@ -1,63 +0,0 @@ -Feature: Create folder with Storage Browser - - Background: - Given I'm running the example "ui/components/storage/storage-browser/default-auth" - - @react - Scenario: Create folder successfully creates a new empty folder - When I type my "email" with status "CONFIRMED" - Then I type my password - Then I click the "Sign in" button - When I click the first button containing "public" - When I click the first button containing "DoNotDeleteThisFolder_CanDeleteAllChildren" - Then I see the "Menu Toggle" button - When I click the "Menu Toggle" button - Then I see the "Create Folder" menuitem - When I click the "Create Folder" menuitem - Then I see "Folder name" - Then I see the "Create Folder" button - Then the "Create Folder" button is disabled - When I type a new "Folder name" with random value - Then I see the "Create Folder" button - When I click the "Create Folder" button - Then I see "Folder created" - # verify folder creation - When I click the "Exit" button - Then I click the button containing random name - Then I see "No files" - # TODO: delete created folder - - @react - Scenario: Create folder fails on overwrite of existing folder name - When I type my "email" with status "CONFIRMED" - Then I type my password - Then I click the "Sign in" button - When I click the first button containing "public" - Then I see the "Menu Toggle" button - When I click the "Menu Toggle" button - Then I see the "Create Folder" menuitem - When I click the "Create Folder" menuitem - Then I see "Folder name" - Then I see the "Create Folder" button - Then the "Create Folder" button is disabled - When I type a new "Folder name" with value "Blackberry" - Then I see the "Create Folder" button - When I click the "Create Folder" button - Then I see "A folder already exists with the provided name" - - @react - Scenario: Create folder input shows error message when folder name contains "/" - When I type my "email" with status "CONFIRMED" - Then I type my password - Then I click the "Sign in" button - When I click the first button containing "public" - Then I see the "Menu Toggle" button - When I click the "Menu Toggle" button - Then I see the "Create Folder" menuitem - When I click the "Create Folder" menuitem - Then I see "Folder name" - Then I see the "Create Folder" button - Then the "Create Folder" button is disabled - When I type a new "Folder name" with value "Blackberry/" - When I lose focus on "Folder name" input - Then I see 'Folder name cannot contain \"/\", nor end or start with \".\"'