From 01561caf4b00cf27453b5d5257fcbec8fae2a0b6 Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Wed, 22 Dec 2021 12:16:24 -0800
Subject: [PATCH] Add Storybook smoketest to GitHub CI (#520)

* Add Storybook smoketest to GitHub CI

* Reorganize files to accomodate Nuxt component discovery and exclude `.types` files from it

* Fix linting issues
---
 .github/workflows/ci.yml                     |  3 ++
 nuxt.config.js                               |  3 +-
 src/components/VModal/VModalContent.vue      |  2 +-
 src/components/VModal/VModalTarget.vue       |  2 +-
 src/components/VTeleport.js                  | 45 --------------------
 src/components/VTeleport/README.md           |  3 ++
 src/components/VTeleport/VTeleport.vue       | 23 ++++++++++
 src/components/VTeleport/VTeleportTarget.vue | 27 ++++++++++++
 src/components/VTeleport/meta/targets.js     | 11 +++++
 9 files changed, 70 insertions(+), 49 deletions(-)
 delete mode 100644 src/components/VTeleport.js
 create mode 100644 src/components/VTeleport/README.md
 create mode 100644 src/components/VTeleport/VTeleport.vue
 create mode 100644 src/components/VTeleport/VTeleportTarget.vue
 create mode 100644 src/components/VTeleport/meta/targets.js

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index d59674ffa8..e0521f82d1 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -45,3 +45,6 @@ jobs:
 
       - name: Run tests
         run: pnpm i18n:get-translations && pnpm test:unit
+
+      - name: Run Storybook smoke-test
+        run: pnpm storybook -- --ci --smoke-test
diff --git a/nuxt.config.js b/nuxt.config.js
index 1372047918..880cb4d855 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -127,7 +127,7 @@ export default {
   },
   components: {
     dirs: [
-      '~/components',
+      { path: '~/components', ignore: '**/*.types.js' },
       '~/components/ContentReport',
       '~/components/Filters',
       '~/components/ImageDetails',
@@ -136,7 +136,6 @@ export default {
       '~/components/VMetaSearch',
       '~/components/MediaTag',
       '~/components/Skeleton',
-      '~/components/VPopover',
     ],
   },
   plugins: [
diff --git a/src/components/VModal/VModalContent.vue b/src/components/VModal/VModalContent.vue
index 4b3cb2e805..8b65dd96fc 100644
--- a/src/components/VModal/VModalContent.vue
+++ b/src/components/VModal/VModalContent.vue
@@ -40,7 +40,7 @@
 <script>
 import { defineComponent, toRefs, ref } from '@nuxtjs/composition-api'
 import { FocusTrap } from 'focus-trap-vue'
-import { VTeleport } from '~/components/VTeleport'
+import VTeleport from '~/components/VTeleport/VTeleport'
 import { useDialogContent } from '~/composables/use-dialog-content'
 import { warn } from '~/utils/warn'
 import VButton from '~/components/VButton.vue'
diff --git a/src/components/VModal/VModalTarget.vue b/src/components/VModal/VModalTarget.vue
index 1118e12a78..13c03f3266 100644
--- a/src/components/VModal/VModalTarget.vue
+++ b/src/components/VModal/VModalTarget.vue
@@ -4,7 +4,7 @@
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
-import { VTeleportTarget } from '~/components/VTeleport'
+import VTeleportTarget from '~/components/VTeleport/VTeleportTarget'
 
 export default defineComponent({
   name: 'VModalTarget',
diff --git a/src/components/VTeleport.js b/src/components/VTeleport.js
deleted file mode 100644
index 2dfbcc4071..0000000000
--- a/src/components/VTeleport.js
+++ /dev/null
@@ -1,45 +0,0 @@
-// https://gist.github.com/Alan-Liang/a847559433919ecb53dff217ed9708bb
-
-const targets = {}
-
-export const VTeleportTarget = {
-  name: 'VTeleportTarget',
-  data: () => ({ children: [] }),
-  props: {
-    name: { type: String, required: true },
-  },
-  created() {
-    if (this.name in targets)
-      throw new Error(`VTeleportTarget: duplicate name ${this.name}`)
-    targets[this.name] = this
-  },
-  beforeDestroy() {
-    delete targets[this.name]
-    if (this.children.length > 0)
-      throw new Error(
-        `VTeleportTarget: ${this.name} beforeDestroy but still has children mounted`
-      )
-  },
-  render(h) {
-    return h('div', this.children.map((vm) => vm.$slots.default || []).flat())
-  },
-}
-
-export const VTeleport = {
-  name: 'VTeleport',
-  props: {
-    to: { type: String, required: true },
-  },
-  mounted() {
-    if (!(this.to in targets))
-      throw new Error(`VTeleport: non-existent target ${this.to}`)
-    targets[this.to].children.push(this)
-  },
-  beforeDestroy() {
-    if (!(this.to in targets))
-      throw new Error(`VTeleport: non-existent target ${this.to} on unmount`)
-    const children = targets[this.to].children
-    children.splice(children.indexOf(this), 1)
-  },
-  render: (h) => h('span'),
-}
diff --git a/src/components/VTeleport/README.md b/src/components/VTeleport/README.md
new file mode 100644
index 0000000000..6a30857e09
--- /dev/null
+++ b/src/components/VTeleport/README.md
@@ -0,0 +1,3 @@
+# VTeleport and VTeleportTarget
+
+Directly based on code from https://gist.github.com/Alan-Liang/a847559433919ecb53dff217ed9708bb
diff --git a/src/components/VTeleport/VTeleport.vue b/src/components/VTeleport/VTeleport.vue
new file mode 100644
index 0000000000..ffdfdb568e
--- /dev/null
+++ b/src/components/VTeleport/VTeleport.vue
@@ -0,0 +1,23 @@
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+import { targets } from './meta/targets'
+
+export default defineComponent({
+  name: 'VTeleport',
+  props: {
+    to: { type: String, required: true },
+  },
+  mounted() {
+    if (!(this.to in targets))
+      throw new Error(`VTeleport: non-existent target ${this.to}`)
+    targets[this.to].children.push(this)
+  },
+  beforeDestroy() {
+    if (!(this.to in targets))
+      throw new Error(`VTeleport: non-existent target ${this.to} on unmount`)
+    const children = targets[this.to].children
+    children.splice(children.indexOf(this), 1)
+  },
+  render: (h) => h('span'),
+})
+</script>
diff --git a/src/components/VTeleport/VTeleportTarget.vue b/src/components/VTeleport/VTeleportTarget.vue
new file mode 100644
index 0000000000..048a43806c
--- /dev/null
+++ b/src/components/VTeleport/VTeleportTarget.vue
@@ -0,0 +1,27 @@
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+import { targets } from './meta/targets'
+
+export default defineComponent({
+  name: 'VTeleportTarget',
+  props: {
+    name: { type: String, required: true },
+  },
+  data: () => ({ children: [] }),
+  created() {
+    if (this.name in targets)
+      throw new Error(`VTeleportTarget: duplicate name ${this.name}`)
+    targets[this.name] = this
+  },
+  beforeDestroy() {
+    delete targets[this.name]
+    if (this.children.length > 0)
+      throw new Error(
+        `VTeleportTarget: ${this.name} beforeDestroy but still has children mounted`
+      )
+  },
+  render(h) {
+    return h('div', this.children.map((vm) => vm.$slots.default || []).flat())
+  },
+})
+</script>
diff --git a/src/components/VTeleport/meta/targets.js b/src/components/VTeleport/meta/targets.js
new file mode 100644
index 0000000000..66ddff9651
--- /dev/null
+++ b/src/components/VTeleport/meta/targets.js
@@ -0,0 +1,11 @@
+/* eslint-disable unicorn/filename-case */
+/**
+ * Disable this rule for this file until there's a way to disable it more generally
+ * for everything inside of the `meta` folders.
+ *
+ * @see https://github.com/sindresorhus/eslint-plugin-unicorn/issues/686
+ */
+/**
+ * @type {Record<string, import('vue').Component>}
+ */
+export const targets = {}