From 98d15221adb4d689556479c4b5e2afcbd4c6d205 Mon Sep 17 00:00:00 2001
From: Lee Rowlands <lee.rowlands@previousnext.com.au>
Date: Wed, 15 Jul 2020 10:21:13 +1000
Subject: [PATCH] feat(pencil): support twig extensions

---
 README.md                     |  9 ++++++++-
 src/index.js                  | 10 ++++++++--
 tests/fixtures/accordion.twig |  2 +-
 tests/index.js                | 12 +++++++++---
 4 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index adcc16a..e0fd19d 100644
--- a/README.md
+++ b/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();
diff --git a/src/index.js b/src/index.js
index 6742fa0..7e53b61 100644
--- a/src/index.js
+++ b/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 */
diff --git a/tests/fixtures/accordion.twig b/tests/fixtures/accordion.twig
index 1dcaedf..af0c484 100644
--- a/tests/fixtures/accordion.twig
+++ b/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>
diff --git a/tests/index.js b/tests/index.js
index 28dc006..f3955be 100644
--- a/tests/index.js
+++ b/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/'