test: add local-provider test

7 years ago · 00ea4cb4f2
3 changed files with 15468 additions and 168 deletions
--- a/components/locale-provider/tests/snapshots/index.test.js.snap
+++ b/components/locale-provider/tests/snapshots/index.test.js.snap
--- a/components/locale-provider/tests/index.test.js
+++ b/components/locale-provider/tests/index.test.js
@ -0,0 +1,191 @@
+/* eslint-disable react/no-multi-comp */
+import { mount } from '@vue/test-utils'
+import Vue from 'vue'
+import moment from 'moment'
+import MockDate from 'mockdate'
+import { LocaleProvider, Pagination, DatePicker, TimePicker, Calendar,
+  Popconfirm, Table, Modal, Select, Transfer } from '../../'
+import enGB from '../en_GB'
+import frFR from '../fr_FR'
+import nlBE from '../nl_BE'
+import itIT from '../it_IT'
+import enUS from '../en_US'
+import ptBR from '../pt_BR'
+import ptPT from '../pt_PT'
+import ruRU from '../ru_RU'
+import esES from '../es_ES'
+import svSE from '../sv_SE'
+import frBE from '../fr_BE'
+import deDE from '../de_DE'
+import nlNL from '../nl_NL'
+import caES from '../ca_ES'
+import csCZ from '../cs_CZ'
+import koKR from '../ko_KR'
+import etEE from '../et_EE'
+import skSK from '../sk_SK'
+import jaJP from '../ja_JP'
+import trTR from '../tr_TR'
+import zhTW from '../zh_TW'
+import fiFI from '../fi_FI'
+import plPL from '../pl_PL'
+import bgBG from '../bg_BG'
+import viVN from '../vi_VN'
+import thTH from '../th_TH'
+import faIR from '../fa_IR'
+import elGR from '../el_GR'
+import nbNO from '../nb_NO'
+import srRS from '../sr_RS'
+import slSI from '../sl_SI'
+import isIS from '../is_IS'
+import arEG from '../ar_EG'
+import ukUA from '../uk_UA'
+import zhCN from '../zh_CN'
+import kuIQ from '../ku_IQ'
+
+const locales = [enUS, ptBR, ptPT, ruRU, esES, svSE, frBE, deDE, nlNL, caES, csCZ, koKR, etEE, skSK, jaJP, trTR, zhTW, fiFI, plPL, bgBG, enGB, frFR, nlBE, itIT, viVN, thTH, faIR, elGR, nbNO, srRS, slSI, isIS, arEG, ukUA, zhCN, kuIQ]
+
+const { Option } = Select
+const { RangePicker } = DatePicker
+
+const columns = [{
+  title: 'Name',
+  dataIndex: 'name',
+  filters: [{
+    text: 'filter1',
+    value: 'filter1',
+  }],
+}, {
+  title: 'Age',
+  dataIndex: 'age',
+}]
+
+const App = {
+  render (h) {
+    return (
+      <div>
+        <Pagination defaultCurrent={1} total={50} showSizeChanger />
+        <Select showSearch style={{ width: '200px' }}>
+          <Option value='jack'>jack</Option>
+          <Option value='lucy'>lucy</Option>
+        </Select>
+        <DatePicker open />
+        <TimePicker open defaultOpenValue={moment()} />
+        <RangePicker open style={{ width: '200px' }} />
+        <Popconfirm title='Question?' visible>
+          <a>Click to confirm</a>
+        </Popconfirm>
+        <Transfer
+          dataSource={[]}
+          showSearch
+          targetKeys={[]}
+          render={item => item.title}
+        />
+        <Calendar fullscreen={false} value={moment()} />
+        <Table dataSource={[]} columns={columns} />
+        <Modal title='Locale Modal' visible>
+          <p>Locale Modal</p>
+        </Modal>
+      </div>
+    )
+  } }
+
+describe('Locale Provider', () => {
+  beforeAll(() => {
+    document.body.innerHTML = ''
+    MockDate.set(moment('2017-09-18T03:30:07.795'))
+  })
+
+  afterAll(() => {
+    MockDate.reset()
+  })
+
+  locales.forEach((locale) => {
+    it(`should display the text as ${locale.locale}`, (done) => {
+      const wrapper = mount(
+        {
+          render () {
+            return (
+              <LocaleProvider locale={locale}>
+                <App />
+              </LocaleProvider>
+            )
+          },
+        },
+        { sync: false }
+      )
+      Vue.nextTick(() => {
+        expect(wrapper.html()).toMatchSnapshot()
+        done()
+      })
+    })
+  })
+
+  it('should change locale of Modal.xxx', () => {
+    const ModalDemo = {
+      mounted () {
+        Modal.confirm({
+          title: 'Hello World!',
+        })
+      },
+      render () {
+        return null
+      },
+    }
+    locales.forEach((locale) => {
+      mount(
+        {
+          render () {
+            return (
+              <LocaleProvider locale={locale}>
+                <ModalDemo />
+              </LocaleProvider>
+            )
+          },
+        },
+        { sync: false }
+      )
+      const currentConfirmNode = document.querySelectorAll('.ant-confirm')[document.querySelectorAll('.ant-confirm').length - 1]
+      let cancelButtonText = currentConfirmNode.querySelectorAll('.ant-btn:not(.ant-btn-primary) span')[0].innerHTML
+      let okButtonText = currentConfirmNode.querySelectorAll('.ant-btn-primary span')[0].innerHTML
+      if (locale.locale === 'zh-cn') {
+        cancelButtonText = cancelButtonText.replace(' ', '')
+        okButtonText = okButtonText.replace(' ', '')
+      }
+      expect(cancelButtonText).toBe(locale.Modal.cancelText)
+      expect(okButtonText).toBe(locale.Modal.okText)
+    })
+  })
+
+  it('set moment locale when locale changes', (done) => {
+    document.body.innerHTML = ''
+    const Test = {
+      data () {
+        return {
+          locale: zhCN,
+        }
+      },
+      render () {
+        return (
+          <LocaleProvider locale={this.locale}>
+            <div>
+              <DatePicker defaultValue={moment()} open />
+            </div>
+          </LocaleProvider>
+        )
+      },
+    }
+    const wrapper = mount(Test, { sync: false, attachToDocument: true })
+    Vue.nextTick(() => {
+      expect(document.body.innerHTML).toMatchSnapshot()
+      wrapper.setData({ locale: frFR })
+      Vue.nextTick(() => {
+        expect(document.body.innerHTML).toMatchSnapshot()
+        wrapper.setData({ locale: null })
+        Vue.nextTick(() => {
+          expect(document.body.innerHTML).toMatchSnapshot()
+          done()
+        })
+      })
+    })
+  })
+})
--- a/package.json
+++ b/package.json
@ -1,169 +1,170 @@
 {
-    "name": "vue-antd-ui",
-    "version": "0.5.1",
-    "title": "Ant Design Vue",
-    "description": "An enterprise-class UI design language and Vue-based implementation",
-    "keywords": [
-        "ant",
-        "design",
-        "antd",
-        "vue",
-        "vueComponent",
-        "component",
-        "components",
-        "ui",
-        "framework",
-        "frontend"
-    ],
-    "main": "dist/antd.min.js",
-    "files": [
-        "dist",
-        "lib",
-        "es"
-    ],
-    "scripts": {
-        "start": "NODE_ENV=development ./node_modules/.bin/webpack-dev-server --open --hot",
-        "test": "jest --config .jest.js",
-        "site": "node scripts/run.js site-dist",
-        "copy": "node scripts/run.js copy-html",
-        "compile": "node antd-tools/cli/run.js compile",
-        "pub": "node antd-tools/cli/run.js pub",
-        "prepublish": "node antd-tools/cli/run.js guard",
-        "dist": "node antd-tools/cli/run.js dist",
-        "lint": "eslint -c ./.eslintrc --fix --ext .jsx,.js,.vue ./components",
-        "lint:style": "stylelint \"./examples/**/*.less\" --fix --syntax less",
-        "commitmsg": "validate-commit-msg",
-        "cm": "git-cz",
-        "codecov": "codecov"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/vueComponent/ant-design.git"
-    },
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/vueComponent/ant-design/issues"
-    },
-    "homepage": "https://github.com/vueComponent/ant-design",
-    "pre-commit": [
-        "lint:style",
-        "lint"
-    ],
-    "peerDependencies": {
-        "vue": ">=2.5.0",
-        "vue-template-compiler": ">=2.5.0"
-    },
-    "devDependencies": {
-        "@octokit/rest": "^15.4.1",
-        "@vue/server-test-utils": "^1.0.0-beta.16",
-        "@vue/test-utils": "^1.0.0-beta.16",
-        "autoprefixer": "^8.1.0",
-        "babel-cli": "^6.26.0",
-        "babel-core": "^6.26.0",
-        "babel-eslint": "^8.0.1",
-        "babel-helper-vue-jsx-merge-props": "^2.0.3",
-        "babel-jest": "^22.4.3",
-        "babel-loader": "^7.1.2",
-        "babel-plugin-add-module-exports": "^0.2.1",
-        "babel-plugin-import": "^1.1.1",
-        "babel-plugin-istanbul": "^4.1.1",
-        "babel-plugin-syntax-dynamic-import": "^6.18.0",
-        "babel-plugin-syntax-jsx": "^6.18.0",
-        "babel-plugin-transform-class-properties": "^6.24.1",
-        "babel-plugin-transform-decorators": "^6.24.1",
-        "babel-plugin-transform-decorators-legacy": "^1.3.4",
-        "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
-        "babel-plugin-transform-es3-property-literals": "^6.22.0",
-        "babel-plugin-transform-object-assign": "^6.22.0",
-        "babel-plugin-transform-object-rest-spread": "^6.26.0",
-        "babel-plugin-transform-runtime": "~6.23.0",
-        "babel-plugin-transform-vue-jsx": "^3.7.0",
-        "babel-polyfill": "^6.26.0",
-        "babel-preset-env": "^1.6.1",
-        "case-sensitive-paths-webpack-plugin": "^2.1.2",
-        "chalk": "^2.3.2",
-        "cheerio": "^1.0.0-rc.2",
-        "codecov": "^3.0.0",
-        "colorful": "^2.1.0",
-        "commander": "^2.15.0",
-        "commitizen": "^2.9.6",
-        "cross-env": "^5.1.4",
-        "css-loader": "^0.28.7",
-        "deep-assign": "^2.0.0",
-        "eslint": "^4.7.2",
-        "eslint-plugin-html": "^3.2.2",
-        "eslint-plugin-vue": "^3.13.0",
-        "eslint-plugin-vue-libs": "^1.2.1",
-        "extract-text-webpack-plugin": "^3.0.2",
-        "fetch-jsonp": "^1.1.3",
-        "glob": "^7.1.2",
-        "gulp": "^3.9.1",
-        "gulp-babel": "^7.0.0",
-        "gulp-strip-code": "^0.1.4",
-        "highlight.js": "^9.12.0",
-        "html-webpack-plugin": "^2.30.1",
-        "husky": "^0.14.3",
-        "istanbul-instrumenter-loader": "^3.0.0",
-        "jest": "^22.4.3",
-        "jest-serializer-vue": "^1.0.0",
-        "jsonp": "^0.2.1",
-        "less": "^2.7.2",
-        "less-loader": "^4.0.5",
-        "less-plugin-npm-import": "^2.1.0",
-        "markdown-it": "^8.4.0",
-        "markdown-it-anchor": "^4.0.0",
-        "marked": "^0.3.7",
-        "merge2": "^1.2.1",
-        "minimist": "^1.2.0",
-        "mkdirp": "^0.5.1",
-        "mockdate": "^2.0.2",
-        "postcss": "^6.0.20",
-        "postcss-loader": "^2.1.2",
-        "pre-commit": "^1.2.2",
-        "querystring": "^0.2.0",
-        "raw-loader": "^1.0.0-beta.0",
-        "reqwest": "^2.0.5",
-        "rimraf": "^2.6.2",
-        "rucksack-css": "^1.0.2",
-        "selenium-server": "^3.0.1",
-        "semver": "^5.3.0",
-        "style-loader": "^0.18.2",
-        "stylelint": "^8.1.1",
-        "stylelint-config-standard": "^17.0.0",
-        "through2": "^2.0.3",
-        "validate-commit-msg": "^2.14.0",
-        "vue": "^2.5.16",
-        "vue-antd-md-loader": "^1.0.3",
-        "vue-clipboard2": "0.0.8",
-        "vue-jest": "^2.5.0",
-        "vue-loader": "^13.0.5",
-        "vue-router": "^3.0.1",
-        "vue-server-renderer": "^2.5.16",
-        "vue-template-compiler": "^2.5.16",
-        "webpack": "^3.11.0",
-        "webpack-chunk-hash": "^0.5.0",
-        "webpack-dev-server": "^2.8.2",
-        "webpack-merge": "^4.1.1"
-    },
-    "dependencies": {
-        "add-dom-event-listener": "^1.0.2",
-        "array-tree-filter": "^2.1.0",
-        "async-validator": "^1.8.2",
-        "babel-helper-vue-jsx-merge-props": "^2.0.3",
-        "babel-runtime": "6.x",
-        "classnames": "^2.2.5",
-        "component-classes": "^1.2.6",
-        "css-animation": "^1.4.1",
-        "dom-align": "^1.6.7",
-        "dom-closest": "^0.2.0",
-        "dom-scroll-into-view": "^1.2.1",
-        "enquire.js": "^2.1.6",
-        "is-negative-zero": "^2.0.0",
-        "lodash": "^4.17.5",
-        "moment": "^2.21.0",
-        "omit.js": "^1.0.0",
-        "shallow-equal": "^1.0.0",
-        "shallowequal": "^1.0.2",
-        "warning": "^3.0.0"
-    }
-}
+  "name": "vue-antd-ui",
+  "version": "0.5.1",
+  "title": "Ant Design Vue",
+  "description": "An enterprise-class UI design language and Vue-based implementation",
+  "keywords": [
+    "ant",
+    "design",
+    "antd",
+    "vue",
+    "vueComponent",
+    "component",
+    "components",
+    "ui",
+    "framework",
+    "frontend"
+  ],
+  "main": "dist/antd.min.js",
+  "files": [
+    "dist",
+    "lib",
+    "es"
+  ],
+  "scripts": {
+    "start": "NODE_ENV=development ./node_modules/.bin/webpack-dev-server --open --hot",
+    "test": "jest --config .jest.js",
+    "site": "node scripts/run.js site-dist",
+    "copy": "node scripts/run.js copy-html",
+    "compile": "node antd-tools/cli/run.js compile",
+    "pub": "node antd-tools/cli/run.js pub",
+    "prepublish": "node antd-tools/cli/run.js guard",
+    "dist": "node antd-tools/cli/run.js dist",
+    "lint": "eslint -c ./.eslintrc --fix --ext .jsx,.js,.vue ./components",
+    "lint:style": "stylelint \"./examples/**/*.less\" --fix --syntax less",
+    "commitmsg": "validate-commit-msg",
+    "cm": "git-cz",
+    "codecov": "codecov"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vueComponent/ant-design.git"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/vueComponent/ant-design/issues"
+  },
+  "homepage": "https://github.com/vueComponent/ant-design",
+  "pre-commit": [
+    "lint:style",
+    "lint"
+  ],
+  "peerDependencies": {
+    "vue": ">=2.5.0",
+    "vue-template-compiler": ">=2.5.0"
+  },
+  "devDependencies": {
+    "@octokit/rest": "^15.4.1",
+    "@vue/server-test-utils": "^1.0.0-beta.16",
+    "@vue/test-utils": "^1.0.0-beta.16",
+    "autoprefixer": "^8.1.0",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.0.1",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-jest": "^22.4.3",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-import": "^1.1.1",
+    "babel-plugin-istanbul": "^4.1.1",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-decorators": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
+    "babel-plugin-transform-es3-property-literals": "^6.22.0",
+    "babel-plugin-transform-object-assign": "^6.22.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-runtime": "~6.23.0",
+    "babel-plugin-transform-vue-jsx": "^3.7.0",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "case-sensitive-paths-webpack-plugin": "^2.1.2",
+    "chalk": "^2.3.2",
+    "cheerio": "^1.0.0-rc.2",
+    "codecov": "^3.0.0",
+    "colorful": "^2.1.0",
+    "commander": "^2.15.0",
+    "commitizen": "^2.9.6",
+    "cross-env": "^5.1.4",
+    "css-loader": "^0.28.7",
+    "deep-assign": "^2.0.0",
+    "eslint": "^4.7.2",
+    "eslint-plugin-html": "^3.2.2",
+    "eslint-plugin-vue": "^3.13.0",
+    "eslint-plugin-vue-libs": "^1.2.1",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "fetch-jsonp": "^1.1.3",
+    "glob": "^7.1.2",
+    "gulp": "^3.9.1",
+    "gulp-babel": "^7.0.0",
+    "gulp-strip-code": "^0.1.4",
+    "highlight.js": "^9.12.0",
+    "html-webpack-plugin": "^2.30.1",
+    "husky": "^0.14.3",
+    "istanbul-instrumenter-loader": "^3.0.0",
+    "jest": "^22.4.3",
+    "jest-serializer-vue": "^1.0.0",
+    "jsonp": "^0.2.1",
+    "less": "^2.7.2",
+    "less-loader": "^4.0.5",
+    "less-plugin-npm-import": "^2.1.0",
+    "markdown-it": "^8.4.0",
+    "markdown-it-anchor": "^4.0.0",
+    "marked": "^0.3.7",
+    "merge2": "^1.2.1",
+    "minimist": "^1.2.0",
+    "mkdirp": "^0.5.1",
+    "mockdate": "^2.0.2",
+    "moment-timezone": "^0.5.17",
+    "postcss": "^6.0.20",
+    "postcss-loader": "^2.1.2",
+    "pre-commit": "^1.2.2",
+    "querystring": "^0.2.0",
+    "raw-loader": "^1.0.0-beta.0",
+    "reqwest": "^2.0.5",
+    "rimraf": "^2.6.2",
+    "rucksack-css": "^1.0.2",
+    "selenium-server": "^3.0.1",
+    "semver": "^5.3.0",
+    "style-loader": "^0.18.2",
+    "stylelint": "^8.1.1",
+    "stylelint-config-standard": "^17.0.0",
+    "through2": "^2.0.3",
+    "validate-commit-msg": "^2.14.0",
+    "vue": "^2.5.16",
+    "vue-antd-md-loader": "^1.0.3",
+    "vue-clipboard2": "0.0.8",
+    "vue-jest": "^2.5.0",
+    "vue-loader": "^13.0.5",
+    "vue-router": "^3.0.1",
+    "vue-server-renderer": "^2.5.16",
+    "vue-template-compiler": "^2.5.16",
+    "webpack": "^3.11.0",
+    "webpack-chunk-hash": "^0.5.0",
+    "webpack-dev-server": "^2.8.2",
+    "webpack-merge": "^4.1.1"
+  },
+  "dependencies": {
+    "add-dom-event-listener": "^1.0.2",
+    "array-tree-filter": "^2.1.0",
+    "async-validator": "^1.8.2",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-runtime": "6.x",
+    "classnames": "^2.2.5",
+    "component-classes": "^1.2.6",
+    "css-animation": "^1.4.1",
+    "dom-align": "^1.6.7",
+    "dom-closest": "^0.2.0",
+    "dom-scroll-into-view": "^1.2.1",
+    "enquire.js": "^2.1.6",
+    "is-negative-zero": "^2.0.0",
+    "lodash": "^4.17.5",
+    "moment": "^2.21.0",
+    "omit.js": "^1.0.0",
+    "shallow-equal": "^1.0.0",
+    "shallowequal": "^1.0.2",
+    "warning": "^3.0.0"
+  }
+}