Setting up the Cypress with first test

.eslintignore

@@ -6,3 +6,8 @@ node_modules/
 assets
 .github
 scripts
+cypress/screenshots
+cypress/videos
+cypress/support
+cypress/plugins
+cypress/fixtures

.eslintrc.js

@@ -1,8 +1,13 @@
 /* Using eslint-config-algolia */
 /* eslint-disable import/no-commonjs */
 module.exports = {
-  extends: ['algolia', 'algolia/jest', 'plugin:prettier/recommended'],
-  plugins: ['prettier'],
+  extends: [
+    'algolia',
+    'algolia/jest',
+    'plugin:prettier/recommended',
+    'plugin:cypress/recommended',
+  ],
+  plugins: ['prettier', 'cypress'],
   rules: {
     'no-console': 0,
     'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],

.github/workflows/cypress-run.yml

@@ -0,0 +1,32 @@
+name: cypress-run
+on: push
+jobs:
+  cypress-run:
+      runs-on: ubuntu-latest
+      # Browser on which the tests are run
+      container: cypress/browsers:node12.18.3-chrome87-ff82
+      steps:
+        - name: Checkout
+          uses: actions/checkout@v2
+        - name: Setup node
+          uses: actions/setup-node@v1
+          with:
+            node-version: '12.x'
+        - name: Install dependencies
+          run: yarn
+        - name: Browser tests
+          uses: cypress-io/github-action@v2
+          with:
+            # Your starting script
+            start: yarn start:test-headless
+        # Creates and uploads GitHub artifacts in case of failure
+        - uses: actions/upload-artifact@v1
+          if: failure()
+          with:
+            name: cypress-screenshots
+            path: cypress/screenshots
+        - uses: actions/upload-artifact@v1
+          if: failure()
+          with:
+            name: cypress-videos
+            path: cypress/videos

cypress.json

@@ -0,0 +1 @@
+{}

cypress/integration/first_tests.specs.js

@@ -0,0 +1,22 @@
+const HOST = `http://localhost:1234` // Please adjust to your own app port
+
+describe(`My first test`, () => {
+  before(() => {
+    cy.visit(HOST) // Visit our app
+  })
+
+  it('Should visit the dashboard', () => {
+    cy.url().should('match', new RegExp(HOST)) // The current host URL
+  })
+
+  it('Should check if the searchbar is visible', () => {
+    cy.get('.searchbox').should('be.visible')
+  })
+
+  it('Should check if autocomplete is visible during typing', () => {
+    cy.get('#docs-searchbar-suggestion').type('Quick')
+    cy.get('#meilisearch-autocomplete-listbox-0').should('be.visible')
+    cy.get('div.dsb-suggestion:nth-child(1)') // the first entry should be "Quick start"
+      .contains('Quick start')
+  })
+})

package.json

@@ -21,7 +21,9 @@
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
     "test": "./scripts/test",
-    "test:watch": "./scripts/test-watch"
+    "test:watch": "./scripts/test-watch",
+    "start:test": "concurrently --kill-others -s first \"yarn playground\" \"cypress open\"",
+    "start:test-headless": "concurrently --kill-others -s first \"yarn playground\" \"cypress run\""
   },
   "files": [
     "dist/"
@@ -39,10 +41,13 @@
     "babel-jest": "^27.0.2",
     "babel-loader": "^8.2.1",
     "babel-plugin-rewire": "^1.2.0",
+    "concurrently": "^6.3.0",
     "cssnano": "^4.1.11",
+    "cypress": "^8.5.0",
     "eslint": "^7.21.0",
     "eslint-config-algolia": "^16.0.0",
     "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jest": "^24.1.8",
@@ -58,7 +63,6 @@
     "webpack": "^5.53.0",
     "webpack-cli": "^4.8.0"
   },
-  "peerDependencies": {},
   "dependencies": {
     "autocomplete.js": "^0.38.0",
     "hogan.js": "^3.0.2",