Skip to content

Commit 9947e22

Browse files
committed
updated visual test documentation
1 parent e5e0a7d commit 9947e22

File tree

1 file changed

+28
-0
lines changed

1 file changed

+28
-0
lines changed

contributor_docs/unit_testing.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,3 +139,31 @@ If you need to add a new test file, add it to that folder, then add the filename
139139
When you add a new test, running `npm test` will generate new screenshots for any visual tests that do not yet have them. Those screenshots will then be used as a reference the next time tests run to make sure the sketch looks the same. If a test intentionally needs to look different, you can delete the folder matching the test name in the `test/unit/visual/screenshots` folder, and then re-run `npm test` to generate a new one.
140140
141141
To manually inspect all visual tests, run `grunt yui:dev` to launch a local server, then go to http://127.0.0.1:9001/test/visual.html to see a list of all test cases.
142+
143+
144+
The visual test environment is set up to execute your commands sequentially rather than running a preload or draw function that you provide.
145+
In continuous integration (CI) environments, it's crucial to keep tests running as quickly as possible. Running a full `preload/draw` cycle as in a regular p5.js sketch can significantly slow down the testing process.
146+
When testing features like 3D model rendering, you might encounter scenarios where you need to load a model before performing assertions. Here's an example of how you can handle Sequential Command Execution and Asynchronous Operations in your visual tests:
147+
148+
149+
```js
150+
visualSuite('3D Model rendering', function() {
151+
visualTest('OBJ model is displayed correctly', function(p5, screenshot) {
152+
// Return a Promise to ensure the test runner waits for the asynchronous operation to complete
153+
return new Promise(resolve => {
154+
p5.createCanvas(50, 50, p5.WEBGL);
155+
// Load the model asynchronously
156+
p5.loadModel('unit/assets/teapot.obj', model => {
157+
p5.background(200);
158+
p5.rotateX(10 * 0.01);
159+
p5.rotateY(10 * 0.01);
160+
p5.model(model);
161+
// Take a screenshot for visual comparison
162+
screenshot();
163+
// Resolve the Promise to indicate completion
164+
resolve();
165+
});
166+
});
167+
});
168+
});
169+
```

0 commit comments

Comments
 (0)