Skip to content

Commit

Permalink
Merge branch 'main' into chore/card-rename-ailabel-to-decorator
Browse files Browse the repository at this point in the history
  • Loading branch information
@sangeethababu9223
sangeethababu9223 authored Dec 3, 2024
2 parents c2f23fb + b2298b5 commit bc7ccd3
Show file tree
Hide file tree
Showing 2 changed files with 193 additions and 1 deletion.
133 changes: 133 additions & 0 deletions e2e/components/ExpressiveCard/ExpressiveCard-test.avt.e2e.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@

import { expect, test } from '@playwright/test';
import { visitStory } from '../../test-utils/storybook';
import { pkg } from '../../../packages/ibm-products/src/settings';

test.describe('ExpressiveCard @avt', () => {
test('@avt-default-state', async ({ page }) => {
Expand All @@ -22,5 +23,137 @@ test.describe('ExpressiveCard @avt', () => {
await expect(page).toHaveNoACViolations(
'ExpressiveCard @avt-default-state'
);
const buttonEle = page.getByText('Read more');
// Pressing 'Tab' key to focus on the "Read more" button
await page.keyboard.press('Tab');
await expect(buttonEle).toBeFocused();
});

test('@avt-label-only-state', async ({ page }) => {
await visitStory(page, {
component: 'ExpressiveCard',
id: 'ibm-products-components-cards-expressivecard--label-only',
globals: {
carbonTheme: 'white',
},
});
await expect(page).toHaveNoACViolations(
'ExpressiveCard @avt-label-only-state'
);
});
test('@avt-with-caption-state', async ({ page }) => {
await visitStory(page, {
component: 'ExpressiveCard',
id: 'ibm-products-components-cards-expressivecard--with-caption',
globals: {
carbonTheme: 'white',
},
});
await expect(page).toHaveNoACViolations(
'ExpressiveCard @avt-with-caption-state'
);
});
test('@avt-with-media-state', async ({ page }) => {
await visitStory(page, {
component: 'ExpressiveCard',
id: 'ibm-products-components-cards-expressivecard--with-media',
globals: {
carbonTheme: 'white',
},
});
await expect(page).toHaveNoACViolations(
'ExpressiveCard @avt-with-media-state'
);
});
test('@avt-with-action-icon-href-state', async ({ page }) => {
await visitStory(page, {
component: 'ExpressiveCard',
id: 'ibm-products-components-cards-expressivecard--with-action-icon-href',
globals: {
carbonTheme: 'white',
},
});
await expect(page).toHaveNoACViolations(
'ExpressiveCard @avt-with-action-icon-href-state'
);

const hrefEle = page.locator('a[href="#"]');
// Pressing 'Tab' key to focus on the '->' href button
await page.keyboard.press('Tab');
await expect(hrefEle).toBeFocused();
});
test('@avt-with-pictogram-state', async ({ page }) => {
await visitStory(page, {
component: 'ExpressiveCard',
id: 'ibm-products-components-cards-expressivecard--with-pictogram',
globals: {
carbonTheme: 'white',
},
});
await expect(page).toHaveNoACViolations(
'ExpressiveCard @avt-with-pictogram-state'
);
});
test('@avt-with-secondary-action-state', async ({ page }) => {
await visitStory(page, {
component: 'ExpressiveCard',
id: 'ibm-products-components-cards-expressivecard--with-secondary-action',
globals: {
carbonTheme: 'white',
},
});
await expect(page).toHaveNoACViolations(
'ExpressiveCard @avt-with-secondary-action-state'
);
const primaryButtonEle = page.getByText('Remove');
const secondaryButtonEle = page.getByText('Read more');
// Pressing 'Tab' key to focus on the "Remove" button
await page.keyboard.press('Tab');
await expect(primaryButtonEle).toBeFocused();
// Pressing 'Tab' key to focus on the "Read more" button
await page.keyboard.press('Tab');
await expect(secondaryButtonEle).toBeFocused();
});
test('@avt-clickable-state', async ({ page }) => {
await visitStory(page, {
component: 'ExpressiveCard',
id: 'ibm-products-components-cards-expressivecard--clickable',
globals: {
carbonTheme: 'white',
},
});
await expect(page).toHaveNoACViolations(
'ExpressiveCard @avt-clickable-state'
);
const cardElement = page.locator(
`[data-carbon-devtools-id="${pkg.prefix}--ExpressiveCard"]`
);
// Pressing 'Tab' key to focus on the clickable card
await page.keyboard.press('Tab');
await expect(cardElement).toBeFocused();
});
test('@avt-with-button-href-state', async ({ page }) => {
await visitStory(page, {
component: 'ExpressiveCard',
id: 'ibm-products-components-cards-expressivecard--with-button-href',
globals: {
carbonTheme: 'white',
},
});
await expect(page).toHaveNoACViolations(
'ExpressiveCard @avt-with-button-href-state'
);
});
test('@avt-with-button-icon-state', async ({ page }) => {
await visitStory(page, {
component: 'ExpressiveCard',
id: 'ibm-products-components-cards-expressivecard--with-button-icon',
globals: {
carbonTheme: 'white',
},
});
await expect(page).toHaveNoACViolations(
'ExpressiveCard @avt-with-button-icon-state'
);
});
});
61 changes: 60 additions & 1 deletion packages/ibm-products/src/components/Carousel/Carousel.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/

import React from 'react';
import { render, screen } from '@testing-library/react'; // https://testing-library.com/docs/react-testing-library/intro
import { fireEvent, render, screen, waitFor } from '@testing-library/react'; // https://testing-library.com/docs/react-testing-library/intro

import { pkg } from '../../settings';
import uuidv4 from '../../global/js/utils/uuidv4';
Expand Down Expand Up @@ -78,4 +78,63 @@ describe(componentName, () => {
componentName
);
});

it('calls the onScroll prop and returns value from 0 to 1', async () => {
const onScroll = jest.fn().mockReturnValue(0.2);
render(
<Carousel
data-testid={dataTestId}
// eslint-disable-next-line
style={{ width: '10px', height: '20px' }} // we need to set width and height here to trigger scrollbars
onScroll={onScroll}
>
Very long paragraph to trigger scrolling.
</Carousel>
);

const element = screen.getByTestId(dataTestId);
expect(element).not.toBeNull();

await waitFor(() =>
fireEvent.scroll(element, { target: { scrollX: '20px' } })
);
expect(onScroll).toHaveBeenCalled();
expect(onScroll()).toBe(0.2);
});

it('resets the scroll when the window size changes', async () => {
const onScroll = jest.fn().mockReturnValue(0.2);

render(
<Carousel
data-testid={dataTestId}
// eslint-disable-next-line
style={{ width: '10px', height: '20px' }} // we need to set width and height here to trigger scrollbars
onScroll={onScroll}
>
Very long paragraph to trigger scrolling.
</Carousel>
);

const element = screen.getByTestId(dataTestId);
expect(onScroll).toHaveBeenCalledTimes(0);
expect(element.scrollLeft).toBe(0);

const scrollXAmount = 20;
await waitFor(() =>
fireEvent.scroll(element, { target: { scrollX: scrollXAmount } })
);
element.scrollLeft = scrollXAmount;
expect(element.scrollLeft).toBe(scrollXAmount);

// Change the viewport to 500px.
global.innerWidth = 500;

// Trigger the window resize event.
global.dispatchEvent(new Event('resize'));

expect(onScroll).toHaveBeenCalled();
element.scrollLeft = 0;
expect(element.scrollLeft).toBe(0);
});
});

0 comments on commit bc7ccd3

Please sign in to comment.