Skip to content
This repository has been archived by the owner on Apr 8, 2024. It is now read-only.

Commit

Permalink
fix(core-scroll-test): use setContent
Browse files Browse the repository at this point in the history
  • Loading branch information
@klizter
klizter committed Aug 18, 2023
1 parent 0865e20 commit 2607594
Show file tree
Hide file tree
Showing 3 changed files with 158 additions and 151 deletions.
19 changes: 0 additions & 19 deletions packages/core-scroll/core-scroll.spec.css
View file

This file was deleted.

43 changes: 1 addition & 42 deletions packages/core-scroll/core-scroll.spec.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,50 +4,9 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Core Scroll Test Environment</title>
<script src="core-scroll.min.js"></script>
<link rel="stylesheet" href="core-scroll.spec.css">
<link rel="stylesheet" href="../normalize.css">
<script src="core-scroll.min.js"></script>
</head>
<body>
<button data-for="scroller" value="down">Down</button>
<div class="content-container">
<core-scroll id="scroller" data-testid="core-scroll"></core-scroll>
</div>
<template data-testid="default-template">
<div class="content-item">This is overflowing content</div>
<div class="content-item">This is overflowing content</div>
<div class="content-item">This is overflowing content</div>
<div class="content-item" id="fourth">This is overflowing content</div>
<br>
<div class="content-item">This is overflowing content</div>
<div class="content-item">This is overflowing content</div>
<div class="content-item">This is overflowing content</div>
<div class="content-item" id="eight">This is overflowing content</div>
<br>
<div class="content-item">This is overflowing content</div>
<div class="content-item">This is overflowing content</div>
<div class="content-item">This is overflowing content</div>
<div class="content-item">This is overflowing content</div>
</template>
<template data-testid="mixed-elements-template">
<div>This is overflowing content</div>
<span>This is overflowing content</span>
<div>This is overflowing content</div>
</template>
<template data-testid="scroll-promise-template">
<div class="content-item">This is overflowing content</div>
<br>
<div class="content-item">This is overflowing content</div>
<br>
<div class="content-item" id="targetEl">This is overflowing content</div>
</template>
<span>Scroll Events: </span>
<span data-testid="change-event-result">0</span>
<script>
document.querySelector("core-scroll[data-testid='core-scroll']").addEventListener('scroll.change', event => {
const valueElement = document.querySelector("span[data-testid='change-event-result']")
valueElement.textContent = (parseInt(valueElement.textContent) + 1)
})
</script>
</body>
</html>
247 changes: 157 additions & 90 deletions packages/core-scroll/core-scroll.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,141 +1,208 @@
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 = `
<button data-for="scroller" value="down">Down</button>
<div class="content-container">
<core-scroll id="scroller" data-testid="core-scroll" friction="0.001">
<div class="content-item">This is overflowing content</div>
<div class="content-item">This is overflowing content</div>
<div class="content-item">This is overflowing content</div>
<div class="content-item" id="fourth">This is overflowing content</div>
<br>
<div class="content-item">This is overflowing content</div>
<div class="content-item">This is overflowing content</div>
<div class="content-item">This is overflowing content</div>
<div class="content-item" id="eight">This is overflowing content</div>
<br>
<div class="content-item">This is overflowing content</div>
<div class="content-item">This is overflowing content</div>
<div class="content-item">This is overflowing content</div>
<div class="content-item">This is overflowing content</div>
</core-scroll>
</div>
`

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<void> => {
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)
await expect(coreScroll).toHaveJSProperty('scrollBottom', 130)
})

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')
expect(await coreScroll.evaluate(node => node.items.length)).toEqual(12)
})

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(`
<button data-for="scroller" value="down">Down</button>
<div class="content-container">
<core-scroll id="scroller" data-testid="core-scroll">
<div>This is overflowing content</div>
<span>This is overflowing content</span>
<div>This is overflowing content</div>
</core-scroll>
</div>
`)
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(`
<button data-for="scroller" value="down">Down</button>
<div class="content-container">
<core-scroll id="scroller" data-testid="core-scroll">
<div class="content-item">This is overflowing content</div>
<br>
<div class="content-item">This is overflowing content</div>
<br>
<div class="content-item" id="targetEl">This is overflowing content</div>
</core-scroll>
</div>
`)
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', `
<div>This is overflowing content</div>
<div>This is overflowing content</div>
<div>This is overflowing content</div>
`))
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)

Check failure on line 142 in packages/core-scroll/core-scroll.spec.ts

View workflow job for this annotation

GitHub Actions / test

[webkit] › core-scroll/core-scroll.spec.ts:116:7 › initialization › dispatches "scroll.change" onConnected and when children are added/removed 

  1) [webkit] › core-scroll/core-scroll.spec.ts:116:7 › initialization › dispatches "scroll.change" onConnected and when children are added/removed 
    Error: expect(received).toBe(expected) // Object.is equality

    Expected: 1
    Received: 0

      140 |       <div>This is overflowing content</div>
      141 |     `))
    > 142 |     expect(numChangeEvents).toBe(1)
          |                             ^
      143 |     await coreScroll.evaluate(node => node.children[0].remove())
      144 |     expect(numChangeEvents).toBe(2)
      145 |   })

        at /Users/runner/work/core-components/core-components/packages/core-scroll/core-scroll.spec.ts:142:29

Check failure on line 142 in packages/core-scroll/core-scroll.spec.ts

View workflow job for this annotation

GitHub Actions / test

[webkit] › core-scroll/core-scroll.spec.ts:116:7 › initialization › dispatches "scroll.change" onConnected and when children are added/removed 

  1) [webkit] › core-scroll/core-scroll.spec.ts:116:7 › initialization › dispatches "scroll.change" onConnected and when children are added/removed 

    Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
    Error: expect(received).toBe(expected) // Object.is equality

    Expected: 1
    Received: 0

      140 |       <div>This is overflowing content</div>
      141 |     `))
    > 142 |     expect(numChangeEvents).toBe(1)
          |                             ^
      143 |     await coreScroll.evaluate(node => node.children[0].remove())
      144 |     expect(numChangeEvents).toBe(2)
      145 |   })

        at /Users/runner/work/core-components/core-components/packages/core-scroll/core-scroll.spec.ts:142:29
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(`
<button data-for="scroller" value="down">Down</button>
<div class="content-container">
<core-scroll id="scroller" data-testid="core-scroll">
<div class="content-item">This is overflowing content</div>
<br>
<div class="content-item">This is overflowing content</div>
<br>
<div class="content-item" id="targetEl">This is overflowing content</div>
</core-scroll>
</div>
`)
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 })
})
})
})







0 comments on commit 2607594

Please sign in to comment.