test: add test for apps

graasp · Sep 23, 2021 · 55a0a48 · 55a0a48
1 parent 300fe72
commit 55a0a48
Show file tree

Hide file tree

Showing 8 changed files with 644 additions and 210 deletions.
diff --git a/cypress.json b/cypress.json
@@ -3,5 +3,6 @@
   "video": false,
   "retries": {
     "runMode": 2
-  }
+  },
+  "chromeWebSecurity": false
 }
diff --git a/cypress/fixtures/apps.js b/cypress/fixtures/apps.js
@@ -2,6 +2,13 @@ import { ITEM_TYPES } from '../../src/enums';
 import { DEFAULT_FOLDER_ITEM } from './items';
 import { CURRENT_USER } from './members';
 
+const API_HOST = Cypress.env('API_HOST');
+
+export const buildAppApiAccessTokenRoute = (id) =>
+  `app-items/${id}/api-access-token`;
+export const buildGetAppData = (id) => `app-items/${id}/app-data`;
+export const buildAppItemLinkForTest = (filename = '.*') => `apps/${filename}`;
+
 export const GRAASP_APP_ITEM = {
   id: 'ecafbd2a-5688-12eb-ae91-0272ac130002',
   path: 'ecafbd2a_5688_12eb_ae91_0272ac130002',
@@ -37,6 +44,20 @@ export const GRAASP_APP_CHILDREN_ITEM = {
   creator: CURRENT_USER.id,
 };
 
+export const APP_USING_CONTEXT_ITEM = {
+  id: 'ecafbd2a-5688-12eb-ae91-0272ac130002',
+  path: 'ecafbd2a_5688_12eb_ae91_0272ac130002',
+  name: 'my app',
+  description: 'my app description',
+  type: ITEM_TYPES.APP,
+  extra: {
+    [ITEM_TYPES.APP]: {
+      url: `${API_HOST}/${buildAppItemLinkForTest('app.html')}`,
+    },
+  },
+  creator: CURRENT_USER.id,
+};
+
 export const GRAASP_APP_ITEMS_FIXTURE = [
   GRAASP_APP_ITEM,
   GRAASP_APP_PARENT_FOLDER,

diff --git a/cypress/fixtures/apps/app.html b/cypress/fixtures/apps/app.html
@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width" />
+    <title>My page title</title>
+  </head>
+
+  <body>
+    <div>
+      <button id="requestContext">Request Context</button>
+      <span id="requestContext-message"></span>
+    </div>
+    <div>
+      <button id="requestToken">Request Token</button>
+      <span id="requestToken-message"></span>
+    </div>
+    <div>
+      <button id="createAppData">Get app data</button>
+    </div>
+    <div>
+      <button id="postAppData">Post app data</button>
+    </div>
+    <div>
+      <button id="deleteAppData">Delete app data</button>
+    </div>
+    <div>
+      <button id="patchAppData">Patch app data</button>
+    </div>
+    <ul></ul>
+  </body>
+  <script>
+    var requestContextButton = document.getElementById('requestContext');
+    var requestTokenButton = document.getElementById('requestToken');
+    var createAppDataButton = document.getElementById('createAppData');
+    var postAppDataButton = document.getElementById('postAppData');
+    var deleteAppDataDelete = document.getElementById('deleteAppData');
+    var patchAppDataButton = document.getElementById('patchAppData');
+    var list = document.querySelector('ul');
+
+    requestContextButton.addEventListener('click', requestContext);
+    requestTokenButton.addEventListener('click', requestApiToken);
+    createAppDataButton.addEventListener('click', getAppData);
+    postAppDataButton.addEventListener('click', postAppData);
+    deleteAppDataDelete.addEventListener('click', deleteAppData);
+    patchAppDataButton.addEventListener('click', patchAppData);
+
+    var port2;
+    var authToken;
+    var itemId;
+
+    function failOnError(response) {
+      if (!response.ok) return Promise.reject('An unexpected error happened.');
+      return response.json();
+    }
+
+    function printAppData(appData) {
+      console.log(appData);
+      var listItem = document.createElement('li');
+      listItem.textContent = JSON.stringify(appData);
+      list.appendChild(listItem);
+    }
+
+    function checkTokenExists() {
+      if (!authToken) {
+        return console.log('No auth token available to use API');
+      }
+    }
+
+    // Listen for the intial port transfer message
+    window.addEventListener('message', initPort);
+
+    // Setup the transfered port
+    function initPort(e) {
+      port2 = e.ports[0];
+      port2.onmessage = onMessage;
+      console.log(e.data);
+      itemId = e.data.payload.itemId;
+      document.getElementById('requestContext-message').innerHTML =
+        e.data.payload.itemId;
+    }
+
+    // Handle messages received on port2
+    function onMessage(e) {
+      const { payload } = JSON.parse(e.data);
+
+      // write message in list
+      var listItem = document.createElement('li');
+      listItem.textContent = e.data;
+      list.appendChild(listItem);
+
+      if (payload?.token) {
+        authToken = payload.token;
+        console.log('Token received!');
+      }
+    }
+
+    // Request context and message channel port
+    function requestContext(e) {
+      e.preventDefault();
+      window.parent.postMessage(
+        JSON.stringify({
+          type: 'GET_CONTEXT',
+        }),
+        '*',
+      );
+    }
+
+    // Request auth token
+    function requestApiToken(e) {
+      e.preventDefault();
+      port2.postMessage(
+        JSON.stringify({
+          type: 'GET_AUTH_TOKEN',
+          payload: {
+            // false data
+            app: '500fe32d-af45-4b23-8cd2-093e46289505',
+            origin: 'origin',
+          },
+        }),
+      );
+    }
+
+    // Get app data
+    function getAppData(e) {
+      e.preventDefault();
+      checkTokenExists();
+
+      fetch(`/app-items/${itemId}/app-data`, {
+        headers: {
+          Authorization: 'Bearer ' + authToken,
+        },
+        credentials: 'include',
+        method: 'GET',
+      })
+        .then(failOnError)
+        .then(printAppData);
+    }
+
+    // Post app data
+    function postAppData(e) {
+      e.preventDefault();
+      checkTokenExists();
+
+      fetch(`/app-items/${itemId}/app-data`, {
+        headers: {
+          Authorization: 'Bearer ' + authToken,
+        },
+        credentials: 'include',
+        method: 'POST',
+      })
+        .then(failOnError)
+        .then(printAppData);
+    }
+
+    // delete app data
+    function deleteAppData(e) {
+      e.preventDefault();
+      checkTokenExists();
+
+      fetch(`/app-items/${itemId}/app-data`, {
+        headers: {
+          Authorization: 'Bearer ' + authToken,
+        },
+        credentials: 'include',
+        method: 'DELETE',
+      })
+        .then(failOnError)
+        .then(printAppData);
+    }
+
+    // patch app data
+    function patchAppData(e) {
+      e.preventDefault();
+      checkTokenExists();
+
+      fetch(`/app-items/${itemId}/app-data`, {
+        headers: {
+          Authorization: 'Bearer ' + authToken,
+        },
+        credentials: 'include',
+        method: 'PATCH',
+      })
+        .then(failOnError)
+        .then(printAppData);
+    }
+  </script>
+</html>
diff --git a/cypress/integration/item/apps/apps.spec.js b/cypress/integration/item/apps/apps.spec.js
@@ -0,0 +1,43 @@
+import { buildItemPath } from '../../../../src/config/paths';
+import { APP_USING_CONTEXT_ITEM } from '../../../fixtures/apps';
+
+describe('Apps', () => {
+  it('App should request context', () => {
+    const { name, id } = APP_USING_CONTEXT_ITEM;
+    cy.setUpApi({ items: [APP_USING_CONTEXT_ITEM] });
+    cy.visit(buildItemPath(id));
+
+    cy.wait(3000);
+
+    const iframeSelector = `iframe[title="${name}"]`;
+
+    // check app receives successfully the context
+    cy.clickElementInIframe(iframeSelector, '#requestContext');
+    cy.checkContentInElementInIframe(
+      iframeSelector,
+      '#requestContext-message',
+      id,
+    );
+
+    // check app receives successfully the token
+    cy.clickElementInIframe(iframeSelector, '#requestToken');
+    cy.checkContentInElementInIframe(
+      iframeSelector,
+      'ul',
+      'GET_AUTH_TOKEN_SUCCEEDED',
+    );
+
+    // check app can get app-data
+    cy.clickElementInIframe(iframeSelector, '#createAppData');
+    cy.checkContentInElementInIframe(iframeSelector, 'ul', 'get app data');
+    // check app can post app-data
+    cy.clickElementInIframe(iframeSelector, '#postAppData');
+    cy.checkContentInElementInIframe(iframeSelector, 'ul', 'post app data');
+    // check app can delete app-data
+    cy.clickElementInIframe(iframeSelector, '#deleteAppData');
+    cy.checkContentInElementInIframe(iframeSelector, 'ul', 'delete app data');
+    // check app can patch app-data
+    cy.clickElementInIframe(iframeSelector, '#patchAppData');
+    cy.checkContentInElementInIframe(iframeSelector, 'ul', 'patch app data');
+  });
+});
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -47,6 +47,12 @@ import {
   mockPostItemFlag,
   mockGetItemChat,
   mockPostItemChatMessage,
+  mockGetAppLink,
+  mockAppApiAccessToken,
+  mockGetAppData,
+  mockPostAppData,
+  mockDeleteAppData,
+  mockPatchAppData,
 } from './server';
 import './commands/item';
 import './commands/navigation';
@@ -107,7 +113,7 @@ Cypress.Commands.add(
     mockMoveItem(cachedItems, moveItemError);
 
     mockMoveItems(cachedItems, moveItemsError);
-    
+
     mockCopyItem(cachedItems, copyItemError);
 
     mockCopyItems(cachedItems, copyItemsError);
@@ -167,6 +173,18 @@ Cypress.Commands.add(
     mockGetItemChat({ items }, getItemChatError);
 
     mockPostItemChatMessage();
+
+    mockGetAppLink();
+
+    mockAppApiAccessToken();
+
+    mockGetAppData();
+
+    mockPostAppData();
+
+    mockDeleteAppData();
+
+    mockPatchAppData();
   },
 );
 
@@ -195,3 +213,25 @@ Cypress.Commands.add(
     });
   },
 );
+
+Cypress.Commands.add(
+  'clickElementInIframe',
+  (iframeSelector, elementSelector) =>
+    cy
+      .get(iframeSelector)
+      .then(($iframe) =>
+        cy.wrap($iframe.contents().find(elementSelector)).click(),
+      ),
+);
+
+Cypress.Commands.add(
+  'checkContentInElementInIframe',
+  (iframeSelector, elementSelector, text) =>
+    cy
+      .get(iframeSelector)
+      .then(($iframe) =>
+        cy
+          .wrap($iframe.contents().find(elementSelector))
+          .should('contain', text),
+      ),
+);