Merge pull request #427 from CaptainFact/fix/e2e-tests

Fix integration tests and improve CI configuration

.babelrc

@@ -14,7 +14,10 @@
   ],
   "env": {
     "production": {
-      "plugins": ["transform-react-remove-prop-types"]
+      "plugins": [
+        "transform-react-remove-prop-types",
+        ["react-remove-properties", { "properties": ["data-cy"] }]
+      ]
     }
   }
 }

.travis.yml

@@ -1,21 +1,17 @@
-stages:
-  - name: Unit-Testing
-    if: branch != master OR type = pull_request
-  - name: E2E-Testing
-    if: branch =~ /cypress/ OR (type = pull_request AND branch = master)
-  - name: deploy
-    if: type IN (push, api) AND (branch IN (master, staging) OR tag =~ ^v\d+)
-
 jobs:
   include:
-    - stage: Unit-Testing
+    - stage: Test
+      if: branch != master OR type = pull_request
+      name: 'Unit tests'
       language: node_js
       node_js: [node]
       cache: { directories: [node_modules, '~/.npm', '~/.cache'] }
       script:
         - npm run coverage && cat ./coverage/lcov.info | coveralls
 
-    - stage: E2E-Testing
+    - stage: Test
+      if: branch =~ /cypress/ OR (type = pull_request AND branch IN (staging, master))
+      name: 'Integration tests'
       language: node_js
       node_js: [node]
       sudo: required
@@ -28,22 +24,15 @@ jobs:
         # Start API
         - docker-compose up -d || exit 1
         # Build and start Frontend
-        - docker build --build-arg BUILD_ENV=dev -t cf-frontend-e2e-testing . || exit 1
-        - docker run  --rm -d -p 3333:80
-          -v ${TRAVIS_BUILD_DIR}/rel/dev_localhost_keys:/run/secrets
-          -v ${TRAVIS_BUILD_DIR}/node_modules:/opt/app/node_modules
-          cf-frontend-e2e-testing serve
-        # Install cypress
-        - npm install -g cypress
+        - npm start &
         # Run Cypress
         - npm run cypress -- --record --key ${CYPRESS_RECORD_KEY}
         # Shutdown Frontend and API
         - kill $(jobs -p) || true
         - docker-compose down
-        - docker rmi -f cf-frontend-e2e-testing
 
     - stage: deploy
-      if: branch IN (master, staging)
+      if: type IN (push, api) AND (branch IN (master, staging) OR tag =~ ^v\d+)
       language: generic
       sudo: required
       services: [docker]

app/components/App/Navbar.jsx

@@ -124,7 +124,7 @@ const Navbar = ({
     : '/videos'
 
   return (
-    <Box>
+    <Box data-cy="Navbar">
       <Container height={theme.navbarHeight} width={1} />
       <NavbarContainer px={2}>
         {/* Left */}

cypress/integration/navbar/logged_out_spec.js

@@ -0,0 +1,11 @@
+describe('Navbar without a logged in user', () => {
+  before(() => {
+    cy.visit('/')
+  })
+
+  it('has login / signup / download extension buttons', () => {
+    cy.get('[data-cy="Navbar"] a[href="/login"]').should('exist')
+    cy.get('[data-cy="Navbar"] a[href="/signup"]').should('exist')
+    cy.get('[data-cy="Navbar"] a[href="/extension"]').should('exist')
+  })
+})

cypress/integration/navbar/user_section_spec.js

@@ -0,0 +1,13 @@
+describe('Navbar with a logged in user', () => {
+  beforeEach(() => {
+    cy.login()
+    cy.visit('/')
+    cy.get('[data-cy=Navbar]').as('Navbar')
+  })
+
+  it('should contains user picture', () => {
+    cy.get('@Navbar')
+      .find('.user-picture')
+      .should('exist')
+  })
+})

package.json

@@ -130,6 +130,7 @@
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.4.2",
     "babel-loader": "^8.0.0",
+    "babel-plugin-react-remove-properties": "^0.3.0",
     "babel-plugin-styled-components": "^1.9.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "babel-plugin-webpack-alias": "^2.1.2",