Add some tests

CONTRIBUTING.md

@@ -12,6 +12,23 @@ make
 
 See <https://devhints.io/cheatsheet-styles> for a reference on styling.
 
+## JavaScript
+
+When updating JavaScript, run the auto-updater:
+
+```
+yarn install
+yarn run dev
+```
+
+This auto-updates `/assets/packed/` with sources in `_js/`.
+
+There are also automated tests:
+
+```
+yarn run test --watch
+```
+
 ## Frontmatter
 
 Each sheet supports these metadata:

_js/wrapify/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,238 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`h3 with class 1`] = `
+<div>
+  
+    
+  <div
+    class="h2-section -hello"
+  >
+    <div
+      class="body h3-section-list -hello"
+      data-js-h3-section-list=""
+    >
+      <div
+        class="h3-section -hello"
+      >
+        <h3
+          class="-hello"
+        >
+          install
+        </h3>
+        <div
+          class="body -hello"
+        >
+          <p>
+            (install)
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+    
+  
+  
+</div>
+`;
+
+exports[`multiple h2s 1`] = `
+<div>
+  
+    
+  <div
+    class="h2-section"
+  >
+    <h2>
+      multiple h2
+    </h2>
+    <div
+      class="body h3-section-list"
+      data-js-h3-section-list=""
+    />
+  </div>
+  <div
+    class="h2-section"
+  >
+    <h2>
+      
+
+    
+    </h2>
+    <div
+      class="body h3-section-list"
+      data-js-h3-section-list=""
+    >
+      <div
+        class="h3-section"
+      >
+        <h3>
+          install
+        </h3>
+        <div
+          class="body"
+        >
+          <p>
+            (install)
+          </p>
+        </div>
+      </div>
+      <div
+        class="h3-section"
+      >
+        <h3>
+          usage
+        </h3>
+        <div
+          class="body"
+        >
+          <p>
+            (usage)
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+    
+  
+
+    
+  
+    
+  
+
+    
+  <div
+    class="h2-section"
+  >
+    <h2>
+      getting started
+    </h2>
+    <div
+      class="body h3-section-list"
+      data-js-h3-section-list=""
+    />
+  </div>
+  <div
+    class="h2-section"
+  >
+    <h2>
+      
+
+    
+    </h2>
+    <div
+      class="body h3-section-list"
+      data-js-h3-section-list=""
+    >
+      <div
+        class="h3-section"
+      >
+        <h3>
+          first
+        </h3>
+        <div
+          class="body"
+        >
+          <p>
+            (first)
+          </p>
+        </div>
+      </div>
+      <div
+        class="h3-section"
+      >
+        <h3>
+          second
+        </h3>
+        <div
+          class="body"
+        >
+          <p>
+            (second)
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+    
+  
+
+    
+  
+    
+  
+  
+</div>
+`;
+
+exports[`simple usage 1`] = `
+<div>
+  
+    
+  <div
+    class="h2-section"
+  >
+    <h2>
+      simple usage
+    </h2>
+    <div
+      class="body h3-section-list"
+      data-js-h3-section-list=""
+    />
+  </div>
+  <div
+    class="h2-section"
+  >
+    <h2>
+      
+
+    
+    </h2>
+    <div
+      class="body h3-section-list"
+      data-js-h3-section-list=""
+    >
+      <div
+        class="h3-section"
+      >
+        <h3>
+          install
+        </h3>
+        <div
+          class="body"
+        >
+          <p>
+            (install)
+          </p>
+        </div>
+      </div>
+      <div
+        class="h3-section"
+      >
+        <h3>
+          usage
+        </h3>
+        <div
+          class="body"
+        >
+          <p>
+            (usage)
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+    
+  
+
+    
+  
+    
+  
+  
+</div>
+`;

_js/wrapify/__tests__/index.test.js

@@ -0,0 +1,56 @@
+/* eslint-env jest */
+import wrapify from '../index'
+import $ from 'jquery'
+
+it('simple usage', run(`
+  <div>
+    <h2>simple usage<h2>
+
+    <h3>install</h3>
+    <p>(install)</p>
+
+    <h3>usage</h3>
+    <p>(usage)</p>
+  </div>
+`, $div => {
+  expect($div.find('.h2-section .h3-section-list .h3-section').length).toEqual(2)
+}))
+
+it('h3 with class', run(`
+  <div>
+    <h3 class='-hello'>install</h3>
+    <p>(install)</p>
+  </div>
+`, $div => {
+  expect($div.find('div.h3-section.-hello').length).toEqual(1)
+  expect($div.find('div.h3-section-list.-hello').length).toEqual(1)
+}))
+
+it('multiple h2s', run(`
+  <div>
+    <h2>multiple h2<h2>
+
+    <h3>install</h3>
+    <p>(install)</p>
+
+    <h3>usage</h3>
+    <p>(usage)</p>
+
+    <h2>getting started<h2>
+
+    <h3>first</h3>
+    <p>(first)</p>
+
+    <h3>second</h3>
+    <p>(second)</p>
+  </div>
+`))
+
+function run (input, fn) {
+  return function () {
+    const $div = $(input)
+    wrapify($div[0])
+    expect($div[0]).toMatchSnapshot()
+    if (fn) fn($div)
+  }
+}

package.json

@@ -14,6 +14,7 @@
     "css-loader": "0.28.7",
     "eslint-plugin-flowtype": "2.37.0",
     "jest": "21.2.1",
+    "jest-html": "1.3.5",
     "prettier-standard": "7.0.1",
     "standard": "10.0.3",
     "style-loader": "0.18.2",
@@ -22,7 +23,8 @@
   "scripts": {
     "dev": "webpack --watch --progress --colors",
     "prepublish": "webpack",
-    "test": "jest"
+    "test": "jest",
+    "jest-html": "jest-html"
   },
   "dependencies": {
     "babel-polyfill": "6.26.0",
@@ -42,5 +44,10 @@
     "plugins": [
       "flowtype"
     ]
+  },
+  "jest": {
+    "snapshotSerializers": [
+      "<rootDir>/node_modules/jest-html"
+    ]
   }
 }