feat: adapt to new graasp api

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+      "@babel/preset-react"
+  ]
+}

.eslintrc

@@ -1,12 +1,10 @@
 {
   "extends": [
-    "airbnb",
-    "prettier"
+    "prettier",
+    "eslint:recommended",
+    "react-app"
   ],
   "plugins": [
-    "import",
-    "jsx-a11y",
-    "react"
   ],
   "env": {
     "browser": true,
@@ -18,7 +16,7 @@
     "cy": true,
     "Cypress": true
   },
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "rules": {
     "no-underscore-dangle": [
       "error",
@@ -36,13 +34,6 @@
         "specialLink": ["to", "hrefLeft", "hrefRight"],
         "aspects": ["noHref", "invalidHref", "preferButton"]
       }
-    ],
-    "react/jsx-filename-extension": [
-      1,
-      {
-        "extensions": [".js", ".jsx"]
-      }
-    ],
-    "import/no-named-as-default": 0
+    ]
   }
 }

.github/workflows/cypress.yml

@@ -0,0 +1,36 @@
+name: cypress tests
+on: [push]
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v2
+
+      - name: set up node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+          cache: 'yarn'
+
+      - name: install yarn
+        # avoid checksum errors with github packages
+        run: YARN_CHECKSUM_BEHAVIOR=update yarn
+
+      - name: cypress run
+        uses: cypress-io/github-action@v2
+        env:
+          REACT_APP_API_HOST: http://localhost:3636
+          NODE_ENV: test
+        with:
+          install: false
+          config: baseUrl=http://localhost:3000
+          start: yarn start:ci
+          wait-on: 'http://localhost:3000'
+          wait-on-timeout: 180
+          browser: chrome
+          headless: true
+          quiet: true
+
+      - name: coverage report
+        run: npx nyc report --reporter=text-summary

.gitignore

@@ -40,3 +40,12 @@ cypress/integration/examples
 
 # exclude local database
 db.json
+
+# yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+yarn-error.log

.huskyrc

@@ -2,9 +2,9 @@
   "hooks": {
     "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
     "post-checkout": "yarn install",
-    "pre-commit": "pretty-quick --staged && yarn lint && yarn test:once",
+    "pre-commit": "pretty-quick --staged && yarn lint",
     "post-commit": "git status",
     "post-merge": "yarn install",
-    "pre-push": "yarn lint && yarn test:once && yarn build"
+    "pre-push": "yarn lint && yarn build:react"
   }
 }

.yarnrc.yml

@@ -0,0 +1,10 @@
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: '@yarnpkg/plugin-interactive-tools'
+
+yarnPath: .yarn/releases/yarn-3.2.0-rc.13.cjs
+checksumBehavior: update
+
+defaultSemverRangePrefix: ''

cypress.json

@@ -1,3 +1,3 @@
 {
-  "baseUrl": "http://localhost:3000"
+  "baseUrl": "http://localhost:3333"
 }

cypress/constants/constants.js

@@ -1,4 +1,4 @@
-export const AUTO_SAVE_PAUSE = 5000;
+export const AUTO_SAVE_PAUSE = 4000;
 export const LOAD_DASHBOARD_PAUSE = 2000;
 export const OPEN_SETTINGS_PAUSE = 2000;
-export const LOAD_PAGE_PAUSE = 2000;
+export const LOAD_PAGE_PAUSE = 3000;

cypress/fixtures/appData.js

@@ -0,0 +1,25 @@
+import { v4 } from 'uuid';
+import { APP_DATA_TYPES } from '../../src/config/appDataTypes';
+import { CURRENT_MEMBER, MEMBERS } from './members';
+
+export const CURRENT_ITEM = { id: '1234567890' };
+
+const mockAppDataId = v4();
+export const MOCK_APP_DATA = {
+  id: mockAppDataId,
+  data: { text: 'some text' },
+  memberId: CURRENT_MEMBER.id,
+  itemId: CURRENT_ITEM.id,
+  createdAt: Date.now(),
+  type: APP_DATA_TYPES.INPUT,
+};
+
+const mockFeedback = v4();
+export const MOCK_FEEDBACK = {
+  id: mockFeedback,
+  data: { text: 'some feedback', memberId: CURRENT_MEMBER.id },
+  memberId: MEMBERS.BOB.id,
+  itemId: CURRENT_ITEM.id,
+  createdAt: Date.now(),
+  type: APP_DATA_TYPES.FEEDBACK,
+};

cypress/fixtures/context.js

@@ -0,0 +1,69 @@
+import { CURRENT_MEMBER } from './members';
+import { CURRENT_ITEM } from './appData';
+import { LOAD_PAGE_PAUSE } from '../constants/constants';
+import { PERMISSION_LEVELS } from '../../src/config/settings';
+import { CONTEXTS } from '../../src/config/contexts';
+
+const API_HOST = Cypress.env('API_HOST');
+
+export const buildMockLocalContext = ({
+  itemId = CURRENT_ITEM.id,
+  memberId = CURRENT_MEMBER.id,
+  offline = false,
+  apiHost = API_HOST,
+  permission = PERMISSION_LEVELS.READ,
+  context = CONTEXTS.PLAYER,
+} = {}) => ({
+  itemId,
+  memberId,
+  apiHost,
+  offline,
+  permission,
+  context,
+});
+
+export const MOCK_TOKEN = 'mock-token';
+
+export const setUpParentWindow = ({ context } = {}) => {
+  const channel = new MessageChannel();
+  channel.port1.onmessage = async (e) => {
+    const { data } = e;
+
+    const { type } = JSON.parse(data);
+
+    switch (type) {
+      case 'GET_AUTH_TOKEN':
+        channel?.port1.postMessage(
+          JSON.stringify({
+            type: 'GET_AUTH_TOKEN_SUCCESS',
+            payload: {
+              token: MOCK_TOKEN,
+            },
+          })
+        );
+        break;
+      default:
+        console.log(`type '${type}' is not recognized`);
+    }
+  };
+  cy.window().then((win) => {
+    win.parent.postMessage = (message) => {
+      const { type } = JSON.parse(message);
+      if (type === 'GET_CONTEXT') {
+        win.postMessage(
+          JSON.stringify({
+            type: 'GET_CONTEXT_SUCCESS',
+            payload: buildMockLocalContext(context),
+          }),
+          '*',
+          [channel.port2]
+        );
+      } else {
+        console.log(`${type} is not recognised`);
+      }
+    };
+  });
+
+  // let some time to exchange context and token
+  cy.wait(LOAD_PAGE_PAUSE);
+};

cypress/fixtures/members.js

@@ -0,0 +1,14 @@
+export const MEMBERS = {
+  ANNA: {
+    id: '0f0a2774-a965-4b97-afb4-bccc3796e060',
+    name: 'anna',
+    type: 'individual',
+  },
+  BOB: {
+    id: '1f0a2774-a965-4b97-afb4-bccc3796e060',
+    name: 'bob',
+    type: 'individual',
+  },
+};
+
+export const CURRENT_MEMBER = MEMBERS.ANNA;

cypress/integration/StudentView.spec.js

@@ -1,49 +1,78 @@
-import { inputTextField, saveButton } from '../constants/selectors';
+import {
+  dataCyWrapper,
+  inputTextFieldSelector,
+  saveButtonCypress,
+} from '../../src/config/selectors';
+import { AUTO_SAVE_PAUSE } from '../constants/constants';
+import { MOCK_APP_DATA } from '../fixtures/appData';
+import { setUpParentWindow } from '../fixtures/context';
+
+const text = 'Some input text.';
 
 describe('<StudentView />', () => {
-  describe('when offline = true', () => {
-    beforeEach(() => {
-      cy.offlineVisit();
-    });
+  describe('Empty database', () => {
+    describe('offline = true', () => {
+      beforeEach(() => {
+        cy.setUpApi();
+        cy.visit('/');
+        setUpParentWindow({ context: { offline: true } });
+      });
 
-    // when standalone and offline,
-    // the input app cannot save data
-    it('input contains typed text', () => {
-      const text = 'Some input text.';
+      // save with button when offline
+      it('input contains typed text', () => {
+        // type content
+        cy.enterStudentResponse(text);
 
-      // type content
-      cy.enterStudentResponse(text, false, false);
-      cy.reload();
+        // click save and check content is saved with button being disabled
+        cy.get(dataCyWrapper(saveButtonCypress))
+          .should('be.visible')
+          .should('not.have.attr', 'disabled');
+        cy.get(dataCyWrapper(saveButtonCypress)).click();
 
-      // content not saved
-      cy.get(inputTextField).should('be.empty');
+        cy.get(dataCyWrapper(saveButtonCypress))
+          .should('be.visible')
+          .should('have.attr', 'disabled');
+        cy.get(inputTextFieldSelector).contains(text);
+      });
     });
-  });
 
-  describe('when online = true', () => {
-    beforeEach(() => {
-      cy.onlineVisit();
-    });
+    describe('offline = false', () => {
+      beforeEach(() => {
+        cy.setUpApi();
+        cy.visit('/');
+        setUpParentWindow();
+      });
 
-    it('saves typed data', () => {
-      const text = 'Some input text.';
+      it('saves typed data', () => {
+        // no save button
+        cy.get(dataCyWrapper(saveButtonCypress)).should('not.exist');
 
-      // no save button
-      cy.get(saveButton).should('not.exist');
+        // type text
+        cy.enterStudentResponse(text);
 
-      // type text
-      cy.enterStudentResponse(text, false, true);
-      cy.reload();
+        // text remains for auto saving
+        cy.wait(AUTO_SAVE_PAUSE);
+        cy.get(inputTextFieldSelector).contains(text);
 
-      // text remains
-      cy.get(inputTextField).contains(text);
+        // clear
+        cy.clearStudentResponse();
 
-      // clear
-      cy.clearStudentResponse(false, true);
-      cy.reload();
+        // input is empty
+        cy.wait(AUTO_SAVE_PAUSE);
+        cy.get(inputTextFieldSelector).should('be.empty');
+      });
+    });
+  });
+
+  describe('Default database', () => {
+    beforeEach(() => {
+      cy.setUpApi({ appData: [MOCK_APP_DATA] });
+      cy.visit('/');
+      setUpParentWindow();
+    });
 
-      // input is empty
-      cy.get(inputTextField).should('be.empty');
+    it('Display pre-saved data', () => {
+      cy.get(inputTextFieldSelector).contains(MOCK_APP_DATA.data.text);
     });
   });
 });