chore: test

.eslintignore

@@ -0,0 +1,6 @@
+# Common
+node_modules
+dist
+.nuxt
+coverage
+docs

.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  root: true,
+  extends: [
+    '@nuxtjs',
+    '@nuxtjs/eslint-config-typescript'
+  ]
+}

.gitignore

@@ -4,4 +4,5 @@ node_modules
 cache/
 dist/
 ipx
-.DS_Store
+.DS_Store
+coverage

jest-puppeteer.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  launch: {
+    // to use google chrome, install puppeteer with PUPPETEER_SKIP_CHROMIUM_DOWNLOAD env
+    // and uncomment next line
+    executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+    args: [
+      '–no-sandbox',
+      '–disable-setuid-sandbox'
+    ]
+  }
+}

jest.config.js

@@ -0,0 +1,31 @@
+module.exports = {
+  preset: 'jest-puppeteer',
+  transform: {
+    '^.+\\.ts$': 'ts-jest',
+    '^.+\\.[jt]sx?$': 'babel-jest',
+  },
+  moduleNameMapper: {
+    '~image/(.*)': '<rootDir>/src/$1',
+    '^.+\\.css$': '<rootDir>/test/fixture/utils/CSSStub.js'
+  },
+  globals: {
+    'ts-jest': {
+      tsConfig: 'tsconfig.test.json',
+      diagnostics: {
+        ignoreCodes: [2345]
+      }
+    }
+  },
+  collectCoverage: true,
+  collectCoverageFrom: [
+    'src/**/*.ts'
+  ],
+  coverageThreshold: {
+    // global: {
+    //   branches: 100,
+    //   functions: 100,
+    //   lines: 100,
+    //   statements: 100
+    // }
+  }
+}

package.json

@@ -14,8 +14,8 @@
     "clean": "rimraf dist",
     "dev": "yarn nuxt-ts playground",
     "nuxt-storybook": "ts-node src/cli",
-    "test": "yarn lint",
-    "lint": "eslint --ext .ts,.js,.vue .",
+    "test": "yarn lint; yarn jest",
+    "lint": "eslint --ext .ts,.js,.vue ./src",
     "release": "yarn test && standard-version && yarn build && git push --follow-tags && npm publish"
   },
   "dependencies": {
@@ -29,19 +29,29 @@
     "@nuxt/types": "^2.14.4",
     "@nuxt/typescript-build": "latest",
     "@nuxt/typescript-runtime": "latest",
-    "@nuxtjs/eslint-config-typescript": "latest",
+    "@nuxtjs/eslint-config": "^3.1.0",
+    "@nuxtjs/eslint-config-typescript": "^3.0.0",
+    "@nuxtjs/module-test-utils": "^2.0.0-3",
     "@nuxtjs/storybook": "^2.1.0",
     "@nuxtjs/tailwindcss": "^3.0.2",
     "@types/ci-info": "latest",
+    "@types/expect-puppeteer": "^4.4.3",
     "@types/inquirer": "latest",
+    "@types/jest": "^26.0.14",
+    "@types/jest-environment-puppeteer": "^4.3.2",
+    "@types/puppeteer": "^3.0.2",
     "babel-eslint": "latest",
     "copyfiles": "^2.3.0",
-    "eslint": "latest",
+    "eslint": "^7.10.0",
+    "jest": "^26.4.2",
+    "jest-puppeteer": "^4.4.0",
     "node-sass": "^4.14.1",
     "nuxt-edge": "^2.14.2-26626271.34c56722",
+    "puppeteer": "^5.3.1",
     "rimraf": "^3.0.2",
     "sass-loader": "^10.0.2",
     "standard-version": "latest",
+    "ts-jest": "^26.4.0",
     "typescript": "^4.0.2"
   },
   "publishConfig": {

test/config.test.ts

@@ -0,0 +1,31 @@
+import { setupTest } from '@nuxtjs/module-test-utils'
+
+describe('undefined config', () => {
+  setupTest({
+    fixture: 'fixture/base',
+    configFile: 'nuxt.config.ts',
+    config: {}
+  })
+
+  test('render index', () => {
+    expect(true).toBeTruthy()
+  })
+})
+
+describe('Custome Provider', () => {
+  setupTest({
+    fixture: 'fixture/base',
+    configFile: 'nuxt.config.ts',
+    config: {
+      image: {
+        providers: {
+          random: '~/providers/random'
+        }
+      }
+    }
+  })
+
+  test('built', () => {
+    expect(true).toBeTruthy()
+  })
+})

test/fixture/base/nuxt.config.ts

@@ -0,0 +1,9 @@
+export default {
+  components: true,
+  modules: [
+    '../../src/module.ts'
+  ],
+  buildModules: [
+    '@nuxt/typescript-build'
+  ]
+}

test/fixture/base/pages/index.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    It works
+    <nuxt-image src="/2000px-Aconcagua2016.jpg" width="300px" height="200px" />
+  </div>
+</template>

test/fixture/base/providers/random/index.ts

@@ -0,0 +1,6 @@
+export default function (providerOptions) {
+  return {
+    runtime: require.resolve('./runtime'),
+    runtimeOptions: providerOptions
+  }
+}

test/fixture/base/providers/random/runtime.ts

@@ -0,0 +1,8 @@
+
+export default {
+  generateURL () {
+    return {
+      url: 'https://source.unsplash.com/random/600x400'
+    }
+  }
+}

test/fixture/base/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "ES2018",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "lib": [
+      "ESNext",
+      "ESNext.AsyncIterable",
+      "DOM"
+    ],
+    "esModuleInterop": true,
+    "allowJs": true,
+    "sourceMap": true,
+    "strict": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": [
+        "./*"
+      ],
+      "@/*": [
+        "./*"
+      ]
+    },
+    "types": [
+      "@types/node",
+      "@nuxt/types"
+    ]
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}

test/fixture/utils/CSSStub.js

@@ -0,0 +1 @@
+module.exports = {}

test/generate.test.ts

@@ -0,0 +1,22 @@
+const { generate, createContext, loadNuxt, loadFixture } = require('@nuxtjs/module-test-utils')
+
+describe('undefined config', () => {
+  let nuxt
+  beforeAll(async () => {
+    createContext({
+      fixture: 'fixture/base',
+      configFile: 'nuxt.config.ts'
+    })
+    await loadFixture()
+    await loadNuxt()
+    await generate()
+  }, 60000)
+
+  afterAll(async () => {
+    await nuxt.close()
+  })
+
+  test('render index', () => {
+    expect(true).toBeTruthy()
+  })
+})

test/plugin.test.ts

@@ -0,0 +1,67 @@
+import { setupTest, getContext } from '@nuxtjs/module-test-utils'
+
+describe('Plugin', () => {
+  let testContext, plugin
+  const nuxtContext = {
+    nuxtState: {
+      data: [{}]
+    },
+    $img: null
+  }
+
+  setupTest({
+    fixture: 'fixture/base',
+    configFile: 'nuxt.config.ts',
+    server: true,
+    config: {
+      image: {
+        presets: [
+          {
+            name: 'circle',
+            modifiers: {
+              r: '100'
+            }
+          }
+        ],
+        providers: {
+          local: {},
+          random: '~/providers/random',
+          cloudinary: {
+            baseURL: 'https://res.cloudinary.com/nuxt/image/upload'
+          }
+        }
+      }
+    }
+  })
+
+  test('Generate LQIP', async () => {
+    testContext = getContext()
+    plugin = (await import(testContext.nuxt.options.buildDir + '/image.js')).default
+    plugin(nuxtContext, (_, data) => { nuxtContext.$img = data })
+
+    const lqip = nuxtContext.$img.lqip('/test.png')
+    expect(lqip).toEqual('/_image/local/_/w_30/test.png')
+  })
+
+  test('Generate Random Image', () => {
+    const image = nuxtContext.$img('random:/test.png')
+    expect(image).toEqual('https://source.unsplash.com/random/600x400')
+  })
+
+  test('Generate Circle Image with Cloudinary', () => {
+    const image = nuxtContext.$img('cloudinary+circle:/test.png', {})
+    expect(image).toEqual('https://res.cloudinary.com/nuxt/image/upload/c_fit,r_100/test.png')
+  })
+
+  test('Deny Invalid Images', () => {
+    expect(() => nuxtContext.$img('test.png', {})).toThrow(Error)
+  })
+
+  test('Deny undefined provider', () => {
+    expect(() => nuxtContext.$img('invalid:/test.png', {})).toThrow(Error)
+  })
+
+  test('Deny undefined preset', () => {
+    expect(() => nuxtContext.$img('+invalid:/test.png', {})).toThrow(Error)
+  })
+})