| 1 | export {} |
| 2 | declare global { |
| 3 | // eslint-disable-next-line ts/no-namespace |
| 4 | namespace Cypress { |
| 5 | interface Chainable<Subject> { |
| 6 | rightArrow: (n?: number) => Chainable<Subject> |
| 7 | } |
| 8 | } |
| 9 | } |
| 10 | |
| 11 | Cypress.Commands.add('rightArrow', (n = 1) => { |
| 12 | cy.get('body').wait(500).type('{rightarrow}'.repeat(n)).wait(500) |
| 13 | }) |
| 14 | |
| 15 | const BASE = 'http://localhost:3041' |
| 16 | |
| 17 | context('Basic', () => { |
| 18 | beforeEach(() => { |
| 19 | cy.visit('/') |
| 20 | }) |
| 21 | |
| 22 | function goPage(no: number) { |
| 23 | cy.get('body') |
| 24 | .wait(100) |
| 25 | .type('g') |
| 26 | .wait(100) |
| 27 | .get('#slidev-goto-input') |
| 28 | .type(`${no}`, { force: true }) |
| 29 | .type('{enter}', { force: true }) |
| 30 | .url() |
| 31 | .should('eq', `${BASE}/${no}`) |
| 32 | .wait(500) |
| 33 | } |
| 34 | |
| 35 | it('basic nav', () => { |
| 36 | cy.url() |
| 37 | .should('eq', `${BASE}/1`) |
| 38 | |
| 39 | cy.contains('Global Footer') |
| 40 | .should('exist') |
| 41 | |
| 42 | cy.get('#page-root > #slide-container > #slide-content') |
| 43 | |
| 44 | cy.rightArrow() |
| 45 | .url() |
| 46 | .should('eq', `${BASE}/2`) |
| 47 | |
| 48 | cy.contains('Global Footer') |
| 49 | .should('not.exist') |
| 50 | |
| 51 | cy.get('#page-root > #slide-container > #slide-content > #slideshow .slidev-page-2 > div > p') |
| 52 | .should('have.css', 'border-color', 'rgb(0, 128, 0)') |
| 53 | .should('not.have.css', 'color', 'rgb(128, 0, 0)') |
| 54 | |
| 55 | goPage(5) |
| 56 | |
| 57 | cy.get('#page-root > #slide-container > #slide-content > #slideshow .slidev-page-5 .slidev-code') |
| 58 | .should('have.text', '<div>{{$slidev.nav.currentPage}}</div>') |
| 59 | .get('#page-root > #slide-container > #slide-content > #slideshow .slidev-page-5 > div > p') |
| 60 | .should('have.text', 'Current Page: 5') |
| 61 | }) |
| 62 | |
| 63 | it('should nav correctly', () => { |
| 64 | goPage(5) |
| 65 | |
| 66 | cy.get('body') |
| 67 | .type('{DownArrow}') |
| 68 | .url() |
| 69 | .should('eq', `${BASE}/6`) |
| 70 | |
| 71 | cy.rightArrow() |
| 72 | |
| 73 | cy |
| 74 | .url() |
| 75 | .should('eq', `${BASE}/6?clicks=1`) |
| 76 | |
| 77 | cy.get('body') |
| 78 | .type('{RightArrow}{RightArrow}{RightArrow}{RightArrow}{RightArrow}{RightArrow}') |
| 79 | .url() |
| 80 | .should('eq', `${BASE}/7`) |
| 81 | |
| 82 | cy.get('body') |
| 83 | .type('{LeftArrow}') |
| 84 | .url() |
| 85 | .should('eq', `${BASE}/6?clicks=6`) |
| 86 | |
| 87 | cy.get('body') |
| 88 | .type('{DownArrow}') |
| 89 | .url() |
| 90 | .should('eq', `${BASE}/7`) |
| 91 | |
| 92 | cy.get('body') |
| 93 | .type('{UpArrow}') |
| 94 | .url() |
| 95 | .should('eq', `${BASE}/6`) |
| 96 | }) |
| 97 | |
| 98 | it('named slots', () => { |
| 99 | goPage(8) |
| 100 | |
| 101 | cy.get('.col-right') |
| 102 | .contains('Right') |
| 103 | }) |
| 104 | |
| 105 | it('clicks map', () => { |
| 106 | goPage(9) |
| 107 | |
| 108 | cy |
| 109 | .url() |
| 110 | .should('eq', `${BASE}/9`) |
| 111 | |
| 112 | cy.rightArrow() |
| 113 | |
| 114 | cy |
| 115 | .url() |
| 116 | .should('eq', `${BASE}/9?clicks=1`) |
| 117 | |
| 118 | cy.get('#slideshow .slidev-page-9 .cy-content .slidev-vclick-target:not(.slidev-vclick-hidden)') |
| 119 | .should('have.text', 'CD') |
| 120 | |
| 121 | cy.rightArrow(2) |
| 122 | |
| 123 | cy.get('#slideshow .slidev-page-9 .cy-content .slidev-vclick-target:not(.slidev-vclick-hidden)') |
| 124 | .should('have.text', 'ABCD') |
| 125 | |
| 126 | // v-click.hide |
| 127 | cy.rightArrow() |
| 128 | |
| 129 | cy.get('#slideshow .slidev-page-9 .cy-content .slidev-vclick-target:not(.slidev-vclick-hidden)') |
| 130 | .should('have.text', 'ABC') |
| 131 | |
| 132 | cy |
| 133 | .url() |
| 134 | .should('eq', `${BASE}/9?clicks=4`) |
| 135 | |
| 136 | cy.rightArrow() |
| 137 | |
| 138 | cy |
| 139 | .url() |
| 140 | .should('eq', `${BASE}/10`) |
| 141 | |
| 142 | cy.rightArrow() |
| 143 | |
| 144 | cy |
| 145 | .url() |
| 146 | .should('eq', `${BASE}/10?clicks=1`) |
| 147 | |
| 148 | cy.get('#slideshow .slidev-page-10 .cy-content-hide .slidev-vclick-target:not(.slidev-vclick-hidden)') |
| 149 | .should('have.text', 'BD') |
| 150 | |
| 151 | cy.rightArrow() |
| 152 | |
| 153 | cy.get('#slideshow .slidev-page-10 .cy-content-hide .slidev-vclick-target:not(.slidev-vclick-hidden)') |
| 154 | .should('have.text', 'D') |
| 155 | |
| 156 | cy.rightArrow() |
| 157 | |
| 158 | cy.get('#slideshow .slidev-page-10 .cy-content-hide .slidev-vclick-target:not(.slidev-vclick-hidden)') |
| 159 | .should('have.text', 'CD') |
| 160 | |
| 161 | cy.rightArrow() |
| 162 | |
| 163 | cy |
| 164 | .url() |
| 165 | .should('eq', `${BASE}/10?clicks=4`) |
| 166 | |
| 167 | cy.rightArrow() |
| 168 | |
| 169 | cy |
| 170 | .url() |
| 171 | .should('eq', `${BASE}/11`) |
| 172 | }) |
| 173 | |
| 174 | it('overview nav', () => { |
| 175 | goPage(2) |
| 176 | |
| 177 | cy.get('body') |
| 178 | .type('o{RightArrow}{RightArrow}{Enter}') |
| 179 | .url() |
| 180 | .should('eq', `${BASE}/4`) |
| 181 | |
| 182 | cy.get('body') |
| 183 | .type('o{LeftArrow}{LeftArrow}{LeftArrow}{Enter}') |
| 184 | .url() |
| 185 | .should('eq', `${BASE}/1`) |
| 186 | |
| 187 | cy.get('body') |
| 188 | .type('o{DownArrow}{DownArrow}{DownArrow}{Enter}') |
| 189 | .url() |
| 190 | .should('not.eq', `${BASE}/1`) |
| 191 | |
| 192 | cy.get('body') |
| 193 | .type('o{UpArrow}{UpArrow}{UpArrow}{Enter}') |
| 194 | .url() |
| 195 | .should('eq', `${BASE}/1`) |
| 196 | }) |
| 197 | |
| 198 | it('deep nested lists', () => { |
| 199 | goPage(11) |
| 200 | |
| 201 | cy |
| 202 | .url() |
| 203 | .should('eq', `${BASE}/11`) |
| 204 | |
| 205 | cy.get('body') |
| 206 | .type('{RightArrow}{RightArrow}{RightArrow}') |
| 207 | |
| 208 | cy.get('#slideshow .slidev-page-11 .cy-depth .slidev-vclick-target:not(.slidev-vclick-hidden) .slidev-vclick-target:not(.slidev-vclick-hidden) .slidev-vclick-target:not(.slidev-vclick-hidden)') |
| 209 | .should('have.text', 'C') |
| 210 | |
| 211 | cy.get('body') |
| 212 | .type('{RightArrow}{RightArrow}{RightArrow}') |
| 213 | |
| 214 | cy.get('#slideshow .slidev-page-11 .cy-depth .slidev-vclick-target:not(.slidev-vclick-hidden) .slidev-vclick-target:not(.slidev-vclick-hidden) .slidev-vclick-target:not(.slidev-vclick-hidden)') |
| 215 | .should('have.text', 'CD') |
| 216 | |
| 217 | cy.get('body') |
| 218 | .type('{RightArrow}{RightArrow}{RightArrow}') |
| 219 | |
| 220 | cy.get('#slideshow .slidev-page-11 .cy-depth .slidev-vclick-target:not(.slidev-vclick-hidden) .slidev-vclick-target:not(.slidev-vclick-hidden) .slidev-vclick-target:not(.slidev-vclick-hidden)') |
| 221 | .should('have.text', 'CDGH') |
| 222 | |
| 223 | cy.get('body') |
| 224 | .type('{RightArrow}{RightArrow}{RightArrow}') |
| 225 | |
| 226 | cy.get('#slideshow .slidev-page-11 .cy-depth > ul > .slidev-vclick-target:not(.slidev-vclick-hidden)') |
| 227 | .should('have.text', 'A B CDEF GHIJKL') |
| 228 | }) |
| 229 | |
| 230 | it('slot in v-clicks', () => { |
| 231 | goPage(12) |
| 232 | |
| 233 | cy |
| 234 | .url() |
| 235 | .should('eq', `${BASE}/12`) |
| 236 | |
| 237 | cy.get('body') |
| 238 | .type('{RightArrow}{RightArrow}{RightArrow}{RightArrow}{RightArrow}{RightArrow}') |
| 239 | .url() |
| 240 | .should('eq', `${BASE}/12?clicks=6`) // we should still be on page 12 |
| 241 | |
| 242 | cy.rightArrow() |
| 243 | .url() |
| 244 | .should('eq', `${BASE}/13`) |
| 245 | |
| 246 | cy.get('#slideshow .slidev-page-13 .cy-wrapdecorate > ul > .slidev-vclick-target.slidev-vclick-hidden') |
| 247 | .should('have.text', 'AEFZ') |
| 248 | |
| 249 | cy.get('body') |
| 250 | .type('{RightArrow}{RightArrow}{RightArrow}') |
| 251 | |
| 252 | cy.get('#slideshow .slidev-page-13 .cy-wrapdecorate > ul > .slidev-vclick-target:not(.slidev-vclick-hidden)') |
| 253 | .should('have.text', 'AEF') |
| 254 | |
| 255 | cy.rightArrow() |
| 256 | |
| 257 | cy.get('#slideshow .slidev-page-13 .cy-wrapdecorate > ul > .slidev-vclick-target:not(.slidev-vclick-hidden)') |
| 258 | .should('have.text', 'AEFZ') |
| 259 | }) |
| 260 | |
| 261 | it('click animation presets', () => { |
| 262 | goPage(14) |
| 263 | |
| 264 | // Check animation classes are set on mount |
| 265 | cy.get('#slideshow .slidev-page-14 .cy-animation-presets .slidev-vclick-target').eq(0).should('have.class', 'slidev-vclick-anim-fade').and('have.class', 'slidev-vclick-anim-up') |
| 266 | cy.get('#slideshow .slidev-page-14 .cy-animation-presets .slidev-vclick-target').eq(1).should('have.class', 'slidev-vclick-anim-scale') |
| 267 | cy.get('#slideshow .slidev-page-14 .cy-animation-presets .slidev-vclick-target').eq(2).should('have.class', 'slidev-vclick-anim-none') |
| 268 | |
| 269 | // After clicks, elements become visible |
| 270 | cy.rightArrow() |
| 271 | cy.get('#slideshow .slidev-page-14 .cy-animation-presets .slidev-vclick-target:not(.slidev-vclick-hidden)') |
| 272 | .should('have.text', 'fade-up') |
| 273 | |
| 274 | cy.rightArrow() |
| 275 | cy.get('#slideshow .slidev-page-14 .cy-animation-presets .slidev-vclick-target:not(.slidev-vclick-hidden)') |
| 276 | .should('have.length', 2) |
| 277 | |
| 278 | cy.rightArrow() |
| 279 | cy.get('#slideshow .slidev-page-14 .cy-animation-presets .slidev-vclick-target:not(.slidev-vclick-hidden)') |
| 280 | .should('have.length', 3) |
| 281 | }) |
| 282 | |
| 283 | it('click animation from frontmatter', () => { |
| 284 | goPage(15) |
| 285 | |
| 286 | cy.get('#slideshow .slidev-page-15 .cy-animation-frontmatter .slidev-vclick-target') |
| 287 | .should('have.class', 'slidev-vclick-anim-fade') |
| 288 | .and('have.class', 'slidev-vclick-anim-down') |
| 289 | |
| 290 | cy.rightArrow() |
| 291 | cy.get('#slideshow .slidev-page-15 .cy-animation-frontmatter .slidev-vclick-target:not(.slidev-vclick-hidden)') |
| 292 | .should('have.text', 'from-frontmatter') |
| 293 | }) |
| 294 | |
| 295 | it('click animation hierarchy and override', () => { |
| 296 | goPage(16) |
| 297 | |
| 298 | const targets = '#slideshow .slidev-page-16 .cy-animation-hierarchy .slidev-vclick-target' |
| 299 | |
| 300 | // custom frontmatter still gets reflected for elements without modifiers |
| 301 | cy.get(targets).eq(0).should('have.class', 'slidev-vclick-anim-foo') |
| 302 | |
| 303 | // element modifiers override slide frontmatter preset |
| 304 | cy.get(targets).eq(1).should('not.have.class', 'slidev-vclick-anim-foo').and('have.class', 'slidev-vclick-anim-fade').and('have.class', 'slidev-vclick-anim-right') |
| 305 | |
| 306 | // none modifier also overrides slide frontmatter preset |
| 307 | cy.get(targets).eq(2).should('not.have.class', 'slidev-vclick-anim-foo').and('have.class', 'slidev-vclick-anim-none').invoke('css', 'transition').should('match', /^none/) |
| 308 | |
| 309 | // another valid modifier should also override invalid frontmatter |
| 310 | cy.get(targets).eq(3).should('not.have.class', 'slidev-vclick-anim-foo').and('have.class', 'slidev-vclick-anim-scale') |
| 311 | |
| 312 | // reveal sequence remains functional with mixed presets |
| 313 | cy.rightArrow(4) |
| 314 | cy.get(`${targets}:not(.slidev-vclick-hidden)`) |
| 315 | .should('have.length', 4) |
| 316 | }) |
| 317 | }) |
| 318 |