diff --git a/docs/ru/SUMMARY.md b/docs/ru/SUMMARY.md index 406c1aee..f64e0ad8 100644 --- a/docs/ru/SUMMARY.md +++ b/docs/ru/SUMMARY.md @@ -18,7 +18,6 @@ - [Production Build](workflow/production.md) - [Линтинг](workflow/linting.md) - [Тестирование](workflow/testing.md) - - [Тестирование с моками](workflow/testing-with-mocks.md) - [Перечень настроек](options.md) - [loaders](options.md#loaders) - [preLoaders](options.md#preloaders) diff --git a/docs/ru/workflow/testing-with-mocks.md b/docs/ru/workflow/testing-with-mocks.md deleted file mode 100644 index 2f5fc299..00000000 --- a/docs/ru/workflow/testing-with-mocks.md +++ /dev/null @@ -1,72 +0,0 @@ -# Тестирование с моками - -В настоящих приложениях наши компоненты скорее всего будут иметь внешние зависимости. Было бы прекрасно, если бы мы могли полностью контролировать эти зависимости в наших тестах, чтобы они опирались только на поведение тестируемого компонента. - -Для этого в модульных тестах используется понятие "мок" ("mock") – это объект, за вызовами методов которого мы можем следить и даже управлять их результатами. Чтобы не тестировать и компонент, и его зависимость в связке, нам достаточно внедрить вместо зависимости созданный мок-объект. - -`vue-loader` предоставляет возможность внедрять произвольные зависимости в `*.vue` компоненты, используя [inject-loader](https://github.com/plasticine/inject-loader). Основная идея состоит в том, что вместо прямой подгрузки модуля компонента мы используем `inject-loader`, чтобы создать "фабричную функцию" для этого модуля. Когда мы вызовем эту функцию с мок-объектом, она вернет нам экземпляр модуля с внедренными мок-объектами. - -> Примечание: Вы должны отключить опцию `esModule` в режиме инжектирования, иначе вы получите ошибку. - -Допустим, у нас есть следующий компонент: - -``` html - - - - -``` - -Вот как получить его с мок-объектами: - -``` bash -npm install inject-loader --save-dev -``` - -``` js -// example.spec.js -const ExampleInjector = require('!!vue-loader?inject!./example.vue') -``` - -Обратите внимание на эту безумную строку импорта – мы используем [запросы к webpack загрузчику](https://webpack.github.io/docs/loaders.html). Краткое пояснение: - -- `!!` в начале строки означает "отключи все загрузчики из глобальной конфигурации" -- `vue-loader?inject!` значит "используй загрузчик `vue-loader` и передай запрос `?inject`". Это заставляет `vue-loader` скомпилировать компонент в режиме внедрения зависимостей. - -Полученный `ExampleInjector` – это фабричная функция, которую можно вызвать, чтобы создать экземпляр модуля `example.vue`: - -``` js -const ExampleWithMocks = ExampleInjector({ - // mock it - '../service': { - msg: 'Привет от мок-сервиса!' - } -}) -``` - -Наконец, мы можем тестировать компонент как обычно: - -``` js -it('should render', () => { - const vm = new Vue({ - template: '
', - components: { - 'test': ExampleWithMocks - } - }).$mount() - expect(vm.$el.querySelector('.msg').textContent).to.equal('Привет от мок-сервиса!') -}) -```