A twig testing utility that allows the same testing ergonomics as React testing library.
\n\n \n
\n\n\n\n\n[![Build Status][build-badge]][build]\n[![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends]\n[![MIT License][license-badge]][license]\n[![PRs Welcome][prs-badge]][prs] \n\n[![Watch on GitHub][github-watch-badge]][github-watch]\n[![Star on GitHub][github-star-badge]][github-star]\n[![Tweet][twitter-badge]][twitter]\n\n\n## Table of Contents\n\n\n\n\n- [The problem](#the-problem)\n- [This solution](#this-solution)\n- [Installation](#installation)\n- [Examples](#examples)\n - [Basic Example](#basic-example)\n - [More Examples](#more-examples)\n- [Issues](#issues)\n - [🐛 Bugs](#-bugs)\n - [💡 Feature Requests](#-feature-requests)\n - [❓ Questions](#-questions)\n- [LICENSE](#license)\n\n\n\n## The problem\n\nYou are working with Twig in a styleguide-driven-development process. You are writing isolated components\nthat consist of css, twig and Javascript.\nYou want to be able to test your Javascript in relation to your twig file with maximum isolation.\n\n## This solution\n\nThe `Twig Testing Library` is a very lightweight solution based on [Twig JS](https://github.com/twigjs/twig.js) for\ntesting Twig-based components. It is heavily influenced by similar libraries such as [React Testing Library](https://testing-library.com/docs/react-testing-library/intro).\nIt provides light utility functions on top of `Twig JS` and [Dom testing library](https://testing-library.com/docs/dom-testing-library/intro)\nin a way that encourages better testing practices. \n\n## Installation\n\nThis module is distributed via [npm][npm] which is bundled with [node][node] and\nshould be installed as one of your project's `devDependencies`:\n\n```\nnpm install --save-dev twig-testing-library\n```\n\nYou may also be interested in installing `@testing-library/jest-dom` so you can\nuse [the custom jest matchers](https://github.com/testing-library/jest-dom).\n\n## Examples\n\n### Basic Example\n\n```javascript\n// accordion.js\n\nclass Accordion {\n constructor(obj) {\n this.accordion = obj;\n this.summary = obj.querySelector('.accordion__title');\n }\n\n init() {\n const open = this.accordion.hasAttribute('open');\n if (open) {\n this.accordion.classList.add('accordion--open');\n }\n this.summary.addEventListener('focus', () => {\n this.handleFocus();\n });\n this.summary.addEventListener('blur', () => {\n this.handleBlur();\n });\n this.summary.addEventListener('click', () => {\n this.handleClick();\n });\n }\n\n handleFocus() {\n // Focus class for styling.\n this.accordion.classList.add('has-focus');\n }\n\n handleBlur() {\n // Focus class for styling.\n this.accordion.classList.remove('has-focus');\n }\n\n handleClick() {\n const open = this.accordion.classList.contains('accordion--open');\n this.summary.setAttribute('aria-expanded', !open);\n this.summary.setAttribute('aria-pressed', !open);\n this.accordion.classList.toggle('accordion--open');\n }\n}\n\nexport default { Accordion };\n```\n\n```javascript\n// __tests__/accordion.js\nimport { render, fireEvent, Twig } from 'twig-testing-library'\n\n// Add Twig extensions - see the Twig.js wiki.\nTwig.extendFilter(\"backwords\", function(value) {\n return value.split(\" \").reverse().join(\" \");\n});\n\ndescribe('Accordion toggling', () => {\n it('Can be rendered open, and then collapsed on click', async () => {\n // Rendering is async, so you need to use await.\n const { container, getByText } = await render(\n // Path to twig template.\n 'accordion.twig',\n // Template variables/context. \n {\n title: 'Accordion title',\n open: true,\n }, \n // Namespace support\n {\n 'my_namespace': './some/path'\n });\n const accordionElement = container.querySelector('.accordion');\n const accordion = new Accordion.Accordion(accordionElement);\n accordion.init();\n // Snapshot support via jest.\n expect(accordionElement).toMatchSnapshot('Initial render');\n expect(accordionElement.classList.contains('accordion--open')).toBe(true);\n fireEvent.click(getByText('Accordion title'));\n expect(accordionElement).toMatchSnapshot('First collapse');\n expect(accordionElement.classList.contains('accordion--open')).toBe(false);\n })\n})\n```\n\n### More Examples\n\n- 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.\n\n## Issues\n\n### 🐛 Bugs\n\nPlease file an issue for bugs, missing documentation, or unexpected behavior.\n\n[**See Bugs**][bugs]\n\n### 💡 Feature Requests\n\nPlease file an issue to suggest new features. Vote on feature requests by adding\na 👍. This helps maintainers prioritize what to work on.\n\n[**See Feature Requests**][requests]\n\n### ❓ Questions\n\nFor questions related to using the library, please visit a support community\ninstead of filing an issue on GitHub.\n\n- [Drupal Slack #frontend channel](https://drupal.org/slack)\n\n## LICENSE\n\n[MIT](LICENSE)\n\n\n\n[npm]: https://www.npmjs.com/\n[node]: https://nodejs.org\n[build-badge]: [](https://github.com/larowlan/twig-testing-library/actions/workflows/node.js.yml)\n[build]: https://github.com/larowlan/twig-testing-library/actions\n[version-badge]: https://img.shields.io/npm/v/twig-testing-library.svg?style=flat-square\n[package]: https://www.npmjs.com/package/twig-testing-library\n[downloads-badge]: https://img.shields.io/npm/dm/twig-testing-library.svg?style=flat-square\n[npmtrends]: http://www.npmtrends.com/twig-testing-library\n[license-badge]: https://img.shields.io/npm/l/twig-testing-library.svg?style=flat-square\n[license]: https://github.com/larowlan/twig-testing-library/blob/master/LICENSE\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs]: http://makeapullrequest.com\n[github-watch-badge]: https://img.shields.io/github/watchers/larowlan/twig-testing-library.svg?style=social\n[github-watch]: https://github.com/larowlan/twig-testing-library/watchers\n[github-star-badge]: https://img.shields.io/github/stars/larowlan/twig-testing-library.svg?style=social\n[github-star]: https://github.com/larowlan/twig-testing-library/stargazers\n[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20twig-testing-library%20by%20%40larowlan%20https%3A%2F%2Fgithub.com%2Flarowlan%2Ftwig-testing-library%20%F0%9F%91%8D\n[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/larowlan/twig-testing-library.svg?style=social\n[bugs]: https://github.com/larowlan/twig-testing-library/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Acreated-desc\n[requests]: https://github.com/larowlan/twig-testing-library/issues?q=is%3Aissue+sort%3Areactions-%2B1-desc+label%3Aenhancement+is%3Aopen\n[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\"+\n\n\n","readmeFilename":"README.md"}