Differential D27700 Diff 76820 autotests/tst_actiontoolbar.qml

Changeset View

Standalone View

View Options

autotests/tst_actiontoolbar.qml

  • This file was added.
1​/*
2​ * SPDX-FileCopyrightText: 2020 Arjen Hiemstra <ahiemstra@heimr.nl>
3​ *
4​ * SPDX-License-Identifier: LGPL-2.0-or-later
5​ */
6​
7​import QtQuick 2.12
8​import QtQuick.Controls 2.12
9​import QtTest 1.0
10​import org.kde.kirigami 2.11 as Kirigami
11​
12​// TODO: Find a nicer way to handle this
13​import "../src/controls/private" as KirigamiPrivate
14​
15​TestCase {
16​ id: testCase
17​ name: "IconTests"
18​
19​ width: 500
20​ height: 400
21​ visible: true
22​
23​ when: windowShown
24​
25​ // These buttons are required for getting the right metrics.
26​ // Since ActionToolBar bases all sizing on button sizes, we need to be able
27​ // to verify that layouting does the right thing.
28​ property ToolButton iconButton: KirigamiPrivate.PrivateActionToolButton {
29​ display: Button.IconOnly
30​ kirigamiAction: Kirigami.Action { icon.name: "overflow-menu"; text: "Test Action" }
31​ }
32​ property ToolButton textButton: KirigamiPrivate.PrivateActionToolButton {
33​ display: Button.TextOnly
34​ kirigamiAction: Kirigami.Action { icon.name: "overflow-menu"; text: "Test Action" }
35​ }
36​ property ToolButton textIconButton: KirigamiPrivate.PrivateActionToolButton {
37​ kirigamiAction: Kirigami.Action { icon.name: "overflow-menu"; text: "Test Action" }
38​ }
39​
40​ Component {
41​ id: single;
42​ Kirigami.ActionToolBar {
43​ actions: [
44​ Kirigami.Action { icon.name: "overflow-menu"; text: "Test Action" }
45​ ]
46​ }
47​ }
48​
49​ Component {
50​ id: multiple
51​ Kirigami.ActionToolBar {
52​ actions: [
53​ Kirigami.Action { icon.name: "overflow-menu"; text: "Test Action" },
54​ Kirigami.Action { icon.name: "overflow-menu"; text: "Test Action" },
55​ Kirigami.Action { icon.name: "overflow-menu"; text: "Test Action" }
56​ ]
57​ }
58​ }
59​
60​ Component {
61​ id: iconOnly
62​ Kirigami.ActionToolBar {
63​ display: Button.IconOnly
64​ actions: [
65​ Kirigami.Action { icon.name: "overflow-menu"; text: "Test Action" },
66​ Kirigami.Action { icon.name: "overflow-menu"; text: "Test Action" },
67​ Kirigami.Action { icon.name: "overflow-menu"; text: "Test Action" }
68​ ]
69​ }
70​ }
71​
72​ Component {
73​ id: qtActions
74​ Kirigami.ActionToolBar {
75​ actions: [
76​ Action { icon.name: "overflow-menu"; text: "Test Action" },
77​ Action { icon.name: "overflow-menu"; text: "Test Action" },
78​ Action { icon.name: "overflow-menu"; text: "Test Action" }
79​ ]
80​ }
81​ }
82​
83​ function test_layout_data() {
84​ return [
85​ // One action
86​ // Full window width, should just display a toolbutton
87​ { tag: "single_full", component: single, width: testCase.width, expected: testCase.textIconButton.width },
88​ // Small width, should display the overflow button
89​ { tag: "single_min", component: single, width: 50, expected: testCase.iconButton.width },
90​ // Half window width, should display a single toolbutton
91​ { tag: "single_half", component: single, width: testCase.width / 2, expected: testCase.textIconButton.width },
92​ // Multiple actions
93​ // Full window width, should display as many buttons as there are actions
94​ { tag: "multi_full", component: multiple, width: testCase.width,
95​ expected: testCase.textIconButton.width * 3 + Kirigami.Units.smallSpacing * 2 },
96​ // Small width, should display just the overflow button
97​ { tag: "multi_min", component: multiple, width: 50, expected: testCase.iconButton.width },
98​ // Half window width, should display one action and overflow button
99​ { tag: "multi_half", component: multiple, width: testCase.width / 2,
100​ expected: testCase.textIconButton.width + testCase.iconButton.width },
101​ // Multiple actions, display set to icon only
102​ // Full window width, should display as many icon-only buttons as there are actions
103​ { tag: "icon_full", component: iconOnly, width: testCase.width,
104​ expected: testCase.iconButton.width * 3 + Kirigami.Units.smallSpacing * 2 },
105​ // Small width, should display just the overflow button
106​ { tag: "icon_min", component: iconOnly, width: 50, expected: testCase.iconButton.width },
107​ // Quarter window width, should display one icon-only button and the overflow button
108​ { tag: "icon_quarter", component: iconOnly, width: testCase.width / 4,
109​ expected: testCase.iconButton.width * 2 },
110​ // QtQuick Controls actions
111​ // Full window width, should display as many buttons as there are actions
112​ { tag: "qt_full", component: qtActions, width: testCase.width,
113​ expected: testCase.textIconButton.width * 3 + Kirigami.Units.smallSpacing * 2 },
114​ // Small width, should display just the overflow button
115​ { tag: "qt_min", component: qtActions, width: 50, expected: testCase.iconButton.width },
116​ // Half window width, should display one action and overflow button
117​ { tag: "qt_half", component: qtActions, width: testCase.width / 2,
118​ expected: testCase.textIconButton.width + testCase.iconButton.width }
119​ ]
120​ }
121​
122​ // Test layouting of ActionToolBar
123​ //
124​ // ActionToolBar has some pretty complex behaviour, which generally boils down to it trying
125​ // to fit as many visible actions as possible and placing the hidden ones in an overflow menu.
126​ // This test, along with the data above, verifies that that this behaviour is correct.
127​ function test_layout(data) {
128​ var toolbar = createTemporaryObject(data.component, testCase)
129​
130​ verify(toolbar)
131​ verify(waitForRendering(toolbar))
132​
133​ toolbar.width = data.width
134​ waitForRendering(toolbar) // Allow events to propagate so toolbar can resize properly
135​ compare(toolbar.implicitWidth, data.expected)
136​ }
137​}