[v14] refactor(mc-scripts): to remove IE from browserslit (#836)

* refactor(mc-scripts): to remove IE from browserslit * fix(playground): to use supported permissions, fix icon color * refactor(cypress): to simplify login setup
commercetools · Jul 15, 2019 · 058cc31 · 058cc31
1 parent 54d90dc
commit 058cc31
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 44 deletions.
diff --git a/cypress/integration/playground/state-machines.js b/cypress/integration/playground/state-machines.js
@@ -1,12 +1,9 @@
-import { URL_BASE } from '../../support/urls';
+import { URL_STATE_MACHINES } from '../../support/urls';
 
 describe('State machines', () => {
   describe('List view', () => {
     it('should render page', () => {
-      cy.setDesktopViewport();
-      cy.login();
-      cy.visit(`${URL_BASE}/state-machines`);
-
+      cy.login({ redirectToUri: URL_STATE_MACHINES });
       cy.getByText('State Machines').should('exist');
     });
   });

diff --git a/cypress/integration/template-starter/main.js b/cypress/integration/template-starter/main.js
@@ -1,11 +1,8 @@
-import { URL_BASE } from '../../support/urls';
+import { URL_EXAMPLES_STARTER } from '../../support/urls';
 
 describe('Main view', () => {
   it('should render page', () => {
-    cy.setDesktopViewport();
-    cy.login();
-    cy.visit(`${URL_BASE}/examples-starter`);
-
+    cy.login({ redirectToUri: URL_EXAMPLES_STARTER });
     cy.getByText('Hello, world').should('exist');
   });
 });
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -1,5 +1,10 @@
 import 'cypress-testing-library/add-commands';
 
+function isLocalhost() {
+  const url = new URL(Cypress.config('baseUrl'));
+  return url.hostname === 'localhost';
+}
+
 // ***********************************************
 // This example commands.js shows you how to
 // create various custom commands and overwrite
@@ -30,25 +35,33 @@ Cypress.Commands.add('logout', () => {
   cy.visit('/logout');
 });
 
-Cypress.Commands.add('login', () => {
-  // Clear and previous session data (cookie and local storage)
-  cy.visit('/logout');
-  cy.visit('/login');
-
-  // Make sure all needed fields exist
-  cy.getByText('Email').should('exist');
-  cy.getByText('Password').should('exist');
-
-  // Fill out the form from `.env` or environment variables (CI)
-  cy.get('[name=email]').type(Cypress.env('LOGIN_USER'));
-  cy.get('[name=password]').type(Cypress.env('LOGIN_PASSWORD'));
-
-  // Sign in
-  cy.get('[aria-label="Sign in"]').click();
-
-  // Make sure that sign in worked
-  cy.get('[data-test=top-navigation').should('exist');
-});
+Cypress.Commands.add(
+  'login',
+  ({ redirectToUri, isForcedMenuOpen = false } = {}) => {
+    cy.setDesktopViewport();
+    cy.window().then(win =>
+      win.localStorage.setItem('isForcedMenuOpen', isForcedMenuOpen)
+    );
+    cy.visit('/logout');
+    // Wait to be in the "/login" route, then redirect to "/login" again
+    // to ensure we clear all query parameters, as they seem to interfer
+    // with the login form.
+    if (!isLocalhost()) {
+      cy.url().should('include', '/login');
+    }
+    cy.visit(`/login`);
+    cy.getByText('Email').should('exist');
+    cy.getByText('Password').should('exist');
+    cy.getByLabelText(/email/i).type(Cypress.env('LOGIN_USER'));
+    cy.getByLabelText(/password/i).type(Cypress.env('LOGIN_PASSWORD'), {
+      log: false,
+    });
+    cy.get('[aria-label="Sign in"]').click();
+    cy.get('[data-test=top-navigation').should('exist');
+    cy.visit(`${Cypress.config('baseUrl')}${redirectToUri}`);
+    cy.url().should('include', redirectToUri);
+  }
+);
 
 Cypress.Commands.add('setDesktopViewport', () => {
   // we use ui-elements which only render elements to the DOM when they are visible to the user

diff --git a/cypress/support/urls.js b/cypress/support/urls.js
@@ -1,7 +1,7 @@
-export const URL_GRAPHQL = 'https://mc-api.escemo.com/graphql';
-export const URL_API_TOKENS = 'https://mc-api.escemo.com/tokens';
-export const URL_LOGOUT = '/logout';
-
 export const projectKey = Cypress.env('PROJECT_KEY');
 
 export const URL_BASE = `/${projectKey}`;
+
+export const URL_STATE_MACHINES = `${URL_BASE}/state-machines`;
+
+export const URL_EXAMPLES_STARTER = `${URL_BASE}/examples-starter`;
diff --git a/packages/mc-scripts/package.json b/packages/mc-scripts/package.json
@@ -25,7 +25,7 @@
     "production": [
       ">1%",
       "not op_mini all",
-      "ie 11"
+      "not dead"
     ],
     "development": [
       "last 2 firefox versions",

diff --git a/packages/permissions/README.md b/packages/permissions/README.md
@@ -37,11 +37,9 @@ We recommend to put the permissions used by your application into a `constants.j
 ```js
 // constants.js
 export const PERMISSIONS = {
-  // Resource Accesses
   ViewProducts: 'ViewProducts',
   ManageProducts: 'ManageProducts',
   ViewOrders: 'ViewOrders',
-  ViewStates: 'ViewStates',
   ManageProductTypes: 'ManageProductTypes',
   ViewProductTypes: 'ViewProductTypes',
 };

diff --git a/playground/menu.json b/playground/menu.json
@@ -2,7 +2,7 @@
   "key": "state-machines",
   "uriPath": "state-machines",
   "icon": "RocketIcon",
-  "permissions": ["ViewStates", "ManageStates"],
+  "permissions": ["ManageDeveloperSettings", "ViewDeveloperSettings"],
   "featureToggle": null,
   "submenu": [],
   "labelAllLocales": [

diff --git a/playground/src/components/state-machines-list/state-machines-list.js b/playground/src/components/state-machines-list/state-machines-list.js
@@ -91,7 +91,7 @@ export class StateMachinesList extends React.Component {
                 <Spacings.Stack scale="m">
                   {this.props.cachedStateMachineObjectsCount !== null && (
                     <Spacings.Inline alignItems="center">
-                      <DotIcon size="small" theme="green" />
+                      <DotIcon size="small" color="primary" />
                       <Text.Detail isItalic={true}>
                         <FormattedMessage
                           {...messages.objectsInCache}

diff --git a/playground/src/components/state-machines-list/state-machines-list.spec.js b/playground/src/components/state-machines-list/state-machines-list.spec.js
@@ -60,7 +60,10 @@ describe('list view', () => {
   it('the user can see a list of state machines', async () => {
     const { getByText } = render({
       sdkMocks: [createStateMachinesListSdkMock()],
-      permissions: { canViewStates: true, canManageStates: true },
+      permissions: {
+        canViewDeveloperSettings: true,
+        canManageDeveloperSettings: true,
+      },
     });
     await waitForElement(() => getByText(/State machines/i));
     await waitForElement(() => getByText(/There are 2 objects in the cache/i));
@@ -73,7 +76,10 @@ describe('list view', () => {
         createStateMachinesListSdkMock(),
         createStateMachinesDetailSdkMock(),
       ],
-      permissions: { canViewStates: true, canManageStates: true },
+      permissions: {
+        canViewDeveloperSettings: true,
+        canManageDeveloperSettings: true,
+      },
     });
     await waitForElement(() => getByText(/There are 2 objects in the cache/i));
     fireEvent.click(getByText('sm-1'));

diff --git a/playground/src/constants.js b/playground/src/constants.js
@@ -1,4 +1,4 @@
 export const PERMISSIONS = {
-  ViewStates: 'ViewStates',
-  ManageStates: 'ManageStates',
+  ManageDeveloperSettings: 'ManageDeveloperSettings',
+  ViewDeveloperSettings: 'ViewDeveloperSettings',
 };
diff --git a/playground/src/routes.js b/playground/src/routes.js
@@ -19,7 +19,10 @@ const ApplicationRoutes = props => (
         path={`${props.match.path}/:id`}
         render={routerProps => (
           <RestrictedByPermissions
-            permissions={[PERMISSIONS.ViewStates, PERMISSIONS.ManageStates]}
+            permissions={[
+              PERMISSIONS.ViewDeveloperSettings,
+              PERMISSIONS.ManageDeveloperSettings,
+            ]}
             unauthorizedComponent={PageUnauthorized}
             shouldMatchSomePermissions={true}
           >
@@ -34,7 +37,10 @@ const ApplicationRoutes = props => (
       <Route
         render={routerProps => (
           <RestrictedByPermissions
-            permissions={[PERMISSIONS.ViewStates, PERMISSIONS.ManageStates]}
+            permissions={[
+              PERMISSIONS.ViewDeveloperSettings,
+              PERMISSIONS.ManageDeveloperSettings,
+            ]}
             unauthorizedComponent={PageUnauthorized}
             shouldMatchSomePermissions={true}
           >