Skip to content

Commit

Permalink
chore(SLB-508): adjusting all the block tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@elistone
elistone committed Dec 12, 2024
1 parent 6287f4e commit 98acbc1
Showing 1 changed file with 280 additions and 65 deletions.
345 changes: 280 additions & 65 deletions tests/e2e/specs/drupal/blocks.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,295 @@
import { expect, test } from '@playwright/test';
import { expect, Page, test } from '@playwright/test';

import { websiteUrl } from '../../helpers/url';

test('All blocks are rendered', async ({ page }) => {
await page.goto(websiteUrl('/en/blocks-complete'));

// Hero
await expect(
page.locator('img[data-test-id=hero-image][alt="A beautiful landscape."]'),
).toHaveCount(1);
const validateTileAndSubtitle = async (page: Page, title: string) => {
const content = page.getByRole('main');
await expect(
page.locator('h1:text("All kinds of blocks with maximum data")'),
).toHaveCount(1);
await expect(page.locator('text="Lead text"')).toHaveCount(1);
content.getByRole('heading', {
name: title,
level: 1,
}),
).toBeVisible();
await expect(content.getByText(title).last()).toBeVisible();
};

// Paragraph
await expect(
page.locator('p:text("A standalone paragraph with markup and link")'),
).toHaveCount(1);
await expect(
page.locator('a:text("link")[href="/en/architecture"]'),
).toHaveCount(1);
test.describe('Testing All Blocks', () => {
test('Accordion', async ({ page }) => {
await page.goto(websiteUrl('/en/block-accordion'));
await validateTileAndSubtitle(page, 'Block: Accordion');

// Horizontal separator.
await expect(page.locator('hr')).toHaveCount(1);
const accordionItems = [
{
title: 'Accordion Title One',
content: 'I am the content for title one.',
hasIcon: true,
},
{
title: 'Accordion Title Two',
content: 'I am the content for title two.',
hasIcon: true,
},
{
title: 'Accordion Title Three',
content: 'I am the content for title three.',
hasIcon: true,
},
{
title: 'Accordion Title Four',
content: 'I am the content for title four.',
hasIcon: false,
},
];

// Image and ImageWithText block
await expect(
page.locator(
'img:not([data-test-id=hero-image])[alt="A beautiful landscape."]',
),
).toHaveCount(2);
await expect(page.locator('figcaption:text("Media image")')).toHaveCount(1);
const content = page.getByRole('main');
for (const item of accordionItems) {
await expect(content.getByText(item.title)).toBeVisible();
await content.getByText(item.title).click();
await expect(content.getByText(item.content)).toBeVisible();
}
});

// Video
await expect(
page.locator('video[src*="/video_mp4_belt.mp4"][controls]'),
).toHaveCount(1);
await expect(page.locator('figcaption:text("Media video")')).toHaveCount(1);
test('Conditional content', async ({ page }) => {
await page.goto(websiteUrl('/en/block-conditional-content'));
await validateTileAndSubtitle(page, 'Block: Conditional content');

// Table
await expect(page.locator('figure.wp-block-table > table')).toHaveCount(1);
await expect(
page.locator('figure.wp-block-table > figcaption:text("Table caption")'),
).toHaveCount(1);
await expect(
page.getByText('This content will only be shown for one year.'),
).toBeVisible();
});

// List
await expect(page.locator('ul > li:text("list 1")')).toHaveCount(1);
await expect(page.locator('ol > li:text("list 2.2")')).toHaveCount(1);
test('CTA', async ({ page }) => {
await page.goto(websiteUrl('/en/block-cta'));
await validateTileAndSubtitle(page, 'Block: CTA');

// Heading
await expect(page.locator('h3:text("Heading 3")')).toHaveCount(1);
// CTA blocks
await expect(page.locator('a:text("Block CTA")')).toHaveCount(1);
await expect(page.locator('a:text("CTA with Icon")')).toHaveCount(1);
});

// Quote
await expect(
page.locator(
'blockquote p:text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis nisi nec neque porta, a ornare ligula efficitur.")',
),
).toHaveCount(1);
await expect(
page.locator('blockquote p.not-prose:text("John Doe")'),
).toHaveCount(1);
await expect(
page.locator('blockquote p.not-prose span:text("Project manager")'),
).toHaveCount(1);
await expect(
page.locator('blockquote img[alt="The silverback"]'),
).toHaveCount(1);
test('Form', async ({ page }) => {
// EN
await page.goto(websiteUrl('/en/block-form'));
await validateTileAndSubtitle(page, 'Block: Form');
await expect(
page.locator('.silverback-iframe iframe').first(),
).toHaveAttribute('src', /en\/form\/contact\?iframe=true/);

// CTA blocks
await expect(page.locator('a:text("Internal CTA")')).toHaveCount(1);
await expect(page.locator('a:text("External CTA")')).toHaveCount(1);
await expect(page.locator('a:text("CTA with link to media")')).toHaveCount(1);
// DE
await page.goto(websiteUrl('/de/block-form'));
await validateTileAndSubtitle(page, 'Block: Formular');
await expect(
page.locator('.silverback-iframe iframe').first(),
).toHaveAttribute('src', /de\/form\/contact\?iframe=true/);
});

// Form
await expect(
page.locator('.silverback-iframe iframe').last(),
).toHaveAttribute('src', 'http://127.0.0.1:8000/en/form/contact?iframe=true');
test('Heading', async ({ page }) => {
await page.goto(websiteUrl('/en/block-heading'));
await validateTileAndSubtitle(page, 'Block: Heading');

const headingItems = [
{
title: 'Heading two',
level: 2,
id: 'heading-two',
},
{
title: 'Heading three',
level: 3,
id: 'heading-three',
},
{
title: 'Heading four',
level: 4,
id: 'heading-four',
},
{
title: 'Heading two - Bold',
level: 2,
id: 'heading-two---bold',
},
{
title: 'Heading three - Bold',
level: 3,
id: 'heading-three---bold',
},
{
title: 'Heading four - Bold',
level: 4,
id: 'heading-four---bold',
},
];

const content = page.getByRole('main');
for (const item of headingItems) {
const header = content.getByRole('heading', {
name: item.title,
level: item.level,
exact: true,
});

await expect(header).toBeVisible();
await expect(header).toHaveAttribute('id', item.id);
}
});

test('Hero', async ({ page }) => {
await page.goto(websiteUrl('/en/block-hero'));
await validateTileAndSubtitle(page, 'Block: Hero');

await expect(
page.locator(
'img[data-test-id=hero-image][alt="A beautiful landscape."]',
),
).toHaveCount(2);
});

test('Hero with Form', async ({ page }) => {
await page.goto(websiteUrl('/en/block-hero-form'));
await validateTileAndSubtitle(page, 'Block: Hero with Form');

await expect(
page.locator('img[data-test-id=hero-image][alt="The silverback"]'),
).toHaveCount(1);

await expect(
page.locator('.silverback-iframe iframe').first(),
).toHaveAttribute('src', /en\/form\/contact\?iframe=true/);
});

test('Horizontal separator', async ({ page }) => {
await page.goto(websiteUrl('/en/block-horizontal-separator'));
await validateTileAndSubtitle(page, 'Block: Horizontal separator');

await expect(page.locator('hr')).toHaveCount(2);
});

test('Image Teasers', async ({ page }) => {
await page.goto(websiteUrl('/en/block-image-teasers'));
await validateTileAndSubtitle(page, 'Block: Image Teasers');

await expect(
page.locator(
'img:not([data-test-id=hero-image])[alt="A beautiful landscape."]',
),
).toHaveCount(1);
await expect(page.locator('h2:text("Image One Teaser Title")')).toHaveCount(
1,
);
await expect(page.locator('a:text("Image One Teaser CTA")')).toHaveCount(1);
await expect(
page.locator('img:not([data-test-id=hero-image])[alt="The silverback"]'),
).toHaveCount(1);
await expect(page.locator('h2:text("Image Two Teaser Title")')).toHaveCount(
1,
);
await expect(page.locator('a:text("Image Two Teaser CTA")')).toHaveCount(1);
});

test('Image with Text', async ({ page }) => {
await page.goto(websiteUrl('/en/block-image-text'));
await validateTileAndSubtitle(page, 'Block: Image with Text');

await expect(
page.locator(
'img:not([data-test-id=hero-image])[alt="A beautiful landscape."]',
),
).toHaveCount(1);
await expect(
page.locator('img:not([data-test-id=hero-image])[alt="The silverback"]'),
).toHaveCount(1);

await expect(
page.locator('p:text("Image with text on the left")'),
).toHaveCount(1);
await expect(
page.locator('p:text("Image with text on the right")'),
).toHaveCount(1);
});

test('Info Grid', async ({ page }) => {
await page.goto(websiteUrl('/en/block-info-grid'));
await validateTileAndSubtitle(page, 'Block: Info Grid');

await expect(page.locator('p:text("Some information here")')).toHaveCount(
3,
);
const content = page.getByRole('main');
await expect(content.locator('svg')).toHaveCount(3);
});

test('List', async ({ page }) => {
await page.goto(websiteUrl('/en/block-list'));
await validateTileAndSubtitle(page, 'Block: List');

const content = page.getByRole('main');
await expect(content.locator('ul > li')).toHaveCount(12);
await expect(content.locator('ul.list-style--arrows > li')).toHaveCount(3);
await expect(content.locator('ul.list-style--checkmarks > li')).toHaveCount(
3,
);
await expect(
page.locator('ul.list-style--question-marks > li'),
).toHaveCount(3);
});

test('Media', async ({ page }) => {
await page.goto(websiteUrl('/en/block-media'));
await validateTileAndSubtitle(page, 'Block: Media');

await expect(
page.locator('img:not([data-test-id=hero-image])[alt="The silverback"]'),
).toHaveCount(1);
await expect(
page.locator('figcaption:text("Media Image Caption")'),
).toHaveCount(1);
});

test('Paragraph', async ({ page }) => {
await page.goto(websiteUrl('/en/block-paragraph'));
await validateTileAndSubtitle(page, 'Block: Paragraph');

const content = page.getByRole('main');
await expect(content.locator('.container-text .prose p')).toHaveCount(2);
});

test('Quote', async ({ page }) => {
await page.goto(websiteUrl('/en/block-quote'));
await validateTileAndSubtitle(page, 'Block: Quote');

await expect(
page.locator(
'p:text("My mother always used to say: The older you get, the better you get, unless you’re a banana.")',
),
).toHaveCount(1);
await expect(page.locator('p:text("Rose (Betty White)")')).toHaveCount(1);
await expect(page.locator('span:text("TheGoldenGirls")')).toHaveCount(1);
});

test('Table', async ({ page }) => {
await page.goto(websiteUrl('/en/block-table'));
await validateTileAndSubtitle(page, 'Block: Table');

const content = page.getByRole('main');
await expect(content.locator('table')).toHaveCount(4);
await expect(content.locator('td')).toHaveCount(84);

await expect(
page.locator('figcaption:text("Table Caption - Fixed width")'),
).toHaveCount(1);
await expect(
page.locator('figcaption:text("Table Caption - Header Section")'),
).toHaveCount(1);
await expect(
page.locator('figcaption:text("Table Caption - Footer Section")'),
).toHaveCount(1);
});

test('Teaser list', async ({ page }) => {
await page.goto(websiteUrl('/en/block-teaser-list'));
await validateTileAndSubtitle(page, 'Block: Teaser list');

const content = page.getByRole('main');
await expect(content.locator('ul > li')).toHaveCount(8);
});
});

0 comments on commit 98acbc1

Please sign in to comment.