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

A test.json always needs to define the following structure:

basic/test.json

{
	"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:

product-with-transformation/test.json

{
	"products": [
		{
			"product": "<NativeId of a product>",
			"configuration": {
				"<PropertyId>": "<ValueId>"
			},
			"placement": {
				"type": "transformation",
				"position": { "x": -1.25 },
				"rotation": {
					"y": 90
				}
			}
		}
	]
}

product-with-transformation/test.json

{
	"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.

custom-setups/test.json

{
	"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%.

custom-setups-animation-percentage/test.json

{
	"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.

default-setup/test.json

{
	"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.

a-test-with-all-settings/test.json

{
	"products": [
		{
			"product": "<NativeId of a product>",
			"configuration": {
				"<PropertyId>": "<ValueId>"
			}
		}
	],
	"defaultSetup": {
		"cameraType": "perspective",
		"cameraPosition": "front",
		"animationPercentage": 0.1
	}
}

b-test-with-own-product-list/test.json

{
	"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.

Support/front-animated.json

{
	"defaultSetup": {
		"cameraType": "perspective",
		"cameraPosition": "front",
		"animationPercentage": 0.1
	}
}

a-test/test.json

{
	"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.

Update snapshots

You can update the saved images for a test by executing it with a custom profile.

Choose Run and update snapshots after clicking on Execute using Profile