test(e2e): add cy commands for storage-browser (#6208)

* test(e2e): add cy commands for storage-browser

* update fileuploader e2e to use cy.fileInputUpload

Author: ashwinkumar6

packages/e2e/cypress/integration/common/fileuploader.ts

@@ -1,40 +1,14 @@
 import { When } from '@badeball/cypress-cucumber-preprocessor';
 
 When('I select a file with file name {string}', (fileName: string) => {
-  cy.get('input[type=file]').selectFile(
-    {
-      contents: Cypress.Buffer.from('file contents'),
-      fileName,
-      lastModified: Date.now(),
-    },
-    /**
-     *  Since the input is hidden, this will need to be forced through Cypress
-     */
-    { force: true }
-  );
+  cy.fileInputUpload(fileName);
 });
 
 When(
   'I select a file with file name {string} and another file with file name {string}',
   (fileName: string, fileName2: string) => {
-    cy.get('input[type=file]').selectFile(
-      [
-        {
-          contents: Cypress.Buffer.from('file contents'),
-          fileName,
-          lastModified: Date.now(),
-        },
-        {
-          contents: Cypress.Buffer.from('file contents'),
-          fileName: fileName2,
-          lastModified: Date.now(),
-        },
-      ],
-      /**
-       *  Since the input is hidden, this will need to be forced through Cypress
-       */
-      { force: true }
-    );
+    cy.fileInputUpload(fileName);
+    cy.fileInputUpload(fileName2);
   }
 );
 

packages/e2e/cypress/integration/common/shared.ts

@@ -10,38 +10,6 @@ let window = null;
 let stub = null;
 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', {
-    name: new RegExp(`${escapeRegExp(name)}`, 'i'),
-  }).click();
-};
-
-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'}`;
 };
@@ -272,10 +240,10 @@ When('I type a new {string}', (field: string) => {
   cy.findInputField(field).typeAliasWithStatus(field, `${Date.now()}`);
 });
 
-When('I type a new {string} with value {string}', typeInInputHandler);
+When('I type a new {string} with value {string}', cy.typeInInputHandler);
 
 When('I type a new {string} with random value', (field: string) => {
-  typeInInputHandler(field, randomFileName);
+  cy.typeInInputHandler(field, randomFileName);
 });
 
 When('I lose focus on {string} input', (field: string) => {
@@ -306,10 +274,10 @@ Then('I press the {string} key', (key: string) => {
   cy.get('body').type(key);
 });
 
-When('I click the button containing {string}', clickButtonWithText);
+When('I click the button containing {string}', cy.clickButtonWithText);
 
 When('I click the button containing random name', () => {
-  clickButtonWithText(randomFileName);
+  cy.clickButtonWithText(randomFileName);
 });
 
 When('I click the first button containing {string}', (name: string) => {
@@ -388,11 +356,11 @@ Then('I see tab {string}', (search: string) => {
   cy.findAllByRole('tab').first().should('be.visible').contains(search);
 });
 
-Then('I see {string}', doesDocumentContainText);
+Then('I see {string}', cy.doesDocumentContainText);
 
 Then('I see {string} files with random names', (count: string) => {
   for (let i = 1; i <= parseInt(count); i++) {
-    doesDocumentContainText(`${randomFileName}-${i}`);
+    cy.doesDocumentContainText(`${randomFileName}-${i}`);
   }
 });
 
@@ -679,11 +647,11 @@ Then('I see the {string} radio button checked', (label: string) => {
 });
 
 When('I upload {string} files with random names', (count: string) =>
-  fileInputUpload(parseInt(count))
+  cy.fileInputUpload(randomFileName, parseInt(count))
 );
 
 When(
   'I upload a folder {string} with {string} files with random names',
   (folderName: string, count: string) =>
-    fileInputUpload(parseInt(count), folderName)
+    cy.fileInputUpload(`${folderName}/${randomFileName}`, parseInt(count))
 );

packages/e2e/cypress/support/commands.d.ts

@@ -75,3 +75,34 @@ Cypress.Commands.add('findInputField', (field: string) => {
 Cypress.Commands.add('waitForIdleMap', () => {
   cy.window().its('idleMap').should('be.true');
 });
+
+Cypress.Commands.add('clickButtonWithText', (name: string) => {
+  cy.findByRole('button', {
+    name: new RegExp(`${escapeRegExp(name)}`, 'i'),
+  }).click();
+});
+
+Cypress.Commands.add('doesDocumentContainText', (text: string) => {
+  cy.findByRole('document')
+    .contains(new RegExp(escapeRegExp(text), 'i'))
+    .should('exist');
+});
+
+Cypress.Commands.add('typeInInputHandler', (field: string, value: string) => {
+  cy.findInputField(field).type(value);
+});
+
+Cypress.Commands.add(
+  'fileInputUpload',
+  (fileName: string, fileCount: number = 1) => {
+    const folderFiles = [];
+    for (let i = 1; i <= fileCount; i++) {
+      folderFiles.push({
+        contents: Cypress.Buffer.from(`File ${i} content`),
+        fileName: `${fileName}-${i}`,
+        mimeType: 'text/plain',
+      });
+    }
+    cy.get('input[type="file"]').selectFile(folderFiles, { force: true });
+  }
+);

packages/e2e/cypress/support/commands.ts

@@ -118,12 +118,10 @@ Feature: Create folder with Storage Browser
     # 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
@@ -135,7 +133,4 @@ Feature: Create folder with Storage Browser
     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"