61 typescript (#62)

* refactor: move to typescript

.eslintrc

@@ -1,14 +1,10 @@
 {
   "extends": [
-    "airbnb",
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:react/jsx-runtime",
-    "react-app",
-    "prettier"
-  ],
-  "plugins":[
-    "import"
+    "prettier",
+    "react-app"
   ],
   "env": {
     "browser": true,
@@ -20,24 +16,21 @@
     "cy": true,
     "Cypress": true
   },
-  "parser": "@babel/eslint-parser",
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true
     },
-    "requireConfigFile": false,
-    "babelOptions": {
-       "presets": ["@babel/preset-react"]
-    }
+    "requireConfigFile": false
   },
   "rules": {
+    "react/require-default-props": "off" ,
     "react/jsx-filename-extension": [
       1,
       {
-        "extensions": [".js", ".jsx"]
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
       }
     ],
-    "import/no-named-as-default": 0,
     "react/static-property-placement": [
       "error",
       "property assignment",
@@ -53,9 +46,9 @@
     "react/state-in-constructor": ["error", "never"],
     "no-console": [1, { "allow": ["error"] }],
     "no-restricted-syntax": "off",
-    "react/jsx-uses-react": "error",
     "react/jsx-uses-vars": "error",
     "react/function-component-definition":  
       [2, { "namedComponents": "arrow-function" }]
-  }
+  },
+  "ignorePatterns": ["node_modules/*", "public"]
 }

.github/workflows/cypress.yml

@@ -18,7 +18,7 @@ jobs:
     uses: graasp/graasp-deploy/.github/workflows/cypress.yml@v1
     with:
       # Test values
-      tsc: false
+      tsc: true
       node-env-test: test
       hidden-item-tag-id-test: 12345678-1234-1234-1234-123456789012
     # Insert required secrets based on repository with the following format: ${{ secrets.SECRET_NAME }}

.gitignore

@@ -10,6 +10,7 @@
 
 # misc
 .DS_Store
+.vscode
 
 npm-debug.log*
 yarn-debug.log*

cypress.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  video: false,
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      // `on` is used to hook into various events Cypress emits
+      // `config` is the resolved Cypress config
+
+      const newConfig = {
+        ...config,
+        env: {
+          API_HOST: process.env.REACT_APP_API_HOST,
+        },
+      };
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      require('@cypress/code-coverage/task')(on, newConfig);
+      return newConfig;
+    },
+    baseUrl: 'http://localhost:3001',
+  },
+})

cypress/e2e/SignIn.cy.ts

@@ -0,0 +1,13 @@
+import { SIGN_IN_PATH } from '../../src/config/paths';
+import { MEMBERS } from '../fixtures/members';
+
+describe('Name and Email Validation', () => {
+  it('Sign In', () => {
+    const { GRAASP, WRONG_EMAIL } = MEMBERS;
+    cy.visit(SIGN_IN_PATH);
+    // Signing in with a wrong email format
+    cy.signInAndCheck(WRONG_EMAIL);
+    // Siging in with a valid email
+    cy.signInAndCheck(GRAASP);
+  });
+});

cypress/integration/util.js → cypress/e2e/util.ts

@@ -9,12 +9,24 @@ import {
   SIGN_UP_BUTTON_ID,
 } from '../../src/config/selectors';
 
-export const fillSignUpLayout = ({ name, email }) => {
+export const fillSignUpLayout = ({
+  name,
+  email,
+}: {
+  name: string;
+  email?: string;
+}) => {
   cy.get(`#${NAME_SIGN_UP_FIELD_ID}`).clear().type(name);
   cy.get(`#${EMAIL_SIGN_UP_FIELD_ID}`).clear().type(email);
 };
 
-export const checkInvitationFields = ({ name, email }) => {
+export const checkInvitationFields = ({
+  name,
+  email,
+}: {
+  name?: string;
+  email: string;
+}) => {
   if (name) {
     cy.get(`#${NAME_SIGN_UP_FIELD_ID}`)
       .should('have.value', name)
@@ -25,7 +37,7 @@ export const checkInvitationFields = ({ name, email }) => {
     .should('be.disabled');
 };
 
-export const fillSignInLayout = ({ email }) => {
+export const fillSignInLayout = ({ email }: { email?: string }) => {
   cy.get(`#${EMAIL_SIGN_IN_FIELD_ID}`).clear().type(email);
 };
 
@@ -41,7 +53,13 @@ export const passwordSignInMethod = () => {
   cy.get(`#${PASSWORD_SIGN_IN_METHOD_BUTTON_ID}`).click();
 };
 
-export const fillPasswordSignInLayout = ({ email, password }) => {
+export const fillPasswordSignInLayout = ({
+  email,
+  password,
+}: {
+  email: string;
+  password?: string;
+}) => {
   cy.get(`#${EMAIL_SIGN_IN_FIELD_ID}`).clear().type(email);
   cy.get(`#${PASSWORD_SIGN_IN_FIELD_ID}`).clear().type(password);
 };

cypress/fixtures/members.js → cypress/fixtures/members.ts

@@ -1,4 +1,12 @@
-export const MEMBERS = {
+import { Member, MemberType } from '@graasp/sdk';
+
+export const MEMBERS: {
+  [name: string]: Member & {
+    nameValid?: boolean;
+    emailValid?: boolean;
+    passwordValid?: boolean;
+  };
+} = {
   GRAASP: {
     id: 'graasp-id',
     name: 'graasp',
@@ -7,13 +15,22 @@ export const MEMBERS = {
     nameValid: true,
     emailValid: true,
     passwordValid: true,
+    type: MemberType.Individual,
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    extra: {},
   },
   WRONG_NAME: {
     id: 'id1',
     name: 'w',
     email: '[email protected]',
     nameValid: false,
     emailValid: true,
+    passwordValid: false,
+    type: MemberType.Individual,
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    extra: {},
   },
   WRONG_EMAIL: {
     id: 'id2',
@@ -23,6 +40,10 @@ export const MEMBERS = {
     nameValid: true,
     emailValid: false,
     passwordValid: true,
+    type: MemberType.Individual,
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    extra: {},
   },
   WRONG_PASSWORD: {
     id: 'id3',
@@ -32,29 +53,42 @@ export const MEMBERS = {
     nameValid: true,
     emailValid: true,
     passwordValid: false,
+    type: MemberType.Individual,
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    extra: {},
   },
   BOB: {
     id: 'ecafbd2a-5642-31fb-ae93-0242ac130004',
     name: 'bob',
     email: '[email protected]',
     createdAt: '2021-04-13 14:56:34.749946',
     extra: { lang: 'en' },
+    type: MemberType.Individual,
+    updatedAt: new Date().toISOString(),
   },
   CEDRIC: {
     id: 'ecafbd2a-5642-31fb-ae93-0242ac130006',
     name: 'cedric',
     email: '[email protected]',
     createdAt: '2021-04-13 14:56:34.749946',
+    type: MemberType.Individual,
+    updatedAt: new Date().toISOString(),
+    extra: {},
   },
 };
 
 export default MEMBERS;
 
 export const MOCK_SESSIONS = [
-  { id: MEMBERS.BOB.id, token: 'bob-token', createdAt: Date.now() },
+  {
+    id: MEMBERS.BOB.id,
+    token: 'bob-token',
+    createdAt: Date.now().toLocaleString(),
+  },
   {
     id: MEMBERS.CEDRIC.id,
     token: 'cedric-token',
-    createdAt: Date.now(),
+    createdAt: Date.now().toLocaleString(),
   },
 ];