kirigami/autotests/tst_actiontoolbar.qml

0001 /*
0002  *  SPDX-FileCopyrightText: 2020 Arjen Hiemstra <ahiemstra@heimr.nl>
0003  *
0004  *  SPDX-License-Identifier: LGPL-2.0-or-later
0005  */
0006
0007 import QtQuick 2.12
0008 import QtQuick.Controls 2.12
0009 import QtTest 1.0
0010 import org.kde.kirigami 2.14 as Kirigami
0011
0012 // TODO: Find a nicer way to handle this
0013 import "../src/controls/private" as KirigamiPrivate
0014
0015 TestCase {
0016     id: testCase
0017     name: "ActionToolBarTest"
0018
0019     width: 800
0020     height: 400
0021     visible: true
0022
0023     when: windowShown
0024
0025     // These buttons are required for getting the right metrics.
0026     // Since ActionToolBar bases all sizing on button sizes, we need to be able
0027     // to verify that layouting does the right thing.
0028     property ToolButton iconButton: KirigamiPrivate.PrivateActionToolButton {
0029         display: Button.IconOnly
0030         action: Kirigami.Action { icon.name: "document-new"; text: "Test Action" }
0031         font.pointSize: 10
0032     }
0033     property ToolButton textButton: KirigamiPrivate.PrivateActionToolButton {
0034         display: Button.TextOnly
0035         action: Kirigami.Action { icon.name: "document-new"; text: "Test Action" }
0036         font.pointSize: 10
0037     }
0038     property ToolButton textIconButton: KirigamiPrivate.PrivateActionToolButton {
0039         action: Kirigami.Action { icon.name: "document-new"; text: "Test Action" }
0040         font.pointSize: 10
0041     }
0042     property TextField textField: TextField { font.pointSize: 10 }
0043
0044     Component {
0045         id: single;
0046         Kirigami.ActionToolBar {
0047             font.pointSize: 10
0048             actions: [
0049                 Kirigami.Action { icon.name: "document-new"; text: "Test Action" }
0050             ]
0051         }
0052     }
0053
0054     Component {
0055         id: multiple
0056         Kirigami.ActionToolBar {
0057             font.pointSize: 10
0058             actions: [
0059                 Kirigami.Action { icon.name: "document-new"; text: "Test Action" },
0060                 Kirigami.Action { icon.name: "document-new"; text: "Test Action" },
0061                 Kirigami.Action { icon.name: "document-new"; text: "Test Action" }
0062             ]
0063         }
0064     }
0065
0066     Component {
0067         id: iconOnly
0068         Kirigami.ActionToolBar {
0069             display: Button.IconOnly
0070             font.pointSize: 10
0071             actions: [
0072                 Kirigami.Action { icon.name: "document-new"; text: "Test Action" },
0073                 Kirigami.Action { icon.name: "document-new"; text: "Test Action" },
0074                 Kirigami.Action { icon.name: "document-new"; text: "Test Action" }
0075             ]
0076         }
0077     }
0078
0079     Component {
0080         id: qtActions
0081         Kirigami.ActionToolBar {
0082             font.pointSize: 10
0083             actions: [
0084                 Action { icon.name: "document-new"; text: "Test Action" },
0085                 Action { icon.name: "document-new"; text: "Test Action" },
0086                 Action { icon.name: "document-new"; text: "Test Action" }
0087             ]
0088         }
0089     }
0090
0091     Component {
0092         id: mixed
0093         Kirigami.ActionToolBar {
0094             font.pointSize: 10
0095             actions: [
0096                 Kirigami.Action { icon.name: "document-new"; text: "Test Action"; displayHint: Kirigami.DisplayHint.IconOnly },
0097                 Kirigami.Action { icon.name: "document-new"; text: "Test Action" },
0098                 Kirigami.Action { icon.name: "document-new"; text: "Test Action"; displayComponent: TextField { } },
0099                 Kirigami.Action { icon.name: "document-new"; text: "Test Action"; displayHint: Kirigami.DisplayHint.AlwaysHide },
0100                 Kirigami.Action { icon.name: "document-new"; text: "Test Action"; displayHint: Kirigami.DisplayHint.KeepVisible }
0101             ]
0102         }
0103     }
0104
0105     function test_layout_data() {
0106         return [
0107             // One action
0108             // Full window width, should just display a toolbutton
0109             { tag: "single_full", component: single, width: testCase.width, expected: testCase.textIconButton.width },
0110             // Small width, should display the overflow button
0111             { tag: "single_min", component: single, width: 50, expected: testCase.iconButton.width },
0112             // Half window width, should display a single toolbutton
0113             { tag: "single_half", component: single, width: testCase.width / 2, expected: testCase.textIconButton.width },
0114             // Multiple actions
0115             // Full window width, should display as many buttons as there are actions
0116             { tag: "multi_full", component: multiple, width: testCase.width,
0117                 expected: testCase.textIconButton.width * 3 + Kirigami.Units.smallSpacing * 2 },
0118             // Small width, should display just the overflow button
0119             { tag: "multi_min", component: multiple, width: 50, expected: testCase.iconButton.width },
0120             // Half window width, should display one action and overflow button
0121             { tag: "multi_small", component: multiple,
0122                 width: testCase.textIconButton.width * 2 + testCase.iconButton.width + Kirigami.Units.smallSpacing * 3,
0123                 expected: testCase.textIconButton.width * 2 + testCase.iconButton.width + Kirigami.Units.smallSpacing * 2 },
0124             // Multiple actions, display set to icon only
0125             // Full window width, should display as many icon-only buttons as there are actions
0126             { tag: "icon_full", component: iconOnly, width: testCase.width,
0127                 expected: testCase.iconButton.width * 3 + Kirigami.Units.smallSpacing * 2 },
0128             // Small width, should display just the overflow button
0129             { tag: "icon_min", component: iconOnly, width: 50, expected: testCase.iconButton.width },
0130             // Quarter window width, should display one icon-only button and the overflow button
0131             { tag: "icon_small", component: iconOnly, width: testCase.iconButton.width * 4,
0132                 expected: testCase.iconButton.width * 3 + Kirigami.Units.smallSpacing * 2 },
0133             // QtQuick Controls actions
0134             // Full window width, should display as many buttons as there are actions
0135             { tag: "qt_full", component: qtActions, width: testCase.width,
0136                 expected: testCase.textIconButton.width * 3 + Kirigami.Units.smallSpacing * 2 },
0137             // Small width, should display just the overflow button
0138             { tag: "qt_min", component: qtActions, width: 50, expected: testCase.iconButton.width },
0139             // Half window width, should display one action and overflow button
0140             { tag: "qt_small", component: qtActions,
0141                 width: testCase.textIconButton.width * 2 + testCase.iconButton.width + Kirigami.Units.smallSpacing * 3,
0142                 expected: testCase.textIconButton.width * 2 + testCase.iconButton.width + Kirigami.Units.smallSpacing * 2 },
0143             // Mix of different display hints, displayComponent and normal actions.
0144             // Full window width, should display everything, but one action is collapsed to icon
0145             { tag: "mixed", component: mixed, width: testCase.width,
0146                 expected: testCase.textIconButton.width * 2 + testCase.iconButton.width * 2 + testCase.textField.width + Kirigami.Units.smallSpacing * 4 }
0147         ]
0148     }
0149
0150     // Test layouting of ActionToolBar
0151     //
0152     // ActionToolBar has some pretty complex behaviour, which generally boils down to it trying
0153     // to fit as many visible actions as possible and placing the hidden ones in an overflow menu.
0154     // This test, along with the data above, verifies that that this behaviour is correct.
0155     function test_layout(data) {
0156         var toolbar = createTemporaryObject(data.component, testCase, {width: data.width})
0157
0158         verify(toolbar)
0159         verify(waitForRendering(toolbar))
0160
0161         while (toolbar.visibleWidth == 0) {
0162             // The toolbar creates its delegates asynchronously during "idle
0163             // time", this means we need to wait for a bit so the toolbar has
0164             // the time to do that. As long as it has not finished creation, the
0165             // toolbar will have a visibleWidth of 0, so we can use that to
0166             // determine when it is done.
0167             wait(50)
0168         }
0169
0170         compare(toolbar.visibleWidth, data.expected)
0171     }
0172 }