From 0dd22c32e38015f644c1507db4938636f22e3fb2 Mon Sep 17 00:00:00 2001 From: Lee Rowlands Date: Sat, 11 Apr 2020 12:11:37 +1000 Subject: [PATCH] fix(pencil): Add build and readme --- .babelrc | 15 ++-- .gitignore | 1 + README.md | 211 +++++++++++++++++++++++++++++++++++++++++++++ jest-preprocess.js | 6 -- jest.config.js | 3 - package.json | 14 ++- rollup.config.js | 42 +++++++++ src/index.js | 2 +- tests/index.js | 6 +- 9 files changed, 279 insertions(+), 21 deletions(-) create mode 100644 README.md delete mode 100644 jest-preprocess.js create mode 100644 rollup.config.js 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

+ + + goat + + +

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, }, {