Add basic Jinja tests

thibaudcolas · thibaudcolas · commit 7cbd2886e76b · 2025-04-08T17:12:42.000+01:00
diff --git a/README.md b/README.md
@@ -13,8 +13,9 @@ This package automates the maintenance of UI pattern libraries or styleguides fo
 - Create reusable patterns by creating Django templates files as usual.
 - All patterns automatically show up in the pattern library’s interface.
 - Define data as YAML files for the templates to render with the relevant Django context.
-- Override Django templates tags as needed to mock the template’s dependencies.
+- Override Django Templates tags as needed to mock the template’s dependencies.
 - Document your patterns with Markdown.
+- Experimental: support for Jinja templates.
 
 ## Why you need this
 
diff --git a/pattern_library/monkey_utils.py b/pattern_library/monkey_utils.py
@@ -126,7 +126,7 @@ def node_render(context):
 
 def override_jinja_tags():
     """
-    Overrides jinja extends and include tags for use in your pattern library.
+    Experimental. Overrides jinja extends and include tags for use in your pattern library.
     Call it in your settings to override tags
     """
     global jinja_visit_Extends
@@ -136,7 +136,7 @@ def override_jinja_tags():
     except ModuleNotFoundError:
         ModuleNotFoundError("install jinja2 to override jinja tags")
 
-    from .loader_tags import template_new_context, visit_extends
+    from pattern_library.loader_tags import template_new_context, visit_extends
 
     jinja_visit_Extends = JinjaCodeGenerator.visit_Extends
     JinjaTemplate.new_context = template_new_context
diff --git a/pattern_library/utils.py b/pattern_library/utils.py
@@ -307,7 +307,6 @@ def get_template_ancestors(cls, template_name, context=None, ancestors=None):
             context = Context()
 
         pattern_template = get_template(template_name)
-        # todo - make sure envrionment has context passed in
         environment = pattern_template.template.environment
         nodelist = environment.parse(pattern_template.template.name)
         parent_template_name = nodelist.find(Extends)
diff --git a/tests/jinja/non-patterns/include.html b/tests/jinja/non-patterns/include.html
@@ -0,0 +1,4 @@
+SHOWME
+{% if False %}
+HIDEME
+{% endif %}
diff --git a/tests/jinja/non-patterns/variable_include.html b/tests/jinja/non-patterns/variable_include.html
@@ -0,0 +1 @@
+included content from variable
diff --git a/tests/jinja/patterns_jinja/base_jinja.html b/tests/jinja/patterns_jinja/base_jinja.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en-GB">
+    <head>
+        <meta charset="utf-8" />
+        <title>{% block title %}Fragment{% endblock %}</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+        <link rel="stylesheet" href="{{ static('main.css') }}">
+    </head>
+    <body>
+        <main>
+            {% block content %}{% endblock %}
+        </main>
+        <script src="{{ static('main.js') }}"></script>
+    </body>
+</html>
diff --git a/tests/jinja/patterns_jinja/base_page_jinja.html b/tests/jinja/patterns_jinja/base_page_jinja.html
@@ -0,0 +1,3 @@
+{% extends 'patterns_jinja/base_jinja.html' %}
+
+{% block title %}{{ page.title }}{% endblock %}
diff --git a/tests/jinja/patterns_jinja/components/accordion/accordion.html b/tests/jinja/patterns_jinja/components/accordion/accordion.html
@@ -0,0 +1,17 @@
+<div class="accordion" data-accordion>
+    {% for accordion in accordions %}
+        <div class="accordion__panel" data-accordion-panel>
+            <h3 class="accordion__title heading heading--4">
+                <button class="accordion__toggle" type="button" data-accordion-toggle aria-pressed="true" aria-expanded="true" aria-controls="{{ id_prefix }}-content-{{ loop.index }}">
+                    <span class="accordion__title-inner">{{ accordion.title }}</span>
+                    {% set name="chevron-down" %}
+                    {% set classname="accordion__icon" %}
+                    {% include "patterns_jinja/components/icons/icon.html" %}
+                </button>
+            </h3>
+            <div id="{{ id_prefix }}-content-{{ loop.index }}" class="accordion__content" data-accordion-content>
+                <p>{{ accordion.description }}</p>
+            </div>
+        </div>
+    {% endfor %}
+</div>
diff --git a/tests/jinja/patterns_jinja/components/accordion/accordion.md b/tests/jinja/patterns_jinja/components/accordion/accordion.md
@@ -0,0 +1,3 @@
+# Accordion (Jinja)
+
+The accordion is a good example of a pattern library component. This one uses [Jinja](https://jinja.palletsprojects.com/).
diff --git a/tests/jinja/patterns_jinja/components/accordion/accordion.yaml b/tests/jinja/patterns_jinja/components/accordion/accordion.yaml
@@ -0,0 +1,11 @@
+context:
+  id_prefix: test
+  accordions:
+    - title: Title A (Jinja)
+      description: Description A. Ask for help.
+    - title: Title B
+      description: Description B. Ask for help.
+    - title: Title C
+      description: Description C. Ask for help.
+    - title: Title D
+      description: Description D. Ask for help.
diff --git a/tests/jinja/patterns_jinja/components/button/button.html b/tests/jinja/patterns_jinja/components/button/button.html
@@ -0,0 +1,3 @@
+<a href="{% if target_url %}{{ target_url }}{% else %}{{ pageurl(target_page) }}{% endif %}" class="button">
+    {% if label %}{{ label }}{% else %}{{ target_page.title }}{% endif %}
+</a>
diff --git a/tests/jinja/patterns_jinja/components/button/button.yaml b/tests/jinja/patterns_jinja/components/button/button.yaml
@@ -0,0 +1,7 @@
+context:
+  target_page:
+    title: Get started
+tags:
+  pageurl:
+    target_page:
+      raw: /get-started
diff --git a/tests/jinja/patterns_jinja/components/icons/icon.html b/tests/jinja/patterns_jinja/components/icons/icon.html
@@ -0,0 +1,3 @@
+<svg class="icon icon--{{ name }}{% if classname %} {{ classname }}{% endif %}" aria-hidden="true" focusable="false">
+    <use xlink:href="#{{ name }}"></use>
+</svg>
diff --git a/tests/jinja/patterns_jinja/components/icons/icon.yaml b/tests/jinja/patterns_jinja/components/icons/icon.yaml
@@ -0,0 +1,2 @@
+context:
+  name: close
diff --git a/tests/jinja/patterns_jinja/components/sprites/sprites.html b/tests/jinja/patterns_jinja/components/sprites/sprites.html
@@ -0,0 +1,33 @@
+<svg style="display: none;">
+    <symbol id="close" viewBox="0 0 24 24">
+        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
+        <path d="M0 0h24v24H0z" fill="none"></path>
+    </symbol>
+
+    <symbol id="cancel" viewBox="0 0 11 12">
+        <rect transform="rotate(45 5.5 6)" x="5" y="-1" width="1" height="14" rx=".5"/>
+        <rect transform="rotate(135 5.5 6)" x="5" y="-1" width="1" height="14" rx=".5"/>
+    </symbol>
+
+    <symbol id="chevron-down" viewBox="0 0 23 14">
+        <path d="M.893 1.5L11.5 12.107 22.107 1.5" stroke="currentColor" stroke-width="2" fill="none" vector-effect="non-scaling-stroke"  />
+    </symbol>
+
+    <symbol id="checkmark" viewBox="0 0 12 10">
+        <path d="M1 4.364l3.536 3.535 6.363-6.363" stroke="currentColor" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"/>
+    </symbol>
+</svg>
+{# Show available icons, in pattern library view only #}
+{% if is_pattern_library %}
+<template>
+    {% set name="__icon__" %}
+    {% include "patterns_jinja/components/icons/icon.html" %}
+</template>
+<script>
+    const template = document.currentScript.previousElementSibling;
+    const symbols = [...template.previousElementSibling.querySelectorAll('symbol')];
+    const list = document.createElement('ul');
+    list.innerHTML = symbols.map(el => `<li>${el.id}&nbsp;${template.innerHTML.replace(/__icon__/g, el.id)}</li>`).join('');
+    document.body.appendChild(list);
+</script>
+{% endif %}
diff --git a/tests/jinja/patterns_jinja/components/test_atom/test_atom.html b/tests/jinja/patterns_jinja/components/test_atom/test_atom.html
@@ -0,0 +1 @@
+{{ atom_var }}
diff --git a/tests/jinja/patterns_jinja/components/test_atom/test_atom.md b/tests/jinja/patterns_jinja/components/test_atom/test_atom.md
@@ -0,0 +1,12 @@
+# Documentation for test atom - heading 1
+
+**bold text**
+
+*italic text*
+
+## Here's a heading 2
+
+### Here's a heading 3
+
+- here's a list item
+- and another
diff --git a/tests/jinja/patterns_jinja/components/test_atom/test_atom.yaml b/tests/jinja/patterns_jinja/components/test_atom/test_atom.yaml
@@ -0,0 +1,2 @@
+context:
+  atom_var: 'atom_var value from test_atom.yaml'
diff --git a/tests/jinja/patterns_jinja/components/test_extends/base.html b/tests/jinja/patterns_jinja/components/test_extends/base.html
@@ -0,0 +1 @@
+{% block content %}base content{% endblock %}
diff --git a/tests/jinja/patterns_jinja/components/test_extends/extended.html b/tests/jinja/patterns_jinja/components/test_extends/extended.html
@@ -0,0 +1,3 @@
+{% extends parent_template_name %}
+
+{% block content %}{{ super() }} - extended content{% endblock %}
diff --git a/tests/jinja/patterns_jinja/components/test_extends/extended.yaml b/tests/jinja/patterns_jinja/components/test_extends/extended.yaml
@@ -0,0 +1,2 @@
+context:
+  parent_template_name: patterns_jinja/components/test_extends/base.html
diff --git a/tests/jinja/patterns_jinja/components/test_includes/test_includes.html b/tests/jinja/patterns_jinja/components/test_includes/test_includes.html
@@ -0,0 +1,4 @@
+{% include 'non-patterns/include.html' %}
+{% include variable_include %}
+
+{{ error_tag() }}
diff --git a/tests/jinja/patterns_jinja/components/test_includes/test_includes.yaml b/tests/jinja/patterns_jinja/components/test_includes/test_includes.yaml
@@ -0,0 +1,7 @@
+context:
+    variable_include: non-patterns/variable_include.html
+
+tags:
+  error_tag:
+    include:
+      template_name: 'non-patterns/include.html'
diff --git a/tests/jinja/patterns_jinja/components/test_molecule/test_molecule.html b/tests/jinja/patterns_jinja/components/test_molecule/test_molecule.html
@@ -0,0 +1,3 @@
+{% include 'patterns_jinja/components/test_atom/test_atom.html' %}
+{% set atom_var='atom_var value from test_molecule.html include tag' %}
+{% include 'patterns_jinja/components/test_atom/test_atom.html' %}
diff --git a/tests/jinja/patterns_jinja/components/test_molecule/test_molecule.yaml b/tests/jinja/patterns_jinja/components/test_molecule/test_molecule.yaml
@@ -0,0 +1,5 @@
+name: Pretty name for test molecule
+
+context:
+  atom_var: 'atom_var value from test_molecule.yaml'
+  utf8_test_var: '你好，世界'
diff --git a/tests/jinja/patterns_jinja/components/test_molecule/test_molecule_no_context.html b/tests/jinja/patterns_jinja/components/test_molecule/test_molecule_no_context.html
@@ -0,0 +1 @@
+No context
diff --git a/tests/jinja/patterns_jinja/pages/search/search.html b/tests/jinja/patterns_jinja/pages/search/search.html
@@ -0,0 +1,34 @@
+{% extends "patterns_jinja/base_jinja.html" %}
+
+{% block content %}
+    <h1>{% if search_query %}Search results for “{{ search_query }}”{% else %}Search{% endif %}</h1>
+
+    {% if search_results %}
+        {% with count=paginator.count %}
+            {{ count }} result{{ count|pluralize }} found.
+        {% endwith %}
+
+        {% for result in search_results %}
+            <h4>{{ result.title }}</h4>
+        {% endfor %}
+
+        {% if paginator.num_pages > 1 %}
+            <nav aria-label="Pagination">
+                <ul>
+                    {% if search_results.has_previous %}
+                        <li><a href="#page={{ search_results.previous_page_number() }}{% if search_query %}&amp;query={{ search_query|urlencode }}{% endif %}">previous</a></li>
+                    {% endif %}
+
+                    <li>{{ search_results.number }}/{{ paginator.num_pages }}</li>
+
+                    {% if search_results.has_next %}
+                        <li><a href="#page={{ search_results.next_page_number() }}{% if search_query %}&amp;query={{ search_query|urlencode }}{% endif %}">next</a></li>
+                    {% endif %}
+                </ul>
+            </nav>
+        {% endif %}
+
+    {% elif search_query %}
+        No results found.
+    {% endif %}
+{% endblock %}
diff --git a/tests/jinja/patterns_jinja/pages/search/search.yaml b/tests/jinja/patterns_jinja/pages/search/search.yaml
@@ -0,0 +1,5 @@
+context:
+  search_query: test query
+  search_results:
+    - title: First result
+    - title: Second result
diff --git a/tests/jinja/patterns_jinja/pages/test_page/test_page.html b/tests/jinja/patterns_jinja/pages/test_page/test_page.html
@@ -0,0 +1,12 @@
+{% extends 'patterns_jinja/base_page_jinja.html' %}
+
+{% block content %}
+<h1>{{ page.title }}</h1>
+{{ page.body }}
+
+{% include "patterns_jinja/components/accordion/accordion.html" %}
+
+{% if is_pattern_library %}
+<p>is_pattern_library = {{ is_pattern_library }}</p>
+{% endif %}
+{% endblock %}
diff --git a/tests/jinja/patterns_jinja/pages/test_page/test_page.yaml b/tests/jinja/patterns_jinja/pages/test_page/test_page.yaml
@@ -0,0 +1,12 @@
+context:
+  page:
+    title: Jinja test page
+    body: >
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
diff --git a/tests/jinja2.py b/tests/jinja2.py
@@ -0,0 +1,56 @@
+from django.apps import apps
+from django.template.context_processors import csrf
+from django.template.defaultfilters import (
+    cut,
+    date,
+    linebreaks,
+    pluralize,
+    slugify,
+    truncatewords,
+    urlencode,
+)
+from django.contrib.staticfiles.storage import staticfiles_storage
+from django.urls import reverse
+
+from jinja2 import Environment
+
+from pattern_library.monkey_utils import override_jinja_tags
+
+
+if apps.is_installed("pattern_library"):
+    override_jinja_tags()
+
+
+def error_tag():
+    "Just raise an exception, never do anything"
+    raise Exception("error_tag raised an exception")
+
+
+def pageurl(page):
+    """Approximation of wagtail built-in tag for realistic example."""
+    return "/page/url"
+
+
+def environment(**options):
+    env = Environment(**options)
+    env.globals.update(
+        {
+            "static": staticfiles_storage.url,
+            "url": reverse,
+            "csrf": csrf,
+            "error_tag": error_tag,
+            "pageurl": pageurl,
+        }
+    )
+    env.filters.update(
+        {
+            "cut": cut,
+            "date": date,
+            "linebreaks": linebreaks,
+            "pluralize": pluralize,
+            "slugify": slugify,
+            "truncatewords": truncatewords,
+            "urlencode": urlencode,
+        }
+    )
+    return env
diff --git a/tests/pattern_contexts.py b/tests/pattern_contexts.py
@@ -31,7 +31,34 @@ def replicate_pagination(context, request):
 
     # add dummy items to force pagination
     for i in range(50):
-        object_list.append(None)
+        object_list.append({"title": i})
+
+    # paginate and add ListView-like values
+    paginator = Paginator(object_list, original_length)
+    context.update(
+        paginator=paginator,
+        search_results=paginator.page(10),
+        is_paginated=True,
+        object_list=object_list,
+    )
+
+
+@register_context_modifier(template="patterns_jinja/pages/search/search.html")
+def replicate_pagination_jinja(context, request):
+    """
+    Replace lists of items using the 'page_obj.object_list' key
+    with a real Paginator page, and add a few other pagination-related
+    things to the context (like Django's `ListView` does).
+    """
+    object_list = context.pop("search_results", None)
+    if object_list is None:
+        return
+
+    original_length = len(object_list)
+
+    # add dummy items to force pagination
+    for i in range(50):
+        object_list.append({"title": i})
 
     # paginate and add ListView-like values
     paginator = Paginator(object_list, original_length)
diff --git a/tests/settings/base.py b/tests/settings/base.py
diff --git a/tests/templates/patterns/pages/people/person_page.yaml b/tests/templates/patterns/pages/people/person_page.yaml
diff --git a/tests/templates/patterns/pages/test_page/test_page.html b/tests/templates/patterns/pages/test_page/test_page.html

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +SHOWME
 +{% if False %}
 +HIDEME
 +{% endif %}
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{% extends 'patterns_jinja/base_jinja.html' %}`
	`2`	`+`
	`3`	`+{% block title %}{{ page.title }}{% endblock %}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# Accordion (Jinja)`
	`2`	`+`
	`3`	`+The accordion is a good example of a pattern library component. This one uses [Jinja](https://jinja.palletsprojects.com/).`