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,27 @@
+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

@@ -5,7 +5,7 @@
   "main": "dist/vue-p5.js",
   "scripts": {
     "build": "rollup --config",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jest --watch"
   },
   "repository": {
     "type": "git",
@@ -22,12 +22,19 @@
   },
   "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",
+    "@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",
     "vue": "^2.6.11",
+    "vue-jest": "^3.0.7",
     "vue-template-compiler": "^2.6.11"
   },
   "peerDependencies": {

src/p5.vue

@@ -37,6 +37,16 @@ const initialEvents = [
   "windowResized"
 ];
 
+const initialConstants = [
+  'HALF_PI',
+  'PI',
+  'QUARTER_PI',
+  'TAU',
+  'TWO_PI',
+  'DEGREES',
+  'RADIANS'
+]
+
 export default {
   // re-export p5 for use with other libraries
   p5,
@@ -51,21 +61,51 @@ export default {
         : initialEvents;
     }
   },
-  mounted() {
-    new p5(sketch => {
+  methods: {
+    /**
+     * @function extractConstants
+     * @param {object} sketch => sketch object
+     * @returns {object} of constants
+     */
+    extractConstants: function (sketch) {
+      let constantsToExport = {}
+      for (const p5ConstName of initialConstants) {
+        const savedKey = sketch[p5ConstName]
+
+        if (savedKey) {
+          constantsToExport[p5ConstName] = savedKey;
+        }
+      }
+      return { ...constantsToExport };
+    },
+
+    extractEvents(sketch) {
+      /**
+       * @function extractConstants
+       * @see line87 for more details
+       */
+      const constants = this.extractConstants(sketch)
+      // NOTE: resetting sketch payload
+      sketch = { ...sketch, ...constants };
+      // emmiting with the new defined consts
       this.$emit("sketch", sketch);
 
       for (const p5EventName of this.p5Events) {
         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 => {
+      this.extractEvents(sketch)
     }, this.$el);
   }
 };

tests/unit/p5.spec.js

@@ -0,0 +1,107 @@
+import {
+  mount,
+  createLocalVue
+} from '@vue/test-utils'
+import p5 from '@/p5.vue'
+
+let wrapper;
+
+describe('p5', () => {
+  beforeEach(() => {
+    let 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 = {
+      template: `
+        <p5 @sketch="sketch"></p5>
+      `,
+      data() {
+        return {
+          skObj: null
+        }
+      },
+      methods: {
+        sketch(sk) {
+          this.skObj = sk
+        }
+      }
+    }
+
+    const mockWrapper = mount(mockComponent, {
+      components: {p5}
+    })
+
+    const data = mockWrapper.vm.skObj
+
+    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
+     */
+  });
+
+})