DEV Community: Vien Nguyen

Shopware custom CLI command to generate demo data on your entity

Vien Nguyen — Sun, 22 May 2022 04:56:38 +0000

Shopware creating CLI command to generate demo data on your entity

In this blog post, you will learn how to create a custom command in a Shopware 6 plugin and use it to generate the demo data.

Because Shopware 6 is based on the Symfony framework, it also has its Console available. So you can do most of the stuff you need to do while developing Shopware 6 plugins.

Folder structure

<pluginRoot>
└── src
    ├── Command
    │   └── DemodataCommand.php
    │
    ├── Generator
    │   └── ArticleGenerator.php
    │
    └── Resources
        └── config
            └── services.xml

Registering the command

To register a new command, just add it to your plugin's services.xml and specify the console.command tag:

<service id="Sas\BlogModule\Command\DemodataCommand">
    <argument type="service" id="Shopware\Core\Framework\Demodata\DemodataService"/>
    <tag name="console.command"/>
</service>

Configuring the command

Your command's class should extend from the Symfony\Component\Console\Command\Command
class:

class DemodataCommand extends Command
{
    protected static $defaultName = '';

    protected function configure(): void
    {
        //
    }

    protected function execute(InputInterface $input, OutputInterface $output): int
    {
        //
    }
}

Let’s start with the name of the command (the part after "bin/console"):

// the command description shown when running "php bin/console list"
protected static $defaultName = 'article:demodata';

You can optionally define a description, help message and the input options and arguments
by overriding the configure() method:

protected function configure(): void
{
    $this->addArgument('count', InputArgument::REQUIRED, 'The number of the articles.');
}

Put in the execute() method the code to create demo data:
This method must return an integer number with the "exit status code" of the command. You can also use these constants to make code more readable:

Command::SUCCESS if there was no problem running the command.
Command::FAILURE if some error happened during the execution.
Command::INVALID indicates incorrect command usage: invalid options or missing arguments.

protected function execute(InputInterface $input, OutputInterface $output): int
{
    // ... put here the code to create articles

    return Command::SUCCESS;
}

Styling the command

Title

It displays the given string as the command title. This method is meant to be used only once in a given command, but nothing prevents you from using it repeatedly:

$io->title('Article Data Generator');

The console output should be:

Article Data Generator
======================

Table

It displays the given array of headers and rows as a compact table:

$io->table(
    ['Entity', 'Items', 'Time'],
    $demoContext->getTimings()
);

The console output should be:

---------------------- ------- --------------------
  Entity                 Items   Time
---------------------- ------- --------------------
  media                  1000    3.7
  article                1000    6.1
---------------------- ------- --------------------

Progress bar

When executing longer-running commands, it may be helpful to show progress information, which updates as your command runs:

Generating 1000 items for article
---------------------------------

1000/1000 [============================] 100%

! [NOTE] Took 6.1 seconds

Start progress bar: It displays a progress bar with several steps equal to the argument passed to the method (don't progress bar's length of the progress bar is unknown).

// displays a progress bar of unknown length
$context->getConsole()->progressStart();

// displays a 100-step length progress bar
$context->getConsole()->progressStart(100);

Advance progress bar: It makes the progress bar advance the given number of steps.

// advances the progress bar 1 step
$context->getConsole()->progressAdvance();

// advances the progress bar 10 steps
$context->getConsole()->progressAdvance(10);

Finish progress bar: It finishes the progress bar (filling up all the remaining steps when its length is known).

$context->getConsole()->progressFinish();

Creating the data generator

To register a new generator, add it to your plugin's services.xml and specify the shopware.demodata_generator tag:

<service id="Sas\BlogModule\Generator\ArticleGenerator">
    <argument type="service" id="Shopware\Core\Framework\DataAbstractionLayer\Write\EntityWriter" />
    <argument type="service" id="Doctrine\DBAL\Connection" />
    <argument type="service" id="Sas\BlogModule\Content\Article\ArticleDefinition"/>
    <tag name="shopware.demodata_generator"/>
</service>

Now, we need our generator to know its definition class. This is done by overriding the method getDefinition()

public function getDefinition(): string
{
    return ArticleDefinition::class;
}

Put in the generate() method the code to generate demo data:

public function generate(int $numberOfItems, DemodataContext $context, array $options = []): void
{
    $writeContext = WriteContext::createFromContext($context->getContext());

    $payload = [
        // an array of articles
    ];

    $this->writer->upsert($this->articleDefinition, $payload, $writeContext);
}

Running the command

bin/console article:demodata 1000

Complete classes and XML file

DemodataCommand.php

use Sas\BlogModule\Content\Article\ArticleDefinition;
use Shopware\Core\Framework\Adapter\Console\ShopwareStyle;
use Shopware\Core\Framework\Context;
use Shopware\Core\Framework\Demodata\DemodataRequest;
use Shopware\Core\Framework\Demodata\DemodataService;
use Symfony\Component\Console\Command\Command;
use Symfony\Component\Console\Input\InputArgument;
use Symfony\Component\Console\Input\InputInterface;
use Symfony\Component\Console\Output\OutputInterface;

class DemodataCommand extends Command
{
    protected static $defaultName = 'article:demodata';

    private DemodataService $demodataService;

    public function __construct(DemodataService $demodataService)
    {
        parent::__construct();

        $this->demodataService = $demodataService;
    }

    protected function configure(): void
    {
        $this->addArgument('count', InputArgument::REQUIRED, 'The number of the articles.');
    }

    protected function execute(InputInterface $input, OutputInterface $output): int
    {
        $io = new ShopwareStyle($input, $output);
        $io->title('Article Data Generator');

        $context = Context::createDefaultContext();

        $request = new DemodataRequest();

        $request->add(ArticleDefinition::class, (int)$input->getArgument('count'));

        $demoContext = $this->demodataService->generate($request, $context, $io);

        $io->table(
            ['Entity', 'Items', 'Time'],
            $demoContext->getTimings()
        );

        return self::SUCCESS;
    }
}

ArticleGenerator.php

use Doctrine\DBAL\Connection;
use Sas\BlogModule\Content\Article\ArticleDefinition;
use Shopware\Core\Framework\DataAbstractionLayer\Write\EntityWriterInterface;
use Shopware\Core\Framework\DataAbstractionLayer\Write\WriteContext;
use Shopware\Core\Framework\Demodata\DemodataContext;
use Shopware\Core\Framework\Demodata\DemodataGeneratorInterface;
use Shopware\Core\Framework\Uuid\Uuid;

class ArticleGenerator implements DemodataGeneratorInterface
{
    private EntityWriterInterface $writer;

    private Connection $connection;

    private ArticleDefinition $articleDefinition;

    public function __construct(
        EntityWriterInterface $writer,
        Connection            $connection,
        ArticleDefinition     $articleDefinition
    ) {
        $this->writer = $writer;
        $this->connection = $connection;
        $this->articleDefinition = $articleDefinition;
    }

    public function getDefinition(): string
    {
        return ArticleDefinition::class;
    }

    public function generate(int $numberOfItems, DemodataContext $context, array $options = []): void
    {
        $authorId = $this->connection->fetchOne('SELECT LOWER(HEX(id)) FROM author');

        $writeContext = WriteContext::createFromContext($context->getContext());

        $context->getConsole()->progressStart($numberOfItems);

        $payload = [];
        for ($i = 0; $i < $numberOfItems; ++$i) {
                        $translations = [
                'en-GB' => [
                    'title' => $title,
                    'teaser' => $context->getFaker()->text(200),
                    'content' => $context->getFaker()->text(50),
                ],
            ];

            $article = [
                'id' => Uuid::randomHex(),
                'active' => true,
                'authorId' => $authorId,
                'translations' => $translations
            ];

            $payload[] = $article;

            if (\count($payload) >= 100) {
                $this->writer->upsert($this->articleDefinition, $payload, $writeContext);
                $context->getConsole()->progressAdvance(\count($payload));
                $payload = [];
            }
        }

        if (!empty($payload)) {
            $this->writer->upsert($this->articleDefinition, $payload, $writeContext);
            $context->getConsole()->progressAdvance(\count($payload));
        }

        $context->getConsole()->progressFinish();
    }
}

services.xml

<?xml version="1.0" ?>

<container xmlns="http://symfony.com/schema/dic/services"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">

    <services>

        <service id="Sas\BlogModule\Command\DemodataCommand">
            <argument type="service" id="Shopware\Core\Framework\Demodata\DemodataService"/>
            <tag name="console.command"/>
        </service>

        <service id="Sas\BlogModule\Generator\ArticleGenerator">
            <argument type="service" id="Shopware\Core\Framework\DataAbstractionLayer\Write\EntityWriter" />
            <argument type="service" id="Doctrine\DBAL\Connection" />
            <argument type="service" id="Sas\BlogModule\Content\Article\ArticleDefinition"/>
            <tag name="shopware.demodata_generator"/>
        </service>

    </services>
</container>

I am really happy to receive your feedback on this article. Thanks for your precious time reading this.

Source: https://viennt.me/shopware-custom-cli-command-to-generate-demo-data-on-your-entity

Shopware data associations by examples

Vien Nguyen — Mon, 02 May 2022 09:40:31 +0000

Database tables are often related to one another. For example, a blog post may have many comments or an order could be related to the user who placed it.

This blog post describes small examples of how to add associations to your entities.

One to One

A one-to-one association is a very basic type of database association. For example, a User table might be associated with one Media table. To define this association, we will place an OneToOneAssociationField on the UserDefinition and MediaDefinition.

Let's have a look at the defineFields methods of both entity definitions:

// class UserDefinition extends EntityDefinition
protected function defineFields(): FieldCollection
{
    return new FieldCollection([
        (new IdField('id', 'id'))->addFlags(new PrimaryKey(), new Required()),
        (new FkField('avatar_id', 'avatarId', MediaDefinition::class)),
        (new OneToOneAssociationField('avatarMedia', 'avatar_id', 'id', MediaDefinition::class)),
    ]);
}

// class MediaDefinition extends EntityDefinition
protected function defineFields(): FieldCollection
{
    return new FieldCollection([
        (new IdField('id', 'id'))->addFlags(new PrimaryKey(), new Required()),
        (new OneToOneAssociationField('avatarUser', 'id', 'avatar_id', UserDefinition::class, false))->addFlags(new CascadeDelete()),
    ]);
}

One to Many

A one-to-many association is used to define associations where a single table is a parent to one or more child tables. For example, a Product may have an infinite number of Price.

Now, we will look at the example:

// class ProductDefinition extends EntityDefinition
protected function defineFields(): FieldCollection
{
    return new FieldCollection([
        (new IdField('id', 'id'))->addFlags(new PrimaryKey(), new Required()),
        (new OneToManyAssociationField('prices', ProductPriceDefinition::class, 'product_id'))->addFlags(new CascadeDelete(), new Inherited()),
    ]);
}

// class PriceDefinition extends EntityDefinition
protected function defineFields(): FieldCollection
{
    return new FieldCollection([
        (new IdField('id', 'id'))->addFlags(new PrimaryKey(), new Required()),
        (new FkField('product_id', 'productId', ProductDefinition::class))->addFlags(new Required()),
        (new ManyToOneAssociationField('product', 'product_id', ProductDefinition::class, 'id', false))->addFlags(new ReverseInherited('prices')),
    ]);
}

Many to Many

Shopware also provides methods to make working with many-to-many associations more convenient. For example, let's imagine a Product can have many Category and a Category can have many Product.

This association require the third entity to be available. It will be called ProductCategoryDefinition and is responsible for connecting both definitions. It also needs its own database table product_category.

// class ProductDefinition extends EntityDefinition
protected function defineFields(): FieldCollection
{
    return new FieldCollection([
        (new IdField('id', 'id'))->addFlags(new PrimaryKey(), new Required()),
        (new VersionField())->addFlags(new ApiAware()),
        (new ManyToManyAssociationField('categories', CategoryDefinition::class, ProductCategoryDefinition::class, 'product_id', 'category_id'))->addFlags(new ApiAware(), new CascadeDelete(), new Inherited(), new SearchRanking(SearchRanking::ASSOCIATION_SEARCH_RANKING)),
    ]);
}

// class CategoryDefinition extends EntityDefinition
protected function defineFields(): FieldCollection
{
    return new FieldCollection([
        (new IdField('id', 'id'))->addFlags(new PrimaryKey(), new Required()),
        (new VersionField())->addFlags(new ApiAware()),
        (new ManyToManyAssociationField('products', ProductDefinition::class, ProductCategoryDefinition::class, 'category_id', 'product_id'))->addFlags(new CascadeDelete(), new ReverseInherited('categories')),
    ]);
}

// class ProductCategoryDefinition extends MappingEntityDefinition
protected function defineFields(): FieldCollection
{
    return new FieldCollection([
        (new FkField('product_id', 'productId', ProductDefinition::class))->addFlags(new PrimaryKey(), new Required()),
        (new ReferenceVersionField(ProductDefinition::class))->addFlags(new PrimaryKey(), new Required()),

        (new FkField('category_id', 'categoryId', CategoryDefinition::class))->addFlags(new PrimaryKey(), new Required()),
        (new ReferenceVersionField(CategoryDefinition::class))->addFlags(new PrimaryKey(), new Required()),

        (new ManyToOneAssociationField('product', 'product_id', ProductDefinition::class, 'id', false)),
        (new ManyToOneAssociationField('category', 'category_id', CategoryDefinition::class, 'id', false)),
    ]);
}

I am really happy to receive your feedback on this article. Thanks for your precious time reading this.

Source: https://viennt.me/shopware-data-associations-by-examples

Jest unit tests in Shopware Plugin's administration

Vien Nguyen — Wed, 27 Apr 2022 17:33:49 +0000

What is Shopware?
Folder structure
Installation
Setup
Writing Test
Running Test

What is Shopware?

Shopware 6 is an open commerce platform based on Symfony Framework and Vue and is supported by a worldwide community and more than 1.500 community extensions.

Folder structure

The test folder structure should match the source folder structure. You add a test for a file in the same path as the source path.

└── <pluginRoot>/src/Resources/app/administration
    ├── src
    │   └── module
    │       └── custom-cms
    │          └── component
    │              └── custom-cms-sidebar
    │                  ├── index.js
    │                  └── custom-cms-sidebar.html.twig
    ├── test
    │   ├── _mocks_
    │   │   └── entity-schema.json
    │   │ 
    │   └── module
    │       └── custom-cms
    │           └── component
    │               └── custom-cms-sidebar.spec.js
    │
    ├── babel.config.json
    ├── jest.config.js
    └── package.json

Installation

Let’s grab all the dependencies we will need for the setup in package.json

{
    // ...
    "devDependencies": {
        "@babel/plugin-proposal-class-properties": "^7.16.7",
        "@babel/plugin-transform-runtime": "7.13.15",
        "@babel/preset-env": "7.13.15",
        "@shopware-ag/jest-preset-sw6-admin": "^2.0.1",
        "@vue/test-utils": "1.1.0",
        "jest": "26.4.2"
    }
}

@shopware-ag/jest-preset-sw6-admin

Default Jest preset for Shopware 6 administration development.

@vue/test-utils

We are using the Vue Test Utils for easier testing of Vue components. It provides some methods to mount and interact with Vue components in an isolated manner.

Setup

After installing the required dependency packages, please create a file called babel.config.json right next to your own package.json with the following content:

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-class-properties"
    ]
}

Next up, create a file jest.config.js which should contain the following content:

const { resolve, join } = require('path');

const ADMIN_PATH = resolve('../../../../vendor/shopware/administration/Resources/app/administration');
process.env.ADMIN_PATH = process.env.ADMIN_PATH || ADMIN_PATH;

module.exports = {
    preset: '@shopware-ag/jest-preset-sw6-admin',

    globals: {
        adminPath: process.env.ADMIN_PATH,
    },

    collectCoverageFrom: [
        'src/**/*.js',
    ],

    moduleNameMapper: {
        '^plugin-admin(.*)$': '<rootDir>$1',
        '\@vue/test-utils': '<rootDir>/node_modules/@vue/test-utils',
        '../../_mocks_/entity-schema.json': '<rootDir>/test/_mocks_/entity-schema.json',
    },

    setupFilesAfterEnv: [
        resolve(join(process.env.ADMIN_PATH, 'test/_setup/prepare_environment.js')),
    ],
};

The file entity-schema.json could be generated by running this command:

bin/console framework:schema -s 'entity-schema' custom/plugins/<your_plugin>/src/Resources/app/administration/test/_mocks_/entity-schema.json

Writing Test

We are using a global object as an interface for the whole administration. Every component gets registered to this object, e.g. Shopware.Component.register(). Therefore, we have access to Component with the Shopware.Component.build() method. This creates a native Vue component with a working template. Every override and extension from another component are resolved in the built component.

Your component might look like this:

// src/module/custom-cms/component/custom-cms-sidebar/index.js
Component.extend('custom-cms-sidebar', 'sw-cms-sidebar', {
    // The vue component
});

Create test file custom-cms-sidebar.spec.js for custom-cms-sidebar component.

When you want to mount your component it needs to be imported first:

import 'plugin-admin/src/module/custom-cms/component/custom-cms-sidebar';

Then import it's related components:

import 'src/module/sw-cms/mixin/sw-cms-state.mixin';
import 'src/module/sw-cms/component/sw-cms-sidebar';
import 'src/app/component/base/sw-button';

In the next step we can mount our Vue component which we get from the global Shopware object:

shallowMount(Shopware.Component.build('custom-cms-sidebar'));

Now you can test the component like any other component. Let's try to write our first test:

import { shallowMount } from '@vue/test-utils';
import 'src/module/sw-cms/mixin/sw-cms-state.mixin';
import 'src/module/sw-cms/component/sw-cms-sidebar';
import 'src/app/component/base/sw-button';

import 'plugin-admin/src/module/custom-cms/component/custom-cms-sidebar';

function createWrapper() {
    return shallowMount(Shopware.Component.build('custom-cms-sidebar'), {
        propsData: {
            page: {
                sections: []
            }
        },
        stubs: {
            'sw-button': Shopware.Component.build('sw-button'),
            'sw-sidebar': true,
            'sw-sidebar-item': true,
            'sw-sidebar-collapse': true,
            'sw-text-field': true,
            'sw-select-field': true,
            'sw-cms-block-config': true,
            'sw-cms-block-layout-config': true,
            'sw-cms-section-config': true,
            'sw-context-button': true,
            'sw-context-menu-item': true,
            'sw-cms-sidebar-nav-element': true,
            'sw-entity-single-select': true,
            'sw-modal': true,
            'sw-checkbox-field': true
        },
        provide: {
            repositoryFactory: {
                create: () => ({
                    create: () => ({
                        id: null,
                        slots: []
                    }),
                    save: () => {}
                })
            },
            cmsService: {
                getCmsBlockRegistry: () => ({
                    'foo-bar': {}
                })
            }
        }
    });
}

describe('module/custom-cms/component/custom-cms-sidebar', () => {
    beforeAll(() => {
        Shopware.State.registerModule('cmsPageState', {
            namespaced: true,
            state: {
                isSystemDefaultLanguage: true
            }
        });
    });

    it('should be a Vue.js component', async () => {
        const wrapper = createWrapper();

        expect(wrapper.vm).toBeTruthy();
    });
});

Running Test

Create a script in package.json

"scripts": {
    "jest": "jest --config=jest.config.js",
}

Open a terminal and run this command:

npm run jest

I hope this post helps you with the config testing environment for your plugin. I am really happy to receive your feedback on this article. Thanks for your precious time reading this.

Source: https://viennt.me/jest-unit-tests-in-shopware-plugins-administration

DEV Community: Vien Nguyen

Shopware custom CLI command to generate demo data on your entity

Shopware creating CLI command to generate demo data on your entity

Folder structure

Registering the command

Configuring the command

Styling the command

Creating the data generator

Running the command

Complete classes and XML file

Shopware data associations by examples

One to One

One to Many

Many to Many

Jest unit tests in Shopware Plugin's administration

Table of Contents

What is Shopware?

Folder structure

Installation

Setup

Writing Test

Running Test