Merge lp:~tpeeters/ubuntu-ui-toolkit/back into lp:~ubuntu-sdk-team/ubuntu-ui-toolkit/multiColumnView

[Tim Peeters]

Automatic back button.

[lp:~tpeeters/ubuntu-ui-toolkit/back]

1569. By Tim Peeters on 2015-07-16

clean showcase

1570. By Tim Peeters on 2015-07-16

don't add page that was already added

1571. By Tim Peeters on 2015-07-16

update tests

1572. By Tim Peeters on 2015-07-17

clean

1573. By Tim Peeters on 2015-07-19

clean

1574. By Tim Peeters on 2015-07-20

add unit tests for single column on phone

1575. By Tim Peeters on 2015-07-20

tst_multicolumnview to work in single column

1576. By Tim Peeters on 2015-07-20

clean

[Christian Dywan (kalikiana)]

I appreciate the extensive back button test, it probably wasn't easy to get sorted, but it's looking good. And you added a check for adding the same Page with tests, which I like a lot.

400 + function test_number_of_headers_equals_number_of_columns_wide() {
401 + if (root.columns !== 2) {
402 + skip("Only for wide view.");
403 + }

Can we resize the window on an environment where there's no enforced fullscreen and run both narrow and wide tests that way? Otherwise you could only run all tests by changing the window size by hand.

review: Needs Information

[lp:~tpeeters/ubuntu-ui-toolkit/back]

1577. By Tim Peeters on 2015-07-20

review comment

1578. By Tim Peeters on 2015-07-20

tweak

[Christian Dywan (kalikiana)]

Nice. Thanks for the update!

review: Approve

=== modified file 'examples/ubuntu-ui-toolkit-gallery/Template.qml'
--- examples/ubuntu-ui-toolkit-gallery/Template.qml	2015-07-02 14:51:16 +0000
+++ examples/ubuntu-ui-toolkit-gallery/Template.qml	2015-07-20 22:43:59 +0000
@@ -20,11 +20,6 @@
 Page {
     id: template
 
-    head.backAction: Action {
-        iconName: 'back'
-        onTriggered: columns.removePages(template)
-    }
-
     default property alias content: layout.children
     property alias spacing: layout.spacing
 

=== modified file 'modules/Ubuntu/Components/1.2/PageWrapperUtils.js'
--- modules/Ubuntu/Components/1.2/PageWrapperUtils.js	2015-04-30 08:32:44 +0000
+++ modules/Ubuntu/Components/1.2/PageWrapperUtils.js	2015-07-20 22:43:59 +0000
@@ -30,8 +30,7 @@
     if (pageWrapper.reference.createObject) {
         // page reference is a component
         pageComponent = pageWrapper.reference;
-    }
-    else if (typeof pageWrapper.reference == "string") {
+    } else if (typeof pageWrapper.reference == "string") {
         // page reference is a string (url)
         pageComponent = Qt.createComponent(pageWrapper.reference);
     }

=== modified file 'modules/Ubuntu/Components/1.3/MultiColumnView.qml'
--- modules/Ubuntu/Components/1.3/MultiColumnView.qml	2015-07-13 15:14:03 +0000
+++ modules/Ubuntu/Components/1.3/MultiColumnView.qml	2015-07-20 22:43:59 +0000
@@ -175,13 +175,18 @@
 
     /*!
       \qmlmethod Item addPageToNextColumn(Item sourcePage, var page[, var properties])
-      Same as \l addPageToCurrentColumn except that the \c page is added to the column
-      next to the one the \c sourcePage resides. If \c sourcePage is null, the new
-      page will be added to the leftmost column. If \c sourcePage is located in the
+      Remove all previous pages from the next column (relative to the column that
+      holds \c sourcePage) and all following columns, and then add \c page to the next column.
+      If \c sourcePage is located in the
       rightmost column, the new page will be pushed to the same column as \c sourcePage.
       */
     function addPageToNextColumn(sourcePage, page, properties) {
-        return d.addPageToColumn(d.columnForPage(sourcePage) + 1, sourcePage, page, properties);
+        var nextColumn = d.columnForPage(sourcePage) + 1;
+        d.tree.prune(nextColumn);
+        for (var i = nextColumn; i < d.columns; i++) {
+            d.updatePageForColumn(i);
+        }
+        return d.addPageToColumn(nextColumn, sourcePage, page, properties);
     }
 
     /*!
@@ -263,7 +268,7 @@
         function getWrapper(page) {
             if (page && page.hasOwnProperty("parentNode")) {
                 var w = page.parentNode;
-                if (w.hasOwnProperty("object") && w.hasOwnProperty("reference")) {
+                if (w && w.hasOwnProperty("object") && w.hasOwnProperty("reference")) {
                     if (w.object == page) {
                         return w;
                     } else {
@@ -300,11 +305,22 @@
                 return;
             }
 
-            var wrapper = d.createWrapper(page, properties);
-            wrapper.parentPage = sourcePage;
-            wrapper.column = column;
-            d.addWrappedPage(wrapper);
-            return wrapper.object;
+            // Check that the Page was not already added.
+            if (typeof page !== "string" && !page.createObject) {
+                // page is neither a url or a Component so it must be a Page object.
+
+                var oldWrapper = getWrapper(page);
+                if (oldWrapper && d.tree.index(oldWrapper) !== -1) {
+                    console.warn("Cannot add a Page that was already added.");
+                    return null;
+                }
+            }
+
+            var newWrapper = d.createWrapper(page, properties);
+            newWrapper.parentPage = sourcePage;
+            newWrapper.column = column;
+            d.addWrappedPage(newWrapper);
+            return newWrapper.object;
         }
 
         // update the page for the specified column
@@ -455,6 +471,25 @@
                 property color panelColor: multiColumnView.__propagated.header.panelColor
 
                 visible: holder.pageWrapper && holder.pageWrapper.active
+
+                // The multiColumn, page and showBackButton properties are used in
+                //  PageHeadStyle to show/hide the back button.
+                property var multiColumn: multiColumnView
+                property var page: holder.pageWrapper ? holder.pageWrapper.object : null
+                property bool showBackButton: {
+                    if (!page) {
+                        return false;
+                    }
+                    var parentWrapper;
+                    try {
+                        parentWrapper = d.tree.parent(holder.pageWrapper);
+                    } catch(err) {
+                        // Root node has no parent node.
+                        return false;
+                    }
+                    var nextInColumn = d.tree.top(holder.column, holder.column < d.columns - 1, 1);
+                    return parentWrapper === nextInColumn;
+                }
             }
 
             Rectangle {

=== modified file 'modules/Ubuntu/Components/1.3/tree.js'
--- modules/Ubuntu/Components/1.3/tree.js	2015-07-14 09:51:34 +0000
+++ modules/Ubuntu/Components/1.3/tree.js	2015-07-20 22:43:59 +0000
@@ -42,7 +42,6 @@
         if (this.index(newNode) !== -1) {
             throw "Cannot add the same node twice to a tree.";
         }
-        var parentIndex = this.index(parentNode);
         if (size === 0) {
             // adding root node
             if (parentNode !== null) {
@@ -53,17 +52,43 @@
             if (parentNode === null) {
                 throw "Only root node has parentNode null."
             }
-            if (parentIndex === -1) {
+            if (this.index(parentNode) === -1) {
                 throw "Cannot add non-root node if parentNode is not in the tree.";
             }
         }
         nodes.push(newNode);
         stems.push(stem);
-        parents.push(parentIndex);
+        parents.push(parentNode);
         size++;
     }
 
-    // Chops all nodes with an index higher than the given node.
+    // Remove all nodes from the specified stem and higher stems.
+    //
+    // Returns the removed nodes.
+    this.prune = function(stem) {
+        var newNodes = [];
+        var newStems = [];
+        var newParents = [];
+        var removedNodes = [];
+        for (var i = 0; i < nodes.length; i++) {
+            if (stems[i] < stem) {
+                newNodes.push(nodes[i]);
+                newStems.push(stems[i]);
+                newParents.push(parents[i]);
+            } else {
+                removedNodes.push(nodes[i]);
+            }
+        }
+        nodes = newNodes;
+        stems = newStems;
+        parents = newParents;
+        size = nodes.length;
+        return removedNodes;
+    }
+
+    // Chops all nodes with an index higher than the given node which
+    //  are in the same stem or a higher stem.
+    //
     // If, and only if, (inclusive) then also chop the given node.
     //
     // Default values for node and inclusive are top() and true.
@@ -72,38 +97,72 @@
         node = typeof node !== 'undefined' ? node : this.top();
         inclusive = typeof inclusive !== 'undefined' ? inclusive : true
         var nodeIndex = this.index(node);
-        if (nodeIndex >= 0) {
-            if (inclusive) {
-                size = nodeIndex;
-            } else {
-                size = nodeIndex + 1;
-            }
-            var oldNodes = nodes;
-            nodes = nodes.slice(0, size);
-            stems = stems.slice(0, size);
-            parents = parents.slice(0, size);
-            return oldNodes.slice(size);
-        } else {
-            // given node is not in the tree
+        if (nodeIndex < 0) {
+            // given node is not in the tree.
             return [];
         }
+        if (inclusive) {
+            size = nodeIndex;
+        } else {
+            size = nodeIndex + 1;
+        }
+
+        // Nodes with index(node) >= nodeIndex && stem >= stems[nodeIndex];
+        var badNodes = []; // to fill below
+
+        // Nodes with index(node) >= nodeIndex (any stem).
+        // Potential bad nodes to be removed.
+        var uglyNodes = nodes.slice(size);
+        var uglyStems = stems.slice(size); // to check below
+        var uglyParents = parents.slice(size);
+
+        var stem = stems[nodeIndex];
+        // Good nodes, with index(node) < nodeIndex && stem < stems[nodeIndex]:
+        nodes = nodes.slice(0, size);
+        stems = stems.slice(0, size);
+        parents = parents.slice(0, size);
+
+        // Add nodes with index(node) > nodeIndex && stem < stems[nodeIndex] back:
+        for (var i = 0; i < uglyNodes.length; i++) {
+            if (uglyStems[i] < stem) {
+                // Because the stem of the parentNode <= stem of the node,
+                //  the node that is added back has the parentNode in nodes.
+                nodes.push(uglyNodes[i]);
+                stems.push(uglyStems[i]);
+                parents.push(uglyParents[i]);
+                size++;
+            } else {
+                badNodes.push(uglyNodes[i]);
+            }
+        }
+        return badNodes;
     }
 
-    // If exactMatch, return the node on top of the specified stem.
-    // If !exactMatch, return the node with the highest index for stem <= the returned node stem
+    // Returns the n'th node when traversing one or more stems from the
+    //  top down. When exactMatch, only the specified stem is traversed, and
+    //  when !exactMatch the specified stem and all higher stems are traversed.
+    //
+    // Returns null if no matching node was found.
     //
     // Default value for stem: 0
     // Default value for exactMatch: false
+    // Default value for n: 0 (first node)
     //
-    // Returns null if no matching node was found.
-    this.top = function(stem, exactMatch) {
+    // Calling top() with no parameters returns top(0, false, 0) which is the
+    //  last node that was added to the tree.
+    this.top = function(stem, exactMatch, n) {
         stem = typeof stem !== 'undefined' ? stem : 0
         exactMatch = typeof exactMatch !== 'undefined' ? exactMatch : false
+        n = typeof n !== 'undefined' ? n : 0
 
         var st;
-        for (var i = size-1; i >= 0; i--) {
+        var count = n;
+        for (var i = size - 1; i >= 0; i--) {
             st = stems[i];
             if ((exactMatch && st === stem) || (!exactMatch && st >= stem)) {
+                count--;
+            }
+            if (count < 0) {
                 return nodes[i];
             }
         }
@@ -115,7 +174,9 @@
         var i = nodes.indexOf(node);
         if (i === -1) {
             throw "Specified node not found in tree.";
+        } else if (i === 0) {
+            throw "Root node has no parent node.";
         }
-        return nodes[parents[i]];
+        return parents[i];
     }
 }

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/1.3/PageHeadStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.3/PageHeadStyle.qml	2015-06-25 23:49:33 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.3/PageHeadStyle.qml	2015-07-20 22:43:59 +0000
@@ -268,16 +268,26 @@
                 objectName: "backButton"
 
                 iconName: "back"
-                visible: styledItem.pageStack !== null &&
-                         styledItem.pageStack !== undefined &&
-                         styledItem.pageStack.depth > 1 &&
-                         !headerStyle.config.backAction
+                property bool stackBack: styledItem.pageStack !== null &&
+                                         styledItem.pageStack !== undefined &&
+                                         styledItem.pageStack.depth > 1
+
+                // MultiColumnView adds the following properties: multiColumn, page, showBackButton.
+                property bool treeBack: styledItem.hasOwnProperty("multiColumn") &&
+                                        styledItem.showBackButton
+
+                visible: !headerStyle.config.backAction && (stackBack || treeBack)
 
                 text: "back"
                 color: headerStyle.config.foregroundColor
 
                 onTriggered: {
-                    styledItem.pageStack.pop();
+                    if (stackBack) {
+                        styledItem.pageStack.pop();
+                    } else {
+                        // treeBack
+                        styledItem.multiColumn.removePages(styledItem.page);
+                    }
                 }
             }
 

=== modified file 'tests/unit_x11/tst_components/tst_multicolumnheader.qml'
--- tests/unit_x11/tst_components/tst_multicolumnheader.qml	2015-07-07 14:21:26 +0000
+++ tests/unit_x11/tst_components/tst_multicolumnheader.qml	2015-07-20 22:43:59 +0000
@@ -23,6 +23,9 @@
     width: units.gu(120)
     height: units.gu(71)
 
+    // 2 on desktop, 1 on phone.
+    property int columns: width >= units.gu(80) ? 2 : 1
+
     MultiColumnView {
         id: multiColumnView
         width: parent.width
@@ -69,6 +72,11 @@
                     margins: units.gu(2)
                 }
                 color: "orange"
+                Button {
+                    anchors.centerIn: parent
+                    text: "right"
+                    onTriggered: multiColumnView.addPageToNextColumn(leftPage, rightPage)
+                }
             }
         }
         Page {
@@ -80,6 +88,11 @@
                     margins: units.gu(2)
                 }
                 color: "green"
+                Button {
+                    anchors.centerIn: parent
+                    text: "Another page!"
+                    onTriggered: multiColumnView.addPageToCurrentColumn(rightPage, sectionsPage)
+                }
             }
         }
         Page {
@@ -96,23 +109,33 @@
             }
         }
     }
+
     UbuntuTestCase {
         when: windowShown
 
+        function resize_single_column_width() {
+            multiColumnView.width = units.gu(40);
+        }
+
+        // resize to use the full window width
+        function resize_full_width() {
+            multiColumnView.width = root.width;
+        }
+
         function get_number_of_columns() {
             var body = findChild(multiColumnView, "body");
             return body.children.length;
         }
 
-        function get_header(index) {
-            return findChild(multiColumnView, "Header" + index);
+        function get_header(column) {
+            return findChild(multiColumnView, "Header" + column);
         }
 
         function get_number_of_headers() {
             // FIXME: With only one column, revert to using the AppHeader
-            //  so multiColumnView sill not include any headers.
+            //  so multiColumnView will not include any headers.
             var numHeaders = 0;
-            var header = findChild(multiColumnView, "Header0");
+            var header = get_header(0);
             verify(header !== null, "No header found!");
             while (header !== null) {
                 numHeaders++;
@@ -121,22 +144,37 @@
             return numHeaders;
         }
 
+        function get_back_button_visible(column) {
+            var header = get_header(column);
+            var back_button = findChild(header, "backButton");
+            return back_button.visible;
+        }
+
         function cleanup() {
-            multiColumnView.width = root.width;
-            multiColumnView.height = root.height;
             multiColumnView.removePages(rootPage);
+            resize_full_width();
         }
 
-        function test_number_of_headers_equals_number_of_columns() {
-            multiColumnView.width = units.gu(40);
-            compare(get_number_of_columns(), 1, "Number of columns is not 1.");
-            compare(get_number_of_headers(), 1, "Number of headers is not 1.");
-            multiColumnView.width = root.width;
+        function test_number_of_headers_equals_number_of_columns_wide() {
+            if (root.columns !== 2) {
+                skip("Only for wide view.");
+            }
             compare(get_number_of_columns(), 2, "Number of columns is not 2.");
             compare(get_number_of_headers(), 2, "Number of headers is not 2.");
         }
 
-        function test_header_configuration_equals_column_page_configuration() {
+        function test_number_of_headers_equals_number_of_columns_narrow() {
+            if (root.columns !== 1) {
+                resize_single_column_width();
+            }
+            compare(get_number_of_columns(), 1, "Number of columns is not 1 on narrow screen.");
+            compare(get_number_of_headers(), 1, "Number of headers is not 1 on narrow screen.");
+        }
+
+        function test_header_configuration_equals_column_page_configuration_wide() {
+            if (root.columns !== 2) {
+                skip("Only for wide view.");
+            }
             compare(get_number_of_headers(), 2, "Number of headers is not 2 initially.");
             compare(get_header(0).config, rootPage.head,
                     "First column header is not initialized with primaryPage header config.");
@@ -162,9 +200,33 @@
                     "Second column header is not reverted properly.");
         }
 
+        function test_header_configuration_equals_column_page_configuration_narrow() {
+            if (root.columns !== 1) {
+                resize_single_column_width();
+            }
+            compare(get_number_of_headers(), 1, "Number of headers is not 1.");
+            compare(get_header(0).config, rootPage.head,
+                    "First column header is not initialized with primaryPage header config.");
+
+            multiColumnView.addPageToCurrentColumn(rootPage, leftPage);
+            compare(get_header(0).config, leftPage.head,
+                    "Single column header is not updated properly.");
+            multiColumnView.removePages(leftPage);
+            compare(get_header(0).config, rootPage.head,
+                    "Single column header is not reverted properly.");
+
+            multiColumnView.addPageToNextColumn(rootPage, rightPage);
+            compare(get_header(0).config, rightPage.head,
+                    "Single column header is not updated properly when adding to next column.");
+            multiColumnView.removePages(rightPage);
+            compare(get_header(0).config, rootPage.head,
+                    "Single column header is not reverted properly after adding to next column.");
+        }
+
         function test_header_title_for_external_page() {
             multiColumnView.addPageToNextColumn(rootPage, Qt.resolvedUrl("MyExternalPage.qml"));
-            compare(get_header(1).config.title, "Page from QML file",
+            var n = root.columns === 2 ? 1 : 0
+            compare(get_header(n).config.title, "Page from QML file",
                     "Adding external Page does not update the header title.");
         }
 
@@ -196,5 +258,102 @@
                         " height is not correctly reverted after removing Page with sections.");
             }
         }
+
+        function test_back_button_wide() {
+            if (root.columns !== 2) {
+                skip("Only for wide view.");
+            }
+            // A is the first column, B is the second column.
+            // A:i, B:j = i pages in A, j pages in B.
+
+            // primary page has no back button
+            // A:1, B:0
+            compare(get_back_button_visible(0), false,
+                    "Back button is visible for primary page.");
+            multiColumnView.addPageToCurrentColumn(rootPage, leftPage);
+            // A:2, B:0
+            compare(get_back_button_visible(0), true,
+                    "Adding page 2 to column A does not show back button.");
+
+            multiColumnView.removePages(leftPage);
+            // A:1, B:0
+            compare(get_back_button_visible(0), false,
+                    "Removing page 2 from column A does not hide back button.");
+
+            multiColumnView.addPageToNextColumn(rootPage, rightPage);
+            // A:1, B:1
+            compare(get_back_button_visible(0), false,
+                    "Adding page 1 to column B shows back button in column A.");
+            compare(get_back_button_visible(1), false,
+                    "Adding page 1 to column B shows back button in column B.");
+
+            multiColumnView.addPageToCurrentColumn(rootPage, leftPage);
+            // A:2, B:1
+            compare(get_back_button_visible(0), true,
+                    "Adding page 2 to column A not show back button when column B has a page.");
+            compare(get_back_button_visible(1), false,
+                    "Adding page 2 to column A shows back button in column B.");
+            multiColumnView.removePages(leftPage);
+            // A:1, B:1
+
+            multiColumnView.addPageToCurrentColumn(rightPage, sectionsPage);
+            // A:1, B:2
+            compare(get_back_button_visible(0), false,
+                    "Adding page 2 to column B shows back button in column A.");
+            compare(get_back_button_visible(1), true,
+                    "Adding page 2 to column B does not show back button in column B.");
+
+            multiColumnView.addPageToCurrentColumn(rootPage, leftPage);
+            // A:2, B:2
+            compare(get_back_button_visible(0), true,
+                    "Adding page 2 to column A does not show back button in column A when column B has 2 pages.");
+            compare(get_back_button_visible(1), true,
+                    "Adding page 2 to column A hides back button in column B.");
+
+            multiColumnView.removePages(sectionsPage);
+            // A:2, B:1
+            compare(get_back_button_visible(0), true,
+                    "Removing page 2 from column B hides back button in column A.");
+            compare(get_back_button_visible(1), false,
+                    "Removing page 2 from column B does not hide back button when column A has 2 pages.");
+
+            // A weird case that I encountered with manual testing:
+            multiColumnView.removePages(rootPage);
+            // A:1, B:0
+            multiColumnView.addPageToNextColumn(rootPage, Qt.resolvedUrl("MyExternalPage.qml"));
+            // A:1, B:1
+            multiColumnView.addPageToCurrentColumn(rootPage, leftPage);
+            // A:2, B:1
+            multiColumnView.addPageToNextColumn(rootPage, rightPage);
+            // A:2, B:2
+            multiColumnView.addPageToCurrentColumn(rightPage, sectionsPage);
+            // A:2, B:3
+            compare(get_back_button_visible(0), true,
+                    "No back button on the left with multiple pages per column.");
+            compare(get_back_button_visible(1), true,
+                    "No back button on the right with multiple pages per column.");
+        }
+
+        function test_back_button_narrow() {
+            if (root.columns !== 1) {
+                resize_single_column_width();
+            }
+
+            compare(get_back_button_visible(0), false,
+                    "Back button is visible for primary page.");
+            multiColumnView.addPageToCurrentColumn(rootPage, leftPage);
+            compare(get_back_button_visible(0), true,
+                    "No back button visible with two pages in single column.");
+            multiColumnView.removePages(leftPage);
+            compare(get_back_button_visible(0), false,
+                    "Back button remains visible after removing second page from column.");
+
+            multiColumnView.addPageToNextColumn(rootPage, rightPage);
+            compare(get_back_button_visible(0), true,
+                    "No back button visible after pushing to next column when viewing single column.");
+            multiColumnView.removePages(rightPage);
+            compare(get_back_button_visible(0), false,
+                    "Back button remains visible after removing page from following column.");
+        }
     }
 }

=== modified file 'tests/unit_x11/tst_components/tst_multicolumnview.qml'
--- tests/unit_x11/tst_components/tst_multicolumnview.qml	2015-07-14 09:42:53 +0000
+++ tests/unit_x11/tst_components/tst_multicolumnview.qml	2015-07-20 22:43:59 +0000
@@ -20,12 +20,15 @@
 import Ubuntu.Components 1.3
 
 MainView {
-    id: test
+    id: root
     width: units.gu(120)
     height: units.gu(71)
 
+    // 2 on desktop, 1 on phone.
+    property int columns: width >= units.gu(80) ? 2 : 1
+
     MultiColumnView {
-        id: testView
+        id: mcv
         width: parent.width
         height: parent.height
 
@@ -34,6 +37,18 @@
         Page {
             id: page1
             title: "Page1"
+            Button {
+                anchors.centerIn: parent
+                text: "Page 2 left"
+            }
+
+            Column {
+                width: parent.width
+                Button {
+                    text: "Page 2"
+                    onTriggered: mcv.addPageToCurrentColumn(page1, page2);
+                }
+            }
         }
         Page {
             id: page2
@@ -56,73 +71,93 @@
     UbuntuTestCase {
         when: windowShown
 
+        function resize_single_column() {
+            mcv.width = units.gu(40);
+        }
+
+        // resize to use the full window width
+        function resize_multiple_columns() {
+            mcv.width = root.width;
+        }
+
         function cleanup() {
-//            testView.columns = Qt.binding(function() {
-//                return test.width > units.gu(100) ? 3 : (test.width > units.gu(80) ? 2 : 1);
-//            });
-            testView.width = test.width;
-            testView.height = test.height;
-            // remove allpages
-            testView.removePages(page1);
+            resize_multiple_columns();
+            mcv.removePages(page1);
         }
 
         function test_0_API() {
             compare(defaults.primaryPage, undefined, "primaryPage not undefined by default");
         }
 
-        function test_add_to_first_column_data() {
-            return [
-                {tag: "null sourcePage, fail", sourcePage: null, page: page2, failMsg: "No sourcePage specified. Page will not be added."},
-                {tag: "valid sourcePage, pass", sourcePage: page1, page: page2, failMsg: ""},
-            ]
-        }
-        function test_add_to_first_column(data) {
-            if (data.failMsg != "") {
-                ignoreWarning(data.failMsg);
-            }
-
-            testView.addPageToCurrentColumn(data.sourcePage, data.page);
-            var firstColumn = findChild(testView, "ColumnHolder0");
-            verify(firstColumn);
-            if (data.failMsg != "") {
-                expectFail(data.tag, "Fail");
-            }
-            compare(firstColumn.pageWrapper.object, data.page);
-        }
-
-        function test_add_to_next_column_data() {
-            return [
-                {tag: "null sourcePage, fail", sourcePage: null, page: page2, failMsg: "No sourcePage specified. Page will not be added."},
-                {tag: "valid sourcePage, pass", sourcePage: page1, page: page2, failMsg: ""},
-            ]
-        }
-        function test_add_to_next_column(data) {
-            if (data.failMsg != "") {
-                ignoreWarning(data.failMsg);
-            }
-
-            testView.addPageToNextColumn(data.sourcePage, data.page);
-            var secondColumn = findChild(testView, "ColumnHolder1");
-            verify(secondColumn);
-            if (data.failMsg != "") {
-                expectFail(data.tag, "Fail");
-            }
-            verify(secondColumn.pageWrapper);
-        }
-
-        function test_change_primaryPage() {
+        function test_zzz_change_primaryPage() {
+            // this prints the warning but still changes the primary page,
+            //  so the test must be executed last not to mess up the other tests.
             ignoreWarning("Cannot change primaryPage after completion.");
-            testView.primaryPage = page3;
-        }
-
-        function test_add_to_same_column_when_source_page_not_in_stack() {
-            ignoreWarning("sourcePage must be added to the view to add new page.");
-            testView.addPageToCurrentColumn(page2, page3);
-        }
-
-        function test_add_to_next_column_when_source_page_not_in_stack() {
-            ignoreWarning("sourcePage must be added to the view to add new page.");
-            testView.addPageToNextColumn(page2, page3);
+            mcv.primaryPage = page3;
+        }
+
+        function test_add_page_when_source_page_not_in_stack() {
+            ignoreWarning("sourcePage must be added to the view to add new page.");
+            mcv.addPageToCurrentColumn(page2, page3);
+            ignoreWarning("sourcePage must be added to the view to add new page.");
+            mcv.addPageToNextColumn(page2, page3);
+        }
+
+        function test_add_page_with_null_sourcePage() {
+            ignoreWarning("No sourcePage specified. Page will not be added.")
+            mcv.addPageToCurrentColumn(null, page1);
+            ignoreWarning("No sourcePage specified. Page will not be added.")
+            mcv.addPageToNextColumn(null, page2);
+        }
+
+        function test_add_same_page_twice() {
+            mcv.addPageToCurrentColumn(page1, page2);
+            mcv.addPageToCurrentColumn(page2, page3);
+            ignoreWarning("Cannot add a Page that was already added.");
+            mcv.addPageToCurrentColumn(page3, page2);
+            ignoreWarning("Cannot add a Page that was already added.");
+            mcv.addPageToNextColumn(page3, page2);
+        }
+
+        function test_page_visible() {
+            // Two columns on desktop, one on phone
+            compare(page1.visible, true, "Primary page not initially visible.");
+            compare(page2.visible, false, "Page 2 visible before it was added.");
+            compare(page3.visible, false, "Page 3 visible before it was added.");
+
+            mcv.addPageToCurrentColumn(page1, page2);
+            compare(page1.visible, false, "Page still visible after adding new page in current column.");
+            compare(page2.visible, true, "Page invisible after adding it to current column.");
+            mcv.addPageToNextColumn(page2, page3);
+            if (root.columns === 2) {
+                compare(page2.visible, true, "Page in first column became invisible after adding to next column.");
+            } else { // root.columns === 1
+                compare(page2.visible, false, "Page in single column still visible after adding page to next column.");
+            }
+            compare(page3.visible, true, "Page invisible after adding it to next column.");
+
+            // One column
+            resize_single_column();
+            compare(page3.visible, true, "Top page in last column invisible when resizing to one column.");
+            compare(page2.visible, false, "Top page in first column visible when resizing to one column.");
+
+            mcv.removePages(page3);
+            compare(page3.visible, false, "Page 3 visible after it was removed.");
+            compare(page2.visible, true, "New top page in single column not visible.");
+
+            mcv.removePages(page1);
+            compare(page1.visible, true, "Primary page not visible in single column.");
+            compare(page2.visible, false, "Page 2 visible while it is not added.");
+            mcv.addPageToNextColumn(page1, page4);
+            compare(page1.visible, false, "Page remains visible after adding to next column in single column view.");
+            compare(page4.visible, true, "Page added to next column with single column view is not visible.");
+
+            // Two columns on desktop, one on phone
+            resize_multiple_columns();
+            if (root.columns === 2) {
+                compare(page1.visible, true, "Page in left column did not become visible when switching to multi-column view.");
+                compare(page4.visible, true, "Page in right column became invisible when switching to multi-column view.");
+            }
         }
     }
 }