.js
. The .spec
suffix is a well-known naming convention of frontend testing files.<environment>
is a placeholder for the environment you are working in. In your context, that should be administration
.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 components are resolved in the built component../psh.phar administration:install-dependencies
./psh.phar administration:unit
./psh.phar administration:unit-watch
sw-multi-select
.sw-multi-select
without saving the return value. This blackbox import only executes code. However, this is important because this registers the component to the Shopware object:mount()
: Creates a Wrapper that contains the mounted and rendered Vue component.shallowMount()
: Like mount, it creates a Wrapper that contains the mounted and rendered Vue component,wrapper
before each test. The build
method resolves the twig template and returns a vue component../psh.phar administration:unit-watch
. You should see a result like this: Test Suites: 1 passed, 1 total
. You should also see several warnings like this:[Vue warn]: Missing required prop: "options"
[Vue warn]: Missing required prop: "value"
[Vue warn]: Unknown custom element: <sw-select-base> - did you register the component correctly? ...
sw-multi-select
needs the sw-select-base
component. Now we have several solutions to solve this. The two most common ways are stubbing or using the component.sw-alert
: Actually, he task of an alert is displaying a message for the user in most cases. So in this example, let's write a test for this text located in a slot. You can find this example in the linked video above as well..sw-alert__message
and check if the text is there:$tc
, directives or injections. This way, the setup of your test may get more complex. When you are building components then you need to mock their dependencies as well.mount
or shallowMount
method if you need to have custom implementation.global.activeAclRoles
. By default, the test suite has no ACL rights. If you want, you can change the privileges for each test separately.global.activeFeatureFlags
. If you want to, you can change the usage of feature flags for each test.Shopware
context is prepared automatically. You can overwrite them in Shopware.Store
if necessary.$tc
, $device
, $store
or $router
.mount
method:[Vue warn]: Error in render: "TypeError: hasError is not a function"
[Vue warn]: Failed to resolve directive: clipboard
createLocalVue
returns a Vue class for you to add components, mixins and install plugins without polluting the global Vue class. In our context, it looks like this:[Vue warn]: Injection "mediaService" not found
renameMedia
and uploadMediaById
- Providing the data exactly as needed by the component for running your test case and what the injection actually is. It can be valid to set the injection name equal to an empty object just to mute it when it's not really needed for your test.renameMedia
method. So in order to stub the mediaService
in realistic manner, follow the example below:[Vue warn]: Error in foo: "TypeError: Cannot read property 'renameMedia' of undefined"
mediaService
is missing: