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 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..b612f63 --- /dev/null +++ b/jest.config.js @@ -0,0 +1,26 @@ +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' + ] +} diff --git a/package.json b/package.json index 5f7a933..f3ac9ae 100644 --- a/package.json +++ b/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" } } 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 4799255..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.ts b/tests/unit/p5.spec.ts new file mode 100644 index 0000000..3795b81 --- /dev/null +++ b/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: ` + + `, + data() { + return { + p5: {}, + sk: {} + } + }, + methods: { + sketch(sk: any, p5: any): void { + this.p5 = new p5() + this.sk = sk + } + } + }) + + const mockWrapper: Wrapper = 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 + */ + }); + +}) \ No newline at end of file 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" + ] +}