@@ -29,8 +29,8 @@ Rectangle {
30 property string cardData: '
30 property string cardData: '
32− "art": "../../tests/qmltests/Dash/artwork/music-player-design.png",
32+ "art": "../../../tests/qmltests/Dash/artwork/music-player-design.png",
33− "mascot": "../../tests/qmltests/Dash/artwork/avatar.png",
33+ "mascot": "../../../tests/qmltests/Dash/artwork/avatar.png",
34 "title": "foo",
34 "title": "foo",
35 "subtitle": "bar",
35 "subtitle": "bar",
36 "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."
36 "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."
@@ -98,21 +98,26 @@ Rectangle {
99 CardTool {
99 CardTool {
100 id: cardTool
100 id: cardTool
101− template: card.template
101+ template: Helpers.update(JSON.parse(Helpers.defaultLayout), Helpers.tryParse(layoutArea.text, layoutError))['template'];
102− components: card.components
102+ components: Helpers.update(JSON.parse(Helpers.defaultLayout), Helpers.tryParse(layoutArea.text, layoutError))['components'];
103 viewWidth: units.gu(48)
103 viewWidth: units.gu(48)
106− Card {
106+ readonly property var card: loader.item
108− anchors { top: parent.top; left: parent.left; margins: units.gu(1) }
110− width: cardTool.cardWidth || implicitWidth
108+ Loader {
111− height: cardTool.cardHeight || implicitHeight
109+ id: loader
110+ anchors { top: parent.top; left: parent.left; margins: units.gu(1) }
113− template: Helpers.update(JSON.parse(Helpers.defaultLayout), Helpers.tryParse(layoutArea.text, layoutError))['template'];
112+ sourceComponent: cardTool.cardComponent
114− components: Helpers.update(JSON.parse(Helpers.defaultLayout), Helpers.tryParse(layoutArea.text, layoutError))['components'];
113+ onLoaded: {
114+ item.template = Qt.binding(function() { return cardTool.template; });
115+ item.components = Qt.binding(function() { return cardTool.components; });
115− cardData: Helpers.mapData(dataArea.text, components, dataError)
116+ item.cardData = Qt.binding(function() { return Helpers.mapData(dataArea.text, cardTool.components, dataError); });
117+ item.width = Qt.binding(function() { return cardTool.cardWidth || item.implicitWidth; });
118+ item.height = Qt.binding(function() { return cardTool.cardHeight || item.implicitHeight; });
119+ item.fixedHeaderHeight = Qt.binding(function() { return cardTool.headerHeight; });
118 Rectangle {
123 Rectangle {
@@ -181,60 +186,45 @@ Rectangle {
182 when: windowShown
187 when: windowShown
184− property Item header: findChild(card, "cardHeader")
185− property Item headerLoader: findChild(card, "cardHeaderLoader")
186− property Item title: findChild(header, "titleLabel")
189+ property Item title: findChild(card, "titleLabel")
190+ property Item subtitle: findChild(card, "subtitleLabel")
191+ property var headerRow: findChild(card, "outerRow")
187− property Item art: findChild(card, "artShape")
192+ property var art: findChild(card, "artShape")
188 property Item artImage: findChild(card, "artImage")
193 property Item artImage: findChild(card, "artImage")
189 property Item summary: findChild(card, "summaryLabel")
194 property Item summary: findChild(card, "summaryLabel")
190 property Item background: findChild(card, "background")
195 property Item background: findChild(card, "background")
191 property Item backgroundLoader: findChild(card, "backgroundLoader")
196 property Item backgroundLoader: findChild(card, "backgroundLoader")
192 property Item backgroundImage: findChild(card, "backgroundImage")
197 property Item backgroundImage: findChild(card, "backgroundImage")
193−
198+ property Item mascotImage: findChild(card, "mascotImage");
194− function initTestCase() {
195− verify(typeof testCase.header === "object", "Couldn't find header object.");
196− verify(typeof testCase.art === "object", "Couldn't find art object.");
197− verify(typeof testCase.artImage === "object", "Couldn't find artImage object.");
198− verify(typeof testCase.summary === "object", "Couldn't find summary object.");
199− verify(typeof testCase.artImage === "object", "Couldn't find background object.");
200− verify(typeof testCase.summary === "object", "Couldn't find backgroundImage object.");
203 function cleanup() {
200 function cleanup() {
204 selector.selectedIndex = -1;
201 selector.selectedIndex = -1;
208− function test_header_binding_data() {
210− { tag: "Mascot", property: "mascot", value: Qt.resolvedUrl("artwork/avatar.png"), index: 0 },
211− { tag: "Title", property: "title", value: "foo", index: 0 },
212− { tag: "Subtitle", property: "subtitle", value: "bar", index: 0 },
216− function test_header_binding(data) {
217− selector.selectedIndex = data.index;
218− tryCompare(testCase.header, data.property, data.value);
221 function test_card_binding_data() {
204 function test_card_binding_data() {
223− { tag: "Art", object: artImage, property: "source", value: Qt.resolvedUrl("artwork/music-player-design.png"), index: 0 },
206+ { tag: "Art", object: "artImage", property: "source", value: Qt.resolvedUrl("artwork/music-player-design.png"), index: 0 },
224− { tag: "Summary", object: summary, property: "text", field: "summary", index: 0 },
207+ { tag: "Summary", object: "summary", property: "text", field: "summary", index: 0 },
225− { tag: "Fit", object: art, fill: Image.PreserveAspectFit, index: 4 },
208+ { tag: "Fit", object: "art", fill: Image.PreserveAspectFit, index: 4 },
209+ { tag: "Mascot", object: "mascotImage", property: "source", value: Qt.resolvedUrl("artwork/avatar.png"), index: 0 },
210+ { tag: "Title", object: "title", property: "text", value: "foo", index: 0 },
211+ { tag: "Subtitle", object: "subtitle", property: "text", value: "bar", index: 0 },
229 function test_card_binding(data) {
215 function test_card_binding(data) {
230 selector.selectedIndex = data.index;
216 selector.selectedIndex = data.index;
217+ waitForRendering(card);
219+ tryCompareFunction(function() { return testCase[data.object] !== null }, true);
220+ var object = testCase[data.object];
232 if (data.hasOwnProperty('value')) {
222 if (data.hasOwnProperty('value')) {
233− tryCompare(data.object, data.property, data.value);
223+ tryCompare(object, data.property, data.value);
236 if (data.hasOwnProperty('field')) {
226 if (data.hasOwnProperty('field')) {
237− tryCompare(data.object, data.property, card.cardData[data.field]);
227+ tryCompare(object, data.property, card.cardData[data.field]);
@@ -243,31 +233,21 @@ Rectangle {
243 { tag: "Medium", width: units.gu(18.5), index: 0 },
233 { tag: "Medium", width: units.gu(18.5), index: 0 },
244 { tag: "Small", width: units.gu(12), index: 1 },
234 { tag: "Small", width: units.gu(12), index: 1 },
245 { tag: "Large", width: units.gu(38), index: 2 },
235 { tag: "Large", width: units.gu(38), index: 2 },
246− { tag: "Wide", width: units.gu(18.5), aspect: 0.5, index: 0 },
236+ { tag: "Wide", width: units.gu(18.5), index: 0 },
247 { tag: "Horizontal", width: units.gu(38), index: 5 },
237 { tag: "Horizontal", width: units.gu(38), index: 5 },
248 // Make sure card ends with header when there's no summary
238 // Make sure card ends with header when there's no summary
249− { tag: "NoSummary", height: function() { return headerLoader.y + headerLoader.height }, index: 6 },
239+ { tag: "NoSummary", height: function() { var cardToolRow = findChild(cardTool, "outerRow");
240+ return cardToolRow.y + cardToolRow.height + units.gu(1) }, index: 6 },
250− { tag: "HorizontalNoSummary", height: function() { return headerLoader.height }, card_layout: "horizontal", index: 6 },
241+ { tag: "HorizontalNoSummary", height: function() { return headerRow.height + units.gu(2) }, card_layout: "horizontal", index: 6 },
254 function test_card_size(data) {
245 function test_card_size(data) {
255− waitForRendering(card);
256 selector.selectedIndex = data.index;
246 selector.selectedIndex = data.index;
258− if (data.hasOwnProperty("size")) {
259− card.template['card-size'] = data.size;
260− card.templateChanged();
263 if (data.hasOwnProperty("card_layout")) {
248 if (data.hasOwnProperty("card_layout")) {
264− card.template['card-layout'] = data.card_layout;
249+ cardTool.template['card-layout'] = data.card_layout;
265− card.templateChanged();
250+ cardTool.templateChanged();
268− if (data.hasOwnProperty("aspect")) {
269− card.components['art']['aspect-ratio'] = data.aspect;
270− card.componentsChanged();
273 if (data.hasOwnProperty("width")) {
253 if (data.hasOwnProperty("width")) {
@@ -288,25 +268,26 @@ Rectangle {
288 { tag: "Large", width: units.gu(38), index: 2 },
268 { tag: "Large", width: units.gu(38), index: 2 },
289 { tag: "Wide", height: units.gu(19), size: "large", index: 3 },
269 { tag: "Wide", height: units.gu(19), size: "large", index: 3 },
290 { tag: "Fit", height: units.gu(38), size: "large", width: units.gu(19), index: 4 },
270 { tag: "Fit", height: units.gu(38), size: "large", width: units.gu(19), index: 4 },
291− { tag: "VerticalWidth", width: function() { return header.width }, index: 0 },
271+ { tag: "VerticalWidth", width: function() { return headerRow.width + units.gu(1) * 2 }, index: 0 },
292− { tag: "HorizontalHeight", height: function() { return header.height }, index: 5 },
272+ { tag: "HorizontalHeight", height: function() { return headerRow.height + units.gu(1) * 2 }, index: 5 },
293− { tag: "HorizontalWidth", width: function() { return headerLoader.x }, index: 5 },
273+ { tag: "HorizontalWidth", width: function() { return headerRow.x - units.gu(1) }, index: 5 },
297 function test_art_size(data) {
277 function test_art_size(data) {
298 selector.selectedIndex = data.index;
278 selector.selectedIndex = data.index;
300 if (data.hasOwnProperty("size")) {
279 if (data.hasOwnProperty("size")) {
301− card.template['card-size'] = data.size;
280+ cardTool.template['card-size'] = data.size;
302− card.templateChanged();
281+ cardTool.templateChanged();
305 if (data.hasOwnProperty("aspect")) {
284 if (data.hasOwnProperty("aspect")) {
306− card.components['art']['aspect-ratio'] = data.aspect;
285+ cardTool.components['art']['aspect-ratio'] = data.aspect;
307− card.componentsChanged();
286+ cardTool.componentsChanged();
289+ waitForRendering(card);
310 if (data.hasOwnProperty("width")) {
291 if (data.hasOwnProperty("width")) {
311 if (typeof data.width === "function") {
292 if (typeof data.width === "function") {
312 tryCompareFunction(function() { return art.width === data.width() }, true);
293 tryCompareFunction(function() { return art.width === data.width() }, true);
@@ -326,38 +307,40 @@ Rectangle {
327 function test_art_layout_data() {
308 function test_art_layout_data() {
329− { tag: "Vertical", left: function() { return 0 }, index: 0},
310+ { tag: "Vertical", left: function() { return units.gu(1); }, index: 0},
330− { tag: "Horizontal", left: function() { return art.width }, index: 5 },
311+ { tag: "Horizontal", left: function() { return art.width + units.gu(1); }, index: 5 },
334 function test_art_layout(data) {
315 function test_art_layout(data) {
335 selector.selectedIndex = data.index;
316 selector.selectedIndex = data.index;
317+ waitForRendering(card);
337− tryCompare(testCase.headerLoader, "x", data.left());
319+ tryCompare(headerRow, "x", data.left());
340 function test_header_layout_data() {
322 function test_header_layout_data() {
342− { tag: "Vertical", top: function() { return art.y + art.height },
324+ { tag: "Vertical", top: function() { return art.y + art.height + units.gu(1) },
343− left: function() { return art.x }, index: 0 },
325+ left: function() { return art.x + units.gu(1) }, index: 0 },
344− { tag: "Horizontal", top: function() { return art.y },
326+ { tag: "Horizontal", top: function() { return art.y + units.gu(1) },
345− left: function() { return art.x + art.width }, index: 5 },
327+ left: function() { return art.x + art.width + units.gu(1) }, index: 5 },
346− { tag: "Overlay", top: function() { return art.y + art.height - header.height },
328+ { tag: "Overlay", top: function() { return art.y + art.height - headerRow.height - units.gu(1) },
347− left: function() { return art.x }, index: 9 },
329+ left: function() { return art.x + units.gu(1) }, index: 9 },
351 function test_header_layout(data) {
333 function test_header_layout(data) {
352 selector.selectedIndex = data.index;
334 selector.selectedIndex = data.index;
335+ waitForRendering(card);
354− tryCompareFunction(function() { return testCase.headerLoader.y === data.top() }, true);
337+ tryCompareFunction(function() { return testCase.headerRow.y === data.top() }, true);
355− tryCompareFunction(function() { return testCase.headerLoader.x === data.left() }, true);
338+ tryCompareFunction(function() { return testCase.headerRow.x === data.left() }, true);
358 function test_summary_layout_data() {
341 function test_summary_layout_data() {
360− { tag: "With header", top: function() { return headerLoader.y + headerLoader.height }, index: 0 },
343+ { tag: "With header", top: function() { return headerRow.y + headerRow.height + units.gu(1); }, index: 0 },
361 { tag: "Without header", top: function() { return art.y + art.height }, index: 7 },
344 { tag: "Without header", top: function() { return art.y + art.height }, index: 7 },
@@ -365,16 +348,16 @@ Rectangle {
365 function test_summary_layout(data) {
348 function test_summary_layout(data) {
366 selector.selectedIndex = data.index;
349 selector.selectedIndex = data.index;
351+ waitForRendering(card);
368 tryCompareFunction(function() { return testCase.summary.y === data.top() }, true);
353 tryCompareFunction(function() { return testCase.summary.y === data.top() }, true);
371 function test_art_visibility() {
356 function test_art_visibility() {
372 selector.selectedIndex = 8;
357 selector.selectedIndex = 8;
374− tryCompare(testCase.artImage, "source", "");
359+ compare(testCase.artImage, null);
375− compare(testCase.art.visible, false);
360+ compare(testCase.art, null);
376− compare(testCase.art.height, 0);
377− compare(testCase.art.width, 0);
380 function test_background_data() {
363 function test_background_data() {
@@ -402,7 +385,11 @@ Rectangle {
403 waitForRendering(card);
386 waitForRendering(card);
405− tryCompare(backgroundLoader, "active", data.visible);
388+ if (data.visible) {
389+ tryCompare(backgroundLoader, "active", true);
391+ compare(backgroundLoader, null);
407 if (data.hasOwnProperty("color")) {
394 if (data.hasOwnProperty("color")) {
408 tryCompare(background, "color", data.color);
395 tryCompare(background, "color", data.color);
@@ -449,13 +436,15 @@ Rectangle {
450 function test_fontColor(data) {
437 function test_fontColor(data) {
451 selector.selectedIndex = 10;
438 selector.selectedIndex = 10;
439+ waitForRendering(card);
453 background.color = data.tag;
441 background.color = data.tag;
455 var fontColor = data.dark ? "grey" : "white";
443 var fontColor = data.dark ? "grey" : "white";
457 tryCompareFunction(function() { return Qt.colorEqual(summary.color, fontColor); }, true);
445 tryCompareFunction(function() { return Qt.colorEqual(summary.color, fontColor); }, true);
458− tryCompareFunction(function() { return Qt.colorEqual(header.fontColor, fontColor); }, true);
446+ tryCompareFunction(function() { return Qt.colorEqual(title.color, fontColor); }, true);
447+ tryCompareFunction(function() { return Qt.colorEqual(subtitle.color, fontColor); }, true);
461 function test_mascotShape_data() {
450 function test_mascotShape_data() {
@@ -468,15 +457,12 @@ Rectangle {
469 function test_mascotShape(data) {
458 function test_mascotShape(data) {
470 selector.selectedIndex = data.index;
459 selector.selectedIndex = data.index;
460+ waitForRendering(card);
472 var shape = findChild(card, "mascotShapeLoader");
462 var shape = findChild(card, "mascotShapeLoader");
473− var image = findChild(card, "mascotImage");
475− verify(shape, "Could not find shape.");
476− verify(image, "Could not find image.");
478− tryCompare(shape, "active", data.shape);
464+ compare(shape !== null, data.shape);
479− tryCompare(image, "visible", !data.shape);
465+ tryCompare(mascotImage, "visible", !data.shape);