|
| 1 | +import {expect, test} from '@playwright/test' |
| 2 | + |
| 3 | +const ArrowCTAStory = |
| 4 | + 'http://localhost:6006/iframe.html?args=&id=components-card-features--arrow-cta-long-label&viewMode=story' |
| 5 | + |
| 6 | +// eslint-disable-next-line i18n-text/no-en |
| 7 | +test.describe('Card interaction behavior', () => { |
| 8 | + test('keeps the arrow CTA label visible on non-hover devices', async ({context, page}) => { |
| 9 | + const client = await context.newCDPSession(page) |
| 10 | + |
| 11 | + await client.send('Emulation.setTouchEmulationEnabled', {enabled: true, maxTouchPoints: 1}) |
| 12 | + await client.send('Emulation.setEmulatedMedia', { |
| 13 | + features: [ |
| 14 | + {name: 'hover', value: 'none'}, |
| 15 | + {name: 'any-hover', value: 'none'}, |
| 16 | + {name: 'pointer', value: 'coarse'}, |
| 17 | + {name: 'any-pointer', value: 'coarse'}, |
| 18 | + ], |
| 19 | + }) |
| 20 | + await page.setViewportSize({width: 375, height: 812}) |
| 21 | + await page.goto(ArrowCTAStory, {waitUntil: 'networkidle'}) |
| 22 | + |
| 23 | + const action = page.locator('[class*="Card__action--arrowOnly"]').first() |
| 24 | + const label = action.locator('[class*="Card__actionLabel__"]') |
| 25 | + const labelClip = action.locator('[class*="Card__actionLabelClip__"]') |
| 26 | + |
| 27 | + await expect(label).toBeVisible() |
| 28 | + await expect(action).toHaveCSS('column-gap', '8px') |
| 29 | + await expect(label).toHaveCSS('white-space', 'normal') |
| 30 | + await expect(labelClip).toHaveCSS('display', 'contents') |
| 31 | + expect(await page.evaluate(() => window.matchMedia('(hover: none)').matches)).toBe(true) |
| 32 | + }) |
| 33 | + |
| 34 | + test('disables the remaining Card transitions and animations', async ({page}) => { |
| 35 | + await page.goto( |
| 36 | + 'http://localhost:6006/iframe.html?args=&id=components-card-features--with-inline-code-element&viewMode=story', |
| 37 | + {waitUntil: 'networkidle'}, |
| 38 | + ) |
| 39 | + |
| 40 | + const card = page.locator('[class*="Card--disableAnimation"]').first() |
| 41 | + const action = card.locator('[class*="Card__action__"]') |
| 42 | + const arrow = action.locator('[class*="Card--expandableArrow"]') |
| 43 | + |
| 44 | + await card.hover() |
| 45 | + |
| 46 | + await expect(card).toHaveCSS('transition-duration', '0s') |
| 47 | + await expect(action).toHaveCSS('transition-duration', '0s') |
| 48 | + await expect(arrow).toHaveCSS('transition-duration', '0s') |
| 49 | + }) |
| 50 | +}) |
0 commit comments