diff --git a/.babelrc b/.babelrc
index 316706d..42a1059 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,8 +1,11 @@
{
- "presets": ["@babel/preset-env"],
- "env": {
- "test": {
- "presets": [["@babel/preset-env"]]
- }
- }
+ "presets": [
+ [
+ "@babel/preset-env",
+ {
+ "useBuiltIns": "entry",
+ "corejs": 3
+ }
+ ]
+ ]
}
diff --git a/.gitignore b/.gitignore
index 7a1537b..9668d6f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
+dist
.idea
node_modules
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..4b8d11b
--- /dev/null
+++ b/README.md
@@ -0,0 +1,211 @@
+
+
Twig Testing Library
+
+
+
+
+
+
A twig testing utility that allows the same testing ergonomics as React testing library.
+
+
+
+
+
+
+
+[![Build Status][build-badge]][build]
+[![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends]
+[![MIT License][license-badge]][license]
+[![PRs Welcome][prs-badge]][prs]
+
+[![Watch on GitHub][github-watch-badge]][github-watch]
+[![Star on GitHub][github-star-badge]][github-star]
+[![Tweet][twitter-badge]][twitter]
+
+
+## Table of Contents
+
+
+
+
+- [The problem](#the-problem)
+- [This solution](#this-solution)
+- [Installation](#installation)
+- [Examples](#examples)
+ - [Basic Example](#basic-example)
+ - [More Examples](#more-examples)
+- [Issues](#issues)
+ - [🐛 Bugs](#-bugs)
+ - [💡 Feature Requests](#-feature-requests)
+ - [❓ Questions](#-questions)
+- [LICENSE](#license)
+
+
+
+## The problem
+
+You are working with Twig in a styleguide-driven-development process. You are writing isolated components
+that consist of css, twig and Javascript.
+You want to be able to test your Javascript in relation to your twig file with maximum isolation.
+
+## This solution
+
+The `Twig Testing Library` is a very lightweight solution based on [Twig JS](https://github.com/twigjs/twig.js) for
+testing Twig-based components. It is heavily influenced by similar libraries such as [React Testing Library](https://testing-library.com/docs/react-testing-library/intro).
+It provides light utility functions on top of `Twig JS` and [Dom testing library](https://testing-library.com/docs/dom-testing-library/intro)
+in a way that encourages better testing practices.
+
+## Installation
+
+This module is distributed via [npm][npm] which is bundled with [node][node] and
+should be installed as one of your project's `devDependencies`:
+
+```
+npm install --save-dev twig-testing-library
+```
+
+You may also be interested in installing `@testing-library/jest-dom` so you can
+use [the custom jest matchers](https://github.com/testing-library/jest-dom).
+
+## Examples
+
+### Basic Example
+
+```javascript
+// accordion.js
+
+class Accordion {
+ constructor(obj) {
+ this.accordion = obj;
+ this.summary = obj.querySelector('.accordion__title');
+ }
+
+ init() {
+ const open = this.accordion.hasAttribute('open');
+ if (open) {
+ this.accordion.classList.add('accordion--open');
+ }
+ this.summary.addEventListener('focus', () => {
+ this.handleFocus();
+ });
+ this.summary.addEventListener('blur', () => {
+ this.handleBlur();
+ });
+ this.summary.addEventListener('click', () => {
+ this.handleClick();
+ });
+ }
+
+ handleFocus() {
+ // Focus class for styling.
+ this.accordion.classList.add('has-focus');
+ }
+
+ handleBlur() {
+ // Focus class for styling.
+ this.accordion.classList.remove('has-focus');
+ }
+
+ handleClick() {
+ const open = this.accordion.classList.contains('accordion--open');
+ this.summary.setAttribute('aria-expanded', !open);
+ this.summary.setAttribute('aria-pressed', !open);
+ this.accordion.classList.toggle('accordion--open');
+ }
+}
+
+export default { Accordion };
+```
+
+```javascript
+// __tests__/accordion.js
+import { render, fireEvent } from 'twig-testing-library'
+
+describe('Accordion toggling', () => {
+ it('Can be rendered open, and then collapsed on click', async () => {
+ // Rendering is async, so you need to use await.
+ const { container, getByText } = await render(
+ // Path to twig template.
+ 'accordion.twig',
+ // Template variables/context.
+ {
+ title: 'Accordion title',
+ open: true,
+ },
+ // Namespace support
+ {
+ 'my_namespace': './some/path'
+ });
+ const accordionElement = container.querySelector('.accordion');
+ const accordion = new Accordion.Accordion(accordionElement);
+ accordion.init();
+ // Snapshot support via jest.
+ expect(accordionElement).toMatchSnapshot('Initial render');
+ expect(accordionElement.classList.contains('accordion--open')).toBe(true);
+ fireEvent.click(getByText('Accordion title'));
+ expect(accordionElement).toMatchSnapshot('First collapse');
+ expect(accordionElement.classList.contains('accordion--open')).toBe(false);
+ })
+})
+```
+
+### More Examples
+
+- Refer to the [Dom testing library docs](https://testing-library.com/docs/dom-testing-library/example-intro), we're really just adding the ability to render twig templates on top of that.
+
+## Issues
+
+### 🐛 Bugs
+
+Please file an issue for bugs, missing documentation, or unexpected behavior.
+
+[**See Bugs**][bugs]
+
+### 💡 Feature Requests
+
+Please file an issue to suggest new features. Vote on feature requests by adding
+a 👍. This helps maintainers prioritize what to work on.
+
+[**See Feature Requests**][requests]
+
+### ❓ Questions
+
+For questions related to using the library, please visit a support community
+instead of filing an issue on GitHub.
+
+- [Drupal Slack #frontend channel](https://drupal.org/slack)
+
+## LICENSE
+
+[MIT](LICENSE)
+
+
+
+[npm]: https://www.npmjs.com/
+[node]: https://nodejs.org
+[build-badge]: https://img.shields.io/travis/larowlan/twig-testing-library.svg?style=flat-square
+[build]: https://travis-ci.org/larowlan/twig-testing-library
+[version-badge]: https://img.shields.io/npm/v/twig-testing-library.svg?style=flat-square
+[package]: https://www.npmjs.com/package/twig-testing-library
+[downloads-badge]: https://img.shields.io/npm/dm/twig-testing-library.svg?style=flat-square
+[npmtrends]: http://www.npmtrends.com/twig-testing-library
+[license-badge]: https://img.shields.io/npm/l/twig-testing-library.svg?style=flat-square
+[license]: https://github.com/larowlan/twig-testing-library/blob/master/LICENSE
+[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
+[prs]: http://makeapullrequest.com
+[github-watch-badge]: https://img.shields.io/github/watchers/larowlan/twig-testing-library.svg?style=social
+[github-watch]: https://github.com/larowlan/twig-testing-library/watchers
+[github-star-badge]: https://img.shields.io/github/stars/larowlan/twig-testing-library.svg?style=social
+[github-star]: https://github.com/larowlan/twig-testing-library/stargazers
+[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20twig-testing-library%20by%20%40@TestingLib%20https%3A%2F%2Fgithub.com%2Flarowlan%2Ftwig-testing-library%20%F0%9F%91%8D
+[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/larowlan/twig-testing-library.svg?style=social
+[bugs]: https://github.com/larowlan/twig-testing-library/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Acreated-desc
+[requests]: https://github.com/larowlan/twig-testing-library/issues?q=is%3Aissue+sort%3Areactions-%2B1-desc+label%3Aenhancement+is%3Aopen
+[good-first-issue]: https://github.com/larowlan/twig-testing-library/issues?utf8=✓&q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3A"good+first+issue"+
+
+
diff --git a/jest-preprocess.js b/jest-preprocess.js
deleted file mode 100644
index cf53a90..0000000
--- a/jest-preprocess.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const babelOptions = {
- presets: ['@babel/preset-env'],
-};
-
-// eslint-disable-next-line import/no-extraneous-dependencies
-module.exports = require('babel-jest').createTransformer(babelOptions);
diff --git a/jest.config.js b/jest.config.js
index 35a3df4..cf64c82 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -2,7 +2,4 @@ module.exports = {
clearMocks: true,
coverageDirectory: "coverage",
testMatch: ['/tests/*.js'],
- transform: {
- '^.+\\.js?$': `/jest-preprocess.js`,
- },
};
diff --git a/package.json b/package.json
index 5ab7cd3..b4f7f6b 100644
--- a/package.json
+++ b/package.json
@@ -3,8 +3,13 @@
"version": "0.0.0-development",
"description": "Simple and complete Twig testing utilities that encourage good testing practices.",
"main": "dist/index.js",
+ "files": [
+ "dist"
+ ],
"scripts": {
"test": "jest",
+ "pretest": "npm run-script build",
+ "build": "rm -rf dist && rollup -c",
"format": "prettier --write \"{test,src}/**/*.js\"",
"lint": "prettier --check \"{test,src}/**/*.js\"",
"coverage": "jest --collect-coverage --collectCoverageFrom=\"src/**/*.js\"",
@@ -35,14 +40,21 @@
"dependencies": {
"@babel/runtime": "^7.9.2",
"@testing-library/dom": "^7.2.0",
+ "core-js": "^3.6.5",
"drupal-attribute": "^1.0.2",
"twig": "^1.15.0"
},
"devDependencies": {
- "@babel/polyfill": "^7.8.7",
+ "@babel/core": "^7.9.0",
"@babel/preset-env": "^7.9.5",
+ "babel-jest": "^25.3.0",
"jest": "^25.3.0",
"prettier": "^2.0.4",
+ "rollup": "^2.6.0",
+ "rollup-plugin-babel": "^4.4.0",
+ "rollup-plugin-commonjs": "^10.1.0",
+ "rollup-plugin-node-resolve": "^5.2.0",
+ "rollup-plugin-uglify": "^6.0.4",
"semantic-release": "^17.0.4"
}
}
diff --git a/rollup.config.js b/rollup.config.js
new file mode 100644
index 0000000..cf20c9e
--- /dev/null
+++ b/rollup.config.js
@@ -0,0 +1,42 @@
+/* eslint-disable */
+
+import babel from 'rollup-plugin-babel';
+
+export default {
+ input: 'src/index.js',
+ external: [
+ 'path',
+ 'fs',
+ '@testing-library/dom',
+ 'twig',
+ 'regenerator-runtime/runtime',
+ 'drupal-attribute',
+ 'core-js/modules/es.array.for-each',
+ 'core-js/modules/es.array.is-array',
+ 'core-js/modules/es.array.iterator',
+ 'core-js/modules/es.object.to-string',
+ 'core-js/modules/es.promise',
+ 'core-js/modules/es.set',
+ 'core-js/modules/es.string.iterator',
+ 'core-js/modules/web.dom-collections.for-each',
+ 'core-js/modules/web.dom-collections.iterator'
+ ],
+ output: [
+ {
+ file: 'dist/index.js',
+ format: 'cjs',
+ exports: 'named',
+ strict: false
+ }
+ ],
+ plugins: [
+ babel({
+ presets: [['@babel/preset-env', {
+ modules: false,
+ useBuiltIns: 'usage',
+ corejs: 3,
+ }]],
+ babelrc: false,
+ }),
+ ],
+};
diff --git a/src/index.js b/src/index.js
index f3aaf20..6742fa0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,7 @@
import { getQueriesForElement, prettyDOM } from "@testing-library/dom"
import Twig from "twig"
import fs from "fs"
-import "@babel/polyfill"
+import "regenerator-runtime/runtime"
import DrupalAttribute from "drupal-attribute"
const mountedContainers = new Set()
diff --git a/tests/index.js b/tests/index.js
index f4541f6..28dc006 100644
--- a/tests/index.js
+++ b/tests/index.js
@@ -4,8 +4,7 @@ import {render, fireEvent} from "../src";
describe('Test library by testing an accordion', () => {
it('Can be initially rendered open', async () => {
- //expect.assertions(8);
- const { container, getByText, debug } = await render('./tests/fixtures/accordion.twig', {
+ const { container, getByText } = await render('./tests/fixtures/accordion.twig', {
title: 'Accordion title',
open: true,
}, {
@@ -30,8 +29,7 @@ describe('Test library by testing an accordion', () => {
});
it('Can be initially rendered closed', async () => {
- //expect.assertions(8);
- const { container, getByText, debug } = await render('./tests/fixtures/accordion.twig', {
+ const { container, getByText } = await render('./tests/fixtures/accordion.twig', {
title: 'Accordion title',
open: false,
}, {