Changes related to the next MeiliSearch release (v0.25.0)

.github/workflows/pre-release-tests.yml

@@ -0,0 +1,76 @@
+# Testing the code base against the Meilisearch pre-releases
+name: Pre-Release Tests
+
+# Will only run for PRs and pushes to bump-meilisearch-v*
+on:
+  push:
+    branches: [bump-meilisearch-v*]
+  pull_request:
+    branches: [bump-meilisearch-v*]
+
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        node: ["12", "14"]
+    name: Tests (Node.js ${{ matrix.node }})
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node }}
+      - name: Install dependencies
+        run: yarn install
+      - name: Build
+        run: yarn run build
+      - name: Run tests
+        run: yarn run test
+
+  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: Cache dependencies
+        uses: actions/cache@v2
+        with:
+          path: |
+            ./node_modules
+          key: ${{ hashFiles('yarn.lock') }}
+      - name: Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: "14.x"
+      - name: Install dependencies
+        run: yarn --dev && yarn --cwd ./tests/env/browser
+      - name: Grep latest version of Meilisearch
+        run: |
+          echo "MEILISEARCH_LATEST=$(curl https://raw.githubusercontent.com/meilisearch/integration-guides/main/scripts/get-latest-meilisearch-rc.sh | sh)" >> $GITHUB_ENV
+      - name: Download Meilisearch
+        run: |
+          curl https://github.com/meilisearch/meilisearch/releases/download/${{ env.MEILISEARCH_LATEST }}/meilisearch-linux-amd64 --output meilisearch --location
+          chmod +x meilisearch
+      - name: Run Meilisearch
+        run: |
+          ./meilisearch --master-key=masterKey --no-analytics true &
+      - name: Browser tests
+        uses: cypress-io/github-action@v2
+        with:
+          # Your starting script
+          start: yarn test:browser
+      # Creates and uploads GitHub artifacts in case of failure
+      - uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+      - uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: cypress-videos
+          path: cypress/videos

.github/workflows/tests.yml

@@ -11,6 +11,9 @@ on:
 
 jobs:
   tests:
+    # Will not run if the event is a PR to bump-meilisearch-v* (so a pre-release PR)
+    # Will still run for each push to bump-meilisearch-v*
+    if: github.event_name != 'pull_request' || !startsWith(github.base_ref, 'bump-meilisearch-v')
     runs-on: ubuntu-latest
     strategy:
       fail-fast: false
@@ -41,6 +44,9 @@ jobs:
         run: yarn run lint
 
   cypress-run:
+    # Will not run if the event is a PR to bump-meilisearch-v* (so a pre-release PR)
+    # Will still run for each push to bump-meilisearch-v*
+    if: github.event_name != 'pull_request' || !startsWith(github.base_ref, 'bump-meilisearch-v')
     runs-on: ubuntu-latest
     # Browser on which the tests are run
     container: cypress/browsers:node12.18.3-chrome87-ff82
@@ -58,12 +64,19 @@ jobs:
         with:
           node-version: "14.x"
       - name: Install dependencies
-        run: yarn --dev && yarn --cwd ./playgrounds/html
+        run: yarn --dev && yarn --cwd ./tests/env/browser
+      - name: Download the latest stable version of Meilisearch
+        run: |
+          curl -L https://install.meilisearch.com | sh
+          chmod +x meilisearch
+      - name: Run Meilisearch
+        run: |
+          ./meilisearch --master-key=masterKey --no-analytics true &
       - name: Browser tests
         uses: cypress-io/github-action@v2
         with:
           # Your starting script
-          start: yarn playground
+          start: yarn test:browser
       # Creates and uploads GitHub artifacts in case of failure
       - uses: actions/upload-artifact@v2
         if: failure()

README.md

@@ -321,7 +321,7 @@ Here is the [CSS customization](https://github.com/meilisearch/vuepress-plugin-m
 
 ## 🤖 Compatibility with Meilisearch
 
-This package only guarantees the compatibility with the [version v0.24.0 of Meilisearch](https://github.com/meilisearch/meilisearch/releases/tag/v0.24.0).
+This package only guarantees the compatibility with the [version v0.25.0 of Meilisearch](https://github.com/meilisearch/meilisearch/releases/tag/v0.25.0).
 
 ## ⚙️ Development Workflow and Contributing
 

cypress/integration/first_tests.specs.js → cypress/integration/search.specs.js

@@ -1,3 +1,5 @@
+/* eslint jest/expect-expect: ["off"]*/
+
 const HOST = `http://localhost:1234` // Please adjust to your own app port
 
 describe(`My first test`, () => {
@@ -14,17 +16,15 @@ describe(`My first test`, () => {
   })
 
   it('Should check if autocomplete is visible during typing', () => {
-    cy.get('#docs-searchbar-suggestion').type('Quick')
+    cy.get('#docs-searchbar-suggestion').type('gett')
     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')
+      .contains('Getting started')
   })
 
   it('Should test all other subheadings', () => {
     cy.get('div.dsb-suggestion:nth-child(2)') // the second entry should be "Download and launch"
-      .contains('Download and launch')
-    cy.get('div.dsb-suggestion:nth-child(3)') // the third entry should be "Add documents"
-      .contains('Add documents')
+      .contains('FAQ')
   })
 
   it('Should have valid placeholder text', () => {

jest.config.js

@@ -3,5 +3,5 @@ module.exports = {
   bail: true,
   resetMocks: true,
   restoreMocks: true,
-  testPathIgnorePatterns: ['/node_modules/', '/dist/', '/docs/'],
+  testPathIgnorePatterns: ['/node_modules/', '/dist/', '/docs/', '/tests/env'],
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docs-searchbar.js",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Add a relevant search bar to your documentation using Meilisearch",
   "keywords": [
     "documentation",
@@ -22,8 +22,9 @@
     "lint:fix": "eslint --fix .",
     "test": "./scripts/test",
     "test:watch": "./scripts/test-watch",
-    "test:e2e:watch": "concurrently --kill-others -s first \"yarn playground\" \"cypress open\"",
-    "test:e2e": "concurrently --kill-others -s first \"yarn playground\" \"cypress run\""
+    "test:browser": "yarn --cwd ./tests/env/browser && yarn --cwd ./tests/env/browser setup && yarn --cwd ./tests/env/browser serve",
+    "test:e2e:watch": "concurrently --kill-others -s first \"yarn test:browser\" \"cypress open\"",
+    "test:e2e": "concurrently --kill-others -s first \"yarn test:browser\" \"cypress run\""
   },
   "files": [
     "dist/"
@@ -65,7 +66,7 @@
   },
   "dependencies": {
     "autocomplete.js": "^0.38.0",
-    "meilisearch": "^0.23.0",
+    "meilisearch": "0.24.0",
     "to-factory": "^1.0.0",
     "zepto": "^1.2.0"
   }

playgrounds/javascript/src/index.js

@@ -16,5 +16,5 @@ docsSearchBar({
   },
   debug: true, // Set debug to true if you want to inspect the dropdown
   enhancedSearchInput: true,
-  enableDarkMode: true,
+  enableDarkMode: 'auto',
 })

src/lib/templates.js

@@ -90,7 +90,7 @@ const templates = {
     <div class="${footerPrefix}">
       Powered by
       <a href="https://www.meilisearch.com" target="_blank">
-        <img src="https://res.cloudinary.com/meilisearch/image/upload/v1582710599/Logo_fumols.svg" height="20" width="97" class="${footerPrefix}-logo"/>
+        <img src="https://res.cloudinary.com/meilisearch/image/upload/v1643647003/Logo/logo_text_mono.svg" height="20" width="97" class="${footerPrefix}-logo"/>
        </a>
     </div>
   `,

tests/env/browser/index.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="color-scheme" content="dark light" />
+  <title>Docs SearchBar playground</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css" />
+  <link rel="stylesheet" href="../../../src/styles/main.scss" />
+</head>
+
+<body>
+  <div class="container">
+    <div class="col-md-12">
+      <input type="search" placeholder="docs-searchbar input" class="form-control" id="q" />
+    </div>
+  </div>
+  <!-- at the end of the BODY -->
+  <script src="../../../index.js"></script>
+  <script>
+    docsSearchBar.default({
+      // Test with MeiliSearch Documentation
+      hostUrl: 'http://localhost:7700',
+      apiKey:
+        'masterKey',
+      indexUid: 'docs',
+      inputSelector: '#q',
+      handleSelected(input, event, suggestion, datasetNumber, context) {
+        console.info(input)
+        console.info(event)
+        console.info(suggestion)
+        console.info(datasetNumber)
+        console.info(context)
+      },
+      debug: true, // Set debug to true if you want to inspect the dropdown
+      enhancedSearchInput: true,
+      enableDarkMode: "auto"
+    })
+  </script>
+  <style>
+    .container {
+      margin: 10%;
+    }
+
+    div [data-ds-theme] .searchbox {
+      width: 60%;
+      margin: auto;
+      margin-top: 10%;
+      display: block;
+    }
+
+    div [data-ds-theme] .searchbox input {
+      height: 34px;
+      border-radius: 4px;
+      font-size: 14px;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      body {
+        background-color: #152028;
+        color: #eaeaea;
+      }
+    }
+  </style>
+</body>
+
+</html>

tests/env/browser/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "docs-searchbar-playground",
+  "version": "0.1.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "serve": "parcel serve index.html --global docsSearchBar --open",
+    "build": "parcel build index.html --global docsSearchBar",
+    "setup": "node setup.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.14.3",
+    "parcel-bundler": "^1.12.5"
+  },
+  "dependencies": {
+    "meilisearch": "^0.24.0"
+  }
+}