[WIP] chore(storage-browser): add Loading state e2e tests for storage browser

packages/e2e/.gitignore

@@ -2,6 +2,7 @@
 cypress/fixtures/example.json
 cypress/screenshots
 cypress/videos
+cypress/downloads
 
 detox/screenshots
 

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

@@ -228,6 +228,10 @@ const typeInInputHandler = (field: string, value: string) => {
 };
 When('I type a new {string} with value {string}', typeInInputHandler);
 
+When('I lose focus on {string} input', (field: string) => {
+  cy.findInputField(field).blur();
+});
+
 When('I click the {string} tab', (label: string) => {
   cy.findByRole('tab', {
     name: new RegExp(`^${escapeRegExp(label)}$`, 'i'),
@@ -244,6 +248,18 @@ When('I click the {string} button', (name: string) => {
   }).click();
 });
 
+When('I click the button containing {string}', (name: string) => {
+  cy.findByRole('button', {
+    name: new RegExp(`${escapeRegExp(name)}`, 'i'),
+  }).click();
+});
+
+Then('I see the button containing {string}', (name: string) => {
+  cy.findByRole('button', {
+    name: new RegExp(`${escapeRegExp(name)}`, 'i'),
+  }).should('exist');
+});
+
 Then('I see the {string} button', (name: string) => {
   cy.findByRole('button', {
     name: new RegExp(`^${escapeRegExp(name)}$`, 'i'),
@@ -256,6 +272,18 @@ Then('I do not see the {string} button', (name: string) => {
   }).should('not.exist');
 });
 
+When('I click the {string} menuitem', (label: string) => {
+  cy.findByRole('menuitem', {
+    name: new RegExp(`^${escapeRegExp(label)}$`, 'i'),
+  }).click();
+});
+
+Then('I see the {string} menuitem', (label: string) => {
+  cy.findByRole('menuitem', {
+    name: new RegExp(`^${escapeRegExp(label)}$`, 'i'),
+  }).should('exist');
+});
+
 When('I click the {string} checkbox', (label: string) => {
   cy.findByLabelText(new RegExp(`^${escapeRegExp(label)}`, 'i')).click({
     // We have to force this click because the checkbox button isn't visible by default
@@ -286,6 +314,12 @@ Then('I see {string}', (message: string) => {
     .should('exist');
 });
 
+Then('I do not see {string}', (message: string) => {
+  cy.findByRole('document')
+    .contains(new RegExp(escapeRegExp(message), 'i'))
+    .should('not.exist');
+});
+
 Then('I see {string} element', (id: string) => {
   cy.findByTestId(id).should('exist');
 });

packages/e2e/cypress/integration/ui/components/storage/storage-browser/loading.default-auth/loading.default-auth.steps.ts

@@ -0,0 +1,17 @@
+import { When } from '@badeball/cypress-cucumber-preprocessor';
+import { escapeRegExp } from 'lodash';
+
+When(
+  'I click the button containing {string} on a slow connection',
+  (name: string) => {
+    cy.intercept({ method: 'GET', query: { 'list-type': '2' } }, (req) => {
+      req.on('response', (res) => {
+        res.setDelay(5000);
+      });
+    });
+
+    cy.findByRole('button', {
+      name: new RegExp(`${escapeRegExp(name)}`, 'i'),
+    }).click();
+  }
+);

packages/e2e/features/ui/components/storage/storage-browser/create-folder.feature

@@ -0,0 +1,40 @@
+Feature: Create folder with Storage Browser
+
+  Background:
+    Given I'm running the example "ui/components/storage/storage-browser/default-auth"
+
+  @react
+  Scenario: Create 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 button containing "public"
+    Then I see the "Actions" button
+    When I click the "Actions" button
+    Then I see the "Create Folder" menuitem
+    When I click the "Create Folder" menuitem
+    Then I see "Enter folder name:"
+    Then I see the "Create Folder" button
+    Then the "Create Folder" button is disabled 
+    When I type a new "Enter folder name:" with value "Blackberry"
+    Then I see the "Create Folder" button
+    When I click the "Create Folder" button
+    Then I see "Folder created."
+
+
+ @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 button containing "public"
+    Then I see the "Actions" button
+    When I click the "Actions" button
+    Then I see the "Create Folder" menuitem
+    When I click the "Create Folder" menuitem
+    Then I see "Enter folder name:"
+    Then I see the "Create Folder" button
+    Then the "Create Folder" button is disabled 
+    When I type a new "Enter folder name:" with value "Blackberry/"
+    When I lose focus on "Enter folder name:" input
+    Then I see "Folder name must be at least one character and cannot contain a \"/\"."

packages/e2e/features/ui/components/storage/storage-browser/error-boundary.feature

@@ -0,0 +1,33 @@
+Feature: Storage Browser uses error boundry
+
+  Background:
+    Given I'm running the example "ui/components/storage/storage-browser/default-auth"
+
+  @react
+  Scenario: Attempt to access forbidden folder
+    When I type my "email" with status "CONFIRMED"
+    Then I type my password
+    Then I see the "Sign in" button
+    When I click the "Sign in" button
+    When I click the button containing "forbidden"
+    Then I see "no identity-based policy allows the s3:ListBucket action"
+
+
+  @react
+  Scenario: Attempt to add folder without write access
+    When I type my "email" with status "CONFIRMED"
+    Then I type my password
+    Then I see the "Sign in" button
+    When I click the "Sign in" button
+    When I click the button containing "forbidden"
+    Then I see the "Actions" button
+    When I click the "Actions" button
+    Then I see the "Create Folder" menuitem
+    When I click the "Create Folder" menuitem
+    Then I see "Enter folder name:"
+    Then I see the "Create Folder" button
+    Then the "Create Folder" button is disabled 
+    When I type a new "Enter folder name:" with value "Blackberry"
+    Then I see the "Create Folder" button
+    When I click the "Create Folder" button
+    Then I see "no identity-based policy allows the s3:PutObject action"

packages/e2e/features/ui/components/storage/storage-browser/insufficient-permissions.feature

@@ -0,0 +1,32 @@
+Feature: Storage Browser denied access without sufficient permissions
+
+  Background:
+    Given I'm running the example "ui/components/storage/storage-browser/default-auth"
+
+  @react
+  Scenario: Attempt to access forbidden folder
+    When I type my "email" with status "CONFIRMED"
+    Then I type my password
+    Then I see the "Sign in" button
+    When I click the "Sign in" button
+    When I click the button containing "forbidden"
+    Then I don't see "amplify-table"
+
+  @react
+  Scenario: Attempt to add folder without write access
+    When I type my "email" with status "CONFIRMED"
+    Then I type my password
+    Then I see the "Sign in" button
+    When I click the "Sign in" button
+    When I click the button containing "forbidden"
+    Then I see the "Actions" button
+    When I click the "Actions" button
+    Then I see the "Create Folder" menuitem
+    When I click the "Create Folder" menuitem
+    Then I see "Enter folder name:"
+    Then I see the "Create Folder" button
+    Then the "Create Folder" button is disabled 
+    When I type a new "Enter folder name:" with value "Blackberry"
+    Then I see the "Create Folder" button
+    When I click the "Create Folder" button
+    Then I do not see "Folder created."

packages/e2e/features/ui/components/storage/storage-browser/loading.default-auth.feature

@@ -0,0 +1,21 @@
+Feature: (Default Auth) Loading spinner on Storage Browser views
+
+  Background:
+    Given I'm running the example "ui/components/storage/storage-browser/default-auth"
+
+  @react
+  Scenario: Loading spinner on LocationDetailView
+    When I type my "email" with status "CONFIRMED"
+    Then I type my password
+    Then I click the "Sign in" button
+    Then I click the button containing "public" on a slow connection
+    Then I see "Loading"
+
+  @react
+  Scenario: Loading spinner on LocationDetailView after using the Refresh control
+    When I type my "email" with status "CONFIRMED"
+    Then I type my password
+    Then I click the "Sign in" button
+    Then I click the button containing "public"
+    Then I click the button containing "Refresh table" on a slow connection
+    Then I see "Loading"

packages/e2e/features/ui/components/storage/storage-browser/loading.managed-auth.feature

@@ -0,0 +1,12 @@
+Feature: (Managed Auth) Loading spinner on Storage Browser views
+
+  Background:
+    Given I'm running the example "ui/components/storage/storage-browser/managed-auth"
+
+  @react
+  Scenario: Loading spinner on LocationDetailView
+
+
+  @react
+  Scenario: Loading spinner on LocationDetailView after using the Refresh control
+

packages/e2e/features/ui/components/storage/storage-browser/navigate-locations.feature

@@ -0,0 +1,44 @@
+Feature: Storage Browser navigate breadcrumbs
+
+  Background:
+    Given I'm running the example "ui/components/storage/storage-browser/default-auth"
+
+  @react
+  Scenario: Navigate back to Home
+    When I type my "email" with status "CONFIRMED"
+    Then I type my password
+    Then I click the "Sign in" button
+    When I click the button containing "public"
+    Then I see the "Home" button
+    When I click the "Home" button
+    Then I see "HOME"
+    Then I see the button containing "public"
+
+  @react
+  Scenario: Navigate back up to prefix
+    When I type my "email" with status "CONFIRMED"
+    Then I type my password
+    Then I click the "Sign in" button
+    When I click the button containing "public"
+    Then I see the "Blueberry/" button
+    When I click the "Blueberry/" button
+    Then I see "Blackberry/"
+    When I click the "Blackberry/" button
+    Then I see "Blueberry/"
+    When I click the "Blueberry" button
+    Then I see "Blueberry/"
+
+  @react
+  Scenario: Navigate to parent folder from nested child 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 button containing "public"
+    Then I see the "Blueberry/" button
+    When I click the "Blueberry/" button
+    Then I see the "Acai/" button
+    When I click the "Acai/" button
+    Then I see "Acai/"
+    Then I see the "Blueberry" button
+    When I click the "Blueberry" button
+    Then I see "Blueberry/"