From bdea86419e9c930be85c85d2e7622101d9110d26 Mon Sep 17 00:00:00 2001 From: Nasr Galal Date: Fri, 8 Oct 2021 04:20:04 +0200 Subject: [PATCH 1/4] feat: add jest configuration and test cases for the framework --- babel.config.js | 3 ++ jest.config.js | 27 +++++++++++++++ package.json | 9 ++++- tests/unit/p5.spec.js | 80 +++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 118 insertions(+), 1 deletion(-) create mode 100644 babel.config.js create mode 100644 jest.config.js create mode 100644 tests/unit/p5.spec.js diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..7e0d5b3 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,3 @@ +module.exports = { + presets: ["@babel/preset-env"] +} \ No newline at end of file diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 0000000..a8cae68 --- /dev/null +++ b/jest.config.js @@ -0,0 +1,27 @@ +module.exports = { + + moduleNameMapper: { + '^@/(.*)$': '/src/$1', + '^~/(.*)$': '/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: [ + '/src/**/*.vue', + // '/pages/**/*.vue' + ] +} \ No newline at end of file diff --git a/package.json b/package.json index 5f7a933..66099b9 100644 --- a/package.json +++ b/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": { diff --git a/tests/unit/p5.spec.js b/tests/unit/p5.spec.js new file mode 100644 index 0000000..4262cca --- /dev/null +++ b/tests/unit/p5.spec.js @@ -0,0 +1,80 @@ +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' + ]) + }) + + + xit('should return P5 constants', () => { + /** + * HALF_PI PI QUARTER_PI TAU TWO_PI DEGREES RADIANS + */ + }) + + 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 + */ + }); + +}) \ No newline at end of file From 9123beb5d8c96f19f42d82758b8235a8f828eacd Mon Sep 17 00:00:00 2001 From: Nasr Galal Date: Sat, 9 Oct 2021 19:15:03 +0200 Subject: [PATCH 2/4] feat: add coverage workflow --- .github/workflows/coverage-monitor.yml | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 .github/workflows/coverage-monitor.yml diff --git a/.github/workflows/coverage-monitor.yml b/.github/workflows/coverage-monitor.yml new file mode 100644 index 0000000..0558e0b --- /dev/null +++ b/.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/coverage-monitor-action@1.1.0 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + clover_file: "./coverage/clover.xml" + threshold_alert: 70 + threshold_warning: 80 From bbab2fa2c04f51c17f0bc600122a305bd4417c9d Mon Sep 17 00:00:00 2001 From: Nasr Galal Date: Sun, 10 Oct 2021 05:14:33 +0200 Subject: [PATCH 3/4] feat: add p5 constants to the sketch payload --- src/p5.vue | 46 ++++++++++++++++++++++++++++++++++++++++--- tests/unit/p5.spec.js | 31 +++++++++++++++++++++++++++-- 2 files changed, 72 insertions(+), 5 deletions(-) diff --git a/src/p5.vue b/src/p5.vue index 4799255..21d2365 100644 --- a/src/p5.vue +++ b/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,14 +61,39 @@ 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); @@ -66,6 +101,11 @@ export default { this.$emit(vueEventName, sketch, ...args); }; } + } + }, + mounted() { + new p5(sketch => { + this.extractEvents(sketch) }, this.$el); } }; diff --git a/tests/unit/p5.spec.js b/tests/unit/p5.spec.js index 4262cca..451a379 100644 --- a/tests/unit/p5.spec.js +++ b/tests/unit/p5.spec.js @@ -20,7 +20,7 @@ describe('p5', () => { it('should return exact computed events', () => { - console.log(wrapper.vm.p5Events) + // console.log(wrapper.vm.p5Events) expect(wrapper.vm.p5Events).toStrictEqual([ 'preload', 'setup', 'draw', 'deviceMoved', @@ -36,10 +36,37 @@ describe('p5', () => { }) - xit('should return P5 constants', () => { + it('should return P5 constants', () => { /** * HALF_PI PI QUARTER_PI TAU TWO_PI DEGREES RADIANS */ + const mockComponent = { + template: ` + + `, + 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', () => { From b17eff7bb8553d8a6d4db7ecc402401c1f7c362e Mon Sep 17 00:00:00 2001 From: Nasr Galal Date: Wed, 13 Oct 2021 06:12:34 +0200 Subject: [PATCH 4/4] feat: add ts support and re export p5 This re-implements the previous commits with a better approach --- jest.config.js | 7 ++-- package.json | 37 ++++++++++-------- src/{main.js => main.ts} | 0 src/p5.vue | 56 ++++++--------------------- src/shims-p5.d.ts | 2 + src/shims-tsx.d.ts | 13 +++++++ src/shims-vue.d.ts | 4 ++ tests/unit/{p5.spec.js => p5.spec.ts} | 31 +++++++++------ tsconfig.json | 41 ++++++++++++++++++++ 9 files changed, 114 insertions(+), 77 deletions(-) rename src/{main.js => main.ts} (100%) create mode 100644 src/shims-p5.d.ts create mode 100644 src/shims-tsx.d.ts create mode 100644 src/shims-vue.d.ts rename tests/unit/{p5.spec.js => p5.spec.ts} (77%) create mode 100644 tsconfig.json diff --git a/jest.config.js b/jest.config.js index a8cae68..b612f63 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,12 +1,11 @@ module.exports = { - moduleNameMapper: { '^@/(.*)$': '/src/$1', '^~/(.*)$': '/src/$1', '^vue$': 'vue/dist/vue.common.js' }, moduleFileExtensions: [ - // 'ts', + 'ts', 'js', 'vue', 'json' @@ -14,7 +13,7 @@ module.exports = { testEnvironment: 'jsdom', setupFiles: ["jest-canvas-mock"], transform: { - // '^.+\\.ts$': 'ts-jest', + '^.+\\.ts$': 'ts-jest', '^.+\\.js$': 'babel-jest', '.*\\.(vue)$': 'vue-jest', }, @@ -24,4 +23,4 @@ module.exports = { '/src/**/*.vue', // '/pages/**/*.vue' ] -} \ No newline at end of file +} diff --git a/package.json b/package.json index 66099b9..f3ac9ae 100644 --- a/package.json +++ b/package.json @@ -2,30 +2,23 @@ "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": "jest --watch" }, - "repository": { - "type": "git", - "url": "git+https://github.com/Kinrany/vue-p5.git" - }, - "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", @@ -33,6 +26,8 @@ "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" @@ -40,7 +35,17 @@ "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" } } diff --git a/src/main.js b/src/main.ts similarity index 100% rename from src/main.js rename to src/main.ts diff --git a/src/p5.vue b/src/p5.vue index 21d2365..daf9485 100644 --- a/src/p5.vue +++ b/src/p5.vue @@ -2,14 +2,15 @@
- diff --git a/src/shims-p5.d.ts b/src/shims-p5.d.ts new file mode 100644 index 0000000..338e3c0 --- /dev/null +++ b/src/shims-p5.d.ts @@ -0,0 +1,2 @@ +declare module "p5" +declare module "p5/lib/p5.min.js" {} diff --git a/src/shims-tsx.d.ts b/src/shims-tsx.d.ts new file mode 100644 index 0000000..c656c68 --- /dev/null +++ b/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 + } + } +} diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts new file mode 100644 index 0000000..d9f24fa --- /dev/null +++ b/src/shims-vue.d.ts @@ -0,0 +1,4 @@ +declare module '*.vue' { + import Vue from 'vue' + export default Vue +} diff --git a/tests/unit/p5.spec.js b/tests/unit/p5.spec.ts similarity index 77% rename from tests/unit/p5.spec.js rename to tests/unit/p5.spec.ts index 451a379..3795b81 100644 --- a/tests/unit/p5.spec.js +++ b/tests/unit/p5.spec.ts @@ -1,14 +1,18 @@ import { mount, - createLocalVue + createLocalVue, + Wrapper, + VueClass, } from '@vue/test-utils' import p5 from '@/p5.vue' +import Vue from 'vue'; +import { Component } from 'vue/types/umd'; -let wrapper; - +let wrapper: any; +let localVue: any; describe('p5', () => { beforeEach(() => { - let localVue = createLocalVue() + localVue = createLocalVue() wrapper = mount(p5, { localVue, }) @@ -40,27 +44,30 @@ describe('p5', () => { /** * HALF_PI PI QUARTER_PI TAU TWO_PI DEGREES RADIANS */ - const mockComponent = { + const mockComponent: Component = Vue.extend({ template: ` - + `, data() { return { - skObj: null + p5: {}, + sk: {} } }, methods: { - sketch(sk) { - this.skObj = sk + sketch(sk: any, p5: any): void { + this.p5 = new p5() + this.sk = sk } } - } + }) - const mockWrapper = mount(mockComponent, { + const mockWrapper: Wrapper = mount(mockComponent, { + localVue: createLocalVue(), components: {p5} }) - const data = mockWrapper.vm.skObj + const data: any = mockWrapper.vm.p5 expect(data.HALF_PI).toStrictEqual(1.5707963267948966) expect(data.PI).toStrictEqual(3.141592653589793) diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..855c92a --- /dev/null +++ b/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" + ] +}