Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to write unit tests for three.js?

Essentially, what I'm asking is, is there a way to write unit tests for my JavaScript files for three.js library?

I have a 3D viewer that houses a camera, renderer, loader, etc... How do I write tests for something like that? Is there something out there that I can read for that? Is it even possible?

like image 778
Euridice01 Avatar asked Mar 04 '13 05:03

Euridice01


People also ask

Can we write unit test for JavaScript?

JavaScript Unit Testing is a method where JavaScript test code is written for a web page or web application module. It is then combined with HTML as an inline event handler and executed in the browser to test if all functionalities are working as desired. These unit tests are then organized in the test suite.

How do you write a unit test?

A typical unit test contains 3 phases: First, it initializes a small piece of an application it wants to test (also known as the system under test, or SUT), then it applies some stimulus to the system under test (usually by calling a method on it), and finally, it observes the resulting behavior.

What are the three steps in a unit test?

The idea is to develop a unit test by following these 3 simple steps: Arrange – setup the testing objects and prepare the prerequisites for your test. Act – perform the actual work of the test. Assert – verify the result.

Is Three js good for 2D?

A better way to achieve z-order would be to hack the engine and set the drawing order for each element in order to force one element to be drawn before another. Also another problem with using three. js is that (at the time of writing) it doesn't handle 2D sprites very well.


1 Answers

I found a way to unit test webgl/threejs in headless way. This does not need any image comparison etc.

https://github.com/AmitTeli/webgl-three-test

Approach taken:

  1. Move all the global variables like scene, renderer and camera to index.html
  2. Initialize them on loading of the page. e.g. in this reactjs example, they are initialized in componentDidMount() of the root component. Other functions can use this context. (You can check this by running yarn start)
  3. While doing the unit testing, initialize them in setupTest.js. We will need additional dev dependencies of headless webgl - gl and canvas
  4. With this setup now we can run the test in say App.test.js (You can check this by running yarn test)
like image 99
Amit Teli Avatar answered Sep 22 '22 07:09

Amit Teli