feature(module): Add Test Suite

.github/workflows/ci.yml

@@ -65,6 +65,33 @@ jobs:
       - name: Lint
         run: pnpm lint
 
+  test:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        node: [16]
+        os: [ubuntu-latest]
+      fail-fast: false
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@master
+
+      - run: corepack enable
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          cache: 'pnpm'
+          node-version: ${{ matrix.node }}
+
+      - name: Install dependencies
+        run: pnpm install --shamefully-hoist --frozen-lockfile
+
+      - name: Run Tests
+        run: pnpm test
+
   release-build:
     if: |
       github.event_name == 'push' &&

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-swiper",
-  "version": "0.1.4",
+  "version": "0.1.1",
   "keywords": [
     "vue",
     "nuxt",
@@ -36,6 +36,7 @@
     "dev": "nuxi dev playground",
     "lint": "eslint --ext .js,.ts,.vue .",
     "lint:fix": "eslint --fix --ext .js,.ts,.vue .",
+    "test": "vitest run --dir test",
     "dev:build": "nuxi build playground",
     "prepare": "nuxt-module-build --stub && nuxi prepare playground"
   },
@@ -46,12 +47,15 @@
   "devDependencies": {
     "@nuxt/module-builder": "latest",
     "@nuxt/schema": "^3.0.0-rc.9",
+    "@nuxt/test-utils": "3.0.0-rc.9",
     "@nuxtjs/eslint-config-typescript": "latest",
     "@typescript-eslint/parser": "^5.0.1",
     "eslint": "^8.7.0",
     "nuxt": "^3.0.0-rc.9",
     "prettier": "^2.5.1",
     "typescript": "^4.4.4",
+    "vue": "^3.2.38",
+    "vitest": "^0.23.2",
     "vue-eslint-parser": "^9.1.0"
   },
   "resolutions": {

playground/app.vue

@@ -4,20 +4,26 @@ const colors = Array.from({ length: 10 }, () => {
   const r = Math.floor(Math.random() * 256)
   const g = Math.floor(Math.random() * 256)
   const b = Math.floor(Math.random() * 256)
-  return `rgb(${r}, ${g}, ${b})`
+  // Figure out contrast color for font
+  const contrast = r * 0.299 + g * 0.587 + b * 0.114 > 186 ? 'black' : 'white'
+
+  return { bg: `rgb(${r}, ${g}, ${b})`, color: contrast }
 })
+
 const fakeArray = ref(colors)
 </script>
 
 <template>
   <div>
     <h1>nuxt-swiper playground</h1>
     <ul>
+      <li>Prefix: <strong>Swiper</strong></li>
       <li>
         Enabled Modules: <strong>[SwiperAutoplay, SwiperEffectCreative]</strong>
       </li>
-      <li>Composables Enabled: <strong>true</strong></li>
     </ul>
+    <hr />
+    <h2>Swiper Creative Effect</h2>
     <Swiper
       :modules="[SwiperAutoplay, SwiperEffectCreative]"
       :slides-per-view="1"
@@ -38,9 +44,29 @@ const fakeArray = ref(colors)
       }"
     >
       <SwiperSlide
-        v-for="(bg, idx) in fakeArray"
+        v-for="(array, idx) in fakeArray"
+        :key="idx"
+        :style="`background-color: ${array.bg}; color: ${array.color}`"
+      >
+        {{ idx }}
+      </SwiperSlide>
+    </Swiper>
+    <h2>Swiper Card Effect</h2>
+    <Swiper
+      class="swiper-cards"
+      :modules="[SwiperAutoplay, SwiperEffectCards]"
+      :slides-per-view="1"
+      :loop="true"
+      :effect="'cards'"
+      :autoplay="{
+        delay: 8000,
+        disableOnInteraction: true
+      }"
+    >
+      <SwiperSlide
+        v-for="(array, idx) in fakeArray"
         :key="idx"
-        :style="`background-color: ${bg}`"
+        :style="`background-color: ${array.bg}; color: ${array.color}`"
       >
         {{ idx }}
       </SwiperSlide>
@@ -56,8 +82,16 @@ const fakeArray = ref(colors)
   font-size: 18px;
   width: 100vh;
   height: 20vh;
-  color: #000;
   font-size: 4rem;
   font-weight: bold;
+  font-family: 'Roboto', sans-serif;
+}
+.swiper-cards {
+  width: 240px;
+  height: 240px;
+}
+.swiper-cards .swiper-slide {
+  border-radius: 6px;
+  border: 1px solid black;
 }
 </style>

playground/nuxt.config.ts

@@ -3,7 +3,6 @@ import { defineNuxtConfig } from 'nuxt'
 export default defineNuxtConfig({
   modules: ['nuxt-swiper'],
   swiper: {
-    modules: ['autoplay', 'effect-creative'],
-    importComposables: true
+    modules: ['autoplay', 'effect-creative', 'effect-cards']
   }
 })