improve test

This commit is contained in:
Rene
2022-07-08 13:13:01 +02:00
parent e43ab8edb4
commit d8953ac76c
4 changed files with 74 additions and 46 deletions
@@ -5,7 +5,7 @@ import { addClass } from 'support';
const url = new URL(window.location.toString());
const params = url.searchParams;
['nss', 'fbg', 'ccp', 'po', 'fo'].forEach((param) => {
['nss', 'fbg', 'ccp', 'po', 'fo', 'tvp'].forEach((param) => {
const paramValue = Boolean(params.get(param));
if (paramValue) {
@@ -16,6 +16,7 @@ import {
contents,
appendChildren,
createDOM,
hasClass,
} from 'support';
import { resize } from '@/testing-browser/Resize';
import { setTestResult, waitForOrFailTest } from '@/testing-browser/TestResult';
@@ -107,12 +108,20 @@ if (!useContentElement) {
appendChildren(comparisonContentElm, elms);
}
const initObj = hasClass(document.body, 'tvp')
? {
target: target!,
viewport: target!,
content: useContentElement,
}
: { target: target!, content: useContentElement };
let updateCount = 0;
// @ts-ignore
const osInstance =
// @ts-ignore
(window.os = OverlayScrollbars(
{ target: target!, viewport: target!, content: useContentElement },
initObj,
{ nativeScrollbarsOverlaid: { initialize: true } },
{
updated() {
@@ -284,7 +293,7 @@ const checkMetrics = async (checkComparison: CheckComparisonObj) => {
// ==== check scroll values:
if (ff && isFractionalPixelRatio()) {
if (ff && isFractionalPixelRatio() && viewportIsTarget) {
should.ok(
Math.abs(targetMetrics.scroll.width - comparisonMetrics.scroll.width) <= 1,
`Scroll width equality. +-1 (${osInstance.state().overflowAmount.x})`
@@ -486,11 +495,13 @@ const checkMetrics = async (checkComparison: CheckComparisonObj) => {
'Host Overflow should be hidden without visible overflowing content.'
);
}
should.equal(
paddingOverflowStyle,
hostOverflowStyle,
'Padding Overflow should equal Host overflow.'
);
if (targetPadding !== targetViewport) {
should.equal(
paddingOverflowStyle,
hostOverflowStyle,
'Padding Overflow should equal Host overflow.'
);
}
await timeout(1);
@@ -4,6 +4,7 @@
<button id="ccp">Without CSS Custom Props</button>
<button id="po">Partially Overlaid</button>
<button id="fo">Fully Overlaid</button>
<button id="tvp">Target Is Viewport</button>
<br />
<label for="envHeight">envHeight</label>
<select name="envHeight" id="envHeight">
@@ -5,53 +5,69 @@ import { test, Page } from '@playwright/test';
playwrightRollup();
test.describe('StructureSetup.update', () => {
[false, true].forEach(async (nativeScrollbarStyling) => {
const withText = nativeScrollbarStyling ? 'with' : 'without';
const nss = async (page: Page) => {
if (!nativeScrollbarStyling) {
await page.click('#nss');
[false].forEach(async (targetIsViewport) => {
const isOrIsNot = targetIsViewport ? 'is' : 'is not';
const setTargetIsVp = async (page: Page) => {
if (targetIsViewport) {
await page.click('#tvp');
await page.waitForTimeout(500);
}
};
test.describe(`${withText} native scrollbar styling`, () => {
test.describe.configure({ mode: 'parallel' });
test.describe(`target ${isOrIsNot} viewport`, () => {
[false, true].forEach(async (nativeScrollbarStyling) => {
const withText = nativeScrollbarStyling ? 'with' : 'without';
const nss = async (page: Page) => {
if (!nativeScrollbarStyling) {
await page.click('#nss');
await page.waitForTimeout(500);
}
};
test('default', async ({ page }) => {
await nss(page);
await page.click('#start');
await expectSuccess(page);
});
test.describe(`${withText} native scrollbar styling`, () => {
test.describe.configure({ mode: 'parallel' });
test('without flexbox glue & css custom props', async ({ page }) => {
await nss(page);
await page.click('#fbg');
await page.waitForTimeout(500);
await page.click('#ccp');
await page.waitForTimeout(500);
await page.click('#start');
await expectSuccess(page);
});
test('default', async ({ page }) => {
await setTargetIsVp(page);
await nss(page);
await page.click('#start');
await expectSuccess(page);
});
test('with partially overlaid scrollbars', async ({ page, browserName }) => {
test.skip(
browserName === 'firefox' || browserName === 'webkit',
"firefox can't simulate partially overlaid scrollbars, boost speed by omitting webkit"
);
test('without flexbox glue & css custom props', async ({ page }) => {
await setTargetIsVp(page);
await nss(page);
await page.click('#fbg');
await page.waitForTimeout(500);
await page.click('#ccp');
await page.waitForTimeout(500);
await page.click('#start');
await expectSuccess(page);
});
await nss(page);
await page.click('#po');
await page.waitForTimeout(500);
await page.click('#start');
await expectSuccess(page);
});
test('with partially overlaid scrollbars', async ({ page, browserName }) => {
test.skip(
browserName === 'firefox' || browserName === 'webkit',
"firefox can't simulate partially overlaid scrollbars, boost speed by omitting webkit"
);
test('with fully overlaid scrollbars', async ({ page }) => {
await nss(page);
await page.click('#fo');
await page.waitForTimeout(500);
await page.click('#start');
await expectSuccess(page);
await setTargetIsVp(page);
await nss(page);
await page.click('#po');
await page.waitForTimeout(500);
await page.click('#start');
await expectSuccess(page);
});
test('with fully overlaid scrollbars', async ({ page }) => {
await setTargetIsVp(page);
await nss(page);
await page.click('#fo');
await page.waitForTimeout(500);
await page.click('#start');
await expectSuccess(page);
});
});
});
});
});