add unit and e2e testing

Author: sonicoder86

e2e/javascript/index.test.js

@@ -0,0 +1,11 @@
+import 'expect-puppeteer';
+
+describe('Google', () => {
+  beforeAll(async () => {
+    await page.goto('http://localhost:3000')
+  });
+
+  it('should display playground text on page', async () => {
+    await expect(page).toMatch('Vue 3.0.5 Playground');
+  });
+});

e2e/typescript/index.test.ts

@@ -0,0 +1,11 @@
+import 'expect-puppeteer';
+
+describe('Google', () => {
+  beforeAll(async () => {
+    await page.goto('http://localhost:3000')
+  });
+
+  it('should display playground text on page', async () => {
+    await expect(page).toMatch('Vue 3.0.5 Playground');
+  });
+});

jest.e2e.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  moduleFileExtensions: [
+    'js',
+    'ts',
+    'json'
+  ],
+  preset: 'jest-puppeteer',
+  transform: {
+    '^.+\\.js$': 'babel-jest',
+    '^.+\\.ts$': 'ts-jest'
+  }
+};

jest.unit.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  moduleFileExtensions: [
+    'js',
+    'ts',
+    'json',
+    'vue'
+  ],
+  transform: {
+    '^.+\\.js$': 'babel-jest',
+    '^.+\\.ts$': 'ts-jest',
+    '^.+\\.vue$': 'vue-jest'
+  }
+};

package-lock.json

@@ -8,17 +8,50 @@
   "scripts": {
     "start": "vite",
     "build": "vite build",
-    "test": "echo 'No test specified'"
+    "test": "npm run test:unit:javascript && npm run test:unit:typescript",
+    "test:unit:javascript": "jest --config=jest.unit.config.js src-javascript",
+    "test:unit:typescript": "jest --config=jest.unit.config.js src-typescript",
+    "test:e2e:javascript": "start-server-and-test start http://localhost:3000 e2e:javascript",
+    "test:e2e:typescript": "start-server-and-test start http://localhost:3000 e2e:typescript",
+    "e2e:javascript": "jest --config=jest.e2e.config.js e2e/javascript",
+    "e2e:typescript": "jest --config=jest.e2e.config.js e2e/typescript"
   },
   "dependencies": {
     "vue": "^3.0.5",
     "vue-router": "^4.0.1",
     "vuex": "^4.0.0-rc.2"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.12.11",
+    "@types/expect-puppeteer": "^4.4.5",
+    "@types/jest-environment-puppeteer": "^4.4.1",
+    "@types/puppeteer": "^5.4.2",
     "@vitejs/plugin-vue": "^1.1.2",
     "@vitejs/plugin-vue-jsx": "^1.0.2",
     "@vue/compiler-sfc": "^3.0.5",
-    "vite": "^2.0.0-beta.56"
+    "@vue/test-utils": "2.0.0-alpha.3",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^26.6.3",
+    "expect-puppeteer": "^4.4.0",
+    "jest": "^26.6.3",
+    "jest-puppeteer": "^4.4.0",
+    "puppeteer": "^5.5.0",
+    "start-server-and-test": "^1.11.7",
+    "ts-jest": "^26.5.0",
+    "typescript": "^4.1.3",
+    "vite": "^2.0.0-beta.56",
+    "vue-jest": "^5.0.0-alpha.8"
+  },
+  "babel": {
+    "presets": [
+      [
+        "@babel/preset-env",
+        {
+          "targets": {
+            "node": "current"
+          }
+        }
+      ]
+    ]
   }
 }

package.json

@@ -0,0 +1,13 @@
+import { mount } from '@vue/test-utils';
+import Coupon from './Coupon.vue';
+
+describe('Coupon', () => {
+  it('should trigger coupon percent on button click', () => {
+    const wrapper = mount(Coupon, { props: { percent: 10 } });
+
+    wrapper.find('.btn').trigger('click');
+
+    expect(wrapper.emitted().redeem).toHaveLength(1);
+    expect(wrapper.emitted().redeem[0]).toEqual([10]);
+  });
+});

src-javascript/components/Coupon.test.js

@@ -0,0 +1,10 @@
+import { mount } from '@vue/test-utils';
+import Username from './Username.vue';
+
+describe('Username', () => {
+  it('should display required text', () => {
+    const wrapper = mount(Username);
+
+    expect(wrapper.find('.invalid-feedback').text()).toEqual('Your username is required.');
+  });
+});

src-javascript/components/Username.test.js

@@ -4,7 +4,7 @@
     <label for="username">Default label</label>
   </slot>
   <div class="input-group">
-    <div class="input-group-prepend" v-at-sign:foo.a.b="label"></div>
+    <div class="input-group-prepend"></div>
     <input type="text" class="form-control" id="username" placeholder="Username" />
     <div class="invalid-feedback" style="width: 100%;">
       Your username is required.

src-javascript/components/Username.vue

@@ -0,0 +1,13 @@
+import { mount } from '@vue/test-utils';
+import Coupon from './Coupon.vue';
+
+describe('Coupon', () => {
+  it('should trigger coupon percent on button click', () => {
+    const wrapper = mount(Coupon, { props: { percent: 10 } });
+
+    wrapper.find<HTMLButtonElement>('.btn').trigger('click');
+
+    expect(wrapper.emitted().redeem).toHaveLength(1);
+    expect(wrapper.emitted().redeem[0]).toEqual([10]);
+  });
+});