forked from patternfly/patternfly-react
-
Notifications
You must be signed in to change notification settings - Fork 0
/
notificationdrawergroups.spec.ts
171 lines (158 loc) · 6.33 KB
/
notificationdrawergroups.spec.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
describe('Notification Drawer Groups Demo Test', () => {
it('Navigate to the notification drawer groups demo', () => {
cy.visit('http://localhost:3000/notification-drawer-groups-demo-nav-link');
});
it('Verify svg width and height', () => {
cy.get('.pf-c-button > svg').should('exist');
});
it('Verify text in header title', () => {
cy.get('.pf-c-notification-drawer__header-title').contains('Notifications');
});
it('Verify text in header status', () => {
cy.get('.pf-c-notification-drawer__header-status').contains('4 unread');
});
it('Verify 3 groups exist', () => {
cy.get('.pf-c-notification-drawer__group').then(groups => expect(groups.length).to.equal(3));
});
it('Verify first and last list items are hidden', () => {
cy.get('.pf-c-notification-drawer__list')
.first()
.should('have.attr', 'hidden');
cy.get('.pf-c-notification-drawer__list')
.eq(1)
.should('not.have.attr', 'hidden', false);
cy.get('.pf-c-notification-drawer__list')
.last()
.should('have.attr', 'hidden');
});
it('Verify first item is expanded after click', () => {
cy.get('.pf-c-notification-drawer__group')
.first()
.click();
cy.get('.pf-c-notification-drawer__list').should('not.have.attr', 'hidden');
});
it('Verify list items are hoverable', () => {
cy.get('.pf-c-notification-drawer__list-item')
.first()
.should('have.class', 'pf-m-hoverable');
cy.get('.pf-c-notification-drawer__list-item')
.eq(1)
.should('have.class', 'pf-m-hoverable');
cy.get('.pf-c-notification-drawer__list-item')
.eq(2)
.should('have.class', 'pf-m-hoverable');
cy.get('.pf-c-notification-drawer__list-item')
.last()
.should('have.class', 'pf-m-hoverable');
});
it('Verify list items severities', () => {
cy.get('.pf-c-notification-drawer__list-item')
.first()
.should('have.class', 'pf-m-info');
cy.get('.pf-c-notification-drawer__list-item')
.eq(1)
.should('have.class', 'pf-m-danger');
cy.get('.pf-c-notification-drawer__list-item')
.eq(2)
.should('have.class', 'pf-m-warning');
cy.get('.pf-c-notification-drawer__list-item')
.last()
.should('have.class', 'pf-m-success');
});
it('Verify timestamp in list items', () => {
cy.get('.pf-c-notification-drawer__list-item-timestamp')
.first()
.contains('5 minutes ago');
cy.get('.pf-c-notification-drawer__list-item-timestamp')
.eq(1)
.contains('10 minutes ago');
cy.get('.pf-c-notification-drawer__list-item-timestamp')
.eq(2)
.contains('20 minutes ago');
cy.get('.pf-c-notification-drawer__list-item-timestamp')
.last()
.contains('30 minutes ago');
});
// Accessibility test
it('Verify keyboard events happen correctly', () => {
// Verify the list header toggle button keyboard interactivity opens/closes dropdown menu
// press Enter on toggle button, check whether the dropdown menu exsit and whether it focuses on the first item
// then press Tab on toggle button, check whether the dropdown menu is closed
cy.get('#toggle-id-0').then((toggleButton: JQuery<HTMLButtonElement>) => {
cy.wrap(toggleButton).trigger('keydown', { key: 'Enter' });
cy.get('#notification-0')
.find('.pf-c-dropdown__menu.pf-m-align-right')
.should('exist');
cy.get('#notification-0')
.find('.pf-c-dropdown__menu-item')
.first()
.should('be.focused');
cy.wrap(toggleButton).trigger('keydown', { key: 'Tab' });
cy.get('#notification-0')
.find('.pf-c-dropdown__menu.pf-m-align-right')
.should('not.exist');
});
// Verify the group header keyboard interactivity opens/closes the whole group
// check whether the whole group is expanded, then press Enter on the group header and check whether the whole group is closed
cy.get('.pf-c-notification-drawer__group')
.first()
.should('have.class', 'pf-m-expanded');
cy.get('.pf-c-notification-drawer__group-toggle')
.first()
.trigger('keydown', { key: 'Enter' });
cy.get('.pf-c-notification-drawer__group')
.first()
.should('not.have.class', 'pf-m-expanded');
// Verify the list item header toggle button keyboard interactivity opens/closes dropdown menu
cy.get('#toggle-id-9').then((toggleButton: JQuery<HTMLButtonElement>) => {
cy.wrap(toggleButton).trigger('keydown', { key: 'Enter' });
cy.get('#notification-9')
.find('.pf-c-dropdown__menu.pf-m-align-right')
.should('exist');
cy.get('#notification-9')
.find('.pf-c-dropdown__menu.pf-m-align-right')
.first()
.find('.pf-c-dropdown__menu-item')
.should('be.focused');
cy.wrap(toggleButton).trigger('keydown', { key: 'Tab' });
cy.get('#notification-9')
.find('.pf-c-dropdown__menu.pf-m-align-right')
.should('not.exist');
});
});
it('Verify truncateTitle for group title and no tooltip on short text', () => {
cy.get(
'#short-group-title > h1 > .pf-c-notification-drawer__group-toggle > .pf-c-notification-drawer__group-toggle-title'
).then((noTooltipLink: JQuery<HTMLDivElement>) => {
cy.wrap(noTooltipLink)
.trigger('mouseenter')
.get('.pf-c-tooltip')
.should('not.exist');
cy.wrap(noTooltipLink).trigger('mouseleave');
});
});
it('Verify truncateTitle group title and tooltip', () => {
cy.get(
'#long-group-title > h1 > .pf-c-notification-drawer__group-toggle > .pf-c-notification-drawer__group-toggle-title'
).then((tooltipLink: JQuery<HTMLDivElement>) => {
cy.get('.pf-c-tooltip').should('not.exist');
cy.wrap(tooltipLink)
.trigger('mouseenter')
.get('.pf-c-tooltip')
.should('exist');
cy.wrap(tooltipLink).trigger('mouseleave');
});
});
it('Verify truncated with no truncateTitle prop group title and tooltip on long title', () => {
cy.get(
'#long-title-no-truncate-prop > h1 > .pf-c-notification-drawer__group-toggle > .pf-c-notification-drawer__group-toggle-title'
).then((tooltipLink: JQuery<HTMLDivElement>) => {
cy.get('.pf-c-tooltip').should('not.exist');
cy.wrap(tooltipLink)
.trigger('mouseenter')
.get('.pf-c-tooltip')
.should('exist');
cy.wrap(tooltipLink).trigger('mouseleave');
});
});
});