test: add slot tests

soc221b · May 2, 2021 · 386a643 · 386a643
1 parent 03de974
commit 386a643
Show file tree

Hide file tree

Showing 8 changed files with 247 additions and 0 deletions.
diff --git a/cypress/integration/slots/dropdown-item/index.html b/cypress/integration/slots/dropdown-item/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+    />
+    <link type="text/css" rel="stylesheet" href="/dist/index.css" />
+    <script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script src="/dist/vue-next-select.iife.js"></script>
+    <script>
+      const { ref, createApp } = Vue
+      const app = createApp({
+        name: 'app',
+        setup() {
+          const selectedOptions = ref('i')
+          const options = ref(['i'])
+          return {
+            selectedOptions,
+            options,
+          }
+        },
+        template: `
+        <vue-select
+          v-model="selectedOptions"
+          :options="options"
+        >
+          <template #dropdown-item="{ option }">
+            <span>{{ option.toUpperCase() }}</span>
+          </template>
+        </vue-select>
+        `,
+      })
+
+      app.component('vue-select', VueNextSelect)
+      app.mount(document.querySelector('#app'))
+    </script>
+  </body>
+</html>
diff --git a/cypress/integration/slots/dropdown-item/index.spec.js b/cypress/integration/slots/dropdown-item/index.spec.js
@@ -0,0 +1,11 @@
+/// <reference types="cypress" />
+import path from 'path'
+
+context('dropdown-item', () => {
+  it('should expose slot', () => {
+    cy.visit(path.join(__dirname, 'index.html'))
+    cy.get('.vue-select').click()
+
+    cy.get('.vue-dropdown-item').should('have.text', 'I')
+  })
+})
diff --git a/cypress/integration/slots/loading/index.html b/cypress/integration/slots/loading/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+    />
+    <link type="text/css" rel="stylesheet" href="/dist/index.css" />
+    <script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script src="/dist/vue-next-select.iife.js"></script>
+    <script>
+      const { ref, createApp } = Vue
+      const app = createApp({
+        name: 'app',
+        setup() {
+          const selectedOptions = ref('i')
+          const options = ref(['i'])
+          const loading = ref(false)
+          const handleSearchInput = async () => {
+            loading.value = true
+            await new Promise(resolve => setTimeout(resolve, 100))
+            loading.value = false
+          }
+          return {
+            selectedOptions,
+            options,
+            loading,
+            handleSearchInput,
+          }
+        },
+        template: `
+        <vue-select
+          v-model="selectedOptions"
+          :options="options"
+          searchable
+          @search:input="handleSearchInput"
+          :loading="loading"
+        >
+          <template #loading>
+            <span id="custom-loading">Loading</span>
+          </template>
+        </vue-select>
+        `,
+      })
+
+      app.component('vue-select', VueNextSelect)
+      app.mount(document.querySelector('#app'))
+    </script>
+  </body>
+</html>
diff --git a/cypress/integration/slots/loading/index.spec.js b/cypress/integration/slots/loading/index.spec.js
@@ -0,0 +1,17 @@
+/// <reference types="cypress" />
+import path from 'path'
+
+context('loading', () => {
+  it('should expose slot', () => {
+    cy.visit(path.join(__dirname, 'index.html'))
+
+    cy.get('#custom-loading').should('not.exist')
+
+    cy.get('input').type('i')
+    cy.get('#custom-loading').should('exist')
+
+    cy.wait(100).then(() => {
+      cy.get('#custom-loading').should('not.exist')
+    })
+  })
+})
diff --git a/cypress/integration/slots/tag/index.html b/cypress/integration/slots/tag/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+    />
+    <link type="text/css" rel="stylesheet" href="/dist/index.css" />
+    <script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script src="/dist/vue-next-select.iife.js"></script>
+    <script>
+      const { ref, createApp } = Vue
+      const app = createApp({
+        name: 'app',
+        setup() {
+          const selectedOptions = ref(['i'])
+          const options = ref(['i'])
+          return {
+            selectedOptions,
+            options,
+          }
+        },
+        template: `
+        <vue-select
+          v-model="selectedOptions"
+          :options="options"
+          multiple
+          taggable
+        >
+          <template #tag="{ option }">
+            <span>{{ option.toUpperCase() }}</span>
+          </template>
+        </vue-select>
+        `,
+      })
+
+      app.component('vue-select', VueNextSelect)
+      app.mount(document.querySelector('#app'))
+    </script>
+  </body>
+</html>
diff --git a/cypress/integration/slots/tag/index.spec.js b/cypress/integration/slots/tag/index.spec.js
@@ -0,0 +1,11 @@
+/// <reference types="cypress" />
+import path from 'path'
+
+context('tag', () => {
+  it('should expose slot', () => {
+    cy.visit(path.join(__dirname, 'index.html'))
+    cy.get('.vue-select').click()
+
+    cy.get('.vue-tag').should('have.text', 'I')
+  })
+})
diff --git a/cypress/integration/slots/toggle/index.html b/cypress/integration/slots/toggle/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+    />
+    <link type="text/css" rel="stylesheet" href="/dist/index.css" />
+    <script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script src="/dist/vue-next-select.iife.js"></script>
+    <script>
+      const { ref, createApp } = Vue
+      const app = createApp({
+        name: 'app',
+        setup() {
+          const selectedOptions = ref('i')
+          const options = ref(['i'])
+          return {
+            selectedOptions,
+            options,
+          }
+        },
+        template: `
+        <vue-select
+          v-model="selectedOptions"
+          :options="options"
+        >
+          <template #toggle="{ toggle, isFocusing }">
+            <button id="custom-toggle" @click="toggle">{{ isFocusing ? 'Opening' : 'Closing' }}</button>
+          </template>
+        </vue-select>
+        `,
+      })
+
+      app.component('vue-select', VueNextSelect)
+      app.mount(document.querySelector('#app'))
+    </script>
+  </body>
+</html>
diff --git a/cypress/integration/slots/toggle/index.spec.js b/cypress/integration/slots/toggle/index.spec.js
@@ -0,0 +1,15 @@
+/// <reference types="cypress" />
+import path from 'path'
+
+context('toggle', () => {
+  it('should expose slot', () => {
+    cy.visit(path.join(__dirname, 'index.html'))
+
+    cy.get('#custom-toggle').should('exist')
+    cy.get('#custom-toggle').should('have.text', 'Closing')
+
+    cy.get('#custom-toggle').click()
+
+    cy.get('#custom-toggle').should('have.text', 'Opening')
+  })
+})