diff --git a/packages/core-scroll/core-scroll.spec.css b/packages/core-scroll/core-scroll.spec.css deleted file mode 100644 index b0681ffc..00000000 --- a/packages/core-scroll/core-scroll.spec.css +++ /dev/null @@ -1,19 +0,0 @@ -.content-container { - height: 200px; - width: 400px; - white-space: nowrap; - overflow: hidden; - border: 1px solid; -} - -.content-item { - box-sizing: border-box; - white-space: normal; - display: inline-block; - vertical-align: top; - width: 30%; - height: 90px; - padding: 10px; - border: 1px solid; - margin: 10px; -} diff --git a/packages/core-scroll/core-scroll.spec.html b/packages/core-scroll/core-scroll.spec.html index 5c65ed25..594fc844 100644 --- a/packages/core-scroll/core-scroll.spec.html +++ b/packages/core-scroll/core-scroll.spec.html @@ -4,50 +4,9 @@ Core Scroll Test Environment - - + - -
- -
- - - - Scroll Events: - 0 - diff --git a/packages/core-scroll/core-scroll.spec.ts b/packages/core-scroll/core-scroll.spec.ts index 4a5d7df2..33448156 100644 --- a/packages/core-scroll/core-scroll.spec.ts +++ b/packages/core-scroll/core-scroll.spec.ts @@ -1,37 +1,82 @@ -import { test, expect } from '@playwright/test' +import { test, expect, Locator, Page } from '@playwright/test' import { scrollPoint } from './core-scroll' +import CoreScroll from './core-scroll' declare global { interface Window { scrollEvents: Event[], done: scrollPoint } } -const setComponentTemplate = ({ templateId, componentId }) => { - const template: HTMLTemplateElement | null = document.querySelector(`[data-testid="${templateId}"]`) - if (template) { - const component: HTMLElement | null = document.querySelector(`[data-testid="${componentId}"]`) - if (component) { - component.appendChild(template.content.cloneNode(true)) - } else { - throw Error(`html custom element with data-testid: ${componentId} not found`) - } - } else { - throw Error(`html template element with data-testid: ${templateId} not found`) + + +// type CoreScrollFixtures = { +// default: +// } + +const defaultHtml = ` + +
+ +
This is overflowing content
+
This is overflowing content
+
This is overflowing content
+
This is overflowing content
+
+
This is overflowing content
+
This is overflowing content
+
This is overflowing content
+
This is overflowing content
+
+
This is overflowing content
+
This is overflowing content
+
This is overflowing content
+
This is overflowing content
+ +
+` + +const defaultStyles = ` + .content-container { + height: 200px; + width: 400px; + white-space: nowrap; + overflow: hidden; + border: 1px solid; } -} + + .content-item { + box-sizing: border-box; + white-space: normal; + display: inline-block; + vertical-align: top; + width: 30%; + height: 90px; + padding: 10px; + border: 1px solid; + margin: 10px; + } +` test.describe('initialization', () => { - test('sets overflow: scroll', async ({ page }) => { + let coreScroll: Locator + + const defaultPage = async (page: Page): Promise => { + await page.setContent(defaultHtml) + await page.addStyleTag({ content: defaultStyles }) + } + + test.beforeEach(async ({ page }) => { await page.goto('./core-scroll/core-scroll.spec.html') - await page.evaluate(setComponentTemplate, ({ componentId: 'core-scroll', templateId: 'default-template' })) - const coreScroll = page.getByTestId('core-scroll') + coreScroll = page.getByTestId('core-scroll') + }) + + test('sets overflow: scroll', async ({ page }) => { + await defaultPage(page) await expect(coreScroll).toHaveCSS('overflow', 'scroll') }) + test('has getters for scroll-distances', async ({ page }) => { - await page.goto('./core-scroll/core-scroll.spec.html') - await page.evaluate(setComponentTemplate, ({ componentId: 'core-scroll', templateId: 'default-template' })) - const coreScroll = page.locator('core-scroll') - await coreScroll.evaluate(node => node.setAttribute('friction', '0.001')) + await defaultPage(page) await expect(coreScroll).toHaveJSProperty('scrollLeft', 0) await expect(coreScroll).toHaveJSProperty('scrollRight', 172) await expect(coreScroll).toHaveJSProperty('scrollTop', 0) @@ -39,9 +84,7 @@ test.describe('initialization', () => { }) test('has getter for items in scroller', async ({ page }) => { - await page.goto('./core-scroll/core-scroll.spec.html') - await page.evaluate(setComponentTemplate, ({ componentId: 'core-scroll', templateId: 'default-template' })) - const coreScroll = page.getByTestId('core-scroll') + await defaultPage(page) await coreScroll.evaluate(node => node.setAttribute('items', 'div')) // Length is 12 (not 14) as only elements matching items-attribute are counted await expect(coreScroll).toHaveAttribute('items', 'div') @@ -49,89 +92,112 @@ test.describe('initialization', () => { }) test('accepts list of custom lements to items-attribute', async ({ page }) => { - await page.goto('./core-scroll/core-scroll.spec.html') - await page.evaluate(setComponentTemplate, ({ componentId: 'core-scroll', templateId: 'mixed-elements-template' })) - const coreScroll = page.getByTestId('core-scroll') + await page.setContent(` + +
+ +
This is overflowing content
+ This is overflowing content +
This is overflowing content
+ +
+ `) await coreScroll.evaluate(node => node.setAttribute('items', 'div,span')) expect(coreScroll).toHaveAttribute('items', 'div,span') expect(await coreScroll.evaluate(node => node.items.length)).toEqual(3) }) test('accepts float number to friction-attribute', async ({ page }) => { - await page.goto('./core-scroll/core-scroll.spec.html') - const coreScroll = page.getByTestId('core-scroll') - await coreScroll.evaluate(node => node.setAttribute('friction', '0.1')) + await defaultPage(page) + await coreScroll.evaluate(node => node.friction = 0.1) await expect(coreScroll).toHaveJSProperty('friction', 0.1) }) - test.fixme('dispatches "scroll.change" onConnected and when children are added/removed', async ({ page }) => { - // TODO: First condition is flaky test, first event is dispatched twice and once. - await page.goto('./core-scroll/core-scroll.spec.html') - expect(await page.getByTestId('change-event-result').textContent()).toContain("1") - await page.getByTestId('core-scroll').evaluate(node => node.insertAdjacentHTML('beforeend', ` + test('dispatches "scroll.change" onConnected and when children are added/removed', async ({ page }) => { + let numChangeEvents = 0 + await page.exposeFunction('captureChangeEvent', () => numChangeEvents += 1) + await page.setContent(` + +
+ +
This is overflowing content
+
+
This is overflowing content
+
+
This is overflowing content
+ +
+ `) + await page.addScriptTag({ content: ` + document.addEventListener('scroll.change', window.captureChangeEvent) + `}) + await page.addStyleTag({ content: defaultStyles }) + // TODO: Unable to addEventListener before setContent, thus onConnected can not be recorded + expect(numChangeEvents).toBe(0) + await coreScroll.evaluate(node => node.insertAdjacentHTML('beforeend', `
This is overflowing content
This is overflowing content
This is overflowing content
`)) - expect(await page.getByTestId('change-event-result').textContent()).toContain("2") - await page.getByTestId('core-scroll').evaluate(node => node.children[0].remove()) - expect(await page.getByTestId('change-event-result').textContent()).toContain("3") - }) -}) - -test.describe('scroll-function', () => { - test('works with a cardinal direction', async ({ page }) => { - await page.goto('./core-scroll/core-scroll.spec.html') - await page.evaluate(setComponentTemplate, ({ componentId: 'core-scroll', templateId: 'default-template' })) - const coreScroll = await page.getByTestId('core-scroll') - await expect(coreScroll).toHaveJSProperty('scrollRight', 172) - await expect(coreScroll).toHaveJSProperty('scrollBottom', 130) - - await coreScroll.evaluate(node => node.scroll('right')) - await expect(coreScroll).toHaveJSProperty('scrollLeft', 172) - await expect(coreScroll).toHaveJSProperty('scrollRight', 0) - await expect(coreScroll).toHaveJSProperty('scrollBottom', 130) - }) - - test('works with x,y coordinates', async ({ page }) => { - await page.goto('./core-scroll/core-scroll.spec.html') - await page.evaluate(setComponentTemplate, ({ componentId: 'core-scroll', templateId: 'default-template' })) - const coreScroll = await page.getByTestId('core-scroll') - await expect(coreScroll).toHaveJSProperty('scrollRight', 172) - await expect(coreScroll).toHaveJSProperty('scrollBottom', 130) - - await coreScroll.evaluate(node => node.scroll({ x: 2, y: 30 })) - - await expect(coreScroll).toHaveJSProperty('scrollLeft', 2) - await expect(coreScroll).toHaveJSProperty('scrollRight', 170) - await expect(coreScroll).toHaveJSProperty('scrollTop', 30) - await expect(coreScroll).toHaveJSProperty('scrollBottom', 100) - }) - - test('works with an element', async ({ page }) => { - await page.goto('./core-scroll/core-scroll.spec.html') - await page.evaluate(setComponentTemplate, ({ componentId: 'core-scroll', templateId: 'default-template' })) - const coreScroll = await page.getByTestId('core-scroll') - await expect(coreScroll).toHaveJSProperty('scrollRight', 172) - await expect(coreScroll).toHaveJSProperty('scrollBottom', 130) - - await coreScroll.evaluate(node => node.scroll(document.getElementById('eight'))) - - await expect(coreScroll).toHaveJSProperty('scrollLeft', 172) - await expect(coreScroll).toHaveJSProperty('scrollRight', 0) - await expect(coreScroll).toHaveJSProperty('scrollTop', 65) - await expect(coreScroll).toHaveJSProperty('scrollBottom', 65) + expect(numChangeEvents).toBe(1) + await coreScroll.evaluate(node => node.children[0].remove()) + expect(numChangeEvents).toBe(2) }) - test('returns a promise when scrolling is complete', async ({ page }) => { - await page.goto('./core-scroll/core-scroll.spec.html') - await page.evaluate(setComponentTemplate, ({ componentId: 'core-scroll', templateId: 'scroll-promise-template' })) - const coreScroll = await page.getByTestId('core-scroll') - - await coreScroll.evaluate(async node => window.done = await node.scroll(document.getElementById('targetEl'))) - await expect(await page.evaluate(() => window.done)).toEqual({ x: 0, y: 175 }) - }) + test.describe('scroll-function', () => { + test('works with a cardinal direction', async ({ page }) => { + await defaultPage(page) + await expect(coreScroll).toHaveJSProperty('scrollRight', 172) + await expect(coreScroll).toHaveJSProperty('scrollBottom', 130) + + await coreScroll.evaluate(node => node.scroll('right')) + await expect(coreScroll).toHaveJSProperty('scrollLeft', 172) + await expect(coreScroll).toHaveJSProperty('scrollRight', 0) + await expect(coreScroll).toHaveJSProperty('scrollBottom', 130) + }) + test('works with x,y coordinates', async ({ page }) => { + await defaultPage(page) + await expect(coreScroll).toHaveJSProperty('scrollRight', 172) + await expect(coreScroll).toHaveJSProperty('scrollBottom', 130) + + await coreScroll.evaluate(node => node.scroll({ x: 2, y: 30 })) + await expect(coreScroll).toHaveJSProperty('scrollLeft', 2) + await expect(coreScroll).toHaveJSProperty('scrollRight', 170) + await expect(coreScroll).toHaveJSProperty('scrollTop', 30) + await expect(coreScroll).toHaveJSProperty('scrollBottom', 100) + }) + + test('works with an element', async ({ page }) => { + await defaultPage(page) + await expect(coreScroll).toHaveJSProperty('scrollRight', 172) + await expect(coreScroll).toHaveJSProperty('scrollBottom', 130) + + await coreScroll.evaluate(node => node.scroll(document.getElementById('eight'))) + await expect(coreScroll).toHaveJSProperty('scrollLeft', 172) + await expect(coreScroll).toHaveJSProperty('scrollRight', 0) + await expect(coreScroll).toHaveJSProperty('scrollTop', 65) + await expect(coreScroll).toHaveJSProperty('scrollBottom', 65) + }) + + test('returns a promise when scrolling is complete', async ({ page }) => { + await page.setContent(` + +
+ +
This is overflowing content
+
+
This is overflowing content
+
+
This is overflowing content
+ +
+ `) + await page.addStyleTag({ content: defaultStyles }) + await coreScroll.evaluate(async node => window.done = await node.scroll(document.getElementById('targetEl'))) + expect(await page.evaluate(() => window.done)).toEqual({ x: 0, y: 175 }) + }) + }) }) @@ -139,3 +205,4 @@ test.describe('scroll-function', () => { +