Skip to content

Commit ee37619

Browse files
weronikaolejniczakweronikaolejniczak
committed
chore(navigation): test suite structure for collapsed mode
1 parent 3f0e038 commit ee37619

File tree

1 file changed

+211
-0
lines changed

1 file changed

+211
-0
lines changed

‎src/core/packages/chrome/navigation/src/__tests__/collapsed_mode.test.tsx‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the "Elastic License
4+
* 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
5+
* Public License v 1"; you may not use this file except in compliance with, at
6+
* your election, the "Elastic License 2.0", the "GNU Affero General Public
7+
* License v3.0 only", or the "Server Side Public License, v 1".
8+
*/
9+
10+
describe('Collapsed mode', () => {
11+
describe('Solution logo', () => {
12+
/**
13+
* GIVEN the side navigation is in collapsed mode
14+
* WHEN the navigation renders the solution logo
15+
* THEN I should not see the solution label
16+
*/
17+
it.todo('should NOT display the solution label next to the logo', () => {});
18+
19+
/**
20+
* GIVEN the side navigation is in collapsed mode
21+
* WHEN I hover over the solution logo
22+
* THEN a tooltip appears with the item label
23+
* AND when I click on the trigger
24+
* AND then I hover out
25+
* THEN the tooltip disappears
26+
*/
27+
it.todo(
28+
'should display a tooltip with the solution label on hover, and hide on hover out',
29+
() => {
30+
// Even after clicking on the trigger which makes the `EuiToolTip` persistent by default
31+
// See: https://eui.elastic.co/docs/components/display/tooltip/
32+
}
33+
);
34+
});
35+
36+
describe('Primary menu', () => {
37+
describe('Primary menu item', () => {
38+
/**
39+
* GIVEN the side navigation is in collapsed mode
40+
* AND a primary menu item has a submenu (has children)
41+
* WHEN I hover over it
42+
* THEN I should see a popover with the submenu
43+
*/
44+
it.todo('(with submenu) should show a popover with the submenu on hover', () => {});
45+
46+
/**
47+
* GIVEN the side navigation is in collapsed mode
48+
* AND a primary menu item with a submenu receives keyboard focus
49+
* THEN I should see a popover with the submenu
50+
*/
51+
it.todo(
52+
'(with submenu) should show a popover when item with submenu receives keyboard focus',
53+
() => {}
54+
);
55+
56+
/**
57+
* GIVEN the side navigation is in collapsed mode
58+
* AND a primary menu item has a submenu (has children)
59+
* WHEN I click on it
60+
* THEN I should be redirected to its href
61+
* AND I should not see a side panel
62+
*/
63+
it.todo(
64+
'(with submenu) should redirect and NOT open side panel when clicking item',
65+
() => {}
66+
);
67+
68+
/**
69+
* GIVEN the side navigation is in collapsed mode
70+
* AND a primary menu item with a submenu has focus
71+
* WHEN I press the Enter key
72+
* THEN focus moves to the first item inside the displayed popover
73+
*/
74+
it.todo('(with submenu) should move focus to first popover item on Enter', () => {});
75+
76+
/**
77+
* GIVEN the side navigation is in collapsed mode
78+
* AND a primary menu item doesn’t have a submenu
79+
* WHEN I hover over it
80+
* THEN I should not see a popover
81+
*/
82+
it.todo('(without submenu) should NOT show a popover on hover', () => {});
83+
84+
/**
85+
* GIVEN the side navigation is in collapsed mode
86+
* AND a primary menu item doesn’t have a submenu
87+
* WHEN I click on it
88+
* THEN I should be redirected to its href
89+
* AND I should not see a side panel
90+
*/
91+
it.todo(
92+
'(without submenu) should redirect without side panel when clicking item without submenu',
93+
() => {}
94+
);
95+
96+
/**
97+
* GIVEN the side navigation is in collapsed mode
98+
* AND a primary menu item without a submenu has focus
99+
* WHEN I press the Enter key
100+
* THEN I should be redirected to its href
101+
*/
102+
it.todo(
103+
'(without submenu) should redirect on Enter when focused item has no submenu',
104+
() => {}
105+
);
106+
107+
/**
108+
* GIVEN the side navigation is in collapsed mode
109+
* WHEN I hover over a primary menu item
110+
* THEN a tooltip appears with the item label
111+
* AND when I click on the trigger
112+
* AND then I hover out
113+
* THEN the tooltip disappears
114+
*/
115+
it.todo(
116+
'should display a tooltip with the solution label on hover, and hide on hover out',
117+
() => {
118+
// Even after clicking on the trigger which makes the `EuiToolTip` persistent by default
119+
// See: https://eui.elastic.co/docs/components/display/tooltip/
120+
}
121+
);
122+
});
123+
124+
describe('More menu', () => {
125+
/**
126+
* GIVEN not all primary menu items fit the menu height
127+
* AND the navigation renders in collapsed mode
128+
* WHEN the navigation renders
129+
* THEN I should see a "More" primary menu item
130+
*/
131+
it.todo('should render the "More" primary menu item when items overflow', () => {});
132+
133+
/**
134+
* GIVEN not all primary menu items fit the menu height
135+
* AND the navigation renders in collapsed mode
136+
* WHEN I hover over the "More" primary menu item
137+
* THEN I should see a popover with secondary menu
138+
*/
139+
it.todo('should show secondary menu popover on hover over "More"', () => {});
140+
141+
/**
142+
* GIVEN not all primary menu items fit the menu height
143+
* AND the navigation renders in collapsed mode
144+
* WHEN I hover over the "More" primary menu item
145+
* AND I click on the arrow next to the item that has a submenu
146+
* THEN the nested panel shows with the submenu
147+
* AND when I click on a submenu item
148+
* THEN the popover should close
149+
* AND I should be redirected to that item’s href
150+
* AND I shouldn’t see a side panel
151+
*/
152+
it.todo(
153+
'should navigate through nested panel and redirect on clicking a submenu item',
154+
() => {}
155+
);
156+
157+
/**
158+
* GIVEN not all primary menu items fit the menu height
159+
* AND the navigation renders in collapsed mode
160+
* WHEN I hover over the "More" primary menu item
161+
* AND I click on the menu item that doesn’t have a submenu
162+
* THEN the popover should close
163+
* AND I should be redirected to that item’s href
164+
* AND I shouldn’t see a side panel
165+
*/
166+
it.todo(
167+
'should close popover, redirect, and NOT open side panel after clicking on an item without submenu from "More"',
168+
() => {}
169+
);
170+
171+
/**
172+
* GIVEN not all primary menu items fit the menu height
173+
* AND the navigation renders in collapsed mode
174+
* AND the initial active item is a submenu item of an item in the "More" menu
175+
* WHEN the navigation renders in collapsed mode
176+
* THEN the "More" primary menu item itself is in an active state
177+
* AND its parent primary menu item is active within the "More" menu popover
178+
* AND there is no side panel
179+
* AND the submenu item is active in its nested panel within the popover
180+
*/
181+
it.todo(
182+
'should have active state and NOT open side panel when initial active submenu item is under "More"',
183+
() => {}
184+
);
185+
});
186+
});
187+
188+
describe('Secondary menu', () => {
189+
describe('Beta badge', () => {
190+
/**
191+
* GIVEN the side navigation is in collapsed mode
192+
* AND a primary menu item is in beta
193+
* WHEN I hover over that item
194+
* THEN a tooltip shows up with the item label
195+
* AND a beta badge with beta icon
196+
*/
197+
it.todo('should show tooltip with label and beta badge on hover', () => {});
198+
});
199+
200+
describe('Tech preview badge', () => {
201+
/**
202+
* GIVEN the side navigation is in collapsed mode
203+
* AND a primary menu item is in tech preview
204+
* WHEN I hover over that item
205+
* THEN a tooltip shows up with the item label
206+
* AND a beta badge with flask icon
207+
*/
208+
it.todo('should show tooltip with label and flask badge on hover', () => {});
209+
});
210+
});
211+
});

0 commit comments

Comments
 (0)