app/SignUpForm (#56)

* chore(eslint): disable htmlFor rule bugging despite correct

* build(webpack): use react-hot-loader, fix routing hot-reload no history fallback

* test(jest): tweak rootdir

* chore(npm): add clear script + update package.lock

* build(webpack): use hot loader for react on root component

* style(ui): add form related ui styled components

* chore(add empty index file, current access of modules via folder):

* chore(lint): add lint rule

* test(jest): configure enzyme environment for snapshots and ignore cypress

* chore(eslint): add correct path to generated folder

* chore(deps): add form deps and a script to start db

* chore(test): remove enzyme setup file since handled by jest-enzyme env

* feat(app): added SignUpForm with snap

* feat(app): added Form helper

* feat(app): added FormInner helper doing basic ui wrapping

* test(app): add FormInner test

* feat(app): added LabelledField which  display an input with a label and an eventual error message

* test(app): add Form helper snap and helpers index file

* feat(app): add SignUpForm to SignUp screen

* test(fakeProps): add a wrapper around the api to grab easily multiple exports files

* chore(app): update index file of testing utils

* test(ui): add snapshots for each ui component

* refactor(app): Delete FormInner and inline it as a UiForm with the Formik Form component inside the

* refactor(app): forward props to submit button component

* refactor(app): disable the onSubmit of SignUpForm till apollo is installed and update snaps

* ci(cypress): update run command to use chrome and allow rest spread operator + add cypress files to

see cypress-io/cypress#2559

* ci(cypress): install chrome

* ci(cypress): fix wrong package name of chrome

* ci(cypress): try other way to download chrome

* ci(cypress): remove sudo call when installing chrome

* ci(cypress): remove ALL sudo calls

* ci(cypress): force apt-get install

* ci(cypress): try stable chrome version

* ci(cypress): try dpkg to obtain chrome

* ci(cypress add a wget before dpkg):

* ci(cypress): add a force install apt after dpkg

* ci(cypress): add missing deps

* ci(cypress): use snippet https://gist.github.com/phra/192b6c0ada3f6eaf4029e430430b79fe

* ci(cypress): remove unnecessary sudo and say yes by default to apt-get

* ci(cypress): add fonts-liberation and xdg-utils deps

* refactor(app/helpers/form): set disabled to true when there is errors on submit button

* chore(app/constants): add uri constants

* fix(back/server): fix wrong endpoint pointing toward docker virtual machine localhost

* fix(app): wrong path to signup page pointing to undefined due to a typo

* feat(app/client): initialize apollo client and hook up with react

* refactor(app/helpers/form): create a validation module which purpose is to define validation rules a

also added a makeSchemaFor method enabling to get a yup schema from an array of field names

* chore(back/server): change start command to watch

* refactor(datamodel): change the name field of the user to be a username

* refactor(app/helpers): add a handleMutationSubmit which is in charge to execute a unique (named) apo

* refactor(app/helpers): extract common used LabelledFields in their own package

* refactor(app/SignUpForm): clean up SignUpForm using the extracted validation, handleMutationSubmit a

* feat(server): return an AuthPayload with a JWT token, add bcryptjs

* refactor(server): configure dotenv

* refactor(server & app): handle auth mutations (signup) and update to new query in the client

* feat(server): handle the signup mutation with jwt

* feat(app): create a Private route (withour actual auth service) and make Profile screen a private one

* feat(app): add a login page skeleton

* test(app): handleMutationSubmit test

* test(app): update the snapshot of SignUpForm to match query and create snaps for each Field component

* fix(app): lint issue

* refactor(server): use await to start server

* style(ui): add input styles barebones

* style(ui): add simple error

* refactor(app): add pipe.execAsync util to run async functions with the same initial argument in each

* refactor(app): add storage token key constant

* refactor(app): add storage constants to index

* refactor(app): add getGqlErrorMessages utility to get an array of error messages

* feat(server): add login mutation to schema

* refactor(server): add login mutation resolver with WrongCredentials error handling (apollo-error)

* build(babel): add @babel/plugin-proposal-optional-chaining

* feat(app): add a cache persistance layer

* refactor(app/client): store queries and mutation in separate files

* refactor(app/client): add client state defaults (and resolver since default is not provided)

* test(app): add snap + test to PrivateRoute and use withAuthToken hoc

* style(eslint): formatting fix

* build(babel): remove @babel/plugin-proposal-optional-chaining

* build(package,jest): remove @babel/plugin-proposal-optional-chaining and add setup files to mock hoc

* build(webpack): remove @babel/plugin-proposal-optional-chaining

* chore(server): add apollo-errors to package

* chore(app): add react-display-name & styled-components to package

* refactor(app/client): use a CachePersistor instead of direct persistCache function call

* feat(add setTokenHeaders to the client.request to put auth headers on each request):

* refactor(app/client): add index for clientState

* feat(app,ui): add a Layout component which inject globalStyles defined in the ui package and wrap ch

* feat(app): add a LoginForm with tests

* feat(app): add a SignOutButton with snap

* refactor(app): use new Form helper props and complete tests to check presence of components inside r

* refactor(app): update auth components index

* feat(app): add Errors helper that render a ui/Error component for each error string it is passed by

* refactor(app): extract isDisabled functioinality, make mutation optional and add Errors component h

* refactor(app): use a ui/Field for styling the Formik Field component

* refactor(app): add mutationOptions to  handleMutationSubmit

* refactor(app): create a helper to create hoc, that automatically add a displayName to the wrapped co

* refactor(app): extract the authToken accessing query in a hoc

* chore(update helpers/hoc index):

* refactor(app): reorganize constants for  KEYS

* feat(app): add a Login screen that render a Redirect if there is a authToken registered in the client

* refactor(app): add SignOutButton to the Profile screen

* refactor(app/services): add a Auth service to centralize auth related operation + add test

* refactor(app/helpers): add a pipe.execAsync function that consecutively execute async functions with

* test(app/utils/testing): add a expected.components helper to check for the presence of many component

* feat(ui/buttons): add a Buttons.Basic ui component

* refactor(ui/form): remove input styles since we are gonna use ThemeProvider

* app/add-bundlesize (#68)

* style(webpack): fix lint issue

* build(circleci): configure bundlesize and add it to circleci

* ci(cypress): run npm start instead of just front before running e2e tests

* build(cypress): add browser chrome arg explicitly in command

* build(cypress): remove recording momently

* chore(deps): update @cypress/webpack-preprocessor

* chore(deps): update cypress

* ci(cypress): log debug infos

* ci(cypress): fix wrong passed arg --browser

* ci(cypress): clean config.yml from wrong args

* ci(cypress): add a docker clean command before running docker

* ci(cypress): try another docker image for chrome

* ci(cypress): remove unnecessary chrome install comments

* fix(app/cache): add a workaround to completely clear the cache/persistence of appollo on logout and s

* style(app): fix lint issue

* ci(codecov): add yml config to lower threshold for git status

* ci(codecov): fix wrong option for target

* ci(codecov): remove patch codecov diff

.circleci/config.yml

@@ -5,7 +5,7 @@ jobs:
   test-e2e:
     docker:
       # find Docker image at https://github.com/cypress-io/cypress-docker-images
-      - image: cypress/base:10
+      - image: cypress/browsers:chrome67
     steps:
       - checkout
 
@@ -15,7 +15,6 @@ jobs:
             - dependencies-{{ checksum "package.json" }}
             # fallback to using the latest cache if no exact match is found
             - dependencies-
-
       # Install NPM dependencies quickly using "npm ci"
       # https://on.cypress.io/continuous-integration
       # https://docs.npmjs.com/cli/ci
@@ -35,7 +34,7 @@ jobs:
 
       - run:
           name: Start server
-          command: npm run start:front
+          command: npm start
           background: true
 
       ## now run cypress headlessly
@@ -46,7 +45,7 @@ jobs:
       ## this to the run.
       - run:
           name: Run Cypress tests
-          command: npm run test:e2e:run --record
+          command: npm run test:e2e:run
 
       ## alternatively we could specify
       ## a specific record key to use
@@ -86,6 +85,9 @@ jobs:
       - run:
           name: Build webpack
           command: npm run build:wp
+      - run:
+          name: Check bundle size
+          command: npm run test:bundlesize
       - run:
           name: Upload coverage
           command: bash <(curl -s https://codecov.io/bash)

.eslintrc.json

@@ -22,22 +22,36 @@
     "plugin:jsx-a11y/recommended",
     "plugin:cypress/recommended"
   ],
-  "plugins": ["filenames", "xss", "jsdoc", "jsx-a11y", "prettier", "cypress"],
+  "plugins": [
+    "filenames",
+    "xss",
+    "jsdoc",
+    "jsx-a11y",
+    "prettier",
+    "cypress"
+  ],
   "rules": {
     "security/detect-object-injection": 0,
     "filenames/match-exported": 2,
     "xss/no-mixed-html": 2,
     "xss/no-location-href-assign": 2,
     "prettier/prettier": 2,
     "filenames/match-regex": 0,
-    "unicorn/filename-case": 0
+    "unicorn/filename-case": 0,
+    "jsx-a11y/label-has-for": 0
   },
   "overrides": [
     {
       "files": ["*.config.js", "webpack.*.js", "cypress/**"],
       "rules": {
         "xss/no-mixed-html": 0
       }
+    },
+    {
+      "files": ["**/__tests__/**"],
+      "rules": {
+        "jsx-a11y/label-has-associated-control": 0
+      }
     }
   ]
 }

.gitignore

@@ -98,4 +98,6 @@ generated
 
 # Cypress
 cypress/integration/examples
-cypress/support
+cypress/support
+cypress/videos
+cypress/screenshots

babel.config.js

@@ -1,41 +1,38 @@
-
+const common = {
+  presets: ['@babel/preset-react'],
+  plugins: []
+}
 const test = {
   presets: [
     [
       '@babel/preset-env',
       {
-        'targets': 'last 2 Chrome versions'
+        targets: 'last 2 Chrome versions'
       }
     ],
-    '@babel/preset-react'
-
-  ]
+    ...common.presets
+  ],
+  plugins: ['react-hot-loader/babel', ...common.plugins]
 }
 
 const production = {
   presets: [
     [
       '@babel/preset-env',
       {
-        'shippedProposals': true,
-        'targets': {
-          'browsers': [
-            '>0.25%',
-            'not ie 11',
-            'not op_mini all'
-          ]
+        shippedProposals: true,
+        targets: {
+          browsers: ['>0.25%', 'not ie 11', 'not op_mini all']
         }
       }
     ],
-    '@babel/preset-react'
-
+    ...common.presets
   ],
-  'ignore': [
-    '**/__tests__'
-  ]
+  ignore: ['**/__tests__'],
+  plugins: [...common.plugins]
 }
 
-module.exports = (api) => {
+module.exports = api => {
   api.cache(true)
   return { env: { test, production } }
 }

codecov.yml

@@ -0,0 +1,6 @@
+coverage:
+  status:
+    patch: off
+    project:
+      default:
+        target: 95

jest.config.js

@@ -3,10 +3,13 @@ module.exports = {
   transform: {
     '^.+\\.js$': 'babel-jest'
   },
-  rootDir: './packages',
+  rootDir: './',
   moduleNameMapper: {
-    '^@:(.*)$': '<rootDir>/front/app/src$1'
+    '^@:(.*)$': '<rootDir>/packages/front/app/src$1'
   },
-  setupTestFrameworkScriptFile: '<rootDir>/front/app/setupEnzyme.js',
-  snapshotSerializers: ['enzyme-to-json/serializer']
+  snapshotSerializers: ['enzyme-to-json/serializer'],
+  testPathIgnorePatterns: ['/node_modules/', '/cypress/'],
+  setupFiles: ['./setupJest.js', 'jest-localstorage-mock'],
+  setupTestFrameworkScriptFile: 'jest-enzyme',
+  testEnvironment: 'enzyme'
 }