Merge #57

57: e2e tests in CI r=bidoubiwa a=bidoubiwa

closes: #12
closes #15

Integrations tests are not added for now as the e2e tests cover all routes : #64

Co-authored-by: meili-bot <[email protected]>
Co-authored-by: Charlotte Vermandel <[email protected]>
Co-authored-by: cvermand <[email protected]>

Author: 3 people

.eslintrc.js

@@ -10,7 +10,8 @@ module.exports = {
   },
   extends: [
     'plugin:react/recommended',
-    'standard'
+    'standard',
+    'plugin:cypress/recommended'
   ],
   parserOptions: {
     ecmaFeatures: {
@@ -29,6 +30,8 @@ module.exports = {
   },
   rules: {
     'react/jsx-indent': 'error',
-    'react/jsx-indent-props': [2, 2]
+    'react/jsx-indent-props': [2, 2],
+    'cypress/no-unnecessary-waiting': 'off',
+    'react/prop-types': 'off'
   }
 }

.github/workflows/tests.yml

@@ -10,6 +10,41 @@ on:
       - main
 
 jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+    container: cypress/browsers:node12.18.3-chrome87-ff82
+    services:
+      meilisearch:
+        image: getmeili/meilisearch:latest
+        env:
+          MEILI_MASTER_KEY: 'masterKey'
+          MEILI_NO_ANALYTICS: 'true'
+        ports:
+          - '7700:7700'
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Setup node
+        uses: actions/setup-node@v1
+      - name: Install dependencies
+        run: yarn --dev && yarn --cwd ./playground
+      - name: Cypress run
+        uses: cypress-io/github-action@v2
+        with:
+          build: yarn playground:build
+          start: yarn playground:start
+          env: env=ci
+      - 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
+
   playground_build_tests:
     runs-on: ubuntu-latest
     strategy:
@@ -22,6 +57,8 @@ jobs:
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node }}
+      - name: Install dependencies
+        run: yarn --dev && yarn --cwd ./playground
       - name: Build Strapi playground
         run: yarn playground:build
 

.gitignore

@@ -123,3 +123,13 @@ exports
 *.cache
 build
 .strapi-updater.json
+
+############################
+# CYPRESS
+############################
+cypress/screenshots
+cypress/videos
+cypress/support
+cypress/plugins
+cypress/fixtures
+

CONTRIBUTING.md

@@ -45,11 +45,19 @@ docker pull getmeili/meilisearch:latest # Fetch the latest version of MeiliSearc
 docker run -p 7700:7700 getmeili/meilisearch:latest ./meilisearch --master-key=masterKey --no-analytics=true
 
 # Tests the project
-yarn develop
+yarn test
+# Tests the project in watch/open mode
+yarn test:watch
 # Linter
-yarn lint
+yarn style
 # Linter with fixing
-yarn lint:fix
+yarn style:fix
+```
+
+If you already have a running Strapi app in local, testing is possible with the following command:
+
+```bash
+yarn cy:open
 ```
 
 ### Playgrounds

admin/src/components/Collections.js

@@ -21,9 +21,9 @@ const headers = [
   }
 ]
 
-const Collections = () => {
+const Collections = ({ updateCredentials }) => {
   const [collectionsList, setCollectionsList] = useState([])
-  const [infoUpdated, setInfoUpdated] = useState(false)
+  const [updatedCollections, setUpdatedCollections] = useState(false)
 
   const updateStatus = async ({ indexUid, updateId }) => {
     const response = await request(`/${pluginId}/indexes/${indexUid}/update/${updateId}`, {
@@ -32,7 +32,7 @@ const Collections = () => {
     const { error } = response
     if (error) errorNotifications(error)
     else successNotification({ message: `${indexUid} has all its documents indexed` })
-    setInfoUpdated(false)
+    setUpdatedCollections(false)
   }
 
   const addCollectionToMeiliSearch = async ({ name: indexUid }) => {
@@ -65,7 +65,7 @@ const Collections = () => {
   const addOrRemoveCollection = async (row) => {
     if (row._isChecked) await deleteIndex(row)
     else await addCollectionToMeiliSearch(row)
-    setInfoUpdated(false)
+    setUpdatedCollections(false)
   }
 
   const fetchCollections = async () => {
@@ -81,20 +81,23 @@ const Collections = () => {
         }
       ))
       setCollectionsList(colStatus)
-      setInfoUpdated(true)
+      setUpdatedCollections(true)
     }
   }
 
   useEffect(() => {
-    if (!infoUpdated) {
-      fetchCollections()
-    }
-  }, [infoUpdated])
+    setUpdatedCollections(false)
+  }, [updateCredentials])
+
+  useEffect(() => {
+    if (!updatedCollections) fetchCollections()
+  }, [updatedCollections, updateCredentials])
 
   return (
       <div className="col-md-12">
           <Wrapper>
               <Table
+                className='collections'
                 headers={headers}
                 rows={collectionsList}
                 withBulkAction

admin/src/components/Credentials.js

@@ -9,7 +9,7 @@ import pluginId from '../pluginId'
 import { Button, InputText, Label } from '@buffetjs/core'
 import { Wrapper } from '../components/Wrapper'
 
-const Credentials = () => {
+const Credentials = ({ setUpdatedCredentials }) => {
   const [msApiKey, setApiKey] = useState('')
   const [msHost, setHost] = useState('')
 
@@ -41,6 +41,7 @@ const Credentials = () => {
     })
     setApiKey(apiKey)
     setHost(host)
+    setUpdatedCredentials(prev => !prev)
   }
 
   return (
@@ -66,7 +67,7 @@ const Credentials = () => {
                 type="text"
                 value={msApiKey}
               />
-              <Button onClick={addMeilisearchCredentials} style={{ marginTop: '20px' }}>
+              <Button className="credentials_button" onClick={addMeilisearchCredentials} style={{ marginTop: '20px' }}>
                   Add
               </Button>
           </Wrapper>

admin/src/containers/HomePage/index.js

@@ -4,15 +4,17 @@
  *
  */
 
-import React, { memo } from 'react'
+import React, { memo, useState } from 'react'
 import { useGlobalContext } from 'strapi-helper-plugin'
 import { Header } from '@buffetjs/custom'
 import getTrad from '../../utils/getTrad'
 import Credentials from '../../components/Credentials'
 import Collections from '../../components/Collections'
 
 const HomePage = () => {
+  const [updateCredentials, setUpdatedCredentials] = useState()
   const { formatMessage } = useGlobalContext()
+
   return (
       <div className="container-fluid" style={{ padding: '18px 30px 66px 30px' }}>
           <Header
@@ -21,8 +23,8 @@ const HomePage = () => {
             }}
             content={formatMessage({ id: getTrad('header.description') })}
         />
-          <Credentials />
-          <Collections />
+          <Credentials setUpdatedCredentials={setUpdatedCredentials} />
+          <Collections updateCredentials={updateCredentials} />
       </div>
   )
 }

admin/src/translations/en.json

@@ -1,4 +1,4 @@
 {
-  "plugin.name": "MeiliSearch Client",
+  "plugin.name": "MeiliSearch",
   "header.description": "Add your data to MeiliSearch and start searching"
 }

bors.toml

@@ -3,6 +3,7 @@ status = [
   'playground-build (Node.js 12)',
   'playground-build (Node.js 14)',
   'style-check',
+  'cypress-run'
 ]
 # 1 hour timeout
 timeout-sec = 3600

cypress.env.json

@@ -0,0 +1,19 @@
+{
+  "user": {
+    "email": "[email protected]",
+    "password": "Qwertyuiop1"
+  },
+  "apiKey": "masterKey",
+  "test": {
+    "adminUrl": "http://localhost:1337/admin/auth/login",
+    "host": "http://localhost:7700"
+  },
+  "watch": {
+    "adminUrl": "http://localhost:8000/admin/auth/login",
+    "host": "http://localhost:7700"
+  },
+  "ci": {
+    "adminUrl": "http://localhost:1337/admin/auth/login",
+    "host": "http://meilisearch:7700"
+  }
+}