Merge pull request vu3th#102 from chnejohnson/dev

Add test and eslint, and update docs

.eslintrc.js

@@ -0,0 +1,31 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
+  plugins: ['@typescript-eslint', 'prettier'],
+  rules: {
+    // eslint
+    'no-console': 'error',
+
+    // typescript
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+  },
+  overrides: [
+    {
+      files: ['*.test.ts'],
+      rules: {
+        '@typescript-eslint/no-empty-function': 'off',
+      },
+    },
+  ],
+  ignorePatterns: ['dist'],
+}

docs/configurations.md

@@ -4,7 +4,7 @@
 
 - Example: [vuecli + vue-dapp starter](https://github.com/chnejohnson/vue3-dapp-starter/tree/vuecli)
 
-If you're using [Vue CLI](https://cli.vuejs.org/guide/creating-a-project.html), you have to install [node-polyfill-webpack-plugin](https://www.npmjs.com/package/node-polyfill-webpack-plugin) and add the plugin in `vite.config.ts` as follows.
+If you're using [Vue CLI](https://cli.vuejs.org/guide/creating-a-project.html), you have to install [node-polyfill-webpack-plugin](https://www.npmjs.com/package/node-polyfill-webpack-plugin) and add the plugin in `vue.config.js` as follows.
 
 ```js
 const { defineConfig } = require("@vue/cli-service");
@@ -122,6 +122,6 @@ export default defineNuxtConfig({
 
 ```
 
-:::tip
+:::info
 Refer to [issue#33](https://github.com/chnejohnson/vue-dapp/issues/33)
 :::

docs/resources.md

@@ -1,10 +1,7 @@
 # Resources
 
-## Use cases
-- [splitter - Create a contract for your allocation of earnings.](https://github.com/chnejohnson/splitter)
-- [macier - An interface for the Minimal Anti-Collusion Infrastructure (MACI)](https://github.com/chnejohnson/macier)
+Thanks for the inspiration provided by the following package.
 
-## Inspiration
 - [useDapp: Framework for rapid Dapp development.](https://github.com/EthWorks/useDApp)
 - [vue-tailwind-ethereum-template](https://github.com/ScopeLift/vue-tailwind-ethereum-template)
 - [web3Modal: A single Web3 / Ethereum provider solution for all Wallets](https://github.com/Web3Modal/web3modal)

package.json

@@ -18,10 +18,11 @@
     "dev": "vite",
     "build:demo": "vite build",
     "serve:demo": "vite preview",
-    "lint": "prettier -c --parser typescript \"{src,__tests__,e2e}/**/*.[jt]s?(x)\"",
-    "lint:fix": "yarn run lint --write",
+    "lint": "eslint './src/**/*.{js,ts}'",
+    "prettier-check": "prettier -c --parser typescript \"{src,__tests__,e2e}/**/*.[jt]s?(x)\"",
+    "format": "yarn run lint --write",
     "test:types": "tsc --build tsconfig.json",
-    "test:unit": "jest",
+    "test:unit": "vitest --environment jsdom",
     "test": "yarn run test:types && yarn run test:unit",
     "dev:docs": "vitepress dev docs",
     "build:docs": "vitepress build docs",
@@ -48,13 +49,18 @@
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/git": "^10.0.1",
     "@types/jest": "^27.5.1",
+    "@typescript-eslint/eslint-plugin": "^5.45.1",
+    "@typescript-eslint/parser": "^5.45.1",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vue/compiler-sfc": "^3.2.36",
-    "@vue/test-utils": "^2.0.0",
+    "@vue/test-utils": "^2.2.6",
     "@vuedx/typecheck": "^0.7.5",
     "@vuedx/typescript-plugin-vue": "^0.7.5",
+    "eslint": "^8.29.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "husky": "^8.0.1",
-    "jest": "^28.1.0",
+    "jsdom": "^20.0.3",
     "lint-staged": "^12.4.2",
     "node-stdlib-browser": "^1.2.0",
     "pascalcase": "^2.0.0",
@@ -73,6 +79,7 @@
     "vite": "^3.2.4",
     "vite-plugin-windicss": "^1.8.4",
     "vitepress": "^1.0.0-alpha.29",
+    "vitest": "^0.25.5",
     "vue": "^3.2.45",
     "windicss": "^3.5.4"
   },

src/composables/useEthers.ts

@@ -54,7 +54,7 @@ async function activate(externalProvider: ExternalProvider) {
    * But the WalletConnect will keep polling, throwing errors, and the connecting status is stuck,
    * so the timeout is needed.
    */
-  async function getData(timeout: number = 5000) {
+  async function getData(timeout = 5000) {
     return Promise.race([
       Promise.all([
         _provider.getNetwork(),
@@ -94,7 +94,7 @@ async function activate(externalProvider: ExternalProvider) {
   // Update ether balance every 10s
   // Question: how about update balance via provider.on('block', getBalance)
   clearInterval(updateBalanceInterval)
-  const updateBalance = async (interval: number = 10000) => {
+  const updateBalance = async (interval = 10000) => {
     updateBalanceInterval = setInterval(async () => {
       if (!signer.value) return
       try {
@@ -126,10 +126,11 @@ async function lookupDNS(
       case 1:
       case 3:
       case 4:
-      case 5:
+      case 5: {
         //  ens will return the primary domain set by user.
         const _ens = await (_provider || provider.value)?.lookupAddress(address)
         return _ens || ''
+      }
       // case xxxx: //  Another or Custom DNSe
       default:
         return ''

src/connectors/coinbaseWallet.ts

@@ -15,6 +15,7 @@ import {
  * Coinbase Wallet SDK
  * Docs: https://docs.cloud.coinbase.com/wallet-sdk/docs/
  */
+/* eslint-disable */
 export interface ICoinbaseWalletProvider extends CoinbaseWalletProvider {}
 
 export type CoinbaseWalletConnectorOptions = CoinbaseWalletSDKOptions & {

src/connectors/walletConnect.ts

@@ -15,6 +15,7 @@ import {
  * Test Wallet: https://test.walletconnect.org/ \
  * Source: https://github.com/WalletConnect/walletconnect-monorepo/blob/v1.0/packages/providers/web3-provider/src/index.ts
  */
+/* eslint-disable */
 export interface IWalletConnectProvider extends WalletConnectProvider {}
 
 export type WalletConnectOptions = ConstructorParameters<

src/types/global.d.ts

@@ -1,4 +1,4 @@
 // Global compile-time constants
-declare var __DEV__: boolean
-declare var __BROWSER__: boolean
-declare var __CI__: boolean
+declare let __DEV__: boolean
+declare let __BROWSER__: boolean
+declare let __CI__: boolean

src/types/vue-shim.d.ts

@@ -1,5 +1,9 @@
 declare module '*.vue' {
   import { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
+  const component: DefineComponent<
+    Record<string, any>,
+    Record<string, any>,
+    any
+  >
   export default component
 }

src/utils/format.ts

@@ -11,7 +11,7 @@ export function shortenAddress(address: string): string {
   }
 }
 
-export function displayEther(balance: BigNumber | bigint, fixed: number = 2) {
+export function displayEther(balance: BigNumber | bigint, fixed = 2) {
   return (+formatEther(balance)).toFixed(fixed)
 }
 

tests/unit/components/Board.test.ts

@@ -0,0 +1,46 @@
+import { mount } from '@vue/test-utils'
+import Board from '@/components/Board.vue'
+import Modal from '@/components/Modal.vue'
+import Loader from '@/components/Loader.vue'
+import { MetaMaskConnector, Connector } from '@/connectors'
+const connectors: Connector[] = [new MetaMaskConnector()]
+
+describe('Board component', () => {
+  beforeEach(() => {
+    // create teleport target
+    const el = document.createElement('div')
+    el.id = 'modal'
+    document.body.appendChild(el)
+  })
+
+  afterEach(() => {
+    // clean up
+    document.body.outerHTML = ''
+  })
+  it('should work with import on demand', () => {
+    // mount(Loader)
+    // mount(Modal, {
+    //   propsData: {
+    //     modalOpen: true,
+    //   },
+    // })
+    const wrapper = mount(Board, {
+      attachTo: document.body,
+      propsData: {
+        connectors: connectors,
+      },
+      global: {
+        stubs: {
+          teleport: true,
+        },
+      },
+      //   provide: {
+      //     autoConnect() {
+      //       return false
+      //     },
+      //   },
+    })
+    // console.warn(wrapper.getComponent(Board).html())
+    expect(wrapper.getComponent(Board).html()).toContain('MetaMask')
+  })
+})

tests/unit/composables/useWallet.test.ts

@@ -0,0 +1,32 @@
+import { mount } from '@vue/test-utils'
+import { defineComponent, nextTick, ref } from 'vue'
+import { useWallet } from '@/composables'
+
+// wip: refer to https://github.com/Mini-ghost/vorms/blob/main/packages/core/tests/composiable/useForm.test.ts
+
+const noop = () => {}
+
+const setup = (setup: () => unknown) => {
+  const Comp = defineComponent({
+    setup,
+    template: `<div />`,
+  })
+
+  return mount(Comp)
+}
+
+const sleep = (ms?: number) => {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+describe('useWallet', () => {
+  it('when initialize wallet state', () => {
+    setup(() => {
+      const { wallet } = useWallet()
+      expect(wallet.connector).toEqual(null)
+      expect(wallet.error).toEqual('')
+      expect(wallet.provider).toEqual(null)
+      expect(wallet.status).toEqual('none')
+    })
+  })
+})

tests/unit/utils/check.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest'
+import { checkChainId } from '@/utils'
+
+describe('checkChainId', () => {
+  it('should return true when chain id is in the available network', () => {
+    expect(checkChainId(1)).toBeTruthy()
+    expect(checkChainId(5)).toBeTruthy()
+  })
+  it('should return false when chain id is not in the available network', () => {
+    expect(checkChainId(2)).toBeFalsy()
+    expect(checkChainId(4)).toBeFalsy()
+  })
+})

tsconfig.json

@@ -43,7 +43,8 @@
     ],
     "paths": {
       "vue-dapp": ["./src/index.ts"],
-      "vue-dapp/*": ["./src/*"]
+      "vue-dapp/*": ["./src/*"],
+      "@/*": ["./src/*"]
     }
   }
 }

vitest.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vitest/config'
+import path from 'path'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  define: {
+    __DEV__: true,
+  },
+  test: {
+    globals: true, // no need to import test api like `import { describe, expect, it } from 'vitest'`
+    environment: 'jsdom',
+    include: ['tests/**/*.test.ts'],
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+})