diff --git a/packages/web-twig/CHANGELOG.md b/packages/web-twig/CHANGELOG.md index 85aa29a6c0..452e6edf5e 100644 --- a/packages/web-twig/CHANGELOG.md +++ b/packages/web-twig/CHANGELOG.md @@ -3,6 +3,7 @@ ## Unreleased - Add `ButtonLink`, `Container`, `Grid`, `Stack` and `TextField` component +- Add Snapshot tests - Update documentation - Bugfix camelCase filename in compiler diff --git a/packages/web-twig/composer.json b/packages/web-twig/composer.json index ef57bca937..12182ad5fe 100644 --- a/packages/web-twig/composer.json +++ b/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", diff --git a/packages/web-twig/docs/Stack.md b/packages/web-twig/docs/Stack.md index b0e0b8b79f..d2db168fe5 100644 --- a/packages/web-twig/docs/Stack.md +++ b/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 %}
  • diff --git a/packages/web-twig/docs/contribution.md b/packages/web-twig/docs/contribution.md index 15f2cf5eac..19e30a563d 100644 --- a/packages/web-twig/docs/contribution.md +++ b/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 diff --git a/packages/web-twig/src/Resources/components/grid.twig b/packages/web-twig/src/Resources/components/grid.twig index 8850a8b8a5..8ee42f8388 100644 --- a/packages/web-twig/src/Resources/components/grid.twig +++ b/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 %} diff --git a/packages/web-twig/src/Resources/components/stack.twig b/packages/web-twig/src/Resources/components/stack.twig index e5c0cf6ad9..45f7220196 100644 --- a/packages/web-twig/src/Resources/components/stack.twig +++ b/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 %} diff --git a/packages/web-twig/tests/ComponentSnapshotTest.php b/packages/web-twig/tests/ComponentSnapshotTest.php new file mode 100644 index 0000000000..471a410406 --- /dev/null +++ b/packages/web-twig/tests/ComponentSnapshotTest.php @@ -0,0 +1,76 @@ +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> + */ + 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; + } +} diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set containerDefault.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set containerDefault.twig__1.html new file mode 100644 index 0000000000..a4bc6c36f0 --- /dev/null +++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set containerDefault.twig__1.html @@ -0,0 +1,4 @@ + + +
    Content
    + diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set containerDefaultPure.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set containerDefaultPure.twig__1.html new file mode 100644 index 0000000000..e9dea11afd --- /dev/null +++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set containerDefaultPure.twig__1.html @@ -0,0 +1,5 @@ + + +
    Content +
    + diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set gridDefault.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set gridDefault.twig__1.html new file mode 100644 index 0000000000..3c2f002e97 --- /dev/null +++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set gridDefault.twig__1.html @@ -0,0 +1,11 @@ + + +
    + col 1 + col 2 + col 3 + col 4 + col 5 + col 6 +
    + diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set gridDefaultPure.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set gridDefaultPure.twig__1.html new file mode 100644 index 0000000000..63505115c2 --- /dev/null +++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set gridDefaultPure.twig__1.html @@ -0,0 +1,11 @@ + + +
    + col 1 + col 2 + col 3 + col 4 + col 5 + col 6 +
    + diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set stackDefault.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set stackDefault.twig__1.html new file mode 100644 index 0000000000..80d0bb7f09 --- /dev/null +++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set stackDefault.twig__1.html @@ -0,0 +1,19 @@ + + +
    +
    Block 1
    +
    Block 2
    +
    Block 3
    +
    + + diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set stackDefaultPure.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set stackDefaultPure.twig__1.html new file mode 100644 index 0000000000..555e19b079 --- /dev/null +++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set stackDefaultPure.twig__1.html @@ -0,0 +1,20 @@ + + +
    +
    Block 1
    +
    Block 2
    +
    Block 3
    +
    + + + diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set textFieldDefault.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set textFieldDefault.twig__1.html new file mode 100644 index 0000000000..f55389d1e3 --- /dev/null +++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set textFieldDefault.twig__1.html @@ -0,0 +1,13 @@ + + +
    + + +
    + + +
    + + +
    + diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set textFieldDefaultPure.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set textFieldDefaultPure.twig__1.html new file mode 100644 index 0000000000..cfff3a57bf --- /dev/null +++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set textFieldDefaultPure.twig__1.html @@ -0,0 +1,6 @@ + +
    + + +
    validation failed
    +
    diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set textFieldWithInvisibleLabel.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set textFieldWithInvisibleLabel.twig__1.html new file mode 100644 index 0000000000..8aa21a4655 --- /dev/null +++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set textFieldWithInvisibleLabel.twig__1.html @@ -0,0 +1,5 @@ + +
    + + +
    diff --git a/packages/web-twig/tests/components-fixtures/containerDefault.twig b/packages/web-twig/tests/components-fixtures/containerDefault.twig new file mode 100644 index 0000000000..089af370f2 --- /dev/null +++ b/packages/web-twig/tests/components-fixtures/containerDefault.twig @@ -0,0 +1 @@ +Content \ No newline at end of file diff --git a/packages/web-twig/tests/components-fixtures/containerDefaultPure.twig b/packages/web-twig/tests/components-fixtures/containerDefaultPure.twig new file mode 100644 index 0000000000..f396e2b772 --- /dev/null +++ b/packages/web-twig/tests/components-fixtures/containerDefaultPure.twig @@ -0,0 +1,5 @@ +{% embed "@spirit/container.twig" %} + {% block content %} + Content + {% endblock %} +{% endembed %} \ No newline at end of file diff --git a/packages/web-twig/tests/components-fixtures/gridDefault.twig b/packages/web-twig/tests/components-fixtures/gridDefault.twig new file mode 100644 index 0000000000..2745b5704d --- /dev/null +++ b/packages/web-twig/tests/components-fixtures/gridDefault.twig @@ -0,0 +1,8 @@ + + col 1 + col 2 + col 3 + col 4 + col 5 + col 6 + \ No newline at end of file diff --git a/packages/web-twig/tests/components-fixtures/gridDefaultPure.twig b/packages/web-twig/tests/components-fixtures/gridDefaultPure.twig new file mode 100644 index 0000000000..c34da001bb --- /dev/null +++ b/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 %} + col 1 + col 2 + col 3 + col 4 + col 5 + col 6 + {% endblock %} +{% endembed %} \ No newline at end of file diff --git a/packages/web-twig/tests/components-fixtures/stackDefault.twig b/packages/web-twig/tests/components-fixtures/stackDefault.twig new file mode 100644 index 0000000000..6d6185595f --- /dev/null +++ b/packages/web-twig/tests/components-fixtures/stackDefault.twig @@ -0,0 +1,16 @@ + +
    Block 1
    +
    Block 2
    +
    Block 3
    +     + +
  • +
    List item 1
    +
    • +
  • +
    List item 1
    +
    • +
  • +
    List item 1
    +
    • + \ No newline at end of file diff --git a/packages/web-twig/tests/components-fixtures/stackDefaultPure.twig b/packages/web-twig/tests/components-fixtures/stackDefaultPure.twig new file mode 100644 index 0000000000..d4c766c5b5 --- /dev/null +++ b/packages/web-twig/tests/components-fixtures/stackDefaultPure.twig @@ -0,0 +1,23 @@ +{% embed "@spirit/stack.twig" %} + {% block content %} +
    Block 1
    +
    Block 2
    +
    Block 3
    + {% endblock %} +{% endembed %} + +{% embed "@spirit/stack.twig" with { props: { + elementType: 'ul' +}} %} + {% block content %} +
  • +
    List item 1
    +
    • +
  • +
    List item 1
    +
    • +
  • +
    List item 1
    +
    • + {% endblock %} +{% endembed %} \ No newline at end of file diff --git a/packages/web-twig/tests/components-fixtures/textFieldDefault.twig b/packages/web-twig/tests/components-fixtures/textFieldDefault.twig new file mode 100644 index 0000000000..da647593cc --- /dev/null +++ b/packages/web-twig/tests/components-fixtures/textFieldDefault.twig @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/packages/web-twig/tests/components-fixtures/textFieldDefaultPure.twig b/packages/web-twig/tests/components-fixtures/textFieldDefaultPure.twig new file mode 100644 index 0000000000..b71c90e4fe --- /dev/null +++ b/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", +}} %} \ No newline at end of file diff --git a/packages/web-twig/tests/components-fixtures/textFieldWithInvisibleLabel.twig b/packages/web-twig/tests/components-fixtures/textFieldWithInvisibleLabel.twig new file mode 100644 index 0000000000..0e927c5eaa --- /dev/null +++ b/packages/web-twig/tests/components-fixtures/textFieldWithInvisibleLabel.twig @@ -0,0 +1 @@ + \ No newline at end of file