feat(pencil): first release

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["@babel/preset-env"],
+  "env": {
+    "test": {
+      "presets": [["@babel/preset-env"]]
+    }
+  }
+}

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.gitignore

@@ -1 +1,2 @@
+.idea
 node_modules

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "endOfLine": "lf",
+  "semi": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  bracketSpacing: true,
+  jsxBracketSameLine: true
+}

.travis.yml

@@ -0,0 +1,30 @@
+language: node_js
+cache: npm
+notifications:
+  email: false
+node_js:
+  - 10.0.0
+  - 12
+  - node
+install:
+  - npm install
+script:
+  - npm run lint
+  - npx run test
+branches:
+  only:
+    - master
+    - beta
+
+jobs:
+  include:
+    # Define the release stage that runs semantic-release
+    - stage: release
+      node_js: lts/*
+      # Advanced: optionally overwrite your default `script` step to skip the tests
+      # script: skip
+      deploy:
+        provider: script
+        skip_cleanup: true
+        script:
+          - npx semantic-release

jest-preprocess.js

@@ -0,0 +1,6 @@
+const babelOptions = {
+  presets: ['@babel/preset-env'],
+};
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+module.exports = require('babel-jest').createTransformer(babelOptions);

jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  clearMocks: true,
+  coverageDirectory: "coverage",
+  testMatch: ['<rootDir>/tests/*.js'],
+  transform: {
+    '^.+\\.js?$': `<rootDir>/jest-preprocess.js`,
+  },
+};

package.json

@@ -1,14 +1,18 @@
 {
   "name": "twig-testing-library",
-  "version": "0.0.0-semantically-released",
+  "version": "0.0.0-development",
   "description": "Simple and complete Twig testing utilities that encourage good testing practices.",
   "main": "dist/index.js",
   "scripts": {
-    "test": "jest"
+    "test": "jest",
+    "format": "prettier --write \"{test,src}/**/*.js\"",
+    "lint": "prettier --check \"{test,src}/**/*.js\"",
+    "coverage": "jest --collect-coverage --collectCoverageFrom=\"src/**/*.js\"",
+    "semantic-release": "semantic-release"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/larowlan/twig-testing-library.git"
+    "url": "https://github.com/larowlan/twig-testing-library.git"
   },
   "keywords": [
     "testing",
@@ -30,6 +34,15 @@
   "homepage": "https://github.com/larowlan/twig-testing-library#readme",
   "dependencies": {
     "@babel/runtime": "^7.9.2",
-    "@testing-library/dom": "^7.2.0"
+    "@testing-library/dom": "^7.2.0",
+    "drupal-attribute": "^1.0.2",
+    "twig": "^1.15.0"
+  },
+  "devDependencies": {
+    "@babel/polyfill": "^7.8.7",
+    "@babel/preset-env": "^7.9.5",
+    "jest": "^25.3.0",
+    "prettier": "^2.0.4",
+    "semantic-release": "^17.0.4"
   }
 }

src/index.js

@@ -0,0 +1,94 @@
+import { getQueriesForElement, prettyDOM } from "@testing-library/dom"
+import Twig from "twig"
+import fs from "fs"
+import "@babel/polyfill"
+import DrupalAttribute from "drupal-attribute"
+
+const mountedContainers = new Set()
+
+if (typeof afterEach === "function") {
+  afterEach(cleanup)
+}
+
+async function render(twigFile, context = {}, namespaces = {}) {
+  const baseElement = document.body
+  const container = baseElement.appendChild(document.createElement("div"))
+
+  // Add it to the mounted containers to cleanup.
+  mountedContainers.add(container)
+
+  container.innerHTML = await loadTemplate(twigFile, context, namespaces)
+
+  return {
+    container,
+    baseElement,
+    debug: (el = baseElement, maxLength, options) =>
+      Array.isArray(el)
+        ? // eslint-disable-next-line no-console
+          el.forEach((e) => console.log(prettyDOM(e, maxLength, options)))
+        : // eslint-disable-next-line no-console,
+          console.log(prettyDOM(el, maxLength, options)),
+    ...getQueriesForElement(baseElement),
+  }
+}
+
+const loadTemplate = async (file, context = {}, namespaces) => {
+  Twig.registryReset = () => {
+    Twig.Templates.registry = {}
+  }
+
+  Twig.cache(false)
+  Twig.extendFunction("create_attribute", (value) => new DrupalAttribute(value))
+  Twig.twigAsync = (options) => {
+    return new Promise((resolve, reject) => {
+      options.load = resolve
+      options.error = reject
+      options.async = true
+      options.autoescape = false
+      options.namespaces = namespaces
+
+      if (options.data || options.ref) {
+        try {
+          resolve(Twig.twig(options))
+        } catch (error) {
+          reject(error)
+        }
+      } else {
+        fs.readFile(options.path, "utf8", (err, data) => {
+          if (err) {
+            reject(new Error(`Unable to find template file ${options.path}`))
+            return
+          }
+          options.load = (template) => {
+            template.rawMarkup = data
+            resolve(template)
+          }
+          Twig.twig(options)
+        })
+      }
+    })
+  }
+  return Twig.twigAsync({
+    path: file,
+  }).then((template) => {
+    context.attributes = new DrupalAttribute()
+    return template.render(context)
+  })
+}
+
+function cleanup() {
+  mountedContainers.forEach(cleanupContainer)
+}
+
+function cleanupContainer(container) {
+  if (container.parentNode === document.body) {
+    document.body.removeChild(container)
+  }
+  mountedContainers.delete(container)
+}
+
+// just re-export everything from dom-testing-library
+export * from "@testing-library/dom"
+export { render, cleanup }
+
+/* eslint func-name-matching:0 */

tests/__snapshots__/index.js.snap

@@ -0,0 +1,192 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test library by testing an accordion Can be initially rendered closed: First expand 1`] = `
+<details
+  class="accordion accordion--open"
+  open=""
+>
+  
+  
+  <summary
+    aria-expanded="true"
+    aria-pressed="true"
+    class="accordion__title"
+  >
+    Accordion title
+  </summary>
+  
+  
+  <div
+    class="accordion__content"
+  >
+    
+          
+    <p>
+      Cras quis nulla commodo, aliquam lectus sed, blandit augue. Cras ullamcorper bibendum bibendum. Duis tincidunt urna non pretium porta. Nam condimentum vitae ligula vel ornare. Phasellus.
+
+    </p>
+    
+      
+  </div>
+  
+
+</details>
+`;
+
+exports[`Test library by testing an accordion Can be initially rendered closed: Initial render 1`] = `
+<details
+  class="accordion"
+>
+  
+  
+  <summary
+    class="accordion__title"
+  >
+    Accordion title
+  </summary>
+  
+  
+  <div
+    class="accordion__content"
+  >
+    
+          
+    <p>
+      Cras quis nulla commodo, aliquam lectus sed, blandit augue. Cras ullamcorper bibendum bibendum. Duis tincidunt urna non pretium porta. Nam condimentum vitae ligula vel ornare. Phasellus.
+
+    </p>
+    
+      
+  </div>
+  
+
+</details>
+`;
+
+exports[`Test library by testing an accordion Can be initially rendered closed: Re-collapse 1`] = `
+<details
+  class="accordion"
+>
+  
+  
+  <summary
+    aria-expanded="false"
+    aria-pressed="false"
+    class="accordion__title"
+  >
+    Accordion title
+  </summary>
+  
+  
+  <div
+    class="accordion__content"
+  >
+    
+          
+    <p>
+      Cras quis nulla commodo, aliquam lectus sed, blandit augue. Cras ullamcorper bibendum bibendum. Duis tincidunt urna non pretium porta. Nam condimentum vitae ligula vel ornare. Phasellus.
+
+    </p>
+    
+      
+  </div>
+  
+
+</details>
+`;
+
+exports[`Test library by testing an accordion Can be initially rendered open: First collapse 1`] = `
+<details
+  class="accordion"
+>
+  
+  
+  <summary
+    aria-expanded="false"
+    aria-pressed="false"
+    class="accordion__title"
+  >
+    Accordion title
+  </summary>
+  
+  
+  <div
+    class="accordion__content"
+  >
+    
+          
+    <p>
+      Cras quis nulla commodo, aliquam lectus sed, blandit augue. Cras ullamcorper bibendum bibendum. Duis tincidunt urna non pretium porta. Nam condimentum vitae ligula vel ornare. Phasellus.
+
+    </p>
+    
+      
+  </div>
+  
+
+</details>
+`;
+
+exports[`Test library by testing an accordion Can be initially rendered open: Initial render 1`] = `
+<details
+  class="accordion accordion--open"
+  open=""
+>
+  
+  
+  <summary
+    class="accordion__title"
+  >
+    Accordion title
+  </summary>
+  
+  
+  <div
+    class="accordion__content"
+  >
+    
+          
+    <p>
+      Cras quis nulla commodo, aliquam lectus sed, blandit augue. Cras ullamcorper bibendum bibendum. Duis tincidunt urna non pretium porta. Nam condimentum vitae ligula vel ornare. Phasellus.
+
+    </p>
+    
+      
+  </div>
+  
+
+</details>
+`;
+
+exports[`Test library by testing an accordion Can be initially rendered open: Re-open 1`] = `
+<details
+  class="accordion accordion--open"
+  open=""
+>
+  
+  
+  <summary
+    aria-expanded="true"
+    aria-pressed="true"
+    class="accordion__title"
+  >
+    Accordion title
+  </summary>
+  
+  
+  <div
+    class="accordion__content"
+  >
+    
+          
+    <p>
+      Cras quis nulla commodo, aliquam lectus sed, blandit augue. Cras ullamcorper bibendum bibendum. Duis tincidunt urna non pretium porta. Nam condimentum vitae ligula vel ornare. Phasellus.
+
+    </p>
+    
+      
+  </div>
+  
+
+</details>
+`;