Shopware 플러그인 관리의 Jest 단위 테스트

목차

What is Shopware?

Folder structure

Installation

Setup

Writing Test

Running Test

샵웨어란?

Shopware 6은 Symfony Framework 및 Vue를 기반으로 하는 개방형 상거래 플랫폼이며 전 세계 커뮤니티 및 1,500개 이상의 커뮤니티 확장에서 지원됩니다.

폴더 구조

테스트 폴더 구조는 소스 폴더 구조와 일치해야 합니다. 소스 경로와 동일한 경로에 있는 파일에 대한 테스트를 추가합니다.

└── <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

설치

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/테스트 유틸리티

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.

설정

필요한 종속성 패키지를 설치한 후 다음 내용을 포함하여 자신의 package.json 바로 옆에 babel.config.json라는 파일을 생성하십시오.

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

다음으로, 다음 콘텐츠를 포함해야 하는 파일jest.config.js을 만듭니다.

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')),
    ],
};

다음 명령을 실행하여 파일entity-schema.json을 생성할 수 있습니다.

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

작문 시험

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.

구성 요소는 다음과 같습니다.

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

custom-cms-sidebar.spec.js 구성 요소에 대한 테스트 파일custom-cms-sidebar을 만듭니다.

구성 요소를 마운트하려면 먼저 가져와야 합니다.

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

그런 다음 관련 구성 요소를 가져옵니다.

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';

다음 단계에서는 전역 Shopware 개체에서 가져온 Vue 구성 요소를 마운트할 수 있습니다.

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

이제 다른 구성 요소와 마찬가지로 구성 요소를 테스트할 수 있습니다. 첫 번째 테스트를 작성해 보겠습니다.

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();
    });
});

테스트 실행

package.json에서 스크립트 만들기

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

터미널을 열고 다음 명령을 실행합니다.

npm run jest

이 게시물이 플러그인의 구성 테스트 환경에 도움이 되기를 바랍니다. 이 기사에 대한 피드백을 받게 되어 정말 기쁩니다. 소중한 시간을 내어 읽어주셔서 감사합니다.

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