Skip to content

Commit 1ba865e

Browse files
tlabajtlabaj
committed
update cypress tests
1 parent 87e94b7 commit 1ba865e

2 files changed

Lines changed: 119 additions & 72 deletions

File tree

‎packages/react-integration/cypress/integration/drawer.spec.ts‎

Lines changed: 85 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,68 @@
1+
const visitDrawerDemoWithGlassTheme = () => {
2+
cy.visit('http://localhost:3000/drawer-demo-nav-link');
3+
cy.viewport(1280, 800);
4+
cy.document().then((doc) => {
5+
doc.documentElement.classList.add('pf-v6-theme-glass');
6+
});
7+
cy.get('html').should('have.class', 'pf-v6-theme-glass');
8+
};
9+
10+
const assertGlassPlainPanel = (testId: string, headlineSnippet: string) => {
11+
cy.get(`[data-testid="${testId}"]`).should(($el) => {
12+
expect($el, testId).to.have.length(1);
13+
expect($el).to.not.have.attr('hidden');
14+
expect($el).to.not.have.attr('inert');
15+
expect($el).to.have.class('pf-m-glass');
16+
expect($el).to.have.class('pf-m-plain');
17+
expect($el).to.have.class('pf-m-no-plain-on-glass');
18+
expect($el).to.contain.text(headlineSnippet);
19+
});
20+
21+
cy.get(`[data-testid="${testId}"]`).should(($el) => {
22+
const style = window.getComputedStyle($el[0]);
23+
const bg = style.backgroundColor;
24+
const backdrop = style.backdropFilter;
25+
26+
const rgbaCommaAlpha = (color: string): number | undefined => {
27+
if (color === 'transparent') {
28+
return 0;
29+
}
30+
if (!color.startsWith('rgba(') || !color.endsWith(')')) {
31+
return undefined;
32+
}
33+
const inner = color.slice('rgba('.length, -1);
34+
const parts = inner.split(',').map((p) => p.trim());
35+
if (parts.length !== 4) {
36+
return undefined;
37+
}
38+
return parseFloat(parts[3]);
39+
};
40+
41+
const rgbSlashAlpha = (color: string): number | undefined => {
42+
if (!color.startsWith('rgb(')) {
43+
return undefined;
44+
}
45+
const slash = color.indexOf('/');
46+
const close = color.lastIndexOf(')');
47+
if (slash === -1 || close === -1 || slash >= close) {
48+
return undefined;
49+
}
50+
const a = parseFloat(color.slice(slash + 1, close).trim());
51+
return Number.isNaN(a) ? undefined : a;
52+
};
53+
54+
const alpha = rgbaCommaAlpha(bg) ?? rgbSlashAlpha(bg);
55+
const hasSemiTransparentBackground = alpha !== undefined && alpha < 1;
56+
const hasBackdropBlur = Boolean(backdrop && backdrop !== 'none');
57+
58+
if (!hasSemiTransparentBackground && !hasBackdropBlur) {
59+
throw new Error(
60+
`expected glass panel (semi-transparent background or backdrop-filter); got backgroundColor=${bg}, backdropFilter=${backdrop || ''}`
61+
);
62+
}
63+
});
64+
};
65+
166
describe('Drawer Demo Test', () => {
267
afterEach(() => {
368
cy.document().then((doc) => {
@@ -9,72 +74,30 @@ describe('Drawer Demo Test', () => {
974
cy.visit('http://localhost:3000/drawer-demo-nav-link');
1075
});
1176

12-
it('glass theme + plain + glass: panel shows glass treatment (transparent bg and/or backdrop-filter)', () => {
13-
// Self-contained: do not rely on test order; other specs leave the page in various states.
14-
cy.visit('http://localhost:3000/drawer-demo-nav-link');
15-
cy.viewport(1280, 800);
77+
it('glass theme + isInline drawer + plain/glass: panel shows glass treatment (transparent bg and/or backdrop-filter)', () => {
78+
visitDrawerDemoWithGlassTheme();
1679

17-
cy.document().then((doc) => {
18-
doc.documentElement.classList.add('pf-v6-theme-glass');
19-
});
20-
cy.get('html').should('have.class', 'pf-v6-theme-glass');
21-
22-
cy.get('#drawer-glass-plain-combo.pf-v6-c-drawer').should('have.class', 'pf-m-expanded');
23-
24-
cy.get('[data-testid="drawer-glass-plain-panel"]').should(($el) => {
25-
expect($el, 'glass plain combo panel').to.have.length(1);
26-
expect($el).to.not.have.attr('hidden');
27-
expect($el).to.not.have.attr('inert');
28-
expect($el).to.have.class('pf-m-glass');
29-
expect($el).to.have.class('pf-m-plain');
30-
expect($el).to.have.class('pf-m-no-plain-on-glass');
31-
expect($el).to.contain.text('Glass theme plain / no-plain-on-glass combo');
80+
cy.get('#drawer-glass-plain-inline.pf-v6-c-drawer').should(($drawer) => {
81+
expect($drawer).to.have.length(1);
82+
expect($drawer).to.have.class('pf-m-expanded');
83+
expect($drawer).to.have.class('pf-m-inline');
84+
expect($drawer).to.not.have.class('pf-m-static');
3285
});
3386

34-
cy.get('[data-testid="drawer-glass-plain-panel"]').should(($el) => {
35-
const style = window.getComputedStyle($el[0]);
36-
const bg = style.backgroundColor;
37-
const backdrop = style.backdropFilter;
38-
39-
const rgbaCommaAlpha = (color: string): number | undefined => {
40-
if (color === 'transparent') {
41-
return 0;
42-
}
43-
if (!color.startsWith('rgba(') || !color.endsWith(')')) {
44-
return undefined;
45-
}
46-
const inner = color.slice('rgba('.length, -1);
47-
const parts = inner.split(',').map((p) => p.trim());
48-
if (parts.length !== 4) {
49-
return undefined;
50-
}
51-
return parseFloat(parts[3]);
52-
};
53-
54-
// e.g. rgb(255 255 255 / 0.08) from getComputedStyle in some engines
55-
const rgbSlashAlpha = (color: string): number | undefined => {
56-
if (!color.startsWith('rgb(')) {
57-
return undefined;
58-
}
59-
const slash = color.indexOf('/');
60-
const close = color.lastIndexOf(')');
61-
if (slash === -1 || close === -1 || slash >= close) {
62-
return undefined;
63-
}
64-
const a = parseFloat(color.slice(slash + 1, close).trim());
65-
return Number.isNaN(a) ? undefined : a;
66-
};
67-
68-
const alpha = rgbaCommaAlpha(bg) ?? rgbSlashAlpha(bg);
69-
const hasSemiTransparentBackground = alpha !== undefined && alpha < 1;
70-
const hasBackdropBlur = Boolean(backdrop && backdrop !== 'none');
71-
72-
if (!hasSemiTransparentBackground && !hasBackdropBlur) {
73-
throw new Error(
74-
`expected glass panel (semi-transparent background or backdrop-filter); got backgroundColor=${bg}, backdropFilter=${backdrop || ''}`
75-
);
76-
}
87+
assertGlassPlainPanel('drawer-glass-plain-panel-inline', 'Glass theme plain / no-plain-on-glass combo (inline)');
88+
});
89+
90+
it('glass theme + isStatic drawer + plain/glass: panel shows glass treatment (transparent bg and/or backdrop-filter)', () => {
91+
visitDrawerDemoWithGlassTheme();
92+
93+
cy.get('#drawer-glass-plain-static.pf-v6-c-drawer').should(($drawer) => {
94+
expect($drawer).to.have.length(1);
95+
expect($drawer).to.have.class('pf-m-expanded');
96+
expect($drawer).to.have.class('pf-m-static');
97+
expect($drawer).to.not.have.class('pf-m-inline');
7798
});
99+
100+
assertGlassPlainPanel('drawer-glass-plain-panel-static', 'Glass theme plain / no-plain-on-glass combo (static)');
78101
});
79102

80103
it('Verify focus is automatically handled with focus trap enabled', () => {

‎packages/react-integration/demo-app-ts/src/components/demos/DrawerDemo/DrawerDemo.tsx‎

Lines changed: 34 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -118,16 +118,30 @@ export class DrawerDemo extends Component<DrawerProps, DrawerDemoState> {
118118
const drawerContent =
119119
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';
120120

121-
const glassThemePlainComboPanelContent = (
121+
const glassThemePlainInlinePanelContent = (
122122
<DrawerPanelContent
123-
id="drawer-panel-glass-plain-combo"
124-
data-testid="drawer-glass-plain-panel"
123+
id="drawer-panel-glass-plain-inline"
124+
data-testid="drawer-glass-plain-panel-inline"
125125
isPlain
126126
isNoPlainOnGlass
127127
isGlass
128128
>
129129
<DrawerHead>
130-
<span>Glass theme plain / no-plain-on-glass combo</span>
130+
<span>Glass theme plain / no-plain-on-glass combo (inline)</span>
131+
</DrawerHead>
132+
</DrawerPanelContent>
133+
);
134+
135+
const glassThemePlainStaticPanelContent = (
136+
<DrawerPanelContent
137+
id="drawer-panel-glass-plain-static"
138+
data-testid="drawer-glass-plain-panel-static"
139+
isPlain
140+
isNoPlainOnGlass
141+
isGlass
142+
>
143+
<DrawerHead>
144+
<span>Glass theme plain / no-plain-on-glass combo (static)</span>
131145
</DrawerHead>
132146
</DrawerPanelContent>
133147
);
@@ -165,19 +179,29 @@ export class DrawerDemo extends Component<DrawerProps, DrawerDemoState> {
165179
<DrawerContentBody>{drawerContent}</DrawerContentBody>
166180
</DrawerContent>
167181
</Drawer>
168-
<div id="drawer-glass-plain-combo-container">
182+
<div id="drawer-glass-plain-demos">
169183
{/*
170-
isStatic: panel must not use the collapsed `hidden` / inert path — Cypress be.visible fails on a hidden panel.
171-
isExpanded: keeps pf-m-expanded on the drawer root for layout.
184+
Split drawers so integration tests cover isInline and isStatic separately.
185+
isExpanded keeps pf-m-expanded; inline uses pf-m-inline only; static uses pf-m-static only.
172186
*/}
173187
<Drawer
174-
id="drawer-glass-plain-combo"
188+
id="drawer-glass-plain-inline"
189+
isExpanded={true}
190+
isInline={true}
191+
style={{ minHeight: '120px', height: '120px' }}
192+
>
193+
<DrawerContent colorVariant={DrawerColorVariant.default} panelContent={glassThemePlainInlinePanelContent}>
194+
<DrawerContentBody>Glass theme + isPlain + isGlass (inline)</DrawerContentBody>
195+
</DrawerContent>
196+
</Drawer>
197+
<Drawer
198+
id="drawer-glass-plain-static"
175199
isExpanded={true}
176200
isStatic={true}
177201
style={{ minHeight: '120px', height: '120px' }}
178202
>
179-
<DrawerContent colorVariant={DrawerColorVariant.default} panelContent={glassThemePlainComboPanelContent}>
180-
<DrawerContentBody>Glass theme + isPlain + isNoPlainOnGlass + isGlass demo</DrawerContentBody>
203+
<DrawerContent colorVariant={DrawerColorVariant.default} panelContent={glassThemePlainStaticPanelContent}>
204+
<DrawerContentBody>Glass theme + isPlain + isGlass (static)</DrawerContentBody>
181205
</DrawerContent>
182206
</Drawer>
183207
</div>

0 commit comments

Comments
 (0)