fix: use semantic-action

Author: bahmutov

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "eslint.enable": false
+}

package.json

@@ -61,13 +61,14 @@
     "test": "npm run unit",
     "unit": "mocha src/*-spec.js",
     "unused-deps": "dependency-check --unused --no-dev .",
-    "semantic-release": "semantic-release"
+    "semantic-release": "semantic-action pre && npm publish && semantic-action post"
   },
   "release": {
     "analyzeCommits": "simple-commit-message"
   },
   "devDependencies": {
     "ban-sensitive-files": "1.9.2",
+    "cypress": "1.4.0",
     "dependency-check": "2.9.2",
     "deps-ok": "1.2.1",
     "git-issues": "1.3.1",
@@ -76,7 +77,8 @@
     "nsp": "3.1.0",
     "pre-git": "3.16.0",
     "prettier-standard": "8.0.0",
+    "semantic-action": "1.1.0",
     "standard": "10.0.3",
-    "semantic-release": "^11.0.2"
+    "vue": "2.5.13"
   }
 }

src/index.js

@@ -1,3 +1,71 @@
-'use strict'
+/* global Cypress, cy */
 
-module.exports = true
+// having weak reference to styles prevents garbage collection
+// and "losing" styles when the next test starts
+const stylesCache = new Map()
+
+function copyStyles (component) {
+  let styles
+  if (stylesCache.has(component)) {
+    styles = stylesCache.get(component)
+  } else {
+    styles = document.querySelectorAll('head style')
+    if (styles.length) {
+      console.log('injected %d styles', styles.length)
+      stylesCache.set(component, styles)
+    } else {
+      console.log('No styles injected for this component')
+      styles = null
+    }
+  }
+
+  if (!styles) {
+    return
+  }
+
+  const parentDocument = window.parent.document
+  const projectName = Cypress.config('projectName')
+  const appIframeId = `Your App: '${projectName}'`
+  const appIframe = parentDocument.getElementById(appIframeId)
+  const head = appIframe.contentDocument.querySelector('head')
+  styles.forEach(style => {
+    head.appendChild(style)
+  })
+}
+
+const deleteConstructor = comp => delete comp._Ctor
+
+function deleteCachedConstructors (component) {
+  if (!component.components) {
+    return
+  }
+  Cypress._.values(component.components).forEach(deleteConstructor)
+}
+
+const mountVue = component => () => {
+  cy.visit('index.html')
+  cy
+    .window()
+    .its('Vue')
+    .then(Vue => {
+      deleteCachedConstructors(component)
+      Cypress.vue = new Vue(component).$mount('#app')
+      copyStyles(component)
+    })
+}
+
+module.exports = mountVue
+
+// export const loadAndMountMyComponent = VueComponent => () => {
+//   cy.visit('index.html')
+//   cy
+//     .window()
+//     .its('Vue')
+//     .then(Vue => {
+//       deleteCachedConstructors(VueComponent)
+//       // TODO go through ITS components and delete their constructors
+//       // wonder if there is unified list
+//       Cypress.vue = new Vue(VueComponent).$mount('#app')
+//       copyStyles(VueComponent)
+//     })
+// }