A Simple Test

This simple example will go over how to use the QML TestCase component, as well as some of the built in comparison operations.

We will be building out a very simple Background component and then writing a test to ensure that its color is what we expect it to be.

First define a Background.qml using a Rectangle with its color set to black.

import QtQuick 2.0
Rectangle{
    id:background
    color:"black"
}

Next we can create our first TestCase. TestCase components should always reside in a tst_ prefixed QML file so it can be located by the TestRunner. Define a tst_background.qml, and add the following code:

import QtQuick 2.0
import QtTest 1.2
TestCase{
    id:backgroundTests
    name:"TestBackground"
}

In order to test a component is needs to be instantiated, either statically or dynamically. For now we are going to add a Background Component to our TestCase:

import QtQuick 2.0
    import QtTest 1.2
    TestCase{
        id:backgroundTests
        name:"TestBackground"
        Background{
            id:bg
        }
    }

Next we can define our first test function that we will use to compare our Background component's color to see if it is what is expected.

QML TestCase includes a few different comparion operations such as compare,tryCompare, and fuzzyCompare. Each has its place, but for now compare will work perfectly.

In this test we need to use compare(actual,expected) to determine if the background color is what it should be.

It is good to know that we cannot compare string colors to string colors using compare. If you did compare(bg.color,"red") it would always fail due to it trying to compare the bg.color as a hex color#0000FF to the string red. To solve this we can create a color property that holds our expected color of red, which will convert it to a hex color.

All of our test functions must have a test_ prefix. So we can now define function test_color() and have it compare our expected color property to the Background components color.

import QtQuick 2.0
    import QtTest 1.2
    TestCase{
        id:backgroundTests
        name:"TestBackground"
        when:windowShown
        Background{
            id:bg
        }
        property color expectedBG:"red"
        function test_color(){
            compare(bg.color,expectedBG);
        }
    }

Now this test is ready to run, and should return a FAIL! since our Background components color is black, and we expect it to be red

The Final step would be to modify the Background component to be using the correct color value as its background. Then run our tests again.

Other tests that we could write for this component would be to ensure its height or width are as expected, or that it is in the correct position.

Additional Notes: windowShown

An important property of the TestCase component is the when property that allows you to control when the test will start. A common usage is to bind the when property to the TestCases windowShown property to ensure the component you are testing is acting like it is part of a visible window. While this is not going to make a difference in this simple example it will come in handy once you are emulating mouse or touch events.

import QtQuick 2.0
    import QtTest 1.2
    TestCase{
        id:backgroundTests
        when:windowShown
        name:"TestBackground"
        Background{
            id:bg
        }
    }