Component:
<template>
<div id="fileviewer" class="min-h-full">
<section class="gap-4 mt-4">
<div class="bg-medium-50 w-1/3 p-4">
<FileUpload ></FileUpload>
</div>
<div class="bg-medium-50 w-2/3 p-4">
<FileViewer></FileViewer>
</div>
</section>
</div>
</template>
<script>
import FileUpload from "#/components/FileUpload";
import FileViewer from "#/components/FileViewer";
export default {
name: "FileManager",
components: { FileUpload, FileViewer },
};
</script>
Test:
import { mount } from "#vue/test-utils";
import FileManager from '#/views/FileManager';
describe('FileManager.vue', () =>{
it('should mount', () => {
const wrapper = mount(FileManager, {
global: {
stubs: {
FileUpload: true,
FileViewer: true
}
}
})
expect(wrapper).toBeDefined()
})
})
Does not work for me as per the docs. No special installations. Instead, The framework wants to do the 'import' statements for the child components and then fails because I do not want to mock out 'fetch' for this one component. Any Ideas?
"vue-jest": "^5.0.0-alpha.9"
"#vue/test-utils": "^2.0.0-rc.6"
"vue": "^3.0.0",
Thanks for help.
I. If you want to stub all child components automatically you just can use shallowMount instead of mount.
II. If you want so use mount anyway try to fix your stubs like that:
global: {
stubs: {
FileUpload: {
template: '<div class="file-upload-or-any-class-you-want">You can put there anything you want</div>'
},
FileViewer: {
template: '<div class="file-viewer-or-any-class-you-want">You can put there anything you want</div>'
}
}
}
Or you can define your stubs before tests as I always do. For example:
const FileUploadStub = {
template: '<div class="file-upload-or-any-class-you-want">You can put there anything you want</div>'
}
const FileViewerStub: {
template: '<div class="file-viewer-or-any-class-you-want">You can put there anything you want</div>'
}
And then use stubs in mount or shallowMount:
global: {
stubs: {
FileUpload: FileUploadStub,
FileViewer: FileViewerStub
}
}
I would like a reload.location click-event only if a checkbox is checked. To me this seems to be basic conditions, but it's not working. Perhaps a different approach is needed? What I figured out, is when the checkbox is ticked, there is no html change in the <input type="checkbox"> element. Maybe this is the reason or is the combination of these conditions not possible? The else statement is a call back to the previous UI page. In below attempt, it's skipping the if-statement.
My attempt:
$(document.body).on("click", "#button", function(){
if (document.getElementById('checkbox').checked) {
location.reload(true);
} else {
return_to_page( this.dataset.return )
}
});
Above is working, however it's ignored due to the missing preventDefault:
$(document.body).on("click", "#button", function(e){
e.preventDefault();
//etc
});
checked is not a property of a jQuery object. You can use prop() to get the property instead:
$('#button').click( function() {
if ($('#checkbox').prop('checked')) {
location.reload(true);
}
// alternative #1 - use the 'checked' property of the Element in the jQuery object:
if ($('#checkbox')[0].checked) {
location.reload(true);
}
// alternative #2 - use the 'checked' property of the Element outside of jQuery:
if (document.getElementById('checkbox').checked) {
location.reload(true);
}
});
Here's a working example:
$('#button').click(function() {
if ($('#checkbox').prop('checked')) {
// location.reload(true);
console.log('Reload would happen now...');
} else {
console.log('Staying on the current page');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="checkbox" id="checkbox" />
Reload?
</label>
<button id="button">Go</button>
$('#button').click( function() {
if( $("input[id='checkbox']:checked") ) {
location.reload(true);
}
});
alternative
$('#button').click( function() {
if( $('#checkbox').is(':checked') ) {
location.reload(true);
}
});
All in a one plate methods:
$('#checkbox').is(":checked")
$('#checkbox').prop('checked')
$('#checkbox')[0].checked
$('#checkbox').get(0).checked
I've built simple ErrorBoundary component for my project in Vue.js and I'm struggling to write unit test for it. Component's code below:
<template>
<div class="overvue-error-boundary">
<slot v-if="!error" />
<div class="error-message" v-else>Something went horribly wrong here.</div>
</div>
</template>
<script>
export default {
data () {
return {
error: false
}
},
errorCaptured (error, vm, info) {
this.error = true;
}
}
</script>
I've created an ErrorThrowingComponent that throws an error on created() lifecycle hook so I can test ErrorBoundary:
const ErrorThrowingComponent = Vue.component('error-throwing-component', {
created() {
throw new Error(`Generic error`);
},
render (h) {
return h('div', 'lorem ipsum')
}
});
describe('when component in slot throws an error', () => {
it('renders div.error-message', () => {
// this is when error is when 'Generic error' is thrown by ErrorThrowingComponent
const wrapper = shallowMount(OvervueErrorBoundary, {
slots: {
default: ErrorThrowingComponent
}});
// below code is not executed
expect(wrapper.contains(ErrorThrowingComponent)).to.be.false;
expect(wrapper.contains('div.error-message')).to.be.true;
});
});
The problem is that ErrorThrowingComponent throws an error when I'm trying to actually mount it (thus failing entire test). Is there any way I can prevent this from happening?
EDIT: What I'm trying to achieve is to actually mount the ErrorThrowing component in a default slot of ErrorBoundary component to assert if ErrorBoundary will render error message and not the slot. This is way I created the ErrorThrowingComponent in the first place. But I cannot assert ErrorBoundary's behavior, because I get an error when trying to create a wraper.
For anyone comming here with a similar problem: I've raised this on Vue Land's #vue-testing channel on Discord, and they suggested to move entire error-handling logic to a function which will be called from the errorCaptured() hook, and then just test this function. This approach seems sensible to me, so I decided to post it here.
Refactored ErrorBoundary component:
<template>
<div class="error-boundary">
<slot v-if="!error" />
<div class="error-message" v-else>Something went horribly wrong here. Error: {{ error.message }}</div>
</div>
</template>
<script>
export default {
data () {
return {
error: null
}
},
methods: {
interceptError(error) {
this.error = error;
}
},
errorCaptured (error, vm, info) {
this.interceptError(error);
}
}
</script>
Unit test using vue-test-utils:
describe('when interceptError method is called', () => {
it('renders div.error-message', () => {
const wrapper = shallowMount(OvervueErrorBoundary);
wrapper.vm.interceptError(new Error('Generic error'));
expect(wrapper.contains('div.error-message')).to.be.true;
});
});
I am using EmberJs version 1.4.
When I click on one of the links I would expect the URL to include the id of the selected widget but nothing appears and when I look at the params parameter in the route model hook it has no properties and I would expect the id to be one of its properties so could someone help me to understand what am I missing?
In other words I would expect the URL to become awesome.html#/widgets/5 but it always is awesome.html#/widgets
Thank you!
This is my ember code:
window.Awesome = Ember.Application.create();
Awesome.Router.map(function() {
this.resource("awesome", {path: "/"}, function(){
this.route('login');
});
this.resource("widgets", function () {
this.resource('widget', { path: '/:widgetId' }, function () {
this.route('general', { path: 'info' });
this.route('configuration');
this.route('operations');
})
});
});
Awesome.WidgetsRoute = Awesome.AuthenticationRoute.extend({
model: function(){
//TODO: Call a service to get the model.
return { widgets: [{ widgetId: 1, widgetName: "Great Widget" }, { widgetId: 2, widgetName: "Fantastic Widget" }, { widgetId: 3, widgetName: "Brutal Widget" }] };
}
});
Awesome.WidgetIndexRoute = Awesome.AuthenticationRoute.extend({
model: function (params) {
var receivedWidgetId = params.widgetId;
return { widgetName: "Hardcoded Widget", widgetId: receivedWidgetId };
}
});
These are the templates:
<script type="text/x-handlebars" data-template-name="widgets">
<section class="span3 left-section">
<div class="btn-group-vertical btn-group-justified registration-actions-menu">
<button id="createNewWidget" class="btn btn-link">Create New Widget</button>
<button id="joinWidgetTeam" class="btn btn-link">Join Widget Team</button>
</div>
<div class="registered-widgets-menu">
<div class="btn-group-vertical">
{{#each widget in widgets}}
{{#link-to 'widget' widget class="btn btn-link"}}{{widget.widgetName}}{{/link-to}}
{{/each}}
</div>
</div>
</section>
<section class="span8">
{{outlet}}
</section>
</script>
<script type="text/x-handlebars" data-template-name="widget">
<div id="widgetOptions">
<!-- TODO: Change the anchors for handlebars link-to helpers. -->
<h1>{{widgetName}}</h1> <h5>{{widgetId}}</h5>
<ul id="widgetNavigation">
<li>Widget Info</li>
<li>Widget Configuration</li>
<li>Widget Operations</li>
</ul>
</div>
<div id="widgetContent">
<!-- TODO: Design some awesome widget content. -->
Some awesome widget content
</div>
</script>
I also have an authentication route from which the other routes inherit. Even though I don't believe it has something to do with the issue I'll include just in case I am wrong.
Awesome.AuthenticationRoute = Ember.Route.extend({
beforeModel: function(transition){
if(!Awesome.get('loggedUser')){
this.redirectToLogin(transition);
}
},
redirectToLogin: function(transition) {
var loginController = this.controllerFor('awesome.login');
loginController.set('attemptedTransition', transition);
this.transitionTo('awesome.login');
}
});
It looks like it's totally working to me, when you click on one of the widgets
http://emberjs.jsbin.com/mohex/1
Additionally it looks like you're mixing up the WidgetIndexRoute and WidgetRoute. The widget resource should be displayed like this (though this is unrelated to the issue you're describing)
Awesome.WidgetRoute = Awesome.AuthenticationRoute.extend({
model: function (params) {
var receivedWidgetId = params.widgetId;
return { widgetName: "Hardcoded Widget", widgetId: receivedWidgetId };
}
});
I'm playing around with ember.js and am stuck somehow finding out how to build up the structure the right way. I could follow all examples, but have some problems putting them all together.
I'm using require.js and handlebars.
My directory structure looks like this:
- app
- - controllers
- - css
- - helpers
- - lib
- - models
- - routes
- - templates
- - - partials
- - views
My application.js looks like this:
require.config({
paths:{
jquery:'lib/jquery-1.7.2',
handlebars:'lib/handlebars',
ember:'lib/ember',
ember_data:'lib/ember-data',
text:'lib/requireJS/text',
md5:'lib/md5',
spin:'lib/spin'
},
shim:{
'ember':{
deps:[ 'jquery', 'handlebars'],
exports:'Ember'
},
'ember_data':{
deps:[ 'ember'],
exports:'DS'
}
},
waitSeconds:15
});
define('application'
,[
// Routes
'routes/app_router'
// Controller
,'controllers/application_controller'
// Views
,'views/application_view'
,'views/category/category_list_view'
// Libraries
,'jquery'
,'handlebars'
,'ember'
,'ember_data'
,'spin'
]
, function (
// Router
Router
// Controller
,ApplicationController
// Views
,ApplicationView
,CategoryListView
// Models
,Category
,Product
)
{
return Ember.Application.create({
VERSION: '1.0.0'
,rootElement:'#main'
// Load Router
,Router:Router
// Load Controllers
,ApplicationController:ApplicationController
// Load associated Views
,ApplicationView:ApplicationView
,CategoryListView:CategoryListView
// Load Models
,Category:Category
,Product:Product
//Persistence Layer,using default RESTAdapter in ember-data.js.
,store:DS.Store.create({
revision:10
,adapter:DS.RESTAdapter.create({
bulkCommit:false
,serializer:DS.Serializer.create({
primaryKey:function (type) {
return type.pk;
}
})
,mappings:{
//categories:Category
}
,namespace:'api'
,url: "https://example.org"
})
})
,ready:function () {
}
});
}
);
Then my application controller
define(
'controllers/application_controller'
,['ember' ],
function () {
return Ember.Controller.extend({
init: function() {
}
});
}
);
The application view:
define('views/application_view', [
'text!templates/application.html',
'ember'
],
function(Application_markup) {
return Ember.View.extend({
template: Ember.Handlebars.compile( Application_markup ),
elementId: 'container',
didInsertElement: function() {
this.$().hide().show("slow");
}
});
}
);
And, finally, the application.html template
<div id="container">
<div id="header">
FOO BAR
</div>
<div id="navigation">
{{outlet mainNavigation}}
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
What I am trying to do now is to include another template into the main application template (category_list). I guess I either have to do this in the HTML template itself, or in the application view - but in case of the latter one I don't know how to configure/parse/bind more than one template.
What is the best practice of building individual, independent, modular templates and to put them all together? Where exactly should this happen?
Or is this even a wrong approach of using ember.js?
Maybe one of you could make some things more clear to me.
Thanks.
EDIT #1
app_router.js
define('routes/app_router',
['ember' ],
function () {
return Em.Router.extend({
enableLogging:true, //useful for development
/* location property: 'hash': Uses URL fragment identifiers (like #/blog/1) for routing.
'history': Uses the browser's history.pushstate API for routing. Only works in modern browsers with pushstate support.
'none': Does not read or set the browser URL, but still allows for routing to happen. Useful for testing.*/
location:'hash',
/* location: 'history',
rootURL:'/app',*/
root:Ember.Route.extend({
index:Ember.Route.extend({
route:'/'
/*,connectOutlets:function (router) {
//Render application View ,sign in.
v = router.get('applicationController').get('view');
if (v) v.remove();
App.router.get('applicationController').set('loggedin', false);
router.get('applicationController').connectOutlet({name:'login', outletName:'loginform'});
router.get('loginController').enterLogin();
}*/
})
/*,contacts:Em.Route.extend({
route:'/contacts',
showContact:function (router, event) {
router.transitionTo('contacts.contact.index', event.context);
},
showNewContact:function (router) {
router.transitionTo('contacts.newContact', {});
},
logout:function (router) {
jQuery.ajax({
url:'/site/logout',
type:'POST',
success:function (response) {
if (!response.authenticated) {
router.get('applicationController').set('loggedin', false).get('view').remove();
router.transitionTo('root.index', {});
}
}
})
},
index:Em.Route.extend({
route:'/',
connectOutlets:function (router) {
if (router.get('applicationController').get('loggedin'))
router.get('applicationController').connectOutlet('contacts', App.store.findAll(App.Contact));
else router.transitionTo('root.index');
}
}),
contact:Em.Route.extend({
route:'/contact',
index:Em.Route.extend({
route:'/:contact_id',
deserialize:function (router, urlParams) {
return App.store.find(App.Contact, urlParams.contact_id);
debugger;
},
showEdit:function (router) {
router.transitionTo('contacts.contact.edit');
},
connectOutlets:function (router, context) {
if (router.get('applicationController').get('loggedin'))
router.get('contactsController').connectOutlet('contact', context);
else router.transitionTo('root.index');
}
}),
edit:Em.Route.extend({
route:'edit',
cancelEdit:function (router) {
router.transitionTo('contacts.contact.index');
},
connectOutlets:function (router) {
if (router.get('applicationController').get('loggedin')) {
var contactsController = router.get('contactsController');
contactsController.connectOutlet('editContact', router.get('contactController').get('content'));
router.get('editContactController').enterEditing();
} else router.transitionTo('root.index');
},
exit:function (router) {
router.get('editContactController').exitEditing();
}
})
}),
newContact:Em.Route.extend({
route:'/contacts/new',
cancelEdit:function (router) {
router.transitionTo('contacts.index');
},
connectOutlets:function (router) {
if (router.get('applicationController').get('loggedin')) {
router.get('contactsController').connectOutlet('editContact', {});
router.get('editContactController').enterEditing();
} else router.transitionTo('root.index');
},
exit:function (router) {
router.get('editContactController').exitEditing();
}
})
})*/
})
});
}
);
EDIT #2
I changed the router now as follow, but it does not do anything.
define('routes/apps_router', ['ember'],
function () {
return Em.Router.extend({
enableLogging:true
,location:'hash'
,map: function (match) {
match("/").to("CategoryList", function (match) {
match("/").to("mainNavigation");
});
}
,root:Ember.Route.extend({
index:Ember.Route.extend({
route:'/'
,renderTemplates: function() {
this.render('mainNavigation', {
into: 'CategoryList'
});
}
// ....
});
}
);
Kind regards,
Christopher
if you use the latest release of ember with v2 router, you can do something like this:
App.Router.map(function (match) {
match("/").to("categoryList", function (match) {
match("/").to("foo");
});
});
In your catergoryList template, put an {{outlet}} (you can optionally name it)
Then, your route for the template you want to insert into catergoryList will be like this:
App.fooRouter = Ember.Router.extend({
renderTemplates:function () {
this.render('foo', {
into:'catergoryList'
});
}
})
A good example of this in practice can be found here: https://github.com/sh4n3d4v15/ember-todos