Skip to content

Commit

Permalink
fix: update snapshots for layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@danielleroux
danielleroux committed Dec 5, 2024
1 parent 1422c99 commit 49c3549
Show file tree
Hide file tree
Showing 3 changed files with 143 additions and 106 deletions.
99 changes: 99 additions & 0 deletions packages/core/src/tests/layout-grid/basic/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<!--
SPDX-FileCopyrightText: 2024 Siemens AG
SPDX-License-Identifier: MIT
-->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
/>
<title>Stencil Component Starter</title>
<style>
html,
body {
margin: 0px;
padding: 0px;
width: 100vw;
height: 100vh;
}
</style>
<style>
ix-col {
background-color: var(--theme-color-success-40);
border: solid 1px #fff;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<h4>Column = 4</h4>
<ix-layout-grid columns="4">
<ix-row>
<ix-col size="2">1</ix-col>
<ix-col size="2">2</ix-col>
<ix-col size="2">
<ix-button style="width: 100%">Test</ix-button>
</ix-col>
<ix-col size="2">4</ix-col>
<ix-col size="2">5</ix-col>
</ix-row>
</ix-layout-grid>

<h4>Normal</h4>
<ix-layout-grid>
<ix-row>
<ix-col>1</ix-col>
<ix-col>2</ix-col>
<ix-col size="2">
<ix-button style="width: 100%">Test</ix-button>
</ix-col>
<ix-col>4</ix-col>
<ix-col>5</ix-col>
</ix-row>
</ix-layout-grid>

<h4>No padding</h4>
<ix-layout-grid no-margin>
<ix-row>
<ix-col size="2">1</ix-col>
<ix-col size="2">2</ix-col>
<ix-col>
<ix-button style="width: 100%">Test</ix-button>
</ix-col>
<ix-col size="2">4</ix-col>
<ix-col size="2">5</ix-col>
</ix-row>
</ix-layout-grid>

<h4>No row gap</h4>
<ix-layout-grid no-row-gap>
<ix-row>
<ix-col size="2">1</ix-col>
<ix-col size="2">2</ix-col>
<ix-col>
<ix-button style="width: 100%">Test</ix-button>
</ix-col>
<ix-col size="2">4</ix-col>
<ix-col size="2">5</ix-col>
</ix-row>

<ix-row>
<ix-col size="2">1</ix-col>
<ix-col size="2">2</ix-col>
<ix-col>
<ix-button style="width: 100%">Test</ix-button>
</ix-col>
<ix-col size="2">4</ix-col>
<ix-col size="2">5</ix-col>
</ix-row>
</ix-layout-grid>

<script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
</body>
</html>
114 changes: 8 additions & 106 deletions packages/core/src/tests/layout-grid/layout-grid.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,136 +9,38 @@
import { expect } from '@playwright/test';
import { regressionTest, viewPorts } from '@utils/test';

regressionTest('should not have regression', async ({ mount, page }) => {
regressionTest('should not have regression', async ({ page }) => {
await page.setViewportSize(viewPorts.lg);
await mount(htmlSource);
await page.goto('layout-grid/basic');
const grid = page.locator('ix-layout-grid').nth(0);
await expect(grid).toHaveClass(/hydrated/);

expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
});

regressionTest('should not have regression large', async ({ mount, page }) => {
regressionTest('should not have regression large', async ({ page }) => {
await page.setViewportSize(viewPorts.lg);
await mount(htmlSimple);
await page.goto('layout-grid/simple');
const grid = page.locator('ix-layout-grid').nth(0);
await expect(grid).toHaveClass(/hydrated/);

expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
});

regressionTest('should not have regression medium', async ({ mount, page }) => {
regressionTest('should not have regression medium', async ({ page }) => {
await page.setViewportSize(viewPorts.md);
await mount(htmlSimple);
await page.goto('layout-grid/simple');
const grid = page.locator('ix-layout-grid').nth(0);
await expect(grid).toHaveClass(/hydrated/);

expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
});

regressionTest('should not have regression small', async ({ mount, page }) => {
regressionTest('should not have regression small', async ({ page }) => {
await page.setViewportSize(viewPorts.sm);
await mount(htmlSimple);
await page.goto('layout-grid/simple');
const grid = page.locator('ix-layout-grid').nth(0);
await expect(grid).toHaveClass(/hydrated/);

expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
});

const htmlSimple = `
<ix-layout-grid>
<ix-row>
<ix-col size="12" size-sm="12" size-md="2" size-lg="4">
1
</ix-col>
<ix-col size="12" size-sm="12" size-md="2" size-lg="4">
2
</ix-col>
<ix-col size="12" size-sm="12" size-md="2" size-lg="4">
3
</ix-col>
</ix-row>
</ix-layout-grid>
<style>
ix-col {
background-color: var(--theme-color-success-40);
border: solid 1px #fff;
color: #fff;
text-align: center;
}
</style>
`;

const htmlSource = `
<h4>Column = 4</h4>
<ix-layout-grid columns="4">
<ix-row>
<ix-col size="2">1</ix-col>
<ix-col size="2">2</ix-col>
<ix-col size="2">
<ix-button style="width: 100%;">Test</ix-button>
</ix-col>
<ix-col size="2">4</ix-col>
<ix-col size="2">5</ix-col>
</ix-row>
</ix-layout-grid>
<h4>Normal</h4>
<ix-layout-grid>
<ix-row>
<ix-col>1</ix-col>
<ix-col>2</ix-col>
<ix-col size="2">
<ix-button style="width: 100%;">Test</ix-button>
</ix-col>
<ix-col>4</ix-col>
<ix-col>5</ix-col>
</ix-row>
</ix-layout-grid>
<h4>No padding</h4>
<ix-layout-grid no-margin>
<ix-row>
<ix-col size="2">1</ix-col>
<ix-col size="2">2</ix-col>
<ix-col>
<ix-button style="width: 100%;">Test</ix-button>
</ix-col>
<ix-col size="2">4</ix-col>
<ix-col size="2">5</ix-col>
</ix-row>
</ix-layout-grid>
<h4>No row gap</h4>
<ix-layout-grid no-row-gap>
<ix-row>
<ix-col size="2">1</ix-col>
<ix-col size="2">2</ix-col>
<ix-col>
<ix-button style="width: 100%;">Test</ix-button>
</ix-col>
<ix-col size="2">4</ix-col>
<ix-col size="2">5</ix-col>
</ix-row>
<ix-row>
<ix-col size="2">1</ix-col>
<ix-col size="2">2</ix-col>
<ix-col>
<ix-button style="width: 100%;">Test</ix-button>
</ix-col>
<ix-col size="2">4</ix-col>
<ix-col size="2">5</ix-col>
</ix-row>
</ix-layout-grid>
<style>
ix-col {
background-color: var(--theme-color-success-40);
border: solid 1px #fff;
color: #fff;
text-align: center;
}
</style>
`;
36 changes: 36 additions & 0 deletions packages/core/src/tests/layout-grid/simple/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!--
SPDX-FileCopyrightText: 2024 Siemens AG
SPDX-License-Identifier: MIT
-->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
/>
<title>Stencil Component Starter</title>
<style>
ix-col {
background-color: var(--theme-color-success-40);
border: solid 1px #fff;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<ix-layout-grid>
<ix-row>
<ix-col size="12" size-sm="12" size-md="2" size-lg="4"> 1 </ix-col>
<ix-col size="12" size-sm="12" size-md="2" size-lg="4"> 2 </ix-col>
<ix-col size="12" size-sm="12" size-md="2" size-lg="4"> 3 </ix-col>
</ix-row>
</ix-layout-grid>

<script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
</body>
</html>

0 comments on commit 49c3549

Please sign in to comment.