Merge lp:~saviq/unity8/new-scopes-integrate-card into lp:~unity-team/unity8/new-scopes

[Michał Sawicz]

Introduce the Card and integrate with the new plugin.

[Michael Zanetti (mzanetti)]

40 + //sourceSize.width: width > height ? width : 0
41 + //sourceSize.height: height > width ? height : -1

Why commented? Why 0 and -1?

=====

Can we align avatar/mascot?

====
161 + width: parent.width - x - row.spacing

I don't think subtracting the spacing is needed as x will take into account the spacing at the left of the row and width would take into account the margins on the right (unless you really want to have 2*spacing on the right)

===
195 + width: parent.labelWidth;

some lost semicolons (on each price label)

===
292 +function tryParse(json, errorLabel) {

Actually I'm wondering if it wouldn't make more sense for the scope to ship a QVariantMap instead of a JSON string as I think QJsonDocument would parse it much faster than JavaScript

review: Needs Information

[Michał Sawicz (saviq)]

On 06.12.2013 13:52, Michael Zanetti wrote:
> Review: Needs Information
>
> 40 + //sourceSize.width: width > height ? width : 0
> 41 + //sourceSize.height: height > width ? height : -1
>
> Why commented? Why 0 and -1?

'Cause it crashes, added FIXME to not lose track. Fixed to both being 0.

> =====
>
> Can we align avatar/mascot?

Of course, that was just before we were calling it a mascot...

> ====
> 161 + width: parent.width - x - row.spacing
>
> I don't think subtracting the spacing is needed as x will take into account the spacing at the left of the row and width would take into account the margins on the right (unless you really want to have 2*spacing on the right)

Fixed, tested.

> ===
> 195 + width: parent.labelWidth;
>
> some lost semicolons (on each price label)

Fixed.

> ===
> 292 +function tryParse(json, errorLabel) {
>
> Actually I'm wondering if it wouldn't make more sense for the scope to ship a QVariantMap instead of a JSON string as I think QJsonDocument would parse it much faster than JavaScript

This is only there in the tests, the real implementation gives up
QVariantMaps directly.

--
Michał (Saviq) Sawicz <email address hidden>
Canonical Services Ltd.

[lp:~saviq/unity8/new-scopes-integrate-card]

564. By Michał Sawicz on 2013-12-06

Add FIXME for sourceSize.

565. By Michał Sawicz on 2013-12-06

s/avatar/mascot/

566. By Michał Sawicz on 2013-12-06

Fix header width.

567. By Michał Sawicz on 2013-12-06

Use hasOwnProperty instead of != undefined.

568. By Michał Sawicz on 2013-12-06

;--

[Michal Hruby (mhr3)]

38 + // FIXME should be no need for "icon"
39 + source: cardData && cardData["art"] || cardData["icon"] || ""

Just remove the "icon" fallback, I'll have a branch soon that will drop "icon" and use "art".

review: Needs Fixing

[lp:~saviq/unity8/new-scopes-integrate-card]

569. By Michał Sawicz on 2013-12-09

Get rid of FIXME for icon vs. art

[Michael Zanetti (mzanetti)]

709 + function test_labels_data() {
710 + return [
711 + { tag: "Empty", visible: false },
712 + { tag: "Title only", title: "Foo", visible: true },
713 + { tag: "Subtitle only", subtitle: "Bar", visible: false },
714 + { tag: "Both", title: "Foo", subtitle: "Bar", visible: true }
715 + ]
716 + }
717 +
718 + function test_labels(data) {
719 + cardHeader.title = data.title !== undefined ? data.title : "";
720 + cardHeader.subtitle = data.subtitle !== undefined ? data.subtitle : "";
721 + tryCompare(cardHeader, "visible", data.visible);
722 + if (data.hasOwnProperty("maxLineCount")) {
723 + compare(testCase.titleLabel.maximumLineCount, data.maxLineCount, "titleLabel maximumLineCount should be %1".arg(data.maxLineCount));
724 + }
725 + }

hmm... is this something you started but didn't finish? there doesn't seem to be any data with maxLineCount. Should we add some? If not, drop this check?

review: Needs Information

[Michael Zanetti (mzanetti)]

Got a test failure here.... fuzzyCompare() needed?

FAIL! : qmltestrunner::test_art_size(Wide) property height
   Actual (): 166.5
   Expected (): 167
   Loc: [/home/mzanetti/Development/reviews/new-scopes-integrate-card/tests/qmltests/Dash/tst_Card.qml(270)]

review: Needs Fixing

[lp:~saviq/unity8/new-scopes-integrate-card]

570. By Michał Sawicz on 2013-12-09

No dynamic maxLineCount.

571. By Michał Sawicz on 2013-12-09

Do not use quarters of GUs.

[Michał Sawicz (saviq)]

On 09.12.2013 17:21, Michael Zanetti wrote:
> hmm... is this something you started but didn't finish? there doesn't seem to be any data with maxLineCount. Should we add some? If not, drop this check?

Right, this stopped being dynamic since... Removed.

> Got a test failure here.... fuzzyCompare() needed?
>
>
> FAIL! : qmltestrunner::test_art_size(Wide) property height
> Actual (): 166.5
> Expected (): 167
> Loc: [/home/mzanetti/Development/reviews/new-scopes-integrate-card/tests/qmltests/Dash/tst_Card.qml(270)]

Nah, I just need to go for integer values there. Fixed.

--
Michał (Saviq) Sawicz <email address hidden>
Canonical Services Ltd.

[Michael Zanetti (mzanetti)]

Ok. other one is gone. but here's another:

FAIL! : qmltestrunner::test_art_size(Wide) property height
   Actual (): 342
   Expected (): 333
   Loc: [/home/mzanetti/Development/reviews/new-scopes-integrate-card/tests/qmltests/Dash/tst_Card.qml(270)]
Segmentation fault (core dumped)

review: Needs Fixing

[lp:~saviq/unity8/new-scopes-integrate-card]

572. By Michał Sawicz on 2013-12-10

38/2 != 18.5, 38/2 == 19 !!

[Michael Zanetti (mzanetti)]

oki doki

review: Approve

=== added file 'Dash/Card.qml'
--- Dash/Card.qml	1970-01-01 00:00:00 +0000
+++ Dash/Card.qml	2013-12-10 09:30:53 +0000
@@ -0,0 +1,66 @@
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+
+Item {
+    id: root
+    property var template
+    property var components
+    property var cardData
+
+    width: {
+       if (template !== undefined) {
+           switch (template['card-size']) {
+               case "small": return units.gu(12);
+               case "large": return units.gu(38);
+           }
+       }
+       return units.gu(18.5);
+    }
+    height: childrenRect.height
+
+    UbuntuShape {
+        id: artShape
+        objectName: "artShape"
+        width: image.fillMode === Image.PreserveAspectCrop || aspect < image.aspect ? image.width : height * image.aspect
+        height: image.fillMode === Image.PreserveAspectCrop || aspect > image.aspect ? image.height : width / image.aspect
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        property real aspect: components !== undefined ? components["art"]["aspect-ratio"] : 1
+
+        image: Image {
+            width: root.width
+            height: width / artShape.aspect
+            objectName: "artImage"
+            source: cardData && cardData["art"] || ""
+            // FIXME uncomment when having investigated / fixed the crash
+            //sourceSize.width: width > height ? width : 0
+            //sourceSize.height: height > width ? height : 0
+            fillMode: components["art"]["fill-mode"] == "fit" ? Image.PreserveAspectFit: Image.PreserveAspectCrop
+
+            property real aspect: implicitWidth / implicitHeight
+        }
+    }
+
+    CardHeader {
+        id: header
+        objectName: "cardHeader"
+        anchors {
+            top: artShape.bottom
+            left: parent.left
+            right: parent.right
+        }
+
+        mascot: cardData && cardData["mascot"] || ""
+        title: cardData && cardData["title"] || ""
+        subtitle: cardData && cardData["subtitle"] || ""
+    }
+
+    Label {
+        objectName: "summaryLabel"
+        anchors { top: header.bottom; left: parent.left; right: parent.right }
+        wrapMode: Text.Wrap
+        maximumLineCount: 5
+        elide: Text.ElideRight
+        text: cardData && cardData["summary"] || ""
+    }
+}

=== added file 'Dash/CardFilterGrid.qml'
--- Dash/CardFilterGrid.qml	1970-01-01 00:00:00 +0000
+++ Dash/CardFilterGrid.qml	2013-12-10 09:30:53 +0000
@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2013 Canonical, Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+
+DashFilterGrid {
+    id: genericFilterGrid
+
+    minimumHorizontalSpacing: units.gu(0.5)
+    // FIXME calculate the size correctly
+    delegateWidth: grid.currentItem.width
+    delegateHeight: grid.currentItem.height
+    verticalSpacing: units.gu(2)
+
+    delegate: Card {
+        id: tile
+        objectName: "delegate" + index
+        cardData: model
+        template: genericFilterGrid.template
+        components: {
+            "art": {
+                "aspect-ratio": 1.0,
+                "fill-mode": "crop"
+            }
+        }
+
+        //onClicked: genericFilterGrid.clicked(index, tile.y)
+        //onPressAndHold: genericFilterGrid.pressAndHold(index, tile.y)
+    }
+}

=== added file 'Dash/CardHeader.qml'
--- Dash/CardHeader.qml	1970-01-01 00:00:00 +0000
+++ Dash/CardHeader.qml	2013-12-10 09:30:53 +0000
@@ -0,0 +1,96 @@
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+
+Item {
+    id: root
+    property alias mascot: mascotImage.source
+    property alias title: titleLabel.text
+    property alias subtitle: subtitleLabel.text
+    property alias price: priceLabel.text
+    property alias oldPrice: oldPriceLabel.text
+    property alias altPrice: altPriceLabel.text
+
+    visible: mascotImage.status === Image.Ready || title || price
+    height: row.height > 0 ? row.height + row.spacing * 2 : 0
+
+    Row {
+        id: row
+        objectName: "outerRow"
+
+        anchors { top: parent.top; left: parent.left; right: parent.right; margins: spacing }
+        spacing: units.gu(1)
+
+        UbuntuShape {
+            id: mascotShape
+            objectName: "mascotShape"
+
+            width: units.gu(8)
+            height: units.gu(8)
+            visible: image.status === Image.Ready
+
+            image: Image {
+                id: mascotImage
+                sourceSize { width: mascotShape.width; height: mascotShape.height }
+            }
+        }
+
+        Column {
+            objectName: "column"
+            width: parent.width - x
+
+            Label {
+                id: titleLabel
+                anchors { left: parent.left; right: parent.right }
+                elide: Text.ElideRight
+                objectName: "titleLabel"
+                font.weight: Font.DemiBold
+                wrapMode: Text.Wrap
+                maximumLineCount: 2
+            }
+
+            Label {
+                id: subtitleLabel
+                anchors { left: parent.left; right: parent.right }
+                elide: Text.ElideRight
+                visible: titleLabel.text && text
+            }
+
+            Row {
+                id: prices
+                objectName: "prices"
+                anchors { left: parent.left; right: parent.right }
+
+                property int labels: {
+                    var labels = 1; // price always visible
+                    if (oldPriceLabel.text !== "") labels += 1;
+                    if (altPriceLabel.text !== "") labels += 1;
+                    return labels;
+                }
+                property real labelWidth: width / labels
+
+                Label {
+                    id: priceLabel
+                    width: parent.labelWidth
+                    elide: Text.ElideRight
+                    font.weight: Font.DemiBold
+                    color: Theme.palette.selected.foreground
+                }
+
+                Label {
+                    id: oldPriceLabel
+                    objectName: "oldPriceLabel"
+                    width: parent.labelWidth
+                    elide: Text.ElideRight
+                    horizontalAlignment: parent.labels === 3 ? Text.AlignHCenter : Text.AlignRight
+                }
+
+                Label {
+                    id: altPriceLabel
+                    width: parent.labelWidth
+                    elide: Text.ElideRight
+                    horizontalAlignment: Text.AlignRight
+                }
+            }
+        }
+    }
+}

=== modified file 'Dash/DashFilterGrid.qml'
--- Dash/DashFilterGrid.qml	2013-11-26 16:32:47 +0000
+++ Dash/DashFilterGrid.qml	2013-12-10 09:30:53 +0000
@@ -29,6 +29,8 @@
     property alias maximumNumberOfColumns: filterGrid.maximumNumberOfColumns
     property alias minimumHorizontalSpacing: filterGrid.minimumHorizontalSpacing
 
+    property FilterGrid grid: filterGrid
+
     collapsedHeight: filterGrid.collapsedHeight
     collapsedRowCount: filterGrid.collapsedRowCount
     columns: filterGrid.columns

=== modified file 'Dash/DashRenderer.qml'
--- Dash/DashRenderer.qml	2013-11-26 16:32:47 +0000
+++ Dash/DashRenderer.qml	2013-12-10 09:30:53 +0000
@@ -62,4 +62,10 @@
 
     function startFilterAnimation(filter) {
     }
+
+    /// Category template definition from the scope
+    property var template
+
+    /// Component mapping and configuration from the scope
+    property var components
 }

=== modified file 'Dash/GenericScopeView.qml'
--- Dash/GenericScopeView.qml	2013-12-04 09:46:59 +0000
+++ Dash/GenericScopeView.qml	2013-12-10 09:30:53 +0000
@@ -163,6 +163,9 @@
                         }
                     }
                     updateDelegateCreationRange();
+                    // FIXME: should be "template", not "renderer"
+                    item.template = Qt.binding(function() { return model.renderer });
+                    item.components = Qt.binding(function() { return model.components });
                 }
 
                 Component.onDestruction: {
@@ -340,7 +343,7 @@
                     default: return "Generic/GenericFilterGrid.qml";
                 }
             }
-            default: return "Generic/GenericFilterGrid.qml";
+            default: return "CardFilterGrid.qml";
         }
     }
 

=== modified file 'tests/qmltests/CMakeLists.txt'
--- tests/qmltests/CMakeLists.txt	2013-11-30 11:40:30 +0000
+++ tests/qmltests/CMakeLists.txt	2013-12-10 09:30:53 +0000
@@ -43,6 +43,8 @@
 add_qml_test(Dash DashContent IMPORT_PATHS ${CMAKE_BINARY_DIR}/plugins ${qmltest_DEFAULT_IMPORT_PATHS})
 add_qml_test(Dash DashPreview)
 add_qml_test(Dash GenericPreview)
+add_qml_test(Dash Card)
+add_qml_test(Dash CardHeader)
 add_qml_test(Dash GenericScopeView IMPORT_PATHS ${CMAKE_BINARY_DIR}/plugins ${qmltest_DEFAULT_IMPORT_PATHS})
 add_qml_test(Dash FilterGrids IMPORT_PATHS ${qmltest_DEFAULT_IMPORT_PATHS} ${CMAKE_BINARY_DIR}/plugins ${CMAKE_CURRENT_SOURCE_DIR}/plugins
                                            ${CMAKE_BINARY_DIR}/tests/mocks)

=== added file 'tests/qmltests/Dash/CardHelpers.js'
--- tests/qmltests/Dash/CardHelpers.js	1970-01-01 00:00:00 +0000
+++ tests/qmltests/Dash/CardHelpers.js	2013-12-10 09:30:53 +0000
@@ -0,0 +1,59 @@
+.pragma library
+
+var components = ["title", "art", "subtitle", "mascot", "emblem", "old-price", "price", "alt-price", "rating", "alt-rating", "summary"]
+
+function tryParse(json, errorLabel) {
+    var o = undefined;
+    if (errorLabel !== undefined) {
+        errorLabel.text = "";
+    }
+    try {
+        o = JSON.parse(json)
+    } catch(err) {
+        if (errorLabel !== undefined) {
+            errorLabel.text = err + "";
+        } else {
+            console.debug(err);
+        }
+    }
+    return o;
+}
+
+function mapData(json, layout, errorLabel) {
+    var o = tryParse(json, errorLabel);
+    var d = undefined;
+
+    if (o !== undefined) {
+        d = Object();
+        for (var k in components) {
+            try {
+                if (typeof layout[components[k]] == "object") {
+                    d[components[k]] = o[layout[components[k]]['field']];
+                } else {
+                    d[components[k]] = o[layout[components[k]]];
+                }
+            } catch(err) {
+                d[components[k]] = undefined;
+            }
+        }
+    }
+    return d;
+}
+
+function update(object, overrides) {
+    for (var k in overrides) {
+        if (typeof object[k] == "string" && typeof overrides[k] == "object") {
+            if (!overrides[k].hasOwnProperty('field')) overrides[k]['field'] = object[k];
+        }
+        if (object[k] === null) {
+            object[k] = overrides[k];
+        } else if (typeof object[k] == "object" && typeof overrides[k] == "string") {
+            object[k]['field'] = overrides[k];
+        } else if (typeof object[k] == "object") {
+            update(object[k], overrides[k]);
+        } else {
+            object[k] = overrides[k];
+        }
+    }
+    return object;
+}

=== added directory 'tests/qmltests/Dash/artwork'
=== added file 'tests/qmltests/Dash/artwork/[e-mail]'
Binary files tests/qmltests/Dash/artwork/[e-mail]	1970-01-01 00:00:00 +0000 and tests/qmltests/Dash/artwork/[e-mail]	2013-12-10 09:30:53 +0000 differ
=== added file 'tests/qmltests/Dash/artwork/music-player-design.png'
Binary files tests/qmltests/Dash/artwork/music-player-design.png	1970-01-01 00:00:00 +0000 and tests/qmltests/Dash/artwork/music-player-design.png	2013-12-10 09:30:53 +0000 differ
=== added file 'tests/qmltests/Dash/tst_Card.qml'
--- tests/qmltests/Dash/tst_Card.qml	1970-01-01 00:00:00 +0000
+++ tests/qmltests/Dash/tst_Card.qml	2013-12-10 09:30:53 +0000
@@ -0,0 +1,278 @@
+import QtQuick 2.0
+import QtTest 1.0
+import Ubuntu.Components 0.1
+import Unity.Test 0.1 as UT
+import "../../../Dash"
+import "CardHelpers.js" as Helpers
+
+Rectangle {
+    id: root
+    width: units.gu(80)
+    height: units.gu(72)
+    color: "#88FFFFFF"
+
+    property string defaultLayout: '
+    {
+      "schema-version": 1,
+      "template": {
+        "category-layout": "grid",
+        "card-layout": "vertical",
+        "card-size": "medium",
+        "overlay-mode": null,
+        "collapsed-rows": 2
+      },
+      "components": {
+        "title": null,
+        "art": {
+            "aspect-ratio": 1.0,
+            "fill-mode": "crop"
+        },
+        "subtitle": null,
+        "mascot": null,
+        "emblem": null,
+        "old-price": null,
+        "price": null,
+        "alt-price": null,
+        "rating": {
+          "type": "stars",
+          "range": [0, 5],
+          "full": "image://theme/rating-star-full",
+          "half": "image://theme/rating-star-half",
+          "empty": "image://theme/rating-star-empty"
+        },
+        "alt-rating": null,
+        "summary": null
+      },
+      "resources": {}
+    }'
+
+    property string cardData: '
+    {
+      "art": "../tests/qmltests/Dash/artwork/music-player-design.png",
+      "mascot": "../tests/qmltests/Dash/artwork/avatar.png",
+      "title": "foo",
+      "subtitle": "bar",
+      "summary": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+    }'
+
+    property string fullMapping: '
+    {
+      "title": "title",
+      "art": "art",
+      "subtitle": "subtitle",
+      "mascot": "mascot",
+      "summary": "summary"
+    }'
+
+    property var cardsModel: [
+        {
+            "name": "Art, header, summary - vertical",
+            "layout": { "components": JSON.parse(fullMapping) }
+        },
+        {
+            "name": "Art, header, summary - vertical, small",
+            "layout": { "template": { "card-size": "small" }, "components": JSON.parse(fullMapping) }
+        },
+        {
+            "name": "Art, header, summary - vertical, large",
+            "layout": { "template": { "card-size": "large" }, "components": JSON.parse(fullMapping) }
+        },
+        {
+            "name": "Art, header, summary - vertical, wide",
+            "layout": { "components": Helpers.update(JSON.parse(root.fullMapping), { "art": { "aspect-ratio": 2 } }) }
+        },
+        {
+            "name": "Art, title - vertical, fitted",
+            "layout": { "components": Helpers.update(JSON.parse(root.fullMapping), { "art": { "fill-mode": "fit" } }) }
+        }
+    ]
+
+    Card {
+        id: card
+        anchors { top: parent.top; left: parent.left; margins: units.gu(1) }
+
+        template: Helpers.update(JSON.parse(root.defaultLayout), Helpers.tryParse(layoutArea.text, layoutError))['template'];
+        components: Helpers.update(JSON.parse(root.defaultLayout), Helpers.tryParse(layoutArea.text, layoutError))['components'];
+        cardData: Helpers.mapData(dataArea.text, components, dataError)
+    }
+
+    Rectangle {
+        anchors { top: parent.top; bottom: parent.bottom; right: parent.right}
+        width: units.gu(40)
+        color: "lightgrey"
+
+        Column {
+            anchors { fill: parent; margins: units.gu(1) }
+            spacing: units.gu(1)
+
+            OptionSelector {
+                id: selector
+                model: cardsModel
+                delegate: OptionSelectorDelegate { text: modelData.name }
+                onSelectedIndexChanged: updateAreas()
+                Component.onCompleted: updateAreas()
+
+                function updateAreas() {
+                    var element = cardsModel[selectedIndex];
+                    if (element) {
+                        layoutArea.text = JSON.stringify(element.layout, undefined, 2) || "{}";
+                        // FIXME: don't overwrite data
+                        var data = JSON.parse(root.cardData);
+                        Helpers.update(data, element.data);
+                        dataArea.text = JSON.stringify(data, undefined, 2) || "{}";
+                    } else {
+                        layoutArea.text = "";
+                        dataArea.text = "";
+                    }
+
+                }
+            }
+
+            TextArea {
+                id: layoutArea
+                anchors { left: parent.left; right: parent.right }
+                height: units.gu(25)
+            }
+
+            Label {
+                id: layoutError
+                anchors { left: parent.left; right: parent.right }
+                height: units.gu(4)
+                color: "orange"
+            }
+
+            TextArea {
+                id: dataArea
+                anchors { left: parent.left; right: parent.right }
+                height: units.gu(25)
+            }
+
+            Label {
+                id: dataError
+                anchors { left: parent.left; right: parent.right }
+                height: units.gu(4)
+                color: "orange"
+            }
+        }
+    }
+
+    UT.UnityTestCase {
+        id: testCase
+
+        when: windowShown
+
+        property Item header: findChild(card, "cardHeader")
+        property Item art: findChild(card, "artShape")
+        property Item artImage: findChild(card, "artImage")
+        property Item summary: findChild(card, "summaryLabel")
+
+        function initTestCase() {
+            verify(testCase.header !== undefined, "Couldn't find header object.");
+        }
+
+        function cleanup() {
+            selector.selectedIndex = -1;
+        }
+
+
+        function test_header_binding_data() {
+            return [
+                { tag: "Mascot", property: "mascot", value: Qt.resolvedUrl("artwork/avatar.png"), index: 0 },
+                { tag: "Title", property: "title", value: "foo", index: 0 },
+                { tag: "Subtitle", property: "subtitle", value: "bar", index: 0 },
+            ];
+        }
+
+        function test_header_binding(data) {
+            selector.selectedIndex = data.index;
+            tryCompare(testCase.header, data.property, data.value);
+        }
+
+        function test_card_binding_data() {
+            return [
+                { tag: "Art", object: artImage, property: "source", value: Qt.resolvedUrl("artwork/music-player-design.png"), index: 0 },
+                { tag: "Summary", object: summary, property: "text", field: "summary", index: 0 },
+                { tag: "Fit", object: art, fill: Image.PreserveAspectFit, index: 4 },
+            ];
+        }
+
+        function test_card_binding(data) {
+            selector.selectedIndex = data.index;
+
+            if (data.hasOwnProperty('value')) {
+                tryCompare(data.object, data.property, data.value);
+            }
+
+            if (data.hasOwnProperty('field')) {
+                tryCompare(data.object, data.property, card.cardData[data.field]);
+            }
+        }
+
+        function test_card_size_data() {
+            return [
+                { tag: "Medium", width: units.gu(18.5), index: 0 },
+                { tag: "Small", width: units.gu(12), size: "small", index: 0 },
+                { tag: "Large", width: units.gu(38), size: "large", index: 0 },
+                { tag: "Wide", width: units.gu(18.5), aspect: 0.5, index: 0 },
+            ]
+        }
+
+        function test_card_size(data) {
+            selector.selectedIndex = data.index;
+
+            if (data.hasOwnProperty("size")) {
+                card.template['card-size'] = data.size;
+                card.templateChanged();
+            }
+
+            if (data.hasOwnProperty("aspect")) {
+                card.components['art']['aspect-ratio'] = data.aspect;
+                card.componentsChanged();
+            }
+
+            if (data.hasOwnProperty("width")) {
+                tryCompare(card, "width", data.width);
+            }
+
+            if (data.hasOwnProperty("height")) {
+                tryCompare(card, "height", data.height);
+            }
+        }
+
+        function test_art_size_data() {
+            return [
+                { tag: "Medium", width: units.gu(18.5), fill: Image.PreserveAspectCrop, index: 0 },
+                { tag: "Small", width: units.gu(12), index: 1 },
+                { tag: "Large", width: units.gu(38), index: 2 },
+                { tag: "Wide", height: units.gu(19), size: "large", index: 3 },
+                { tag: "Fit", height: units.gu(38), size: "large", width: units.gu(19), index: 4 },
+            ]
+        }
+
+        function test_art_size(data) {
+            selector.selectedIndex = data.index;
+
+            if (data.hasOwnProperty("size")) {
+                card.template['card-size'] = data.size;
+                card.templateChanged();
+            }
+
+            if (data.hasOwnProperty("aspect")) {
+                card.components['art']['aspect-ratio'] = data.aspect;
+                card.componentsChanged();
+            }
+
+            if (data.hasOwnProperty("width")) {
+                tryCompare(art, "width", data.width);
+            }
+
+            if (data.hasOwnProperty("height")) {
+                tryCompare(art, "height", data.height);
+            }
+
+            if (data.hasOwnProperty("fill")) {
+                tryCompare(artImage, "fillMode", data.fill);
+            }
+        }
+    }
+}

=== added file 'tests/qmltests/Dash/tst_CardHeader.qml'
--- tests/qmltests/Dash/tst_CardHeader.qml	1970-01-01 00:00:00 +0000
+++ tests/qmltests/Dash/tst_CardHeader.qml	2013-12-10 09:30:53 +0000
@@ -0,0 +1,121 @@
+import QtQuick 2.0
+import QtTest 1.0
+import Ubuntu.Components 0.1
+import Unity.Test 0.1 as UT
+import "../../../Dash"
+
+
+Rectangle {
+    width: units.gu(40)
+    height: units.gu(72)
+    color: "lightgrey"
+
+    CardHeader {
+        id: cardHeader
+        anchors { left: parent.left; right: parent.right }
+    }
+
+    Rectangle {
+        anchors.fill: cardHeader
+        color: "lightblue"
+        opacity: 0.5
+    }
+
+    UT.UnityTestCase {
+        id: testCase
+
+        when: windowShown
+
+        property Item mascot: findChild(cardHeader, "mascotShape")
+        property Item titleLabel: findChild(cardHeader, "titleLabel")
+        property Item subtitleLabel: findChild(cardHeader, "subtitleLabel")
+        property Item prices: findChild(cardHeader, "prices")
+        property Item oldPriceLabel: findChild(cardHeader, "oldPriceLabel")
+        property Item outerRow: findChild(cardHeader, "outerRow")
+        property Item column: findChild(cardHeader, "column")
+
+        function initTestCase() {
+            verify(testCase.mascot !== undefined, "Couldn't find mascot object.");
+            verify(testCase.titleLabel !== undefined, "Couldn't find titleLabel object.");
+            verify(testCase.subtitleLabel !== undefined, "Couldn't find subtitleLabel object.");
+            verify(testCase.prices !== undefined, "Couldn't find prices object.");
+            verify(testCase.oldPriceLabel !== undefined, "Couldn't find oldPriceLabel object.");
+        }
+
+        function cleanup() {
+            cardHeader.mascot = "";
+            cardHeader.title = "";
+            cardHeader.subtitle = "";
+            cardHeader.price = "";
+            cardHeader.oldPrice = "";
+            cardHeader.altPrice = "";
+        }
+
+        function test_mascot_data() {
+            return [
+                        { tag: "Empty", source: "", visible: false },
+                        { tag: "Invalid", source: "bad_path", visible: false },
+                        { tag: "Valid", source: "artwork/avatar.png", visible: true },
+            ]
+        }
+
+        function test_mascot(data) {
+            cardHeader.mascot = data.source;
+            tryCompare(testCase.mascot, "visible", data.visible);
+        }
+
+        function test_labels_data() {
+            return [
+                        { tag: "Empty", visible: false },
+                        { tag: "Title only", title: "Foo", visible: true },
+                        { tag: "Subtitle only", subtitle: "Bar", visible: false },
+                        { tag: "Both", title: "Foo", subtitle: "Bar", visible: true }
+            ]
+        }
+
+        function test_labels(data) {
+            cardHeader.title = data.title !== undefined ? data.title : "";
+            cardHeader.subtitle = data.subtitle !== undefined ? data.subtitle : "";
+            tryCompare(cardHeader, "visible", data.visible);
+        }
+
+        function test_prices_data() {
+            return [
+                        { tag: "Main", main: "$1.25", visible: true },
+                        { tag: "Alt", alt: "€1.00", visible: false },
+                        { tag: "Old", old: "€2.00", visible: false },
+                        { tag: "Main and Alt", main: "$1.25", alt: "€1.00", visible: true },
+                        { tag: "Main and Old", main: "$1.25", old: "$2.00", visible: true, oldAlign: Text.AlignRight },
+                        { tag: "Alt and Old", alt: "€1.00", old: "$2.00", visible: false },
+                        { tag: "All", main: "$1.25", alt: "€1.00", old: "$2.00", visible: true, oldAlign: Text.AlignHCenter }
+            ]
+        }
+
+        function test_prices(data) {
+            cardHeader.price = data.main !== undefined ? data.main : "";
+            cardHeader.oldPrice = data.old !== undefined ? data.old : "";
+            cardHeader.altPrice = data.alt !== undefined ? data.alt : "";
+            tryCompare(cardHeader, "visible", data.visible);
+            if (data.hasOwnProperty("oldAlign")) {
+                compare(testCase.oldPriceLabel.horizontalAlignment, data.oldAlign, "Old price label is aligned wrong.")
+            }
+        }
+
+        function test_dimensions_data() {
+            return [
+                { tag: "Column width", object: column, width: cardHeader.width - testCase.outerRow.spacing * 2 },
+                { tag: "Column width", object: column, width: cardHeader.width - mascot.width - testCase.outerRow.spacing * 3, mascot: "artwork/avatar.png" }
+            ]
+        }
+
+        function test_dimensions(data) {
+            if (data.hasOwnProperty("mascot")) {
+                cardHeader.mascot = data.mascot;
+            }
+
+            if (data.hasOwnProperty("width")) {
+                tryCompare(data.object, "width", data.width);
+            }
+        }
+    }
+}