Introduce Cypress

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
2019-10-05 19:07:50 +02:00 · 2019-10-05 19:07:50 +02:00 · 77d286ebb6
parent cd72059536
commit 77d286ebb6
27 changed files with 1041 additions and 845 deletions
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -4,6 +4,7 @@ stages:
  - deps
  - front
  - back
+  - e2e
  - deploy

 variables:
@ -19,6 +20,7 @@ variables:
  MOBILIZON_DATABASE_DBNAME: $POSTGRES_DB
  MOBILIZON_DATABASE_HOST: $POSTGRES_HOST
  GEOLITE_CITIES_PATH: "/usr/share/GeoIP/GeoLite2-City.mmdb"
+  MOBILIZON_INSTANCE_REGISTRATIONS_OPEN: "true"

 setup_elixir_deps:
  stage: deps
@ -144,3 +146,26 @@ mix:
    paths:
      - deps
      - _build
+
+e2e:
+  stage: e2e
+  services:
+  - name: mdillon/postgis:10
+    alias: postgres
+  script:
+    - mix deps.get
+    - cd js
+    - yarn install
+    - yarn run build
+    - cd ../
+    - MIX_ENV=e2e mix ecto.create
+    - MIX_ENV=e2e mix ecto.migrate
+    - MIX_ENV=e2e mix phx.server &
+    - cd js
+    - npx wait-on http://localhost:4000
+    - npx cypress run --record --parallel --key $CYPRESS_KEY
+  artifacts:
+    expire_in: 2 day
+    paths:
+      - js/tests/e2e/screenshots/**/*.png
+      - js/tests/e2e/videos/**/*.mp4
--- a/config/config.exs
+++ b/config/config.exs
@ -3,7 +3,7 @@
 #
 # This configuration file is loaded before any dependency and
 # is restricted to this project.
-use Mix.Config
+import Config

 # General application configuration
 config :mobilizon,
@ -71,10 +71,6 @@ config :logger, :console,
  format: "$time $metadata[$level] $message\n",
  metadata: [:request_id]

-# Import environment specific config. This must remain at the bottom
-# of this file so it overrides the configuration defined above.
-import_config "#{Mix.env()}.exs"
-
 config :mobilizon, MobilizonWeb.Guardian,
  issuer: "mobilizon",
  secret_key: "ty0WM7YBE3ojvxoUQxo8AERrNpfbXnIJ82ovkPdqbUFw31T5LcK8wGjaOiReVQjo"
@ -136,3 +132,7 @@ config :mobilizon, Mobilizon.Service.Geospatial.GoogleMaps,

 config :mobilizon, Mobilizon.Service.Geospatial.MapQuest,
  api_key: System.get_env("GEOSPATIAL_MAP_QUEST_API_KEY") || nil
+
+# Import environment specific config. This must remain at the bottom
+# of this file so it overrides the configuration defined above.
+import_config "#{Mix.env()}.exs"
--- a/config/dev.exs
+++ b/config/dev.exs
@ -1,4 +1,4 @@
-use Mix.Config
+import Config

 # For development, we disable any cache and enable
 # debugging and code reloading.
--- a/config/e2e.exs
+++ b/config/e2e.exs
@ -0,0 +1,24 @@
+import Config
+
+import_config "dev.exs"
+
+config :mobilizon, MobilizonWeb.Endpoint,
+  http: [
+    port: 4000
+  ],
+  url: [
+    host: "localhost",
+    port: 4000,
+    scheme: "http"
+  ],
+  debug_errors: true,
+  code_reloader: false,
+  check_origin: false,
+  # Somehow this can't be merged properly with the dev config some we got this…
+  watchers: [
+    yarn: [cd: Path.expand("../js", __DIR__)]
+  ]
+
+config :mobilizon, sql_sandbox: true
+
+config :mobilizon, Mobilizon.Storage.Repo, pool: Ecto.Adapters.SQL.Sandbox
--- a/config/prod.exs
+++ b/config/prod.exs
@ -1,4 +1,4 @@
-use Mix.Config
+import Config

 config :mobilizon, MobilizonWeb.Endpoint,
  http: [:inet6, port: System.get_env("MOBILIZON_INSTANCE_PORT") || 4000],
--- a/config/test.exs
+++ b/config/test.exs
@ -1,4 +1,4 @@
-use Mix.Config
+import Config

 config :mobilizon, :instance,
  name: "Test instance",
--- a/docker/tests/Dockerfile
+++ b/docker/tests/Dockerfile
@ -1,10 +1,10 @@
 FROM elixir:latest
 LABEL maintainer="Thomas Citharel <tcit@tcit.fr>"

-ENV REFRESHED_AT=2019-07-03
-RUN apt-get update -yq && apt-get install -yq build-essential inotify-tools postgresql-client git curl gnupg
+ENV REFRESHED_AT=2019-10-06
+RUN apt-get update -yq && apt-get install -yq build-essential inotify-tools postgresql-client git curl gnupg xvfb libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2
 RUN curl -sL https://deb.nodesource.com/setup_10.x | bash && apt-get install nodejs -yq
-RUN npm install -g yarn
+RUN npm install -g yarn wait-on
 RUN apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
 RUN mix local.hex --force && mix local.rebar --force
 RUN curl http://geolite.maxmind.com/download/geoip/database/GeoLite2-City.tar.gz --output GeoLite2-City.tar.gz -s && tar zxf GeoLite2-City.tar.gz && mkdir -p /usr/share/GeoIP && mv GeoLite2-City_*/GeoLite2-City.mmdb /usr/share/GeoIP/GeoLite2-City.mmdb
--- a/js/.gitignore
+++ b/js/.gitignore
@ -3,6 +3,8 @@ node_modules
 /dist

 /tests/e2e/reports/
+/tests/e2e/screenshots/
+/tests/e2e/videos/
 selenium-debug.log

 # local env files
--- a/js/cypress.json
+++ b/js/cypress.json
@ -0,0 +1,7 @@
+{
+  "pluginsFile": "tests/e2e/plugins/index.js",
+  "projectId": "86dpkx",
+  "baseUrl": "http://localhost:4000",
+  "viewportWidth": 1920,
+  "viewportHeight": 1080
+}
--- a/js/package.json
+++ b/js/package.json
@ -4,11 +4,11 @@
  "private": true,
  "scripts": {
    "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
+    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint",
    "analyze-bundle": "yarn run build -- --report-json && webpack-bundle-analyzer ../priv/static/report.json",
    "dev": "vue-cli-service build --watch",
-    "test:e2e": "vue-cli-service test:e2e",
-    "test:unit": "vue-cli-service test:unit",
    "vue-i18n-extract": "vue-i18n-extract"
  },
  "dependencies": {
@ -44,7 +44,7 @@
    "@types/lodash": "^4.14.141",
    "@types/mocha": "^5.2.6",
    "@vue/cli-plugin-babel": "^3.6.0",
-    "@vue/cli-plugin-e2e-nightwatch": "^3.6.0",
+    "@vue/cli-plugin-e2e-cypress": "^4.0.0-rc.7",
    "@vue/cli-plugin-pwa": "^3.6.0",
    "@vue/cli-plugin-typescript": "^3.6.0",
    "@vue/cli-plugin-unit-mocha": "^3.6.0",
--- a/js/src/App.vue
+++ b/js/src/App.vue
@ -87,6 +87,7 @@ export default class App extends Vue {
 }

  body {
-    background: #f6f7f8;
+    // background: #f7f8fa;
+    background: #ebebeb;
  }
 </style>
--- a/js/src/components/NavBar.vue
+++ b/js/src/components/NavBar.vue
@ -1,5 +1,5 @@
 <template>
-  <b-navbar type="is-secondary" shadow wrapper-class="container">
+  <b-navbar type="is-secondary" wrapper-class="container">
    <template slot="brand">
      <b-navbar-item tag="router-link" :to="{ name: RouteName.HOME }"><logo /></b-navbar-item>
    </template>
--- a/js/src/views/Home.vue
+++ b/js/src/views/Home.vue
@ -1,86 +1,99 @@
 <template>
-  <div class="container" v-if="config">
-    <section class="hero is-info" v-if="!currentUser.id || !currentActor">
-      <div class="hero-body">
-        <div>
-          <h1 class="title">{{ config.name }}</h1>
-          <h2 class="subtitle">{{ config.description }}</h2>
-          <router-link class="button" :to="{ name: RouteName.REGISTER }" v-if="config.registrationsOpen">
-            {{ $t('Sign up') }}
-          </router-link>
-          <p v-else>
-            {{ $t("This instance isn't opened to registrations, but you can register on other instances.") }}
-          </p>
+  <div>
+    <section class="hero is-medium is-light is-bold" v-if="!currentUser.id || !currentActor.id">
+        <div class="hero-body">
+          <div class="container">
+            <div class="columns">
+              <div class="column">
+                <h1 class="title">{{ config.name }}</h1>
+                <h2 class="subtitle">{{ config.description }}</h2>
+                <router-link class="button" :to="{ name: RouteName.REGISTER }" v-if="config.registrationsOpen">
+                  {{ $t('Sign up') }}
+                </router-link>
+                <p v-else>
+                  {{ $t("This instance isn't opened to registrations, but you can register on other instances.") }}
+                </p>
+              </div>
+              <div class="column">
+                <div class="card-image">
+                  <figure class="image is-square">
+                    <img src="https://joinmobilizon.org/img/en/events-mobilizon.png" />
+                  </figure>
+                </div>
+              </div>
+            </div>
+          </div>
        </div>
-      </div>
-    </section>
-    <section v-else-if="currentActor">
-      <b-message type="is-info">
-        {{ $t('Welcome back {username}', { username: currentActor.displayName() }) }}
-      </b-message>
-    </section>
-    <section v-else-if="currentActor && goingToEvents.size > 0" class="container">
-      <h3 class="title">
-        {{ $t("Upcoming") }}
-      </h3>
-      <b-loading :active.sync="$apollo.loading"></b-loading>
-      <div v-for="row in goingToEvents" class="upcoming-events">
-        <span class="date-component-container" v-if="isInLessThanSevenDays(row[0])">
-          <date-component :date="row[0]"></date-component>
-          <h3 class="subtitle"
-            v-if="isToday(row[0])">
-            {{ $tc('You have one event today.', row[1].length, {count: row[1].length}) }}
-          </h3>
-          <h3 class="subtitle"
-              v-else-if="isTomorrow(row[0])">
-            {{ $tc('You have one event tomorrow.', row[1].length, {count: row[1].length}) }}
-          </h3>
-          <h3 class="subtitle"
-              v-else-if="isInLessThanSevenDays(row[0])">
-              {{ $tc('You have one event in {days} days.', row[1].length, {count: row[1].length, days: calculateDiffDays(row[0])}) }}
-          </h3>
+      </section>
+    <div class="container" v-if="config">
+      <section v-if="currentActor.id">
+        <b-message type="is-info">
+          {{ $t('Welcome back {username}', { username: currentActor.displayName() }) }}
+        </b-message>
+      </section>
+      <section v-else-if="currentActor && goingToEvents.size > 0" class="container">
+        <h3 class="title">
+          {{ $t("Upcoming") }}
+        </h3>
+        <b-loading :active.sync="$apollo.loading"></b-loading>
+        <div v-for="row in goingToEvents" class="upcoming-events" :key="row[0]">
+          <span class="date-component-container" v-if="isInLessThanSevenDays(row[0])">
+            <date-component :date="row[0]"></date-component>
+            <h3 class="subtitle"
+              v-if="isToday(row[0])">
+              {{ $tc('You have one event today.', row[1].length, {count: row[1].length}) }}
+            </h3>
+            <h3 class="subtitle"
+                v-else-if="isTomorrow(row[0])">
+              {{ $tc('You have one event tomorrow.', row[1].length, {count: row[1].length}) }}
+            </h3>
+            <h3 class="subtitle"
+                v-else-if="isInLessThanSevenDays(row[0])">
+                {{ $tc('You have one event in {days} days.', row[1].length, {count: row[1].length, days: calculateDiffDays(row[0])}) }}
+            </h3>
+          </span>
+          <div>
+            <EventListCard
+                    v-for="participation in row[1]"
+                    v-if="isInLessThanSevenDays(row[0])"
+                    :key="participation[1].event.uuid"
+                    :participation="participation[1]"
+            />
+          </div>
+        </div>
+        <span class="view-all">
+          <router-link :to=" { name: RouteName.MY_EVENTS }">{{ $t('View everything')}} >></router-link>
        </span>
+      </section>
+      <section v-if="currentActor && lastWeekEvents.length > 0">
+        <h3 class="title">
+          {{ $t("Last week") }}
+        </h3>
+        <b-loading :active.sync="$apollo.loading"></b-loading>
        <div>
-          <EventListCard
-                  v-for="participation in row[1]"
-                  v-if="isInLessThanSevenDays(row[0])"
-                  :key="participation[1].event.uuid"
-                  :participation="participation[1]"
-          />
+            <EventListCard
+                    v-for="participation in lastWeekEvents"
+                    :key="participation.id"
+                    :participation="participation"
+                    :options="{ hideDate: false }"
+            />
        </div>
-      </div>
-      <span class="view-all">
-        <router-link :to=" { name: RouteName.MY_EVENTS }">{{ $t('View everything')}} >></router-link>
-      </span>
-    </section>
-    <section v-if="currentActor && lastWeekEvents.length > 0">
-      <h3 class="title">
-        {{ $t("Last week") }}
-      </h3>
-      <b-loading :active.sync="$apollo.loading"></b-loading>
-      <div>
-          <EventListCard
-                  v-for="participation in lastWeekEvents"
-                  :key="participation.id"
-                  :participation="participation"
-                  :options="{ hideDate: false }"
-          />
-      </div>
-    </section>
-    <section>
-      <h3 class="events-nearby title">{{ $t('Events nearby you') }}</h3>
-      <b-loading :active.sync="$apollo.loading"></b-loading>
-      <div v-if="events.length > 0" class="columns is-multiline">
-        <div class="column is-one-third-desktop" v-for="event in events.slice(0, 6)" :key="event.uuid">
-          <EventCard
-            :event="event"
-          />
+      </section>
+      <section>
+        <h3 class="events-nearby title">{{ $t('Events nearby you') }}</h3>
+        <b-loading :active.sync="$apollo.loading"></b-loading>
+        <div v-if="events.length > 0" class="columns is-multiline">
+          <div class="column is-one-third-desktop" v-for="event in events.slice(0, 6)" :key="event.uuid">
+            <EventCard
+              :event="event"
+            />
+          </div>
        </div>
-      </div>
-      <b-message v-else type="is-danger">
-        {{ $t('No events found') }}
-      </b-message>
-    </section>
+        <b-message v-else type="is-danger">
+          {{ $t('No events found') }}
+        </b-message>
+      </section>
+    </div>
  </div>
 </template>

@ -260,6 +273,8 @@ export default class Home extends Vue {

 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
+@import "@/variables.scss";
+
 .search-autocomplete {
  border: 1px solid #dbdbdb;
  color: rgba(0, 0, 0, 0.87);
@ -292,4 +307,14 @@ export default class Home extends Vue {
      text-decoration: underline;
    }
  }
+
+  section.hero {
+    margin-top: -3px;
+    background: lighten($secondary, 20%);
+
+    .column figure.image img {
+      width: 480px;
+      height: 350px;
+    }
+  }
 </style>
--- a/js/src/views/User/Register.vue
+++ b/js/src/views/User/Register.vue
@ -8,95 +8,93 @@
      </div>
    </section>
    <section>
-      <div class="container">
-        <div class="columns is-mobile">
-          <div class="column">
-            <div class="content">
-              <h3 class="title">{{ $t('Features') }}</h3>
-              <ul>
-                <li>{{ $t('Create your communities and your events') }}</li>
-                <li>{{ $t('Other stuff…') }}</li>
-              </ul>
-            </div>
-            <i18n path="Learn more on" tag="p">
-              <a target="_blank" href="https://joinmobilizon.org">joinmobilizon.org</a>
-            </i18n>
-            <hr>
-            <div class="content">
-              <h3 class="title">{{ $t('About this instance') }}</h3>
-              <p>
-                {{ $t("Your local administrator resumed it's policy:") }}
-              </p>
-              <ul>
-                <li>{{ $t('Please be nice to each other') }}</li>
-                <li>{{ $t('meditate a bit') }}</li>
-              </ul>
-              <p>
-                {{ $t('Please read the full rules') }}
-              </p>
-            </div>
+      <div class="columns">
+        <div class="column">
+          <div class="content">
+            <h3 class="title">{{ $t('Features') }}</h3>
+            <ul>
+              <li>{{ $t('Create your communities and your events') }}</li>
+              <li>{{ $t('Other stuff…') }}</li>
+            </ul>
          </div>
-          <div class="column">
-            <form @submit="submit">
-              <b-field
-                :label="$t('Email')"
-                :type="errors.email ? 'is-danger' : null"
-                :message="errors.email"
-              >
-                <b-input
-                  aria-required="true"
-                  required
-                  type="email"
-                  v-model="credentials.email"
-                  @blur="showGravatar = true"
-                  @focus="showGravatar = false"
-                />
-              </b-field>
+          <i18n path="Learn more on" tag="p">
+            <a target="_blank" href="https://joinmobilizon.org">joinmobilizon.org</a>
+          </i18n>
+          <hr>
+          <div class="content">
+            <h3 class="title">{{ $t('About this instance') }}</h3>
+            <p>
+              {{ $t("Your local administrator resumed it's policy:") }}
+            </p>
+            <ul>
+              <li>{{ $t('Please be nice to each other') }}</li>
+              <li>{{ $t('meditate a bit') }}</li>
+            </ul>
+            <p>
+              {{ $t('Please read the full rules') }}
+            </p>
+          </div>
+        </div>
+        <div class="column">
+          <form @submit="submit">
+            <b-field
+              :label="$t('Email')"
+              :type="errors.email ? 'is-danger' : null"
+              :message="errors.email"
+            >
+              <b-input
+                aria-required="true"
+                required
+                type="email"
+                v-model="credentials.email"
+                @blur="showGravatar = true"
+                @focus="showGravatar = false"
+              />
+            </b-field>

-              <b-field
-                :label="$t('Password')"
-                :type="errors.password ? 'is-danger' : null"
-                :message="errors.password"
-              >
-                <b-input
-                  aria-required="true"
-                  required
-                  type="password"
-                  password-reveal
-                  minlength="6"
-                  v-model="credentials.password"
-                />
-              </b-field>
+            <b-field
+              :label="$t('Password')"
+              :type="errors.password ? 'is-danger' : null"
+              :message="errors.password"
+            >
+              <b-input
+                aria-required="true"
+                required
+                type="password"
+                password-reveal
+                minlength="6"
+                v-model="credentials.password"
+              />
+            </b-field>

-              <b-field grouped>
-                <div class="control">
-                  <button type="button" class="button is-primary" @click="submit()">
-                    {{ $t('Register') }}
-                  </button>
-                </div>
-                <div class="control">
-                  <router-link
-                    class="button is-text"
-                    :to="{ name: RouteName.RESEND_CONFIRMATION, params: { email: credentials.email }}"
-                  >
-                    {{ $t("Didn't receive the instructions ?") }}
-                  </router-link>
-                </div>
-                <div class="control">
-                  <router-link
-                    class="button is-text"
-                    :to="{ name: RouteName.LOGIN, params: { email: credentials.email, password: credentials.password }}"
-                    :disabled="sendingValidation"
-                  >
-                    {{ $t('Login') }}
-                  </router-link>
-                </div>
-              </b-field>
-            </form>
+            <b-field grouped>
+              <div class="control">
+                <button type="button" class="button is-primary" @click="submit()">
+                  {{ $t('Register') }}
+                </button>
+              </div>
+              <div class="control">
+                <router-link
+                  class="button is-text"
+                  :to="{ name: RouteName.RESEND_CONFIRMATION, params: { email: credentials.email }}"
+                >
+                  {{ $t("Didn't receive the instructions ?") }}
+                </router-link>
+              </div>
+              <div class="control">
+                <router-link
+                  class="button is-text"
+                  :to="{ name: RouteName.LOGIN, params: { email: credentials.email, password: credentials.password }}"
+                  :disabled="sendingValidation"
+                >
+                  {{ $t('Login') }}
+                </router-link>
+              </div>
+            </b-field>
+          </form>

-            <div v-if="errors.length > 0">
-              <b-message type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
-            </div>
+          <div v-if="errors.length > 0">
+            <b-message type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
          </div>
        </div>
      </div>
--- a/js/tests/e2e/plugins/index.js
+++ b/js/tests/e2e/plugins/index.js
@ -0,0 +1,24 @@
+// https://docs.cypress.io/guides/guides/plugins-guide.html
+
+// if you need a custom webpack configuration you can uncomment the following import
+// and then use the `file:preprocessor` event
+// as explained in the cypress docs
+// https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples
+
+/* eslint-disable import/no-extraneous-dependencies, global-require, arrow-body-style */
+// const webpack = require('@cypress/webpack-preprocessor')
+
+module.exports = (on, config) => {
+  // on('file:preprocessor', webpack({
+  //  webpackOptions: require('@vue/cli-service/webpack.config'),
+  //  watchOptions: {}
+  // }))
+
+  return Object.assign({}, config, {
+    fixturesFolder: 'tests/e2e/fixtures',
+    integrationFolder: 'tests/e2e/specs',
+    screenshotsFolder: 'tests/e2e/screenshots',
+    videosFolder: 'tests/e2e/videos',
+    supportFile: 'tests/e2e/support/index.js'
+  })
+}
--- a/js/tests/e2e/specs/browser-language.js
+++ b/js/tests/e2e/specs/browser-language.js
@ -0,0 +1,2 @@
+// Set the en-US language just in case
+export const onBeforeLoad = (window) => Object.defineProperty(window.navigator, 'language', { value: 'en-US' });
--- a/js/tests/e2e/specs/dashboard.js
+++ b/js/tests/e2e/specs/dashboard.js
@ -0,0 +1,42 @@
+// https://docs.cypress.io/api/introduction/api.html
+import { onBeforeLoad } from './browser-language';
+
+beforeEach(() => {
+  cy.restoreLocalStorage();
+});
+
+afterEach(() => {
+  cy.saveLocalStorage();
+});
+
+describe('Homepage', () => {
+  it('Checks the footer', () => {
+    cy.visit('/', { onBeforeLoad });
+    cy.get('#mobilizon').find('footer').contains('The Mobilizon Contributors');
+
+    cy.contains('About').should('have.attr', 'href').and('eq', 'https://joinmobilizon.org');
+
+    cy.contains('License').should('have.attr', 'href').and('eq', 'https://framagit.org/framasoft/mobilizon/blob/master/LICENSE');
+  });
+
+  it('Tries to register from the hero section', () => {
+    cy.visit('/', { onBeforeLoad });
+
+    cy.get('.hero-body').contains('Sign up').click();
+    cy.url().should('include', '/register/user');
+
+  });
+  it('Tries to register from the navbar', () => {
+    cy.visit('/', { onBeforeLoad });
+
+    cy.get('nav.navbar').contains('Sign up').click();
+    cy.url().should('include', '/register/user');
+  });
+
+  it('Tries to connect from the navbar', () => {
+    cy.visit('/', { onBeforeLoad });
+
+    cy.get('nav.navbar').contains('Log in').click();
+    cy.url().should('include', '/login');
+  });
+});
--- a/js/tests/e2e/specs/login.js
+++ b/js/tests/e2e/specs/login.js
@ -0,0 +1,45 @@
+import { onBeforeLoad } from './browser-language';
+
+beforeEach(() => {
+  cy.restoreLocalStorage();
+});
+
+afterEach(() => {
+  cy.saveLocalStorage();
+});
+
+describe('Login', () => {
+  it('Tests that everything is present', () => {
+    cy.visit('/login', { onBeforeLoad });
+
+    cy.get('form .field').first().contains('label', 'Email');
+    cy.get('form .field').last().contains('label', 'Password');
+    cy.get('form').contains('button.button', 'Login');
+    cy.get('form').contains('.control a.button', 'Forgot your password ?').click();
+    cy.url().should('include', '/password-reset/send');
+    cy.go('back');
+
+    cy.get('form').contains('.control a.button', 'Register').click();
+    cy.url().should('include', '/register/user');
+
+    cy.go('back');
+  });
+
+  it('Tries to login with incorrect credentials', () => {
+    cy.visit('/login', { onBeforeLoad });
+    cy.get('input[type=email]').type('notanemail').should('have.value', 'notanemail');
+    cy.get('input[type=password]').click();
+    cy.contains('button.button.is-primary.is-large', 'Login').click();
+    cy.get('form .field').first().contains('p.help.is-danger', 'Please include an \'@\' in the email address.');
+    cy.get('form .field').last().contains('p.help.is-danger', 'Please fill out this field.');
+  });
+
+  it('Tries to login with invalid credentials', () => {
+    cy.visit('/login', { onBeforeLoad });
+    cy.get('input[type=email]').type('test@email.com').should('have.value', 'test@email.com');
+    cy.get('input[type=password]').type('badPassword').should('have.value', 'badPassword');
+    cy.contains('button.button.is-primary.is-large', 'Login').click();
+
+    cy.contains('.message.is-danger', 'User with email not found');
+  });
+});
--- a/js/tests/e2e/specs/register.js
+++ b/js/tests/e2e/specs/register.js
@ -0,0 +1,69 @@
+import { onBeforeLoad } from './browser-language';
+
+beforeEach(() => {
+  cy.restoreLocalStorage();
+  cy.checkoutSession();
+});
+
+afterEach(() => {
+  cy.saveLocalStorage();
+  cy.dropSession();
+});
+
+describe('Registration', () => {
+  it('Tests that everything is present', () => {
+    cy.visit('/register/user', { onBeforeLoad });
+
+    cy.get('form .field').first().contains('label', 'Email');
+    cy.get('form .field').eq(1).contains('label', 'Password');
+
+    cy.get('input[type=email]').click();
+    cy.get('input[type=password]').type('short').should('have.value', 'short');
+    cy.get('form').contains('button.button.is-primary', 'Register');
+    cy.get('form .field').first().contains('p.help.is-danger', 'Please fill out this field.');
+
+    cy.get('form').contains('.control a.button', 'Didn\'t receive the instructions ?').click();
+    cy.url().should('include', '/resend-instructions');
+    cy.go('back');
+
+    cy.get('form').contains('.control a.button', 'Login').click();
+    cy.url().should('include', '/login');
+
+    cy.go('back');
+  });
+
+  it('Tests that registration works', () => {
+    cy.visit('/register/user', { onBeforeLoad });
+    cy.get('input[type=email]').type('user@email.com');
+    cy.get('input[type=password]').type('userPassword');
+    cy.get('form').contains('button.button.is-primary', 'Register').click();
+
+    cy.url().should('include', '/register/profile');
+    cy.get('form .field').first().contains('label', 'Username').parent().find('input').type('tester');
+    cy.get('form .field').eq(2).contains('label', 'Displayed name').parent().find('input').type('tester account');
+    cy.get('form .field').eq(3).contains('label', 'Description').parent().find('textarea').type('This is a test account');
+    cy.get('form .field').last().contains('button', 'Create my profile').click();
+
+    cy.contains('article.message.is-success', 'Your account is nearly ready, tester').contains('A validation email was sent to user@email.com');
+
+    cy.visit('/sent_emails');
+
+    cy.get('iframe')
+    .first()
+    .iframeLoaded()
+    .its('document')
+    .getInDocument('a')
+    .eq(1)
+    .contains('Activate my account')
+    .invoke('attr', 'href')
+    .then(href => {
+      cy.visit(href);
+    });
+
+    // cy.url().should('include', '/validate/');
+    // cy.contains('Your account is being validated');
+    cy.location().should((loc) => {
+      expect(loc.pathname).to.eq('/');
+    });
+  });
+});
--- a/js/tests/e2e/specs/test.js
+++ b/js/tests/e2e/specs/test.js
@ -1,14 +0,0 @@
-// For authoring Nightwatch tests, see
-// http://nightwatchjs.org/guide#usage
-
-module.exports = {
-  'default e2e tests': (browser) => {
-    browser
-      .url(process.env.VUE_DEV_SERVER_URL)
-      .waitForElementVisible('#app', 5000)
-      .assert.elementPresent('.hello')
-      .assert.containsText('h1', 'Welcome to Your Vue.js App')
-      .assert.elementCount('img', 1)
-      .end();
-  },
-};
--- a/js/tests/e2e/support/commands.js
+++ b/js/tests/e2e/support/commands.js
@ -0,0 +1,129 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+let LOCAL_STORAGE_MEMORY = {};
+
+Cypress.Commands.add("saveLocalStorage", () => {
+    Object.keys(localStorage).forEach(key => {
+        LOCAL_STORAGE_MEMORY[key] = localStorage[key];
+    });
+});
+
+Cypress.Commands.add("restoreLocalStorage", () => {
+    Object.keys(LOCAL_STORAGE_MEMORY).forEach(key => {
+        localStorage.setItem(key, LOCAL_STORAGE_MEMORY[key]);
+    });
+});
+
+Cypress.Commands.add('checkoutSession', async () => {
+    const response = await fetch('/sandbox', {
+        cache: 'no-store',
+        method: 'POST',
+    });
+
+    const sessionId = await response.text();
+    return Cypress.env('sessionId', sessionId);
+});
+
+Cypress.Commands.add('dropSession', () =>
+  cy.waitForFetches().then(() =>
+    fetch('/sandbox', {
+      method: 'DELETE',
+      headers: { 'x-session-id': Cypress.env('sessionId') },
+    }),
+  ),
+);
+
+
+
+const increaseFetches = () => {
+    const count = Cypress.env('fetchCount') || 0;
+    Cypress.env('fetchCount', count + 1);
+  };
+  
+  const decreaseFetches = () => {
+    const count = Cypress.env('fetchCount') || 0;
+    Cypress.env('fetchCount', count - 1);
+  };
+  
+  const buildTrackableFetchWithSessionId = fetch => (fetchUrl, fetchOptions) => {
+    const { headers } = fetchOptions;
+    const modifiedHeaders = Object.assign(
+      { 'x-session-id': Cypress.env('sessionId') },
+      headers,
+    );
+  
+    const modifiedOptions = Object.assign({}, fetchOptions, {
+      headers: modifiedHeaders,
+    });
+  
+    return fetch(fetchUrl, modifiedOptions)
+      .then(result => {
+        decreaseFetches();
+        return Promise.resolve(result);
+      })
+      .catch(result => {
+        decreaseFetches();
+        return Promise.reject(result);
+      });
+  };
+  
+  Cypress.on('window:before:load', win => {
+    cy.stub(win, 'fetch', buildTrackableFetchWithSessionId(fetch));
+  });
+  
+  Cypress.Commands.add('waitForFetches', () => {
+    if (Cypress.env('fetchCount') <= 0) {
+      return;
+    }
+  
+    cy.wait(100).then(() => cy.waitForFetches());
+  });
+
+  Cypress.Commands.add(
+    'iframeLoaded',
+    { prevSubject: 'element' },
+    ($iframe) => {
+      const contentWindow = $iframe.prop('contentWindow')
+      return new Promise(resolve => {
+        if (
+          contentWindow &&
+          contentWindow.document.readyState === 'complete'
+        ) {
+          resolve(contentWindow)
+        } else {
+          $iframe.on('load', () => {
+            resolve(contentWindow)
+          })
+        }
+      })
+    })
+  
+  Cypress.Commands.add(
+    'getInDocument',
+    { prevSubject: 'document' },
+    (document, selector) => Cypress.$(selector, document)
+  )
--- a/js/tests/e2e/support/index.js
+++ b/js/tests/e2e/support/index.js
@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
--- a/js/tests/e2e/tsconfig.json
+++ b/js/tests/e2e/tsconfig.json
@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "baseUrl": "../node_modules",
+    "types": [
+      "cypress"
+    ]
+  },
+  "include": [
+    "**/*.*"
+  ]
+}
--- a/js/yarn.lock
+++ b/js/yarn.lock
--- a/lib/mobilizon_web/endpoint.ex
+++ b/lib/mobilizon_web/endpoint.ex
@ -4,13 +4,21 @@ defmodule MobilizonWeb.Endpoint do
  """
  use Phoenix.Endpoint, otp_app: :mobilizon

+  # For e2e tests
+  if Application.get_env(:mobilizon, :sql_sandbox) do
+    plug(Phoenix.Ecto.SQL.Sandbox,
+      at: "/sandbox",
+      header: "x-session-id",
+      repo: Mobilizon.Storage.Repo
+    )
+  end
+
+  plug(MobilizonWeb.Plugs.UploadedMedia)
+
  # Serve at "/" the static files from "priv/static" directory.
  #
  # You should set gzip to true if you are running phoenix.digest
  # when deploying your static files in production.
-
-  plug(MobilizonWeb.Plugs.UploadedMedia)
-
  plug(
    Plug.Static,
    at: "/",
--- a/lib/mobilizon_web/router.ex
+++ b/lib/mobilizon_web/router.ex
@ -118,7 +118,7 @@ defmodule MobilizonWeb.Router do
    get("/:sig/:url/:filename", MediaProxyController, :remote)
  end

-  if Mix.env() == :dev do
+  if Mix.env() in [:dev, :e2e] do
    # If using Phoenix
    forward("/sent_emails", Bamboo.SentEmailViewerPlug)
  end
--- a/mix.exs
+++ b/mix.exs
@ -99,7 +99,7 @@ defmodule Mobilizon.Mixfile do
      {:html_sanitize_ex, "~> 1.3.0"},
      {:ex_cldr_dates_times, "~> 2.0"},
      # Dev and test dependencies
-      {:phoenix_live_reload, "~> 1.2", only: :dev},
+      {:phoenix_live_reload, "~> 1.2", only: [:dev, :e2e]},
      {:ex_machina, "~> 2.3", only: [:dev, :test]},
      {:excoveralls, "~> 0.10", only: :test},
      {:ex_doc, "~> 0.21.1", only: [:dev, :test], runtime: false},