Ninjas Practicing Multidimensionality

    twig-testing-library

    1.2.0 • Public • Published

    Twig Testing Library

    goat

    A twig testing utility that allows the same testing ergonomics as React testing library.



    Build Status version downloads MIT License PRs Welcome

    Watch on GitHub Star on GitHub Tweet

    Table of Contents

    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 for testing Twig-based components. It is heavily influenced by similar libraries such as React Testing Library. It provides light utility functions on top of Twig JS and Dom testing library in a way that encourages better testing practices.

    Installation

    This module is distributed via npm which is bundled with 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.

    Examples

    Basic Example

    // 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 };
    // __tests__/accordion.js
    import { render, fireEvent, Twig } from 'twig-testing-library'
    
    // Add Twig extensions - see the Twig.js wiki.
    Twig.extendFilter("backwords", function(value) {
      return value.split(" ").reverse().join(" ");
    });
    
    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

    Issues

    🐛 Bugs

    Please file an issue for bugs, missing documentation, or unexpected behavior.

    See 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

    Questions

    For questions related to using the library, please visit a support community instead of filing an issue on GitHub.

    LICENSE

    MIT

    Install

    npm i twig-testing-library

    DownloadsWeekly Downloads

    1,190

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    19.7 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar