feat: add node 16 support, remove node 12 (#265)

* feat: add node 16, 18 support, remove node 12

- Changed CONTRIBUTING.md
- Change tests to run on 14, 16, 18
- Execute publish with Node 14
- In the playground NODE_OPTIONS must be set to legacy provider, because webpack 4 (used by vuepress) doesn't support node > 16

Fixes #229
Fixes #246

* fix: remove node 18 support

* fix: change bors.toml to node 14 and node 16

Co-authored-by: cvermand <33010418+bidoubiwa@users.noreply.github.com>

Author: ColinFrick

.github/workflows/npm-publish.yml

@@ -14,7 +14,7 @@ jobs:
         run: sh .github/scripts/check-release.sh
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 14
           registry-url: https://registry.npmjs.org/
       - name: Install dependencies
         run: yarn install

.github/workflows/tests.yml

@@ -15,7 +15,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node: [ '12', '14' ]
+        node: [ '14', '16' ]
     name: Tests (Node.js ${{ matrix.node }})
     steps:
       - uses: actions/checkout@v2

CONTRIBUTING.md

@@ -43,7 +43,7 @@ You can check out the longer, more complete guideline documentation [here](https
 
 To run this project, you will need:
 
-- Node.js >= v12 and node < 15
+- Node.js >= 14 and node <= 16
 - Yarn
 
 ### Setup <!-- omit in TOC -->

bors.toml

@@ -1,7 +1,7 @@
 status = [
     'linter-check',
-    'Tests (Node.js 12)',
-    'Tests (Node.js 14)'
+    'Tests (Node.js 14)',
+    'Tests (Node.js 16)'
 ]
 # 1 hour timeout
 timeout-sec = 3600

playground/package.json

@@ -12,5 +12,8 @@
     "meilisearch": "^0.27.0",
     "vuepress": "^1.4.1",
     "vuepress-theme-default-prefers-color-scheme": "^2.0.0"
+  },
+  "engines": {
+    "node": ">=14 <=16"
   }
 }

tests/MeiliSearchBoxTest.js

@@ -8,7 +8,8 @@ describe('MeiliSearchBox', () => {
     wrapper = shallowMount(MeiliSearchBox, {
       mocks: {
         $site: { themeConfig: {} }
-      }
+      },
+      attachTo: document.body
     })
   })
 
@@ -17,7 +18,11 @@ describe('MeiliSearchBox', () => {
       '<form id="search-form" role="search" class="meilisearch-search-wrapper search-box theme-light">'
     )
     expect(wrapper.html()).toContain(
-      '<input id="meilisearch-search-input" class="search-query" placeholder="">'
+      '<input id="meilisearch-search-input" class="search-query dsb-input" placeholder="" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-label="search input" aria-owns="meilisearch-autocomplete-listbox-0" style="vertical-align: top;" dir="auto">'
     )
   })
+
+  afterEach(() => {
+    wrapper.destroy()
+  })
 })