feat: add unit tests for the framework

.github/workflows/coverage-monitor.yml

@@ -0,0 +1,22 @@
+name: Coverage-Monitor
+on: [pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+
+      - name: Install npm
+        run: npm install
+
+      - name: Test
+        run: npx jest --coverage
+
+      - name: Monitor coverage
+        uses: slavcodev/[email protected]
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          clover_file: "./coverage/clover.xml"
+          threshold_alert: 70
+          threshold_warning: 80

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@babel/preset-env"]
+}

jest.config.js

@@ -0,0 +1,26 @@
+module.exports = {
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+    '^~/(.*)$': '<rootDir>/src/$1',
+    '^vue$': 'vue/dist/vue.common.js'
+  },
+  moduleFileExtensions: [
+    'ts',
+    'js',
+    'vue',
+    'json'
+  ],
+  testEnvironment: 'jsdom',
+  setupFiles: ["jest-canvas-mock"],
+  transform: {
+    '^.+\\.ts$': 'ts-jest',
+    '^.+\\.js$': 'babel-jest',
+    '.*\\.(vue)$': 'vue-jest',
+  },
+  transformIgnorePatterns: ['/node_modules/(?!p5)'],
+  collectCoverage: false,
+  collectCoverageFrom: [
+    '<rootDir>/src/**/*.vue',
+    // '<rootDir>/pages/**/*.vue'
+  ]
+}

package.json

@@ -2,38 +2,50 @@
   "name": "vue-p5",
   "version": "0.9.0-rc2",
   "description": "Vue component wrapper for p5.js",
-  "main": "dist/vue-p5.js",
+  "author": "Ruslan Fadeev",
   "scripts": {
     "build": "rollup --config",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Kinrany/vue-p5.git"
+    "test": "jest --watch"
   },
-  "keywords": [
-    "Vue",
-    "p5js"
-  ],
-  "author": "Ruslan Fadeev",
-  "license": "LGPL-2.1",
-  "bugs": {
-    "url": "https://github.com/Kinrany/vue-p5/issues"
+  "main": "dist/vue-p5.js",
+  "dependencies": {
+    "p5": "^1.0.0"
   },
-  "homepage": "https://github.com/Kinrany/vue-p5#readme",
   "devDependencies": {
+    "@babel/core": "^7.15.8",
+    "@babel/preset-env": "^7.15.8",
     "@rollup/plugin-commonjs": "^11.0.2",
     "@rollup/plugin-node-resolve": "^7.1.1",
+    "@types/jest": "^27.0.2",
+    "@vue/cli-plugin-typescript": "~4.5.0",
+    "@vue/cli-service": "^4.5.13",
+    "@vue/test-utils": "^1.2.2",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^27.2.4",
+    "jest-canvas-mock": "^2.3.1",
     "postcss": "^7.0.27",
     "rollup": "^1.32.1",
     "rollup-plugin-vue": "^5.1.6",
+    "ts-jest": "^27.0.5",
+    "typescript": "~4.1.5",
     "vue": "^2.6.11",
+    "vue-jest": "^3.0.7",
     "vue-template-compiler": "^2.6.11"
   },
   "peerDependencies": {
     "vue": "^2.6.11"
   },
-  "dependencies": {
-    "p5": "^1.0.0"
+  "bugs": {
+    "url": "https://github.com/Kinrany/vue-p5/issues"
+  },
+  "homepage": "https://github.com/Kinrany/vue-p5#readme",
+  "keywords": [
+    "Vue",
+    "p5js"
+  ],
+  "license": "LGPL-2.1",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Kinrany/vue-p5.git"
   }
 }

src/p5.vue

@@ -2,14 +2,15 @@
   <div></div>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from "vue";
 import p5 from "p5/lib/p5.min.js";
 
-function distinct(arr) {
+function distinct(arr: string[]) {
   return Array.from(new Set(arr));
 }
 
-const initialEvents = [
+const initialEvents: string[] = [
   "preload",
   "setup",
   "draw",
@@ -37,10 +38,9 @@ const initialEvents = [
   "windowResized"
 ];
 
-export default {
+export default Vue.extend({
   // re-export p5 for use with other libraries
-  p5,
-
+  // p5,
   name: "VueP5",
   props: ["additionalEvents"],
   computed: {
@@ -51,22 +51,28 @@ export default {
         : initialEvents;
     }
   },
-  mounted() {
-    new p5(sketch => {
-      this.$emit("sketch", sketch);
+  methods: {
+    extractEvents(sketch: object) {
+      // emmiting with the new defined consts
+      this.$emit("sketch", sketch, p5);
 
-      for (const p5EventName of this.p5Events) {
+      for (const p5EventName of this.p5Events as string[]) {
         const vueEventName = p5EventName.toLowerCase();
         const savedCallback = sketch[p5EventName];
-
+  
         sketch[p5EventName] = (...args) => {
           if (savedCallback) {
             savedCallback(sketch, ...args);
           }
           this.$emit(vueEventName, sketch, ...args);
         };
       }
+    }
+  },
+  mounted() {
+    new p5((sketch: object) => {
+      this.extractEvents(sketch)
     }, this.$el);
   }
-};
+});
 </script>

src/shims-p5.d.ts

@@ -0,0 +1,2 @@
+declare module "p5"
+declare module "p5/lib/p5.min.js" {}

src/shims-tsx.d.ts

@@ -0,0 +1,13 @@
+import Vue, { VNode } from 'vue'
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any
+    }
+  }
+}

src/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}

tests/unit/p5.spec.ts

@@ -0,0 +1,114 @@
+import {
+  mount,
+  createLocalVue,
+  Wrapper,
+  VueClass,
+} from '@vue/test-utils'
+import p5 from '@/p5.vue'
+import Vue from 'vue';
+import { Component } from 'vue/types/umd';
+
+let wrapper: any;
+let localVue: any;
+describe('p5', () => {
+  beforeEach(() => {
+    localVue = createLocalVue()
+    wrapper = mount(p5, {
+      localVue,
+    })
+  })
+
+  it('should mount', () => {
+    expect(wrapper.vm).toBeTruthy()
+  })
+
+
+  it('should return exact computed events', () => {
+    // console.log(wrapper.vm.p5Events)
+    expect(wrapper.vm.p5Events).toStrictEqual([
+      'preload', 'setup',
+      'draw', 'deviceMoved',
+      'deviceTurned', 'deviceShaken',
+      'keyPressed', 'keyReleased',
+      'keyTyped', 'mouseMoved',
+      'mouseDragged', 'mousePressed',
+      'mouseReleased', 'mouseClicked',
+      'doubleClicked', 'mouseWheel',
+      'touchStarted', 'touchMoved',
+      'touchEnded', 'windowResized'
+    ])
+  })
+
+
+  it('should return P5 constants', () => {
+    /**
+     * HALF_PI PI QUARTER_PI TAU TWO_PI DEGREES RADIANS
+     */
+    const mockComponent: Component = Vue.extend({
+      template: `
+        <p5 @sketch="sketch"></p5>  
+      `,
+      data() {
+        return {
+          p5: {},
+          sk: {}
+        }
+      },
+      methods: {
+        sketch(sk: any, p5: any): void {
+          this.p5 = new p5()
+          this.sk = sk
+        }
+      }
+    })
+
+    const mockWrapper: Wrapper<any, any> = mount(mockComponent, {
+      localVue: createLocalVue(),
+      components: {p5}
+    })
+
+    const data: any = mockWrapper.vm.p5
+
+    expect(data.HALF_PI).toStrictEqual(1.5707963267948966)
+    expect(data.PI).toStrictEqual(3.141592653589793)
+    expect(data.QUARTER_PI).toStrictEqual(0.7853981633974483)
+    expect(data.TAU).toStrictEqual(6.283185307179586)
+    expect(data.TWO_PI).toStrictEqual(6.283185307179586)
+  })
+
+  xit('should return rest of structure events', () => {
+    /**
+     *
+    preload() setup()
+    draw() remove()
+    disableFriendlyErrors
+    noLoop() loop()
+    isLooping() push()
+    pop() redraw() p5()
+     */
+  });
+
+
+  xit('should return all P5 classes', () => {
+    /**
+     * p5.Graphics
+     * p5.MediaElement
+     * p5.File
+     * p5.Color
+     * p5.Geometry
+     * p5.Element
+     * p5.TypedDict
+     * p5.NumberDict
+     * p5.Image
+     * p5.Table
+     * p5.TableRow
+     * p5.PrintWriter
+     * p5.XML
+     * p5.Vector
+     * p5.Font
+     * p5.Shader
+     * p5.Camera
+     */
+  });
+
+})

tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env",
+      "jest"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}