Vue DOM Recorder

Proof of concept to track clicks in input type elements. Clicks are showed as steps that show the logical order for the interaction.

• Any element inside ActionZone.vue with attribute data-watched-element="true" will be logged
• You can disable this with data-watched-element="false"

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Run your unit tests

yarn test:unit

Run your e2e tests

yarn test:e2e

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

Folder structure

• cypress # local cypress data for e2e test
• public # static assets
• src
  • assets # assets to include inside webpack pipeline
    • styles # global scss / scss styles
  • components # vue components
  • store # vuex integration
• tests
  • e2e
    • specs # cypress e2e tests
  • unit # jest unit tests

Notes

• Jest tests should be inside tests/unit
  • Name should be componentName.spec.ts
• Cypress tests should be inside tests/e2e/spec
  • The name should be businessFeature.spec.ts

Basic flow

Roadmap

• migrating from global event listener (outside click) approach to directive-based
• better responsiveness for SideBar.vue
• inject RecorderModule into Vue components
• cypress aliases