test: setup cypress

.eslintrc

@@ -1,13 +1,14 @@
 {
   "env": {
     "node": true,
-    "jest": true
+    "jest": true,
+    "cypress/globals": true
   },
   "globals": {
     "__DEV__": true
   },
   "extends": "@antfu",
-  "plugins": ["jest"],
+  "plugins": ["jest", "cypress"],
   "rules": {
     "vue/no-lone-template": "off"
   }

cypress.json

@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://localhost:3030"
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/examples/basic.spec.ts

@@ -0,0 +1,63 @@
+context('Basic', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+  it('basic nav', () => {
+    cy.url()
+      .should('eq', 'http://localhost:3030/1')
+
+    cy.get('#page-root > #slide-container > #slide-content')
+
+    cy.get('body')
+      .type('{RightArrow}')
+      .url()
+      .should('eq', 'http://localhost:3030/2')
+
+    cy.get('#page-root > #slide-container > #slide-content > .slidev-page-2 > div > p')
+      .should('have.css', 'border-color', 'rgb(0, 128, 0)')
+      .should('not.have.css', 'color', 'rgb(128, 0, 0)')
+
+    cy.get('body')
+      .type('g')
+      .get('#slidev-goto-dialog')
+      .type('5{enter}')
+      .url()
+      .should('eq', 'http://localhost:3030/5')
+
+    cy.get('#page-root > #slide-container > #slide-content > .slidev-page-5 > div > .slidev-code')
+      .should('have.text', '<div>{{$slidev.nav.currentPage}}</div>')
+      .get('#page-root > #slide-container > #slide-content > .slidev-page-5 > div > p')
+      .should('have.text', 'Current Page: 5')
+
+    cy.get('body')
+      .type('{DownArrow}')
+      .url().should('eq', 'http://localhost:3030/6')
+
+    cy.get('body')
+      .type('{RightArrow}')
+
+    cy
+      .url()
+      .should('eq', 'http://localhost:3030/6?clicks=1')
+
+    cy.get('body')
+      .type('{RightArrow}{RightArrow}{RightArrow}{RightArrow}{RightArrow}{RightArrow}')
+      .url().should('eq', 'http://localhost:3030/7')
+
+    cy.get('body')
+      .type('{LeftArrow}')
+      .url()
+      .should('eq', 'http://localhost:3030/6?clicks=6')
+
+    cy.get('body')
+      .type('{DownArrow}')
+      .url()
+      .should('eq', 'http://localhost:3030/7')
+
+    cy.get('body')
+      .type('{UpArrow}')
+      .url()
+      .should('eq', 'http://localhost:3030/6')
+  })
+})

cypress/plugins/index.js

@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+
+}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

demo/test/slides.md

@@ -35,7 +35,7 @@ background: https://sli.dev/demo-cover.png
 
 ---
 
-# Page 3
+# Page 5
 
 ```html
 <div>{{$slidev.nav.currentPage}}</div>
@@ -45,7 +45,7 @@ Current Page: {{$slidev.nav.currentPage}}
 
 ---
 
-# Page 3
+# Page 6
 
 <v-clicks>
 
@@ -66,13 +66,7 @@ Current Page: {{$slidev.nav.currentPage}}
 
 ---
 
-<div>
-Hi
-</div>
-
----
-
-# Page 5
+# Page 8
 
 $$
 \begin{aligned}

package.json

@@ -14,6 +14,7 @@
     "lint:fix": "nr lint --fix",
     "test": "jest",
     "test:update": "jest -u",
+    "cy": "cypress open",
     "release": "zx scripts/release.mjs",
     "ci:publish": "zx scripts/publish.mjs"
   },
@@ -55,7 +56,9 @@
     "@vueuse/core": "^4.11.2",
     "bumpp": "^6.0.6",
     "cross-env": "^7.0.3",
+    "cypress": "^7.4.0",
     "eslint": "^7.27.0",
+    "eslint-plugin-cypress": "^2.11.3",
     "eslint-plugin-jest": "^24.3.6",
     "esno": "^0.6.0",
     "husky": "4.3.7",

packages/client/internals/Goto.vue

@@ -28,6 +28,7 @@ whenever(showGotoDialog, async() => {
 
 <template>
   <div
+    id="slidev-goto-dialog"
     class="fixed right-5 bg-main transform transition-all"
     :class="showGotoDialog ? 'top-5' : '-top-20'"
     shadow="~"