Merge pull request #2 from larowlan/extend-twig

Support twig extensions

README.md

@@ -140,7 +140,14 @@ describe('Accordion toggling', () => {
     // Namespace support
     {
       'my_namespace': './some/path'
-    });
+    },
+    // Support twig extensions via a callback.
+    (Twig) => {
+      Twig.extendFilter("backwords", function(value) {
+        return value.split(" ").reverse().join(" ");
+      });
+    }
+    );
     const accordionElement = container.querySelector('.accordion');
     const accordion = new Accordion.Accordion(accordionElement);
     accordion.init();

src/index.js

@@ -10,12 +10,18 @@ if (typeof afterEach === "function") {
   afterEach(cleanup)
 }
 
-async function render(twigFile, context = {}, namespaces = {}) {
+async function render(
+  twigFile,
+  context = {},
+  namespaces = {},
+  twigCallback = () => {}
+) {
   const baseElement = document.body
   const container = baseElement.appendChild(document.createElement("div"))
 
   // Add it to the mounted containers to cleanup.
   mountedContainers.add(container)
+  twigCallback(Twig)
 
   container.innerHTML = await loadTemplate(twigFile, context, namespaces)
 
@@ -89,6 +95,6 @@ function cleanupContainer(container) {
 
 // just re-export everything from dom-testing-library
 export * from "@testing-library/dom"
-export { render, cleanup }
+export { render, cleanup, Twig }
 
 /* eslint func-name-matching:0 */

tests/fixtures/accordion.twig

@@ -1,5 +1,5 @@
 <details class="accordion" {% if open %}open{% endif %}>
-  <summary class="accordion__title">{{ title|default('Accordion title') }}</summary>
+  <summary class="accordion__title">{{ title|default('Accordion title')|backwords }}</summary>
   <div class="accordion__content">
     {% block accordion_content %}
       <p>{% include "@twig-testing-library-tests/lorem-ipsum.twig" %}</p>

tests/index.js

@@ -1,11 +1,16 @@
 /* eslint no-new: 0 */
 import Accordion from './fixtures/accordion';
-import {render, fireEvent} from "../src";
+import {render, fireEvent, Twig} from "../src";
+
+Twig.extendFilter("backwords", (text) => {
+  return text.split(" ").reverse().join(" ");
+});
 
 describe('Test library by testing an accordion', () => {
   it('Can be initially rendered open', async () => {
     const { container, getByText } = await render('./tests/fixtures/accordion.twig', {
-      title: 'Accordion title',
+      // This is intentionally backwards so we can test extending twig.
+      title: 'title Accordion',
       open: true,
     }, {
       'twig-testing-library-tests': './tests/fixtures/'
@@ -30,7 +35,8 @@ describe('Test library by testing an accordion', () => {
 
   it('Can be initially rendered closed', async () => {
     const { container, getByText } = await render('./tests/fixtures/accordion.twig', {
-      title: 'Accordion title',
+      // This is intentionally backwards so we can test extending twig.
+      title: 'title Accordion',
       open: false,
     }, {
       'twig-testing-library-tests': './tests/fixtures/'