docs: update docs/ru (#907)

lex111 · eddyerburgh · commit 6649d794f671 · 2018-08-11T09:06:22.000+01:00
diff --git a/docs/ru/README.md b/docs/ru/README.md
@@ -11,6 +11,7 @@ Vue Test Utils — официальная библиотека модульно
   * [Тестирование однофайловых компонентов с Mocha + webpack](guides/testing-single-file-components-with-mocha-webpack.md)
   * [Testing однофайловых компонентов с Karma](guides/testing-single-file-components-with-karma.md)
   * [Тестирование асинхронной логики](guides/testing-async-components.md)
+  * [Использование с TypeScript](guides/using-with-typescript.md)
   * [Использование с Vue Router](guides/using-with-vue-router.md)
   * [Использование с Vuex](guides/using-with-vuex.md)
 * [API](api/)
diff --git a/docs/ru/api/options.md b/docs/ru/api/options.md
@@ -69,32 +69,44 @@ expect(wrapper.find('div')).toBe(true)
 
 ## scopedSlots
 
-- Тип: `{ [name: string]: string }`
+- Тип: `{ [name: string]: string|Function }`
 
-Предоставляет объект содержимое слотов с ограниченной областью видимости для компонента. Ключ соответствует имени слота. Значение может быть строкой шаблона.
+Предоставляет объект содержимое слотов с ограниченной областью видимости для компонента. Ключ соответствует имени слота.
 
-Есть три ограничения.
+Вы можете установить имя входного параметра, используя атрибут slot-scope:
 
-* Эта опция поддерживается только с vue@2.5+.
+```js
+shallowMount(Component, {
+  scopedSlots: {
+    foo: '<p slot-scope="foo">{{foo.index}},{{foo.text}}</p>'
+  }
+})
+```
 
-* Вы не можете использовать тег `<template>` в качестве корневого элемента в опции `scopedSlots`.
+В противном случае входные параметры будут доступны как объект `props` при вычислении слота:
 
-* Это не поддерживает PhantomJS.  
-Вы можете использовать [Puppeteer](https://github.com/karma-runner/karma-chrome-launcher#headless-chromium-with-puppeteer) как альтернативу.
+```js
+shallowMount(Component, {
+  scopedSlots: {
+    default: '<p>{{props.index}},{{props.text}}</p>'
+  }
+})
+```
 
-Пример:
+Вы также можете передать функцию, которая принимает входные параметры в качестве аргумента:
 
 ```js
-const wrapper = shallowMount(Component, {
+shallowMount(Component, {
   scopedSlots: {
-    foo: '<p slot-scope="props">{{props.index}},{{props.text}}</p>'
+    foo: function (props) {
+      return this.$createElement('div', props.index)
+    }
   }
 })
-expect(wrapper.find('#fooWrapper').html()).toBe(
-  `<div id="fooWrapper"><p>0,text1</p><p>1,text2</p><p>2,text3</p></div>`
-)
 ```
 
+Или вы можете использовать JSX. Если вы пишете JSX в методе, `this.$createElement` автоматически внедряется babel-plugin-transform-vue-jsx:
+
 ## stubs
 
 - Тип: `{ [name: string]: Component | boolean } | Array<string>`
diff --git a/docs/ru/guides/README.md b/docs/ru/guides/README.md
@@ -8,5 +8,6 @@
 !!!include(docs/ru/guides/testing-single-file-components-with-mocha-webpack.md)!!!
 !!!include(docs/ru/guides/testing-single-file-components-with-karma.md)!!!
 !!!include(docs/ru/guides/testing-async-components.md)!!!
+!!!include(docs/guides/using-with-typescript.md)!!!
 !!!include(docs/ru/guides/using-with-vue-router.md)!!!
 !!!include(docs/ru/guides/using-with-vuex.md)!!!
diff --git a/docs/ru/guides/testing-single-file-components-with-jest.md b/docs/ru/guides/testing-single-file-components-with-jest.md
@@ -123,31 +123,6 @@ npm install --save-dev babel-jest
 }
 ```
 
-### Тестирование моментальными снимками
-
-Вы можете использовать [`vue-server-renderer`](https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer) для рендеринга компонента в строку, чтобы его можно было сохранить в качестве снимка для [тестирования моментальными снимками в Jest](https://facebook.github.io/jest/docs/en/snapshot-testing.html).
-
-Результат рендеринга `vue-server-renderer` включает в себя несколько атрибутов, специфичных для SSR, и игнорирует пробелы, что затрудняет сравнивать diff. Мы можем улучшить сохранённый снимок с помощью специального сериализатора:
-
-``` bash
-npm install --save-dev jest-serializer-vue
-```
-
-Затем добавьте конфигурацию в `package.json`:
-
-``` json
-{
-  // ...
-  "jest": {
-    // ...
-    // сериализатор для снимков
-    "snapshotSerializers": [
-      "<rootDir>/node_modules/jest-serializer-vue"
-    ]
-  }
-}
-```
-
 ### Расположение файлов тестов
 
 По умолчанию Jest будет рекурсивно выбирать все файлы с расширением `.spec.js` или `.test.js` во всём проекте. Если это поведение не соответствует вашим потребностям, то возможно [изменить `testRegex`](https://facebook.github.io/jest/docs/en/configuration.html#testregex-string) в секции конфигурации в файле `package.json`.
@@ -202,6 +177,36 @@ describe('Component', () => {
 })
 ```
 
+### Тестирование моментальными снимками
+
+Когда вы монтируете компонент с помощью Vue Test Utils, вы получаете доступ к корневому элементу HTML. Это можно сохранить в виде моментального снимка для [тестирования моментальными снимками в Jest](https://facebook.github.io/jest/docs/en/snapshot-testing.html):
+
+```js
+test('renders correctly', () => {
+  const wrapper = mount(Component)
+  expect(wrapper.element).toMatchSnapshot()
+})
+```
+
+``` bash
+npm install --save-dev jest-serializer-vue
+```
+
+Затем добавьте конфигурацию в `package.json`:
+
+``` json
+{
+  // ...
+  "jest": {
+    // ...
+    // serializer for snapshots
+    "snapshotSerializers": [
+      "jest-serializer-vue"
+    ]
+  }
+}
+```
+
 ### Ресурсы
 
 - [Пример проекта для этой конфигурации](https://github.com/vuejs/vue-test-utils-jest-example)
diff --git a/docs/ru/guides/using-with-typescript.md b/docs/ru/guides/using-with-typescript.md
@@ -0,0 +1,157 @@
+## Использование с TypeScript
+
+> Пример проекта для этой конфигурации доступен на [GitHub](https://github.com/vuejs/vue-test-utils-typescript-example).
+
+TypeScript — популярное надмножество JavaScript, которое добавляет типы и классы поверх обычного JS. Vue Test Utils включает типы в распределённый пакет, поэтому он хорошо работает с TypeScript.
+
+В этом руководстве мы рассмотрим, как настроить тестовую конфигурацию для TypeScript-проекта с использованием Jest и Vue Test Utils из базовой настройки Vue CLI TypeScript.
+
+### Добавление TypeScript
+
+Сначала вам нужно создать проект. Если у вас нет Vue CLI, установите его глобально:
+
+```shell
+$ npm install -g @vue/cli
+```
+
+И создайте проект, запустив следующую команду:
+
+```shell
+$ vue create hello-world
+```
+
+В командной строке выберите `Manually select features`, выберите `TypeScript` и нажмите клавишу ввода. Это создаст проект с уже настроенным для работы TypeScript.
+
+::: tip ПРИМЕЧАНИЕ
+Если вы хотите получить более подробное руководство по настройке Vue с помощью TypeScript, ознакомьтесь с [руководством для начинающих по TypeScript во Vue] (https://github.com/Microsoft/TypeScript-Vue-Starter).
+:::
+
+Следующий шаг — добавить Jest к проекту.
+
+### Настройка Jest
+
+Jest — это программа для запуска тестов, разработанный Facebook и направленный на предоставление многофункционального решения для модульного тестирования. Вы можете узнать больше о Jest на его [официальной документации](https://facebook.github.io/jest/).
+
+Установить Jest и Vue Test Utils:
+
+```bash
+$ npm install --save-dev jest @vue/test-utils
+```
+
+Затем определите команду `test:unit` в секции scripts в `package.json`.
+
+```json
+// package.json
+{
+  // ..
+  "scripts": {
+    // ..
+    "test:unit": "jest"
+  }
+  // ..
+}
+```
+
+### Обработка однофайловых компонентов в Jest
+
+Чтобы научить Jest обрабатывать файлы с расширением `.vue`, нам нужно установить и настроить препроцессор `vue-jest`:
+
+``` bash
+npm install --save-dev vue-jest
+```
+
+Затем создайте блок `jest` в `package.json`:
+
+``` json
+{
+  // ...
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "ts",
+      "json",
+      // указываем Jest обрабатывать файлы с расширением `*.vue`
+      "vue"
+    ],
+    "transform": {
+      // обработка файлов с расширением `*.vue` с помощью `vue-jest`
+      ".*\\.(vue)$": "vue-jest",
+    },
+    "testURL": "http://localhost/"
+  }
+}
+```
+
+### Настройка TypeScript для Jest
+
+Чтобы использовать файлы TypeScript в тестах, нам нужно настроить Jest для компиляции TypeScript. Для этого нам нужно установить `ts-jest`:
+
+``` bash
+$ npm install --save-dev ts-jest
+```
+
+Затем нам нужно указать Jest обработать тестовые файлы TypeScript с помощью `ts-jest`, добавив запись в `jest.transform` в `package.json`:
+
+``` json
+{
+  // ...
+  "jest": {
+    // ...
+    "transform": {
+      // ...
+      // обработка файлов с расширением `*.ts` с помощью `ts-jest`
+      "^.+\\.tsx?$": "ts-jest"
+    },
+    // ...
+  }
+}
+```
+
+### Размещение тестовых файлов
+
+По умолчанию Jest будет рекурсивно выбирать все файлы с расширением `.spec.js` или `.test.js` по всему проекту.
+
+Чтобы запустить тестовые файлы с расширением `.ts`, нам нужно изменить `testRegex` в разделе конфигурации файла `package.json`.
+
+Добавьте следующее в поле `jest` в `package.json`:
+
+``` json
+{
+  // ...
+  "jest": {
+    // ...
+    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$"
+  }
+}
+```
+
+Jest рекомендует создать каталог `__tests__` рядом с тестируемым кодом, но не стесняйтесь структурировать ваши тесты по своему усмотрению. Просто остерегайтесь того, что Jest создаст каталог `__snapshots__` рядом с тестовыми файлами, которые выполняют тестирование моментальными снимками.
+
+### Написание модульного теста
+
+Теперь у нас есть проект, пришло время написать тест.
+
+Создайте файл `src/components/__tests__/HelloWorld.spec.ts` и добавьте следующий код:
+
+```js
+// src/components/__tests__/HelloWorld.spec.ts
+import { shallowMount } from '@vue/test-utils'
+import HelloWorld from '../HelloWorld.vue'
+
+describe('HelloWorld.vue', () => {
+  test('renders props.msg when passed', () => {
+    const msg = 'new message'
+    const wrapper = shallowMount(HelloWorld, {
+      propsData: { msg }
+    })
+    expect(wrapper.text()).toMatch(msg)
+  })
+})
+```
+
+Это все, что нам нужно сделать, чтобы заставить TypeScript и Vue Test Utils работать вместе!
+
+### Ресурсы
+
+- [Пример проекта для этой конфигурации](https://github.com/vuejs/vue-test-utils-typescript-example)
+- [Jest](https://facebook.github.io/jest/)
