FullStack Alex

Потерял вчера целый день пытаясь решить эту казалось бы простую проблему.
Но как в итоге выяснил Vue-Test-Utils не предусматривает изменения во vue-router:

Dealing with Routing
Since routing by definition has to do with the overall structure of the application and involves multiple components, it is best tested via integration or end-to-end tests. For individual components that rely on vue-router features, you can mock them using the techniques mentioned above.

Поэтому для подобной задачи нужно использовать E2E testing tools как Puppeteer, TestCafe и Cyprus. Или же (что я сейчас пока лишь пробую, но может сегодня более подробно описать смогу) не использовать vue-test-utils wrapper а использовать реальную Vue rendered app.

Update:
Ок, решил проблему.
Vue-Test-Utils нельзя использовать из-за createLocalVue() и mount(), так как обе функции не дают возможность использовать для создания Vue инстанции "Full UMD bundler" .

Vue-Test-Utils сделан для максимальной изоляции компоненты. Хотя добавить FULL UMD поддержку казалось бы не такая уж и большая задача, но увы.

Поэтому нужно как уже и писал обходится без vue-test-utils. А так как я ненавижу Facebook - я принципиально не использую Jest, Yarn, React итп (по крайней мере в личных проектах), а использую Mocha + Chai + Sinon + jsdom, но принцип один и тот же, да и синтаксис практически такой же:

import chai from "chai";
const expect = chai.expect;
const should = chai.should();

import App from '~/testing-router-without-wrapper/App.vue';

import VueRouter from 'vue-router';
import router from '~/testing-router-without-wrapper/router.js';

//https://github.com/vuejs/vue-router/issues/713
import Vue from "vue/dist/vue.js";
Vue.use(VueRouter);

//jsdom создаст HTML документ но так как я в своём app ссылаюсь везде на #app в функции app container, нужно создать соответсвующий элемент:
let element = document.createElement("div");
element.id = "app";
const myApp = new Vue({
    el: element,
    router,
    render: h => h(App),
    components: {App},
});

describe('Testing App.vue with Route 1', () => {

    it('Title of Home component is true', () => {
        console.log( "myApp.$el.innerHTML", myApp.$el.innerHTML );
        expect(myApp.$el.innerHTML.includes('<h1 id="title">Home Title</h1>')).to.be.true;
    });

    it('Pushing Route1 and checking title of Route1 component is true', done => {
        myApp.$router.push('/route1');
        setTimeout(()=>{
            console.log( "myApp.$el.innerHTML", myApp.$el.innerHTML );
            expect(myApp.$el.innerHTML.includes('<h1 id="title">Route 1 Title</h1>')).to.be.true;
            done();
        },1000);

    });
});

Не совсем понимаю как работает первая часть main.js и зачем v-if="false", но по ходу нужно просто инициализировать внутри callback then:

ApiService.init()

if (JwtService.getToken()) {
  ApiService.setHeader()
  ApiService.mount401Interceptor()
  store
    .dispatch('auth/checkAuth')
    .then(() => {
      store.dispatch('project/getProjectById', router.app.$route.params.projectId)

      new Vue({
          router,
          store,
          render: h => h(App)
      }).$mount('#app')

    })
}

Вместо имени компоненты просто передавайте саму компоненту. Соответственно компонента должна быть импортирована в родительской Аpp. В своих приложениях я передаю компоненты через Vuex но с props думаю тоже должно также сработать.

Только вместо components нужно будет в data декларировать динамичную компоненту. Вот простой пример:
https://codesandbox.io/s/vue-template-ifw07

Наконец таки я решил все технические вопросы для внедрения Vue.js в WordPress-Workflow. Долго я к этому шёл. Трудно было совместить freelancing на основе WordPress и WooCommerce и одновременно самообучение Symfony и Vue.js и создание первых реальных проектов на их основе. Но создание первого большого проекта на основе headless Symfony 4 (JSON API) и потребителя на основе Vue.js меня хорошо продвинуло вперед в направлении внедрения Vue.js в WordPress. Почему мне так интересен WordPress/WooCommerce умея делать Backend на основе Symfony? Потому что WordPress делает доступным веб технологии и маленьким клиентам по "демократическим" ценам, при этом всё ещё позволяя фрилансеру хорошо заработать (по крайней мере в Берлине, где я проживаю).

Так как путь сюда до сих пор никем в интернете детально не описан и я угрохал недели если не месяцы на решение этой задачи прочитывая все статьи и docs с этой темой связанные (освоил для этого даже наконец таки Docker и Nginx и углубил знания в настройке Webpack) и пройдя многие не верные пути (vue-cli, nuxt.js) - я решил создать в течении следующих недель курс на Udemy.com на английском за 20 баксов. Если будет тут достаточно интереса (хотя бы лайков 10 ), то сделаю туториал и на русском. Курс будет содержать настройки Webpack, Docker (optional), Apache/Nginx. Моё решение сохраняет в отличии от nuxt.js все преимущества как WordPress так и Vue.js при этом соблюдая "законы" SEO и Social Marketing (Twitter Cards, Facebook Open Graph итп) и самое главное Hot Module Replacement с PHP/WordPress Templates!!!!!! .
Я очень разочарован Nuxt.js и расскажу в Tutorial почему он далеко не во всех случаях технически годен и почему с точки зрения open source этот проект не оптимальный исходя из моего личного опыта.

UPDATE 15.05.2019
К сожалению руки до туториала так и не дошли. Но создал Github Repo с простым Starter Theme.
Демо можно тут просмотреть: wue-theme.app
Пока без доскональной документации. Надеюсь к концу месяца создам.
Приколы темы:
-Hot Module Replacement с PHP файлами (если только это интересно можно и тут скачать Webpack config)
-полная поддержка SEO без Server Side Rendering (SSR). Реализуется это за счёт загрузки данных вместе с HTML в глобальном JS объекте "technomad", вместо дополнительного AJAX-запроса, что не поддерживается гуглом и для чего и нужны все прибамбасы типа Nuxt.js и phpv8/v8js.
-элементы меню и новости автоматически добавляются через WordPress-Backend.
-тема устонавливается как и любая другая тема без каких либо дополнительных настроек сервера (нужно скачать всю Repository и скомпремировать "wuetheme" папку в ZIP и тогда можно просто загружать как и обычную тему).
-Github Repo без данных из демонстрации. Может ещё добавлю функцию установки демо данных.
-сервер демо во Франкфурте без CDN. Так что во Владивостоке загрузка наверное немного дольше длится будет)) Из Берлина за 600-700ms загружается с VPS.
-есть ещё много над чем работать (pagination, проверка загруженны ли скрипты и стили плагинов при Ajax route change, пока они загружаются только при инициальной загрузки, но скрипты и стили могут быть на каждой странице иные) , нo даже в данном виде эта тема на сколько я знаю уникальная.
-тут можно проследить прогресс перестройки моего сайта с этой темой: stage.alexfullstack.dev, там больше клёвых анимаций))
Пока всё. Have fun :)

Update 30.05.2019
Много чего обновил на Github.

Update 02.06.2019
Я решил вчерашнюю проблему)))
Нужно было просто выспаться))
Завтра подробно опишу и обновлю Github Repo.

Update 03.06.2019
-загрузил на Github новую "bulletproof SEO" версию с "Dynamic Rendering Implementation"
-подробная статья тут

Update 14.06.2019
Перенёс сайт на wue-theme.app.
Демонстрация Github версии тут: starter.wue-theme.app
Добавил простую Load More Pagination и очистил код.