Test(web-twig): Add Snapshot tests

packages/web-twig/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- There should always be "Unreleased" section at the beginning. -->
 ## Unreleased
 - Add `ButtonLink`, `Container`, `Grid`, `Stack` and `TextField` component
+- Add Snapshot tests
 - Update documentation
 - Bugfix camelCase filename in compiler
 

packages/web-twig/composer.json

@@ -38,13 +38,15 @@
     "phpstan/phpstan": "^1.2",
     "phpstan/phpstan-mockery": "^1.0",
     "phpstan/extension-installer": "^1.1",
-    "phpstan/phpstan-symfony": "^1.0"
+    "phpstan/phpstan-symfony": "^1.0",
+    "spatie/phpunit-snapshot-assertions": "^4.2"
   },
   "scripts": {
     "ecs": "vendor/bin/ecs check --no-progress-bar --ansi  src/ tests/",
     "ecs:fix": "vendor/bin/ecs check --no-progress-bar --ansi --fix  src/ tests/",
     "phpunit": "vendor/bin/phpunit",
     "phpunit:coverage": "XDEBUG_MODE=coverage vendor/bin/phpunit",
+    "phpunit:update": "vendor/bin/phpunit -d --update-snapshots",
     "phpstan" : "vendor/bin/phpstan analyze",
     "tests": [
       "@ecs",

packages/web-twig/docs/Stack.md

@@ -14,7 +14,7 @@ pure implementation:
 {% endembed %}
 
 {% embed "@spirit/stack.twig" with { props: {
-    elementTyle: 'ul'
+    elementType: 'ul'
 }} %}
     {% block content %}
           <li>

packages/web-twig/docs/contribution.md

@@ -5,13 +5,13 @@ In order to maintain the uniformity of writing and functioning of components in
 ## Rules in components
 
 1. Name of components must be camelCase with first letter small.
-2. new components must contain a property class so that they can be extended according to the [instructions](./extendComponents.md)
+2. New components must contain a property class so that they can be extended according to the [instructions](./extendComponents.md)
 ```twig
 {% set _class = (props.class is defined) ? ' ' ~  props.class : '' -%}
 ```
 
-2. components must contain block content. This block is in HTML-like syntax used to define children.
-3. components must contain attribute props. This is so that it resembles the React components as much as possible.
+2. Components must have block content when is not self-closing. This block is in HTML-like syntax used to define children.
+3. Components must contain attribute props. This is so that it resembles the React components as much as possible.
 4. All internal twig variables should start by underscore (this represents private variables).
 
 ```twig

packages/web-twig/src/Resources/components/grid.twig

@@ -1,15 +1,15 @@
 {% set _className = _spiritClassPrefix ~ 'Grid' %}
-{% set _class = (props.class is defined) ? ' ' ~  props.class : '' -%}
-{% set _elementType = (props.elementType is defined) ? props.elementType : 'div' -%}
-{% set _layoutClass = (props.layout is defined) ? ' Grid--' ~  props.layout : '' -%}
-{% set _colsClass = (props.cols is defined) ? ' Grid--cols-' ~  props.cols : '' -%}
-{% set _tabletClass = (props.tablet is defined) ? ' Grid--table--cols-' ~  props.tablet : '' -%}
+{% set _class = (props.class is defined) ? ' ' ~  props.class : '' %}
+{% set _elementType = (props.elementType is defined) ? props.elementType : 'div' %}
+{% set _layoutClass = (props.layout is defined) ? ' Grid--' ~  props.layout : '' %}
+{% set _colsClass = (props.cols is defined) ? ' Grid--cols-' ~  props.cols : '' %}
+{% set _tabletClass = (props.tablet is defined) ? ' Grid--table--cols-' ~  props.tablet : '' %}
 {% set _desktopClass = (props.desktop is defined) ? ' Grid--desktop--cols-' ~  props.desktop : '' -%}
 
 {% if props.cols is defined and props.tablet is defined  and props.desktop %}
-    {% set _layoutClass = '' -%}
+    {% set _layoutClass = '' %}
 {% endif %}
 
 <{{ _elementType }} class="{{ _className }}{{ _layoutClass }}{{ _colsClass }}{{ _class }}">
-{%- block content %}{% endblock %}
+{% block content %}{% endblock %}
 </{{ _elementType }}>

packages/web-twig/src/Resources/components/stack.twig

@@ -3,5 +3,5 @@
 {% set _elementType = (props.elementType is defined) ? props.elementType : 'div' -%}
 
 <{{ _elementType }} class="{{ _className }}{{ _class }}">
-{%- block content %}{% endblock %}
+{% block content %}{% endblock %}
 </{{ _elementType }}>

packages/web-twig/tests/ComponentSnapshotTest.php

@@ -0,0 +1,76 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Lmc\SpiritWebTwigBundle;
+
+use Lmc\SpiritWebTwigBundle\Compiler\ComponentLexer;
+use Lmc\SpiritWebTwigBundle\DependencyInjection\CompilerPass\OverrideServiceCompilerPass;
+use Lmc\SpiritWebTwigBundle\DependencyInjection\SpiritWebTwigExtension;
+use PHPUnit\Framework\TestCase;
+use Spatie\Snapshots\MatchesSnapshots;
+use Twig\Environment;
+use Twig\Loader\FilesystemLoader;
+
+final class ComponentsSnapshotTest extends TestCase
+{
+    use MatchesSnapshots;
+
+    protected Environment $twig;
+
+    private const SNAPSHOT_SOURCES = __DIR__ . '/components-fixtures';
+
+    protected function setupTwig(?string $prefix = null): Environment
+    {
+        $alias = 'spirit';
+        $loader = new FilesystemLoader(self::SNAPSHOT_SOURCES);
+        $loader->addPath(SpiritWebTwigExtension::DEFAULT_COMPONENTS_PATH, SpiritWebTwigExtension::DEFAULT_PATH_ALIAS);
+
+        $twig = new Environment($loader, [
+            'cache' => false,
+        ]);
+
+        if ($prefix) {
+            $twig->addGlobal(OverrideServiceCompilerPass::GLOBAL_PREFIX_TWIG_VARIABLE, $prefix);
+        }
+
+        $twig->setLoader($loader);
+        $twig->setLexer(new ComponentLexer($twig, [], $alias));
+
+        return $twig;
+    }
+
+    public function setUp(): void
+    {
+        $this->twig = $this->setupTwig();
+    }
+
+    /**
+     * @dataProvider snapshotComponentsDataProvider
+     */
+    public function testShouldSnapshotComponents(string $template): void
+    {
+        $html = $this->twig->render($template);
+
+        $this->assertMatchesHtmlSnapshot($html);
+    }
+
+    /**
+     * @return array<string, array<string>>
+     */
+    public function snapshotComponentsDataProvider(): array
+    {
+        $scanDirArray = scandir(self::SNAPSHOT_SOURCES);
+
+        assert(is_array($scanDirArray));
+
+        $scannedDirectory = array_diff($scanDirArray, ['..', '.']);
+        $dataToProvide = [];
+
+        foreach ($scannedDirectory as $fileName) {
+            $dataToProvide[(string) $fileName] = [(string) $fileName];
+        }
+
+        return $dataToProvide;
+    }
+}

packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set containerDefault.twig__1.html

@@ -0,0 +1,4 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html><body>
+<div class="Container">Content</div>
+</body></html>

packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set containerDefaultPure.twig__1.html

@@ -0,0 +1,5 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html><body>
+<div class="Container">        Content
+    </div>
+</body></html>

packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set gridDefault.twig__1.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html><body>
+<div class="Grid Grid--cols-2">
+    <span>col 1</span>
+    <span>col 2</span>
+    <span>col 3</span>
+    <span>col 4</span>
+    <span>col 5</span>
+    <span>col 6</span>
+</div>
+</body></html>

packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set gridDefaultPure.twig__1.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html><body>
+<div class="Grid Grid--cols-2">
+        <span>col 1</span>
+        <span>col 2</span>
+        <span>col 3</span>
+        <span>col 4</span>
+        <span>col 5</span>
+        <span>col 6</span>
+    </div>
+</body></html>

packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set stackDefault.twig__1.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html><body>
+<div class="Stack">
+    <div>Block 1</div>
+    <div>Block 2</div>
+    <div>Block 3</div>
+</div>
+<ul class="Stack">
+    <li>
+        <div>List item 1</div>
+    </li>
+    <li>
+        <div>List item 1</div>
+    </li>
+    <li>
+        <div>List item 1</div>
+    </li>
+</ul>
+</body></html>

packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set stackDefaultPure.twig__1.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html><body>
+<div class="Stack">
+        <div>Block 1</div>
+        <div>Block 2</div>
+        <div>Block 3</div>
+    </div>
+
+<ul class="Stack">
+        <li>
+            <div>List item 1</div>
+        </li>
+        <li>
+            <div>List item 1</div>
+        </li>
+        <li>
+            <div>List item 1</div>
+        </li>
+    </ul>
+</body></html>

packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set textFieldDefault.twig__1.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html><body>
+<div class="TextField TextField--error">
+    <label for="example" class="TextField__label TextField__label--required">Text field</label>
+    <input type="text" id="example" name="example" class="TextField__input" required="true" value="">
+    </div>
+
+
+<div class="TextField TextField--error">
+    <label for="example2" class="TextField__label TextField__label--required">Password field</label>
+    <input type="password" id="example2" name="example2" class="TextField__input" required="true" value="">
+    </div>
+</body></html>

packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set textFieldDefaultPure.twig__1.html

@@ -0,0 +1,6 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html><body><div class="TextField TextField--error">
+    <label for="example" class="TextField__label"></label>
+    <input type="text" id="example" name="example" class="TextField__input" required="true" value="">
+    <div class="TextField__message">validation failed</div>
+</div></body></html>

packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set textFieldWithInvisibleLabel.twig__1.html

@@ -0,0 +1,5 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html><body><div class="TextField">
+    <label for="example" class="TextField__label TextField__label--hidden"></label>
+    <input type="text" id="example" name="example" class="TextField__input" required="true" value="">
+    </div></body></html>

packages/web-twig/tests/components-fixtures/containerDefault.twig

@@ -0,0 +1 @@
+<Container>Content</Container>

packages/web-twig/tests/components-fixtures/containerDefaultPure.twig

@@ -0,0 +1,5 @@
+{% embed "@spirit/container.twig" %}
+    {% block content %}
+        Content
+    {% endblock %}
+{% endembed %}

packages/web-twig/tests/components-fixtures/gridDefault.twig

@@ -0,0 +1,8 @@
+<Grid cols="2" tablet="3" desktop="4">
+    <span>col 1</span>
+    <span>col 2</span>
+    <span>col 3</span>
+    <span>col 4</span>
+    <span>col 5</span>
+    <span>col 6</span>
+</Grid>

packages/web-twig/tests/components-fixtures/gridDefaultPure.twig

@@ -0,0 +1,14 @@
+{% embed "@spirit/grid.twig" with { props: {
+    cols: 2,
+    tablet: 3,
+    desktop: 4,
+}} %}
+    {% block content %}
+        <span>col 1</span>
+        <span>col 2</span>
+        <span>col 3</span>
+        <span>col 4</span>
+        <span>col 5</span>
+        <span>col 6</span>
+    {% endblock %}
+{% endembed %}

packages/web-twig/tests/components-fixtures/stackDefault.twig

@@ -0,0 +1,16 @@
+<Stack>
+    <div>Block 1</div>
+    <div>Block 2</div>
+    <div>Block 3</div>
+</Stack>
+<Stack elementType="ul">
+    <li>
+        <div>List item 1</div>
+    </li>
+    <li>
+        <div>List item 1</div>
+    </li>
+    <li>
+        <div>List item 1</div>
+    </li>
+</Stack>

packages/web-twig/tests/components-fixtures/stackDefaultPure.twig

@@ -0,0 +1,23 @@
+{% embed "@spirit/stack.twig" %}
+    {% block content %}
+        <div>Block 1</div>
+        <div>Block 2</div>
+        <div>Block 3</div>
+    {% endblock %}
+{% endembed %}
+
+{% embed "@spirit/stack.twig" with { props: {
+    elementType: 'ul'
+}} %}
+    {% block content %}
+        <li>
+            <div>List item 1</div>
+        </li>
+        <li>
+            <div>List item 1</div>
+        </li>
+        <li>
+            <div>List item 1</div>
+        </li>
+    {% endblock %}
+{% endembed %}

packages/web-twig/tests/components-fixtures/textFieldDefault.twig

@@ -0,0 +1,2 @@
+<TextField id="example" label="Text field" type="text" name="example" required validationState="error" messsage="validation failed" />
+<TextField id="example2" label="Password field" type="password" name="example2" required validationState="error" messsage="validation failed" />

packages/web-twig/tests/components-fixtures/textFieldDefaultPure.twig

@@ -0,0 +1,8 @@
+{% include "@spirit/textField.twig" with { props: {
+    id: "example",
+    type: "text",
+    name: "example",
+    required: "true",
+    validationState: "error",
+    message: "validation failed",
+}} %}

packages/web-twig/tests/components-fixtures/textFieldWithInvisibleLabel.twig

@@ -0,0 +1 @@
+<TextField id="example" type="text" name="example" isLabelHidden required />