有谁知道如何@vue/test-utils v2在使用Vuetify 3 Beta版本时在库中进行组件测试?我也用它Vue3 composition API来定义我的组件。我在这里找到的文档https://vuetifyjs.com/en/getting-started/unit-testing/#spec-tests不起作用,因为它适用于Vuetify v2和@vue/test-utils v1
这是我的plugins/vuetify.js
import '@mdi/font/css/materialdesignicons.css';
import 'vuetify/styles';
import { createVuetify } from 'vuetify';
export default createVuetify();
Run Code Online (Sandbox Code Playgroud)
这是我在 NavBar.spec.js 中的代码
import { mount } from '@vue/test-utils';
import NavBar from '../NavBar.vue';
import Vuetify from '../../plugins/vuetify';
describe('NavBar', () => {
it('No properties [correct]', () => {
mount(NavBar, {
props: {},
global: {
plugins: [Vuetify]
}
});
// check if navbar renders
cy.get('.main')
.first();
});
});
Run Code Online (Sandbox Code Playgroud)
这是我收到的错误: …
我有一个像这样定义的指令:
app.directive('itemComments', ['ajax', function(ajax) {
return {
restrict: 'A',
templateUrl: URL + 'public/Pages/Homepage/ajax/getCommentsTpl',
controller: 'ItemLibraryController',
controllerAs: 'itemLibraryCtrl',
link: function(scope, element, attr) {
var $element = $(element);
scope.$watch(function(scope) {
return $element.find('li').length > 0;
}, function(finished) {
if(finished) {
autosize($element.find('textarea'));
}
});
}
};
}]);
Run Code Online (Sandbox Code Playgroud)
"templateUrl"返回指定的模板返回如下内容:
...
<textarea class="form-control textarea-resize" ng-keyup="commentPost($event)" ng-model="textComment"></textarea>
...
Run Code Online (Sandbox Code Playgroud)
在ItemLibraryController中,我定义了在textarea上的keyup上访问的方法commentPost().问题是,$scope.textComment = undefined而不是在textarea中输入的值.如果我在html中修改,ng-model="$parent.textComment"那么找到textarea中的值$scope.textComment.
PS.在指令定义中使用"template"而不是"templateUrl"时,ng-model问题消失了.
我的问题是:
为什么我必须使用$ parent.textComment,因为模板的范围是ItemLibraryController?
为什么使用templateUrl为模板内的ng-models创建另一个范围?
为什么在指令定义中使用"template"而不是"templateUrl"时,ng-model问题会消失?
如何在不使用$ parent.textComment的情况下访问textComment?