add tests for apps (#1227)

cypress/apiRequests/Apps.js

@@ -0,0 +1,63 @@
+export function createApp(name, permission) {
+  const mutation = `mutation{
+    appCreate(input:{name:"${name}" permissions:${permission}}){
+      authToken
+      errors{
+        field
+        message
+      }
+      app{
+        id
+      }
+    }
+  }`;
+  return cy.sendRequestWithQuery(mutation).its("body.data.appCreate.app");
+}
+
+export function getApps(first, search) {
+  const mutation = `query{
+    apps(filter:{ search: "${search}"} first: ${first}){
+      edges{
+        node{
+          name
+          id
+        }
+      }
+    }
+  }`;
+  return cy
+    .sendRequestWithQuery(mutation)
+    .then(resp => resp.body.data.apps.edges);
+}
+
+export function deleteApp(appId) {
+  const mutation = `mutation{
+    appDelete(id:"${appId}"){
+      errors{
+        field
+        message
+      }
+    }
+  }`;
+  return cy.sendRequestWithQuery(mutation);
+}
+
+export function getApp(appId) {
+  const query = `query{
+    app(id:"${appId}"){
+      name
+      permissions{
+        code
+      }
+      tokens{
+        name
+        authToken
+      }
+      webhooks{
+        name
+        targetUrl
+      }
+    }
+  }`;
+  return cy.sendRequestWithQuery(query).its("body.data.app");
+}

cypress/elements/apps/appDetails.js

@@ -0,0 +1,12 @@
+export const APP_DETAILS = {
+  nameInput: '[name="name"]',
+  manageAppsPermissionCheckbox: '[id="MANAGE_APPS"]',
+  createWebhookButton: '[data-test-id = "createWebhook"]',
+  createTokenButton: '[data-test-id="createToken"]',
+  createTokenForm: {
+    tokenDialog: '[role="dialog"]',
+    nameInput: '[name="name"]',
+    tokenToCopy: '[data-test-id="generatedToken"]',
+    doneButton: '[data-test-id="done"]'
+  }
+};

cypress/elements/apps/appsList.js

@@ -0,0 +1,3 @@
+export const APPS_LIST = {
+  createLocalAppButton: '[data-test-id="createApp"]'
+};

cypress/elements/apps/webhookDetails.js

@@ -0,0 +1,4 @@
+export const WEBHOOK_DETAILS = {
+  nameInput: '[name="name"]',
+  targetUrlInput: '[name="targetUrl"]'
+};

cypress/integration/allEnv/apps.js

@@ -0,0 +1,104 @@
+import faker from "faker";
+
+import { createApp, getApp } from "../../apiRequests/Apps";
+import { ONE_PERMISSION_USERS } from "../../Data/users";
+import { APP_DETAILS } from "../../elements/apps/appDetails";
+import { APPS_LIST } from "../../elements/apps/appsList";
+import { WEBHOOK_DETAILS } from "../../elements/apps/webhookDetails";
+import { BUTTON_SELECTORS } from "../../elements/shared/button-selectors";
+import { confirmationMessageShouldDisappear } from "../../steps/shared/confirmationMessage";
+import { appDetailsUrl, urlList } from "../../url/urlList";
+import { deleteAppsStartsWith } from "../../utils/appUtils";
+
+describe("Tests for apps", () => {
+  const startsWith = "Apps";
+  const name = `${startsWith}${faker.datatype.number()}`;
+
+  let createdApp;
+
+  before(() => {
+    cy.clearSessionData().loginUserViaRequest();
+    deleteAppsStartsWith(startsWith);
+    createApp(name, "MANAGE_APPS").then(app => {
+      createdApp = app;
+    });
+  });
+
+  beforeEach(() => {
+    cy.clearSessionData().loginUserViaRequest("auth", ONE_PERMISSION_USERS.app);
+  });
+
+  it("should create app", () => {
+    const randomName = `${startsWith}${faker.datatype.number()}`;
+
+    cy.visit(urlList.apps)
+      .get(APPS_LIST.createLocalAppButton)
+      .click()
+      .get(APP_DETAILS.nameInput)
+      .type(randomName)
+      .get(APP_DETAILS.manageAppsPermissionCheckbox)
+      .click()
+      .addAliasToGraphRequest("AppCreate")
+      .get(BUTTON_SELECTORS.confirm)
+      .click();
+    confirmationMessageShouldDisappear();
+    cy.wait("@AppCreate")
+      .its("response.body.data.appCreate.app")
+      .then(app => {
+        getApp(app.id);
+      })
+      .then(app => {
+        expect(app.name).to.eq(randomName);
+        const token = app.tokens.find(element => element.name === "Default");
+        expect(token).to.be.ok;
+      });
+  });
+
+  it("should create webhook", () => {
+    const randomName = `${startsWith}${faker.datatype.number()}`;
+    const targetUrl = `http://example.${randomName}`;
+
+    cy.visit(appDetailsUrl(createdApp.id))
+      .get(APP_DETAILS.createWebhookButton)
+      .click()
+      .get(WEBHOOK_DETAILS.nameInput)
+      .type(randomName)
+      .get(WEBHOOK_DETAILS.targetUrlInput)
+      .type(targetUrl)
+      .get(BUTTON_SELECTORS.confirm)
+      .click();
+    confirmationMessageShouldDisappear();
+    getApp(createdApp.id).then(({ webhooks }) => {
+      expect(webhooks[0].name).to.eq(randomName);
+      expect(webhooks[0].targetUrl).to.eq(targetUrl);
+    });
+  });
+
+  it("should create token", () => {
+    const randomName = `${startsWith}${faker.datatype.number()}`;
+    let expectedToken;
+
+    cy.visit(appDetailsUrl(createdApp.id))
+      .get(APP_DETAILS.createTokenButton)
+      .click()
+      .get(APP_DETAILS.createTokenForm.tokenDialog)
+      .find(APP_DETAILS.createTokenForm.nameInput)
+      .type(randomName)
+      .get(BUTTON_SELECTORS.submit)
+      .click()
+      .get(APP_DETAILS.createTokenForm.tokenToCopy)
+      .invoke("text")
+      .then(text => {
+        expectedToken = text;
+        cy.get(APP_DETAILS.createTokenForm.doneButton).click();
+        getApp(createdApp.id);
+      })
+      .then(app => {
+        const token = app.tokens.find(element => element.name === randomName);
+        const tokenLastFourDigits = expectedToken.slice(
+          expectedToken.length - 4
+        );
+        expect(token.authToken).to.eq(tokenLastFourDigits);
+      });
+  });
+});

cypress/url/urlList.js

@@ -17,6 +17,7 @@ export const urlList = {
   weightRete: "weight/",
   attributes: "attributes/",
   productTypes: "product-types/",
+  apps: "apps/",
   customers: "customers/"
 };
 
@@ -41,3 +42,5 @@ export const warehouseDetailsUrl = warehouseId =>
 
 export const productTypeDetailsUrl = productTypeId =>
   `${urlList.productTypes}${productTypeId}`;
+
+export const appDetailsUrl = appId => `${urlList.apps}custom/${appId}`;

cypress/utils/appUtils.js

@@ -0,0 +1,5 @@
+import { deleteApp, getApps } from "../apiRequests/Apps";
+
+export function deleteAppsStartsWith(startsWith) {
+  cy.deleteElementsStartsWith(deleteApp, getApps, startsWith);
+}

src/apps/components/CustomAppTokens/CustomAppTokens.tsx

@@ -39,7 +39,7 @@ const CustomAppTokens: React.FC<CustomAppTokensProps> = props => {
           description: "header"
         })}
         toolbar={
-          <Button color="primary" onClick={onCreate}>
+          <Button color="primary" onClick={onCreate} data-test-id="createToken">
             <FormattedMessage
               defaultMessage="Create Token"
               description="button"

src/apps/components/CustomApps/CustomApps.tsx

@@ -42,7 +42,11 @@ const CustomApps: React.FC<CustomAppsProps> = ({
             className={classes.title}
             action={
               !!navigateToCustomAppCreate && (
-                <Button color="primary" onClick={navigateToCustomAppCreate}>
+                <Button
+                  color="primary"
+                  onClick={navigateToCustomAppCreate}
+                  data-test-id="createApp"
+                >
                   <FormattedMessage
                     defaultMessage="Create App"
                     description="create app button"

src/apps/components/TokenCreateDialog/TokenCreateDialog.tsx

@@ -89,7 +89,9 @@ const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
                     <Typography variant="caption">
                       <FormattedMessage defaultMessage="Generated Token" />
                     </Typography>
-                    <Typography>{token}</Typography>
+                    <Typography data-test-id="generatedToken">
+                      {token}
+                    </Typography>
                     <Button
                       className={classes.copy}
                       color="primary"
@@ -115,6 +117,7 @@ const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
                     <FormattedMessage {...buttonMessages.back} />
                   </Button>
                   <ConfirmButton
+                    data-test="submit"
                     transitionState={confirmButtonState}
                     onClick={submit}
                   >
@@ -125,7 +128,12 @@ const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
                   </ConfirmButton>
                 </>
               ) : (
-                <Button color="primary" variant="contained" onClick={onClose}>
+                <Button
+                  color="primary"
+                  variant="contained"
+                  onClick={onClose}
+                  data-test-id="done"
+                >
                   <FormattedMessage {...buttonMessages.done} />
                 </Button>
               )}

src/components/AccountPermissions/AccountPermissions.tsx

@@ -136,6 +136,7 @@ const AccountPermissions: React.FC<AccountPermissionsProps> = props => {
             >
               <ListItemIcon>
                 <Checkbox
+                  data-test-id="fullAccess"
                   color="primary"
                   edge="start"
                   checked={data.hasFullAccess}

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -23983,6 +23983,7 @@ exports[`Storyshots Views / Apps / Apps list default 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+              data-test-id="createApp"
               tabindex="0"
               type="button"
             >
@@ -24300,6 +24301,7 @@ exports[`Storyshots Views / Apps / Apps list loading 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+              data-test-id="createApp"
               tabindex="0"
               type="button"
             >
@@ -24591,6 +24593,7 @@ exports[`Storyshots Views / Apps / Apps list no data 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+              data-test-id="createApp"
               tabindex="0"
               type="button"
             >
@@ -158499,6 +158502,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group Create default
                   <span
                     aria-disabled="false"
                     class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
+                    data-test-id="fullAccess"
                   >
                     <span
                       class="MuiIconButton-label-id"
@@ -159349,6 +159353,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group Create errors 1
                   <span
                     aria-disabled="false"
                     class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
+                    data-test-id="fullAccess"
                   >
                     <span
                       class="MuiIconButton-label-id"
@@ -160195,6 +160200,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group Create loading
                   <span
                     aria-disabled="true"
                     class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiIconButton-edgeStart-id MuiButtonBase-disabled-id"
+                    data-test-id="fullAccess"
                     tabindex="-1"
                   >
                     <span
@@ -161567,6 +161573,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group Details default
                   <span
                     aria-disabled="false"
                     class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
+                    data-test-id="fullAccess"
                   >
                     <span
                       class="MuiIconButton-label-id"
@@ -162947,6 +162954,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group Details loading
                   <span
                     aria-disabled="true"
                     class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiIconButton-edgeStart-id MuiButtonBase-disabled-id"
+                    data-test-id="fullAccess"
                     tabindex="-1"
                   >
                     <span
@@ -163193,6 +163201,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group Details no memb
                   <span
                     aria-disabled="false"
                     class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
+                    data-test-id="fullAccess"
                   >
                     <span
                       class="MuiIconButton-label-id"

src/webhooks/components/WebhooksList/WebhooksList.tsx

@@ -47,7 +47,11 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
         })}
         toolbar={
           !!onCreate && (
-            <Button color="primary" onClick={onCreate}>
+            <Button
+              color="primary"
+              onClick={onCreate}
+              data-test-id="createWebhook"
+            >
               <FormattedMessage
                 defaultMessage="Create Webhook"
                 description="button"