Setup cypress test for book

package.json

@@ -19,6 +19,8 @@
     "build:book": "yarn workspace vuestic-ui build:book",
     "build:types": "yarn workspace vuestic-ui build:types",
     "test:unit": "yarn workspace vuestic-ui test:unit",
+    "test:e2e": "yarn workspace vuestic-ui test:e2e",
+    "test:e2e:production": "yarn workspace vuestic-ui test:e2e:production",
     "test:coverage": "yarn workspace vuestic-ui test:coverage",
     "lint:style": "yarn workspace vuestic-ui lint:style",
     "serve:docs": "yarn workspace docs serve",

packages/docs/src/page-configs/ui-elements/file-upload/api-options.ts

@@ -9,4 +9,4 @@ export default defineManualApi({
       types: '`(files: VaFile[]) => void`',
     },
   },
-})
+})

packages/ui/.eslintrc.js

@@ -6,6 +6,7 @@ module.exports = {
   },
   extends: [
     'plugin:vue/vue3-essential',
+    'plugin:cypress/recommended',
     '@vue/standard',
     '@vue/typescript/recommended',
   ],
@@ -43,6 +44,12 @@ module.exports = {
         'vue/require-name-property': 'error',
       },
     },
+    {
+      files: '*.spec.*',
+      rules: {
+        'no-unused-expressions': 'off',
+      },
+    },
   ],
   ignorePatterns: ['**/*spec.disabled.*', '**/wip-*/**'],
 }

packages/ui/cypress.json

@@ -0,0 +1,4 @@
+{
+  "video": false,
+  "screenshotOnRunFailure": false
+}

packages/ui/cypress/fixtures/components.json

@@ -0,0 +1 @@
+{"components":["VaAccordion.demo.vue","VaAffix.demo.vue","VaAlert.demo.vue","VaAppBar.demo.vue","VaAvatar.demo.vue","VaBacktop.demo.vue","VaBadge.demo.vue","VaBreadcrumbs.demo.vue","VaButton.demo.vue","VaButtonDropdown.demo.vue","VaButtonGroup.demo.vue","VaButtonToggle.demo.vue","VaCard.demo.vue","VaCheckbox.demo.vue","VaChip.demo.vue","VaCollapse.demo.vue","VaConfig.demo.vue","VaContent.demo.vue","VaDataTable.demo.vue","VaDataTable.new.demo.vue","VaDateInput.demo.vue","VaDatePicker.demo.vue","VaDivider.demo.vue","VaDropdown.demo.vue","VaFileUpload.demo.vue","VaForm.demo.vue","VaFormValidationLib.demo.vue","VaHover.demo.vue","VaIcon.demo.vue","VaImage.demo.vue","VaInfiniteScroll.demo.vue","VaInnerLoading.demo.vue","VaInput.demo.vue","VaList.demo.vue","VaModal.demo.vue","VaNavbar.demo.vue","VaOptionList.demo.vue","VaPagination.demo.vue","VaParallax.demo.vue","VaPopover.demo.vue","VaProgressBar.demo.vue","VaProgressCircle.demo.vue","VaRadio.demo.vue","VaRating.demo.vue","VaSelect.demo.vue","VaSeparator.demo.vue","VaSidebar.demo.vue","VaSlider.demo.vue","VaSwitch.demo.vue","VaTabs.demo.vue","VaTimeInput.demo.vue","VaTimePicker.demo.vue","VaTimeline.demo.vue","VaToast.demo.vue","VaTreeRoot.demo.vue"]}

packages/ui/cypress/fixtures/example.json

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

packages/ui/cypress/integration/page-errors.spec.ts

@@ -0,0 +1,33 @@
+/// <reference types="cypress" />
+// @ts-ignore
+import { components } from '../fixtures/components.json'
+
+beforeEach(() => {
+  cy.visit('http://localhost:8080/', {
+    onBeforeLoad (win) {
+      cy.stub(win.console, 'warn').as('warn')
+      cy.stub(win.console, 'error').as('error')
+    },
+  })
+})
+
+it('Page contain components list', () => {
+  cy.document().then((doc) => {
+    const components = doc.querySelectorAll('.BookComponentListItem')
+    expect(components).to.not.be.empty
+  })
+})
+
+describe('Going through components', () => {
+  components.forEach((component: string) => {
+    it(`Checking ${component} component`, () => {
+      expect(component).is.a('string')
+      const title = component.split('-').join('')
+      const titleReg = new RegExp(`^${title}`, 'i')
+      expect(cy.get('.BookComponentListItem').contains(titleReg)).to.exist
+      cy.get('.BookComponentListItem').contains(titleReg).click()
+      cy.get('@warn').should('not.be.called')
+      cy.get('@error').should('not.be.called')
+    })
+  })
+})

packages/ui/cypress/plugins/index.ts

@@ -0,0 +1,22 @@
+/// <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) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

tests/e2e/support/commands.js → packages/ui/cypress/support/commands.ts

@@ -10,16 +10,16 @@
 //
 //
 // -- This is a parent command --
-// Cypress.Commands.add("login", (email, password) => { ... })
+// Cypress.Commands.add('login', (email, password) => { ... })
 //
 //
 // -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
 //
 //
 // -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
 //
 //
-// -- This is will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

packages/ui/cypress/utils/generateComponentsList.ts

@@ -0,0 +1,24 @@
+const { readdir, writeFile } = require('fs')
+const glob = require('glob')
+const path = require('path')
+const componentsDir = path.join(__dirname, '../../src/components')
+const outputDir = path.join(__dirname, '../fixtures/components.json')
+
+readdir(componentsDir, { withFileTypes: true }, (err: any, files: any) => {
+  if (err) { throw err }
+  const components: string[] = []
+  files
+    .filter((file: any) => file.isDirectory())
+    .forEach((directory: any) => {
+      const files = glob('*.demo.vue', { cwd: path.join(componentsDir, directory.name), sync: true })
+      components.push(...files)
+    })
+
+  writeFile(outputDir, JSON.stringify({ components }), (err: any) => {
+    if (err) {
+      console.log('Error writing file', err)
+    } else {
+      console.log('Successfully wrote file')
+    }
+  })
+})

packages/ui/package.json

@@ -39,7 +39,8 @@
     "lint:style": "stylelint '**/*.{vue,html,css,scss}'",
     "test:unit": "vue-cli-service test:unit -w 1",
     "test:coverage": "vue-cli-service test:unit --coverage",
-    "test:e2e": "vue-cli-service test:e2e",
+    "test:e2e": "ts-node cypress/utils/generateComponentsList.ts && vue-cli-service test:e2e",
+    "test:e2e:production": "ts-node cypress/utils/generateComponentsList.ts && vue-cli-service test:e2e --headless",
     "push": "npm publish --tag=next",
     "push-production": "npm publish --tag=latest",
     "precommit": "lint-staged --concurrent=false",
@@ -80,6 +81,8 @@
     "@vue/eslint-config-standard": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "@vue/test-utils": "2.0.0-beta.14",
+    "@vuelidate/core": "^2.0.0-alpha.40",
+    "@vuelidate/validators": "^2.0.0-alpha.28",
     "babel-loader": "^8.2.1",
     "core-js": "^3.8.2",
     "cross-env": "^7.0.2",

packages/ui/src/components/va-form/VaFormValidationLib.demo.vue

@@ -7,17 +7,17 @@
       <va-form ref="vuelidateForm">
         <va-input
           label="required name"
-          v-model="$v.name.$model"
-          :error="$v.name.$error"
+          v-model="v.name.$model"
+          :error="v.name.$error"
           :error-messages="[
-            !$v.name.required && 'required',
-            !$v.name.minLength && `Name must have at least ${$v.name.$params.minLength.min} letters.`
+            !v.name.required && 'required',
+            !v.name.minLength && `Name must have at least ${v.name.$params.minLength.min} letters.`
           ]"
         />
         <va-input
           label="required age"
-          v-model="$v.age.$model"
-          :error="$v.age.$error"
+          v-model="v.age.$model"
+          :error="v.age.$error"
           :error-messages="[
             !$v.age.required && 'required',
             !$v.age.numeric && 'Age must be a number',
@@ -26,8 +26,8 @@
         />
         <va-input
           label="required email"
-          v-model="$v.email.$model"
-          :error="$v.email.$error"
+          v-model="v.email.$model"
+          :error="v.email.$error"
           :error-messages="[
             !$v.email.required && 'required',
             !$v.email.email && 'Email must be correct'
@@ -42,39 +42,33 @@
 </template>
 
 <script>
+import { defineComponent, ref } from 'vue'
+
+import { useValidation, useValidationProps } from '../../composables/useValidation'
 import { VaForm } from './index'
 import { VaInput } from '../va-input'
 
-import { validationMixin } from 'vuelidate'
+import useVuelidate from '@vuelidate/core'
 import { required, minLength, email, between, numeric } from 'vuelidate/lib/validators'
 
-export default {
-  mixins: [validationMixin],
-  components: {
-    VaForm,
-    VaInput,
-  },
-  validations: {
-    name: {
-      required,
-      minLength: minLength(4),
-    },
-    email: {
-      required,
-      email,
-    },
-    age: {
-      required,
-      numeric,
-      between: between(10, 100),
-    },
-  },
-  data () {
-    return {
-      name: '',
-      age: 0,
-      email: '',
-    }
-  },
-}
+export default defineComponent({
+  components: { VaForm, VaInput },
+  props: useValidationProps,
+  setup: (props, { emit }) => ({
+    v: useVuelidate(
+      {
+        name: { required, minLength: minLength(4) },
+        email: { required, email },
+        age: { required, numeric, between: between(10, 100) },
+      },
+      {
+        name: ref(''),
+        age: ref(0),
+        email: ref(''),
+      },
+    ),
+    ...useValidation(props, emit),
+
+  }),
+})
 </script>

packages/ui/tsconfig.json

@@ -11,6 +11,7 @@
     "emitDecoratorMetadata": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
     "sourceMap": true,
     "baseUrl": ".",
     "declarationMap": false,

yarn.lock

@@ -4436,6 +4436,20 @@
   resolved "https://registry.yarnpkg.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz#b6b40a7625429d2bd7c2281ddba601ed05dc7f1a"
   integrity sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==
 
+"@vuelidate/core@^2.0.0-alpha.40":
+  version "2.0.0-alpha.40"
+  resolved "https://registry.yarnpkg.com/@vuelidate/core/-/core-2.0.0-alpha.40.tgz#eb8e6a46c5c3f66873c0ccf3b14b1b9122c8249b"
+  integrity sha512-f4Uo0yV2BHDi5+MXWDXRcqBv0u1Cqc/RudJLGqke3wLnIcH2r8sXEqRyuVoaN2KEPqbZiTFw/Uo50wx1J+ZDFQ==
+  dependencies:
+    vue-demi "^0.12.0"
+
+"@vuelidate/validators@^2.0.0-alpha.28":
+  version "2.0.0-alpha.28"
+  resolved "https://registry.yarnpkg.com/@vuelidate/validators/-/validators-2.0.0-alpha.28.tgz#636f941f3c293bd13d93ae8ec0bdaa9e1366e8d4"
+  integrity sha512-FLI4D6SfYas5gkRxc2Q8RU1Jv3mhO2wdNgYpnOEWdKB2S6vhy8ABFMXiyr4P764xY9zBmNg6OwceRfq8vYy6vA==
+  dependencies:
+    vue-demi "^0.12.0"
+
 "@vuestic/ag-grid-theme@latest":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@vuestic/ag-grid-theme/-/ag-grid-theme-1.0.3.tgz#870d40e7d6e113ec221692dc712383b55029fa04"
@@ -20191,6 +20205,11 @@ vue-cli-plugin-auto-routing@^1.2.0:
   resolved "https://registry.yarnpkg.com/vue-cli-plugin-auto-routing/-/vue-cli-plugin-auto-routing-1.3.0.tgz#7e9532c8f03b29e0c0f482ca380df12d4643e189"
   integrity sha512-wFoaRLR2mpJoiySlt8yGBRdqSj+yk45OdbocZNZG8KmrLewizuBvEpjcbCTZ4s2mBs0lE/SzzfO+2enElgqcXg==
 
+vue-demi@^0.12.0:
+  version "0.12.5"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.5.tgz#8eeed566a7d86eb090209a11723f887d28aeb2d1"
+  integrity sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==
+
 vue-eslint-parser@^7.0.0, vue-eslint-parser@^7.10.0:
   version "7.11.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz#214b5dea961007fcffb2ee65b8912307628d0daf"