In Odoo, JavaScript test cases are added in the /static/tests/ directory. In step 1, we have added a colorpicker_tests.js file for the test case. In that file, we have imported the form view and test utils reference. The web.FormView is imported because, we have created an int_color widget for the form view, so to test the widget, we will need the form view. The web.test_utils will provide us with the test utilities we require to build the JavaScript test cases. If you don't know how JavaScript import works, refer to the Extending CSS and JavaScript for the website recipe in Chapter 15, CMS Website Development.

Odoo client-side test cases are built with the QUnit framework, which is the JQuery framework for the JavaScript unit test case. Refer to https://qunitjs.com/ to learn more about this. The beforeEach function is called before running the test cases, and this helps to initialize the test data. The reference of the beforeEach function is provided from the QUnit framework itself.

We have initialized some data in the beforeEach function. Let's see how that data is being used in the test case. The client-side test case runs in an isolated (mock) environment, and it doesn't make a connection to the database, so for these test cases, we need to create test data. Internally, Odoo creates the mock server to mimic the Remote Procedure Call (RPC) calls and uses the this.data property as the database. Consequently, in beforeEach, we have initialized our test data in the this.data property. The keys in the this.data property are considered a table, and the values contain the information about the fields and the table rows. The fields key is used for defining table fields and the records key is used for the table rows. In our example, we have added a book table with two fields: name(char) and color(integer). Note that here, you can use any Odoo fields, even relational fields; for example, {string: "M2o FIeld", type: "many2one", relation: 'partner'}. We have also added two book records with the records key.

Next, we have added the test cases with the QUnit.test function. The first argument in the function is a string to describe the test case. The second argument is the function in which you need to add code for the test cases. This function is called from the QUnit framework, and it passes the assert utilities as the argument. In our example, we have passed the number of the expected test cases in the assert.expect function. We are adding two test cases, so we have passed 2.

We want to add to the test case int_color widget in the editable form view, so we have created the editable form view with testUtils.createView. The createView function accepts different arguments, as follows:

• View is the reference of the view you want to create. You can create any type of view for the test case; you just need to pass the view reference here.
• model is the name of the model for which the given view is created. All of the models are listed in the this.data property. We want to create a view for the book model, so in our example, we have used book as a model.
• data is the record that we are going to use in the view.
• arch is the definition of the view you want to create. Because we want to test the int_color widget, we have passed the view definition with the widget. Note that you can only use the fields that are defined in the model.
• res_id is the record ID whose record is being displayed. This option is only used for form views. In our case, the form view will be displayed with the data of the book 1 record, as we padded 1 as res_id.
• The viewOptions are the parameters passed in the view. Here, you can pass all the valid view parameters, like the domain, context, mode, and so on.

After creating the form view with the int_color widget, we added two test cases. The first one is used to check the number of color pills on the UI, and the second test case is used to check that the pill is activated correctly after the click. We have the strictEqual function from the asserted utility of the QUnit framework. The strictEqual function passes the test case if the first two arguments are matched. If it is not matched, it will fail the test case.