Tests
The extension allows you to write visual snapshot tests. Through these tests you can capture the expected visual representation of your products through images and later on compare the current look of your products to the saved images.
Create a test
Tests are created through test.json files in directories underneath a Tests folder within a directory for a scope.
Scope directory- Factory
- Geometries
- Tests
testName- test.json
- actual/*.png
- diff/*.png
- expected/*.png
The test.json file describes the test itself. The expected directory is used to store verified control images. These images should be commited to git. The directories actual and diff contain the output of the latest test and the differences to the expected images, if there are any.
A test.json always needs to define the following structure:
{
"products": [
{
"product": "<NativeId of a product>",
"configuration": {
"<PropertyId>": "<ValueId>"
}
}
]
}
You can export the definition for a single product from the Configurator page in the ig.Creator through the Export configuration option in the context menu of the property list.
A product may optionally define a placement with an absolute position or an attach point connection:
{
"products": [
{
"product": "<NativeId of a product>",
"configuration": {
"<PropertyId>": "<ValueId>"
},
"placement": {
"type": "transformation",
"position": { "x": -1.25 },
"rotation": {
"y": 90
}
}
}
]
}
{
"products": [
{
"product": "couch_left",
"configuration": {},
"id": "left"
},
{
"product": "couch_right",
"configuration": {},
"placement": {
"type": "attachPoint",
"atPoint": "right",
"ownPoint": "left",
"atProduct": "left"
}
}
]
}
Customize setups for images
By default a single front image will be rendered. You can change the images to be rendered by defining a "setups" list in the test.json file. The following test.json requests 2 images to be rendered, one from the front and one from the left side.
{
"products": [
{
"product": "<NativeId of a product>",
"configuration": {
"<PropertyId>": "<ValueId>"
}
}
],
"setups": [
{
"cameraType": "perspective",
"cameraPosition": "front"
},
{
"cameraType": "perspective",
"cameraPosition": "left"
}
]
}
Animation percentage
Aside from the cameraType and cameraPosition you can also specify an animationPercentage here. The following snippet defines a front image with animation progress 10% and also a left image with animation progress 100%.
{
"products": [
{
"product": "<NativeId of a product>",
"configuration": {
"<PropertyId>": "<ValueId>"
}
}
],
"setups": [
{
"cameraType": "perspective",
"cameraPosition": "front",
"animationPercentage": 0.1
},
{
"cameraType": "perspective",
"cameraPosition": "left",
"animationPercentage": 1
}
]
}
Default setup
You can define common settings/defaults in a defaultSetup object. The default settings will be used to fill all unspecified settings in a setups list and they will also modify the setup used when no setups list defined.
{
"products": [
{
"product": "<NativeId of a product>",
"configuration": {
"<PropertyId>": "<ValueId>"
}
}
],
"defaultSetup": {
"cameraType": "perspective",
"cameraPosition": "front",
"animationPercentage": 0.1
}
}
Sharing settings between tests
Test files can inherit settings from other test files. To inherit settings from another file, you may specify an extends property containing the relative path to the file from which settings should be inherited.
In this example, the second test will inherit the defaultSetup from the first setup.
{
"products": [
{
"product": "<NativeId of a product>",
"configuration": {
"<PropertyId>": "<ValueId>"
}
}
],
"defaultSetup": {
"cameraType": "perspective",
"cameraPosition": "front",
"animationPercentage": 0.1
}
}
{
"extends": "../a-test-with-all-settings/test.json",
"products": [
{
"product": "<NativeId of a product>",
"configuration": {
"<PropertyId>": "<ValueId>"
}
}
]
}
You may also define shared settings in a json file within a Support directory in Tests.
These files will not be detected as tests, but may be used to define default settings for tests.
{
"defaultSetup": {
"cameraType": "perspective",
"cameraPosition": "front",
"animationPercentage": 0.1
}
}
{
"extends": "../Support/front-animated.json",
"products": [
{
"product": "<NativeId of a product>",
"configuration": {
"<PropertyId>": "<ValueId>"
}
}
]
}
Execute tests
You can execute a single test using the play button in the top left side of the editor when a test.json file is opened. Alternatively you may execute multiple tests through the Testing view in vscode's sidebar.
The extension supports multiple execution profiles for tests. You can choose the execution profile to use by right clicking on the test icon and then clicking on Execute using Profile....
Run and update images
This profile executes the test and saves the images generated by it within the expected directory, making them the new control images.
Run with ig.Bridge.Server data
This profile exclusively uses data from the ig.Bridge.Server to resolve the graphics data for the data. This allows you to to verify, that the local data is visually equivalent to the data that is currently available in the ig.Bridge.Server/ig.Creator.
Run with ig.Bridge.Server snapshot data
Similar to the profile Run with ig.Bridge.Server data, but only uses data that is available in snapshots. This mode can be used to verify released data.