Skip to content

Commit 8e7dbd4

Browse files
smastromsmastrom
committed
Tests - Edit tests to match new API
1 parent 30740cd commit 8e7dbd4

File tree

6 files changed

+75
-43
lines changed

6 files changed

+75
-43
lines changed

‎tests/page-load.cy.ts‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,16 @@
1-
import { DEFAULT_ENTER_DELTA } from '../src/constants'
2-
31
function testIstantRestoration() {
42
return cy
53
.mountApp({
64
props: {
7-
simulateInstantRestoration: true,
5+
instantScrollRestoration: true,
86
},
97
})
108
.get('header')
119
.should('not.be.visible')
1210
}
1311

1412
function testSmoothRestoration() {
15-
return cy
16-
.mountApp()
17-
.getScrollSubject()
18-
.scrollRootWithDelta({ delta: DEFAULT_ENTER_DELTA })
19-
.get('header')
20-
.should('not.be.visible')
13+
return cy.mountApp().scrollDown().get('header').should('not.be.visible')
2114
}
2215

2316
describe('Page load', () => {
@@ -32,11 +25,11 @@ describe('Page load', () => {
3225

3326
describe('Header is visible if scrolling up after scroll-restoration', () => {
3427
it('Instant scroll', () => {
35-
testIstantRestoration().scrollToShow().get('header').should('be.visible')
28+
testIstantRestoration().scrollUp().get('header').should('be.visible')
3629
})
3730

3831
it('Smooth scroll', () => {
39-
testSmoothRestoration().scrollToShow().get('header').should('be.visible')
32+
testSmoothRestoration().scrollUp().get('header').should('be.visible')
4033
})
4134
})
4235
})

‎tests/pointer.cy.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1-
import { DEFAULT_LEAVE_DELTA } from '../src/constants'
2-
31
describe('Pointer', { browser: ['chrome'] }, () => {
42
it('Should not hide header if hovering target', () => {
53
cy.mountApp()
64
.get('header')
75
.realHover({ position: 'center' })
8-
.scrollRootWithDelta({ delta: DEFAULT_LEAVE_DELTA * 2, minDuration: 3000 })
6+
.scrollDown()
97
.get('header')
108
.should('be.visible')
119
})
10+
11+
it('Should hide header if not hovering target', () => {
12+
cy.mountApp().getScrollSubject().scrollTo('bottom').get('header').should('be.visible')
13+
})
1214
})

‎tests/reduced-motion.cy.ts‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,11 @@ describe('prefers-reduced-motion', () => {
77

88
it('Shold not add transition', () => {
99
cy.mountApp()
10-
.scrollToHide()
10+
.getScrollSubject()
1111
.get('header')
12-
.should('have.css', 'transition', 'none 0s ease 0s')
13-
14-
.scrollToShow()
12+
.should('have.css', 'transition', 'all 0s ease 0s')
13+
.scrollUp()
1514
.get('header')
16-
.should('have.css', 'transition', 'none 0s ease 0s')
15+
.should('have.css', 'transition', 'all 0s ease 0s')
1716
})
1817
})

‎tests/resize.cy.ts‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,20 @@ import {
33
VIEWPORT_HEADER_HIDDEN as HIDDEN,
44
} from '../cypress/support/constants'
55

6-
import { defaultOptions } from '../src/constants'
6+
import { TRANSITION_STYLES } from '../src/constants'
77

88
const ITERATIONS = 10
99
const FIXED = RELATIVE * 2
1010

1111
describe('Functionalies are disabled', () => {
1212
it('Resizing from `position: fixed` to `position: relative`', () => {
13-
cy.mountApp().resizeRoot(FIXED)
13+
cy.mountApp()
1414

1515
for (let i = 0; i < ITERATIONS; i++) {
16-
cy.resizeRoot(FIXED).wait(100).resizeRoot(RELATIVE).wait(100)
16+
cy.resizeRoot(FIXED).resizeRoot(RELATIVE)
1717
}
1818

19-
cy.getScrollSubject().scrollToHide()
19+
cy.scrollDown()
2020
cy.get('header')
2121
.invoke('attr', 'style')
2222
.then((style) => {
@@ -28,10 +28,10 @@ describe('Functionalies are disabled', () => {
2828
cy.mountApp().resizeRoot(HIDDEN)
2929

3030
for (let i = 0; i < ITERATIONS; i++) {
31-
cy.resizeRoot(FIXED).wait(100).resizeRoot(HIDDEN).wait(100)
31+
cy.resizeRoot(FIXED).resizeRoot(HIDDEN)
3232
}
3333

34-
cy.getScrollSubject().scrollToHide()
34+
cy.scrollDown()
3535
cy.get('header')
3636
.invoke('attr', 'style')
3737
.then((style) => {
@@ -42,24 +42,24 @@ describe('Functionalies are disabled', () => {
4242

4343
describe('Functionalies are enabled', () => {
4444
it('Resizing from `position: relative` to `position: fixed`', () => {
45-
cy.mountApp().resizeRoot(RELATIVE)
45+
cy.mountApp()
4646

4747
for (let i = 0; i < ITERATIONS; i++) {
48-
cy.resizeRoot(RELATIVE).wait(100).resizeRoot(FIXED).wait(100)
48+
cy.resizeRoot(RELATIVE).resizeRoot(FIXED)
4949
}
5050

51-
cy.getScrollSubject().scrollToHide()
52-
cy.get('header').checkStyles(defaultOptions.leaveStyles)
51+
cy.scrollDown()
52+
cy.get('header').should('be.hidden').checkStyles(TRANSITION_STYLES.leaveStyles)
5353
})
5454

5555
it('Resizing from `display: none` to `position: fixed`', () => {
56-
cy.mountApp().resizeRoot(HIDDEN)
56+
cy.mountApp()
5757

5858
for (let i = 0; i < ITERATIONS; i++) {
59-
cy.resizeRoot(HIDDEN).wait(100).resizeRoot(FIXED).wait(100)
59+
cy.resizeRoot(HIDDEN).resizeRoot(FIXED)
6060
}
6161

62-
cy.getScrollSubject().scrollToHide()
63-
cy.get('header').checkStyles(defaultOptions.leaveStyles)
62+
cy.scrollDown()
63+
cy.get('header').should('be.hidden').checkStyles(TRANSITION_STYLES.leaveStyles)
6464
})
6565
})

‎tests/styles.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { TRANSITION_STYLES } from '../src/constants'
2+
3+
describe('Styles', () => {
4+
const { enterStyles, leaveStyles } = TRANSITION_STYLES
5+
6+
describe('Page load', () => {
7+
it('Styles are applied if header is visible, except transition', () => {
8+
cy.mountApp()
9+
.get('header')
10+
.should('be.visible')
11+
.should('have.attr', 'style')
12+
.and('be.eq', `transform: ${enterStyles.transform};`)
13+
})
14+
15+
it('Styles are applied if header is hidden (in order to trigger further enter transition)', () => {
16+
cy.mountApp({
17+
props: {
18+
instantScrollRestoration: true,
19+
},
20+
})
21+
22+
cy.get('header').should('be.hidden').checkStyles(leaveStyles)
23+
})
24+
})
25+
26+
it('Transitions are toggled properly', () => {
27+
cy.mountApp()
28+
.scrollDown()
29+
.get('header')
30+
.should('be.hidden')
31+
.checkStyles(leaveStyles)
32+
33+
.scrollUp()
34+
.get('header')
35+
.should('be.visible')
36+
.checkStyles(enterStyles)
37+
})
38+
})

‎tests/watch.cy.ts‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
11
import App from './components/Watch.vue'
22

33
import { ref } from 'vue'
4-
5-
import { defaultOptions } from '../src/constants'
4+
import { TRANSITION_STYLES as STYLES } from '../src/constants'
65

76
describe('Watch', () => {
87
if (!Cypress.env('CONTAINER')) {
98
it('Toggles functionalities when reactive source changes', () => {
109
const isRelative = ref(false)
1110

1211
cy.mount(App, { props: { watch: isRelative } })
13-
.scrollToHide()
14-
.get('header')
15-
.checkStyles(defaultOptions.leaveStyles)
1612

17-
.then(() => (isRelative.value = true))
13+
cy.scrollDown()
1814
.get('header')
15+
.checkStyles({ ...STYLES.leaveStyles, visibility: 'hidden' })
16+
.then(() => (isRelative.value = true))
17+
18+
cy.get('header')
1919
.should('have.attr', 'style')
2020
.and('be.eq', 'position: relative;')
21-
2221
.then(() => (isRelative.value = false))
23-
.scrollToShow()
24-
.get('header')
25-
.checkStyles(defaultOptions.enterStyles)
2622

23+
cy.scrollUp()
24+
.get('header')
25+
.checkStyles(STYLES.enterStyles)
2726
.then(() => (isRelative.value = true))
27+
2828
.get('header')
2929
.should('have.attr', 'style')
3030
.and('be.eq', 'position: relative;')

0 commit comments

Comments
 (0)