Skip to content

Commit

Permalink
test: re-organize unit tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@vursen
vursen committed Nov 28, 2021
1 parent 4a5d6fb commit 99f1320
Show file tree
Hide file tree
Showing 5 changed files with 575 additions and 465 deletions.
25 changes: 22 additions & 3 deletions test/helpers.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,29 @@
import { fixture, html } from '@open-wc/testing';

export function fixtureSidebar() {
return fixture(html`
<div class="wrapper" style="display: flex; align-items: flex-start; padding-top: 150vh; padding-bottom: 150vh;">
<div class="content" style="flex: 1;"></div>
<div class="sidebar" style="width: 200px; position: relative;">
<div class="sidebar__inner"></div>
</div>
</div>
`)
}

export function nextFrame() {
return new Promise((resolve) => requestAnimationFrame(resolve));
}

export async function scrollTo(top) {
window.scrollTo({ top });
await nextFrame();
export async function scrollTo(top, options = {}) {
const steps = options.steps || 1;
const delta = top - window.pageYOffset;

for (let i = 1; i <= steps; i++) {
window.scrollTo({ top: window.pageYOffset + i * delta / steps });
await nextFrame();
}

}

export function getElementTop(element) {
Expand Down
335 changes: 335 additions & 0 deletions test/side-inner-exceeds-viewport.test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,335 @@
import { setViewport } from '@web/test-runner-commands'
import { expect } from '@open-wc/testing'
import sinon from 'sinon'
import {
scrollTo,
nextFrame,
getElementTop,
getElementBottom,
fixtureSidebar,
} from './helpers.js'
import FloatSidebar from '../src/float-sidebar.js'
import {
START,
TOP_FIXED,
BOTTOM_FIXED,
UNFIXED,
FINISH,
} from '../src/fsm-states.js'

const VIEWPORT_WIDTH = 1000
const VIEWPORT_HEIGHT = 1000

describe('transitions when height(sideInner) > height(viewport)', () => {
let sidebarInnerHeight,
wrapperElement,
sidebarElement,
sidebarInnerElement,
contentElement,
floatSidebar,
changeStateSpy

async function forceUpdate() {
floatSidebar.forceUpdate()
await nextFrame()
}

function setContentHeight(height) {
contentElement.style.height = `${height}px`
}

function setSidebarInnerHeight(height) {
sidebarInnerElement.style.height = `${height}px`
sidebarInnerHeight = height
}

function expectTransitionTo(state) {
expect(changeStateSpy).to.have.been.calledOnceWith(state)
changeStateSpy.resetHistory()
}

function expectNoTransitions() {
expect(changeStateSpy).to.have.callCount(0)
}

before(async () => {
await setViewport({ width: VIEWPORT_WIDTH, height: VIEWPORT_HEIGHT })
})

beforeEach(async () => {
// Reset the scroll position before each test case.
window.scrollTo({ top: 0 })

changeStateSpy = sinon.spy()

wrapperElement = await fixtureSidebar()
contentElement = wrapperElement.querySelector('.content')
sidebarElement = wrapperElement.querySelector('.sidebar')
sidebarInnerElement = wrapperElement.querySelector('.sidebar__inner')

floatSidebar = new FloatSidebar({
sidebar: sidebarElement,
relative: contentElement,
onStateChange: changeStateSpy,
})
})

beforeEach(() => {
setSidebarInnerHeight(VIEWPORT_HEIGHT * 2)
})

// isSideInnerWithinPath === false
describe('when height(content) < height(sidebarInner)', () => {
beforeEach(async () => {
setContentHeight(sidebarInnerHeight / 2)
})

it('shoult not perform transitions on scroll', async () => {
// An alternative to the smooth scroll.
await scrollTo(document.body.clientHeight, { steps: 50 })
expectNoTransitions()
})
})

// isSideInnerWithinPath === true
describe('when height(content) > height(sidebarInner)', () => {
beforeEach(async () => {
setContentHeight(sidebarInnerHeight * 1.5)
await nextFrame()
})

it('START => BOTTOM_FIXED', async () => {
await scrollTo(
getElementBottom(sidebarInnerElement) - window.innerHeight + 1
)
await forceUpdate()
expectTransitionTo(BOTTOM_FIXED)
})

it('START => BOTTOM_FIXED => START when height(content) decreases', async () => {
await scrollTo(
getElementBottom(sidebarInnerElement) - window.innerHeight + 1
)
await forceUpdate()
expectTransitionTo(BOTTOM_FIXED)

setContentHeight(sidebarInnerHeight / 1.5)
await forceUpdate()
expectTransitionTo(START)
})

it('START => BOTTOM_FIXED => START', async () => {
await scrollTo(
getElementBottom(sidebarInnerElement) - window.innerHeight + 1
)
await forceUpdate()
expectTransitionTo(BOTTOM_FIXED)

scrollTo(window.pageYOffset - 1)
await forceUpdate()
expectTransitionTo(START)
})

it('START => BOTTOM_FIXED => TOP_FIXED when height(sidebarInner) decreases', async () => {
await scrollTo(
getElementBottom(sidebarInnerElement) - window.innerHeight + 1
)
await forceUpdate()
expectTransitionTo(BOTTOM_FIXED)

setSidebarInnerHeight(VIEWPORT_HEIGHT / 2)
await forceUpdate()
expectTransitionTo(TOP_FIXED)
})

it('START => BOTTOM_FIXED => FINISH', async () => {
await scrollTo(
getElementBottom(sidebarInnerElement) - window.innerHeight + 1
)
await forceUpdate()
expectTransitionTo(BOTTOM_FIXED)

await scrollTo(getElementBottom(contentElement) - window.innerHeight + 1)
await forceUpdate()
expectTransitionTo(FINISH)
})

it('START => BOTTOM_FIXED => UNFIXED', async () => {
await scrollTo(
getElementBottom(sidebarInnerElement) - window.innerHeight + 2
)
await forceUpdate()
expectTransitionTo(BOTTOM_FIXED)

await scrollTo(window.pageYOffset - 1)
await forceUpdate()
expectTransitionTo(UNFIXED)
})

it('START => BOTTOM_FIXED => UNFIXED => START when height(content) decreases', async () => {
await scrollTo(
getElementBottom(sidebarInnerElement) - window.innerHeight + 2
)
await forceUpdate()
expectTransitionTo(BOTTOM_FIXED)

await scrollTo(window.pageYOffset - 1)
await forceUpdate()
expectTransitionTo(UNFIXED)

setContentHeight(sidebarInnerHeight / 1.5)
await forceUpdate()
expectTransitionTo(START)
})

it('START => BOTTOM_FIXED => UNFIXED => START', async () => {
await scrollTo(
getElementBottom(sidebarInnerElement) - window.innerHeight + 2
)
await forceUpdate()
expectTransitionTo(BOTTOM_FIXED)

await scrollTo(window.pageYOffset - 1)
await forceUpdate()
expectTransitionTo(UNFIXED)

await scrollTo(getElementTop(contentElement))
await forceUpdate()
expectTransitionTo(START)
})

it('START => BOTTOM_FIXED => UNFIXED => FINISH', async () => {
await scrollTo(
getElementBottom(sidebarInnerElement) - window.innerHeight + 2
)
await forceUpdate()
expectTransitionTo(BOTTOM_FIXED)

await scrollTo(window.pageYOffset - 1)
await forceUpdate()
expectTransitionTo(UNFIXED)

await scrollTo(getElementBottom(contentElement) - window.innerHeight + 1)
await forceUpdate()
expectTransitionTo(FINISH)
})

it('START => BOTTOM_FIXED => UNFIXED => TOP_FIXED', async () => {
await scrollTo(
getElementBottom(sidebarInnerElement) - window.innerHeight + 2
)
await forceUpdate()
expectTransitionTo(BOTTOM_FIXED)

await scrollTo(window.pageYOffset - 1)
await forceUpdate()
expectTransitionTo(UNFIXED)

await scrollTo(getElementTop(sidebarInnerElement))
await forceUpdate()
expectTransitionTo(TOP_FIXED)
})

it('START => BOTTOM_FIXED => UNFIXED => TOP_FIXED => UNFIXED', async () => {
await scrollTo(
getElementBottom(sidebarInnerElement) - window.innerHeight + 2
)
await forceUpdate()
expectTransitionTo(BOTTOM_FIXED)

await scrollTo(window.pageYOffset - 1)
await forceUpdate()
expectTransitionTo(UNFIXED)

await scrollTo(getElementTop(sidebarInnerElement))
await forceUpdate()
expectTransitionTo(TOP_FIXED)

await scrollTo(window.pageYOffset + 1)
await forceUpdate()
expectTransitionTo(UNFIXED)
})

it('START => BOTTOM_FIXED => UNFIXED => TOP_FIXED => START when height(content) decreases', async () => {
await scrollTo(
getElementBottom(sidebarInnerElement) - window.innerHeight + 2
)
await forceUpdate()
expectTransitionTo(BOTTOM_FIXED)

await scrollTo(window.pageYOffset - 1)
await forceUpdate()
expectTransitionTo(UNFIXED)

await scrollTo(getElementTop(sidebarInnerElement))
await forceUpdate()
expectTransitionTo(TOP_FIXED)

setContentHeight(sidebarInnerHeight / 2)
await forceUpdate()
expectTransitionTo(START)
})

it('START => BOTTOM_FIXED => UNFIXED => TOP_FIXED => START', async () => {
await scrollTo(
getElementBottom(sidebarInnerElement) - window.innerHeight + 2
)
await forceUpdate()
expectTransitionTo(BOTTOM_FIXED)

await scrollTo(window.pageYOffset - 1)
await forceUpdate()
expectTransitionTo(UNFIXED)

await scrollTo(getElementTop(sidebarInnerElement))
await forceUpdate()
expectTransitionTo(TOP_FIXED)

await scrollTo(window.pageYOffset - 1)
await forceUpdate()
expectTransitionTo(START)
})

it('START => BOTTOM_FIXED => UNFIXED => TOP_FIXED => FINISH', async () => {
await scrollTo(
getElementBottom(sidebarInnerElement) - window.innerHeight + 2
)
await forceUpdate()
expectTransitionTo(BOTTOM_FIXED)

await scrollTo(window.pageYOffset - 1)
await forceUpdate()
expectTransitionTo(UNFIXED)

await scrollTo(getElementTop(sidebarInnerElement))
await forceUpdate()
expectTransitionTo(TOP_FIXED)

await scrollTo(getElementBottom(contentElement) - window.innerHeight)
await forceUpdate()
expectTransitionTo(FINISH)
})

it('START => BOTTOM_FIXED => UNFIXED => BOTTOM_FIXED', async () => {
await scrollTo(
getElementBottom(sidebarInnerElement) - window.innerHeight + 2
)
await forceUpdate()
expectTransitionTo(BOTTOM_FIXED)

await scrollTo(window.pageYOffset - 1)
await forceUpdate()
expectTransitionTo(UNFIXED)

await scrollTo(window.pageYOffset + 1)
await forceUpdate()
expectTransitionTo(BOTTOM_FIXED)
})

it('START => FINISH', async () => {
await scrollTo(getElementBottom(contentElement) - window.innerHeight + 1)
await forceUpdate()
expectTransitionTo(FINISH)
})
})
})
Loading

0 comments on commit 99f1320

Please sign in to comment.