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

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)
+);

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}`);
+    }
+  }
+);

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"
+