**Course Title:** QML Application Development **Section Title:** Testing and Debugging QML Applications **Topic:** Testing and debugging your QML application. **Objective:** In this lab, you will learn how to test and debug your QML application using Qt Test and Qt Creator. By the end of this lab, you will be able to write unit tests for your QML application, debug your application using Qt Creator, and use performance profiling tools to optimize your application. **Materials Needed:** * Qt Creator (version 4.14 or later) * Qt SDK (version 5.15 or later) * Example QML project (provided below) **Lab Exercise: Unit Testing with Qt Test** In this exercise, you will create a simple QML project and write unit tests using Qt Test. The goal is to test the functionality of a QML component that calculates the area of a rectangle. **Step 1: Create a new QML project** Create a new QML project in Qt Creator: * File > New File or Project... * Applications > Qt Widgets Application * Name: `qmlunittest` * Location: choose a directory * Version: Qt 5.15 (or later) * Click Finish **Step 2: Create a new QML component** Create a new QML file in the project: * File > New File or Project... * Qt > QML File (Qt Quick 2) * Name: `Rectangle.qml` * Location: `qmlunittest` project directory * Click Finish **Step 3: Implement the QML component** In `Rectangle.qml`, add the following code: ```qml import QtQuick 2.15 Item { id: rectangle property real width: 10 property real height: 20 property real area: width * height function calculateArea() { return area; } } ``` **Step 4: Write unit tests with Qt Test** Create a new test file in the project: * File > New File or Project... * Qt > Test File (Qt Test) * Name: `qmlunittest_test` * Location: `qmlunittest` project directory * Click Finish **Step 5: Implement the test case** In `qmlunittest_test.cpp`, add the following code: ```cpp #include <QObject> #include <QTest> #include <QQmlEngine> #include <QQmlComponent> class QmlunittestTest : public QObject { Q_OBJECT private: QQmlEngine engine; public: QmlunittestTest(QObject *parent = nullptr) : QObject(parent) { // Create a QML component QQmlComponent component(&engine, "qrc:/Rectangle.qml"); QVERIFY(component.isReady()); // Create an instance of the component QObject *rectangle = component.create(); QVERIFY(rectangle); // Test the calculateArea() function QVariant area = rectangle->property("area"); QCOMPARE(area.toReal(), 200.0); // Clean up delete rectangle; } }; QTEST_MAIN(QmlunittestTest) #include "qmlunittest_test.moc" ``` **Step 6: Run the test** Run the test by selecting the `qmlunittest` project in Qt Creator and clicking the "Run" button. The test should pass. **Lab Exercise: Debugging with Qt Creator** In this exercise, you will use Qt Creator to debug a QML application. **Step 1: Create a new QML project** Create a new QML project in Qt Creator: * File > New File or Project... * Applications > Qt Quick Application * Name: `qmldebug` * Location: choose a directory * Version: Qt 5.15 (or later) * Click Finish **Step 2: Add a QML component** In the `main.qml` file, add the following code: ```qml import QtQuick 2.15 Rectangle { id: rectangle width: 200 height: 200 function crashMe() { var a = undefined; a = a / 0; } MouseArea { anchors.fill: parent onClicked: rectangle.crashMe() } } ``` **Step 3: Set breakpoints** Set a breakpoint on the line `a = a / 0;` by clicking on the line and pressing F9. **Step 4: Run the application in debug mode** Run the application in debug mode by selecting the `qmldebug` project in Qt Creator and clicking the "Debug" button. **Step 5: Trigger the crash** Trigger the crash by clicking on the rectangle. **Step 6: Examine the call stack** Examine the call stack in the "Debugger" window. **Lab Exercise: Performance Profiling with Qt Creator** In this exercise, you will use Qt Creator to profile the performance of a QML application. **Step 1: Create a new QML project** Create a new QML project in Qt Creator: * File > New File or Project... * Applications > Qt Quick Application * Name: `qmlperf` * Location: choose a directory * Version: Qt 5.15 (or later) * Click Finish **Step 2: Add a QML component** In the `main.qml` file, add the following code: ```qml import QtQuick 2.15 Rectangle { id: rectangle width: 200 height: 200 function slowFunction() { for (var i = 0; i < 100000; i++) { var j = i * i; } } MouseArea { anchors.fill: parent onClicked: rectangle.slowFunction() } } ``` **Step 3: Run the application in profile mode** Run the application in profile mode by selecting the `qmlperf` project in Qt Creator and clicking the "Profile" button. **Step 4: Examine the profiling results** Examine the profiling results in the "Performance" window. **Conclusion:** In this lab, you learned how to test and debug your QML application using Qt Test and Qt Creator. You also learned how to use performance profiling tools to optimize your application. By following these best practices, you can ensure that your QML applications are stable, efficient, and robust. **What's Next:** In the next topic, we will discuss the requirements for the final project. **Comment:** What did you think of this lab? Did you encounter any issues or difficulties?