started work on E2E Tests

.github/workflows/build.yml

@@ -2,9 +2,9 @@ name: lint and build
 
 on:
   push:
-    branches: [master, dev]
+    branches: [master]
   pull_request:
-    branches: [master, dev]
+    branches: [master]
 
 jobs:
   build:

.github/workflows/e2e.yml

@@ -0,0 +1,34 @@
+name: e2e
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  end2end:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        browser: ['e2e:chrome', 'e2e:firefox']
+    name: ${{ matrix.browser }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+      - name: Cache node_modules
+        uses: actions/cache@v1.1.0
+        with:
+          path: node_modules
+          key: node_modules
+      - name: Cache ~/.cache
+        uses: actions/cache@v1.1.0
+        with:
+          path: ~/.cache
+          key: cache
+      - name: install cypress dependencies
+        run: sudo apt-get install libgtk2.0-0 libgtk-3-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
+      - name: Install dependencies
+        run: yarn install
+      - name: Run e2e in chrome
+        run: yarn ${{ matrix.browser }}

README.md

@@ -1,5 +1,7 @@
 # CodiMD - React Client
 
+![e2e](https://github.com/codimd/react-client/workflows/e2e/badge.svg)
+
 This is the new, improved and better looking frontend for CodiMD 2.0.
 Our goal is to recreate the current frontend in react and to improve it.
 
@@ -18,6 +20,17 @@ This should run the app in the development mode and open [http://localhost:3000]
 The page will reload if you make edits.
 You will also see any lint errors in the console.
 
+### Tests
+
+#### End2End
+
+We use [cypress](https://cypress.io) for e2e tests.
+
+1. Run the frontend with `yarn start`
+2. RUn `yarn cy:open` to open the cypress test loader
+3. Choose your browser and test
+4. Let the tests run
+
 ## Production mode
 
 1. Clone this repo (e.g. `git clone https://github.com/codimd/react-client.git codimd-react-client`)

cypress.json

@@ -0,0 +1,8 @@
+{
+  "baseUrl": "http://localhost:3000/",
+  "experimentalFetchPolyfill": true,
+  "firefoxGcInterval": {
+    "runMode": null,
+    "openMode": null
+  }
+}

cypress/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "parserOptions": {
+    "tsconfigRootDir": "",
+    "project": [
+      "./cypress/tsconfig.json"
+    ]
+  },
+  "plugins": [
+    "cypress",
+    "chai-friendly"
+  ],
+  "extends": [
+    "plugin:cypress/recommended"
+  ],
+  "rules": {
+    "@typescript-eslint/no-unused-expressions": 0,
+    "no-unused-expressions": 0,
+    "chai-friendly/no-unused-expressions": 2
+  },
+  "env": {
+    "cypress/globals": true
+  }
+}

cypress/fixtures/languages.ts

@@ -0,0 +1,30 @@
+export const languages: string[] = [
+  'English',
+  '简体中文',
+  '繁體中文',
+  'Français',
+  'Deutsch',
+  '日本語',
+  'Español',
+  'Català',
+  'Ελληνικά',
+  'Português',
+  'Italiano',
+  'Türkçe',
+  'Русский',
+  'Nederlands',
+  'Hrvatski',
+  'Polski',
+  'Українська',
+  'हिन्दी',
+  'Svenska',
+  'Esperanto',
+  'Dansk',
+  '한국어',
+  'Bahasa Indonesia',
+  'Cрпски',
+  'Tiếng Việt',
+  'العربية',
+  'Česky',
+  'Slovensky'
+]

cypress/integration/banner.spec.ts

@@ -0,0 +1,26 @@
+import { banner } from '../support/config'
+
+describe('Banner', () => {
+  beforeEach(() => {
+    cy.visit('/')
+    expect(localStorage.getItem('bannerTimeStamp')).to.be.null
+  })
+
+  it('shows the correct alert banner text', () => {
+    cy.get('.alert-primary.show')
+      .contains(banner.text)
+  })
+
+  it('can be dismissed', () => {
+    cy.get('.alert-primary.show')
+      .contains(banner.text)
+    cy.get('.alert-primary.show')
+      .find('.fa-times')
+      .click()
+      .then(() => {
+        expect(localStorage.getItem('bannerTimeStamp')).to.equal(banner.timestamp)
+      })
+    cy.get('.alert-primary.show')
+      .should('not.exist')
+  })
+})

cypress/integration/history.spec.ts

@@ -0,0 +1,35 @@
+describe('History', () => {
+  beforeEach(() => {
+    cy.visit('/history')
+  })
+
+  describe('History Mode', () => {
+    it('Cards', () => {
+      cy.get('div.card')
+    })
+
+    it('Table', () => {
+      cy.get('i.fa-table')
+        .click()
+      cy.get('table.history-table')
+    })
+  })
+
+  describe('Pinning', () => {
+    it('Cards', () => {
+      cy.get('.fa-thumb-tack')
+        .first()
+        .click()
+      cy.get('.modal-dialog')
+        .should('be.visible')
+    })
+
+    it('Table', () => {
+      cy.get('.fa-thumb-tack')
+        .first()
+        .click()
+      cy.get('.modal-dialog')
+        .should('be.visible')
+    })
+  })
+})

cypress/integration/intro.spec.ts

@@ -0,0 +1,58 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+describe('Intro', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+  describe('Cover Button are hidden when logged in', () => {
+    it('Sign in Cover Button', () => {
+      cy.get('.cover-button.btn-success')
+        .should('not.exist')
+    })
+
+    it('Features Cover Button', () => {
+      cy.get('.cover-button.btn-primary')
+        .should('not.exist')
+    })
+  })
+
+  describe('Cover Button are shown when logged out', () => {
+    beforeEach(() => {
+      cy.logout()
+    })
+
+    it('Sign in Cover Button', () => {
+      cy.get('.cover-button.btn-success')
+        .should('exist')
+    })
+
+    it('Features Cover Button', () => {
+      cy.get('.cover-button.btn-primary')
+        .should('exist')
+    })
+  })
+
+  describe('Version', () => {
+    it('can be opened', () => {
+      cy.get('#versionModal')
+        .should('not.be.visible')
+      cy.get('#version')
+        .click()
+      cy.get('#versionModal')
+        .should('be.visible')
+    })
+
+    it('can be closed', () => {
+      cy.get('#versionModal')
+        .should('not.be.visible')
+      cy.get('#version')
+        .click()
+      cy.get('#versionModal')
+        .should('be.visible')
+      cy.get('body')
+        .click()
+      cy.get('#versionModal')
+        .should('not.be.visible')
+    })
+  })
+})

cypress/integration/language.spec.ts

@@ -0,0 +1,30 @@
+import { languages } from '../fixtures/languages'
+
+describe('Languages', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+  it('all languages are available', () => {
+    cy.get('option')
+      .as('languages')
+    cy.get('@languages')
+      .should('have.length', 28)
+    languages.forEach(language => {
+      cy.get('@languages').contains(language)
+    })
+  })
+
+  it('language changes affect the UI', () => {
+    cy.get('select')
+      .select('English')
+    cy.get('.d-inline-flex.btn-primary')
+      .find('span')
+      .contains('New note')
+    cy.get('select')
+      .select('Deutsch')
+    cy.get('.d-inline-flex.btn-primary')
+      .find('span')
+      .contains('Neue Notiz')
+  })
+})