So, when I'm running tests in WebStorm with Karma (Just right-click on the karma.conf.js file and then select "run karma.conf.js.") it has a really nifty graphics user interface to sort through all the passing and failing tests, which is why I love it, but when you're testing an algorithm to sort through big arrays and objects the feedback when it fails is an awful blob:
> Expected [ [ Object({ id: 70111470, title: 'Die Hard', time: Object({
> type: 'End', time: 213432 }), url: Object({ width: 150, height: 200,
> url: 'http://cdn-0.nflximg.com/images/2891/DieHard150.jpg' }) }),
> Object({ id: 70111470, title: 'Die Hard', time: Object({ type:
> 'Start', time: 64534 }), url: Object({ width: 200, height: 200, url:
> 'http://cdn-0.nflximg.com/images/2891/DieHard200.jpg' }) }) ], [
> Object({ id: 654356453, title: 'Bad Boys', time: Object({ type: 'End',
> time: 54654754 }), url: Object({ width: 200, height: 200, url:
> 'http://cdn-0.nflximg.com/images/2891/BadBoys200.jpg' }) }), Object({
> id: 654356453, title: 'Bad Boys', time: Object({ type: 'Start', time:
> 43524243 }), url: Object({ width: 140, height: 200, url:
> 'http://cdn-0.nflximg.com/images/2891/BadBoys140.jpg' }) }) ], [
> Object({ id: 65432445, title: 'The Chamber', time: Object({ type:
> 'End', time: 132423 }), url: Object({ width: 130, height: 200, url:
> 'http://cdn-0.nflximg.com/images/2891/TheChamber130.jpg' }) }),
> Object({ id: 65432445, title: 'The Chamber', time: Object({ type:
> 'Start', time: 54637425 }), url: Object({ width: 200, height: 200,
> url: 'http://cdn-0.nflximg.com/images/2891/TheChamber200.jpg' }) }) ],
> [ Object({ id: 675465, title: 'Fracture', time: Object({ type: 'End',
> time: 45632456 }), url: Object({ width: 200, height: 200, url:
> 'http://cdn-0.nflximg.com/images/2891/Fracture200.jpg' }) }), Object({
> id: 675465, title: 'Fracture', time: Object({ type: 'Start', time:
> 234534 }), url: Object({ width: 120, height: 200, url:
> 'http://cdn-0.nflximg.com/images/2891/Fracture120.jpg' }) }), Object({
> id: 675465, title: 'Fracture', time: Object({ type: 'Middle', time:
> 3453434 }), url: Object({ width: 300, height: 200, url:
> 'http://cdn-0.nflximg.com/images/2891/Fracture300.jpg' }) }) ] ] to
> equal [ Object({ id: 70111470, title: 'Die Hard', time: 323133, url:
> 'http://cdn-0.nflximg.com/images/2891/DieHard150.jpg' }), Object({ id:
> 654356453, title: 'Bad Boys', time: 6575665, url:
> 'http://cdn-0.nflximg.com/images/2891/BadBoys140.jpg' }), Object({ id:
> 65432445, title: 'The Chamber', time: 3452343, url:
> 'http://cdn-0.nflximg.com/images/2891/TheChamber130.jpg' }), Object({
> id: 675465, title: 'Fracture', time: 323133, url:
> 'http://cdn-0.nflximg.com/images/2891/DieHard150.jpg' }) ].
Is there a plugin, setting, or simple hack that would make this more organized and easier to read?
Related
I'm pulling my hairs here. I have a Google Assistant application that I build with Jovo 4 and Google Actions Builder.
The goal is to create a HelpScene, which shows some options that explain the possibilities/features of the app on selection.
This is the response I return from my Webhook. (This is Jovo code, but doesn't matter as this returns a JSON when the Assistant calls the webhook.)
#Handle(GoogleAssistantHandles.onScene('HelpScene'))
showHelpList() {
return this.$send({
platforms: {
googleAssistant: {
nativeResponse: {
scene: {
name: this.jovo.$googleAssistant?.$request.scene?.name,
slots: {},
next: {
name: 'MainScene',
},
},
session: {
id: 'session_id',
languageCode: 'nl-BE',
params: {},
typeOverrides: [
{
name: 'prompt_option',
synonym: {
entries: [
{
name: 'ITEM_1',
synonyms: ['Item 1', 'First item'],
display: {
title: 'Item #1',
description: 'Description of Item #1',
image: {
alt: 'Google Assistant logo',
height: 0,
url: 'https://developers.google.com/assistant/assistant_96.png',
width: 0,
},
},
},
{
name: 'ITEM_2',
synonyms: ['Item 2', 'Second item'],
display: {
title: 'Item #2',
description: 'Description of Item #2',
image: {
alt: 'Google Assistant logo',
height: 0,
url: 'https://developers.google.com/assistant/assistant_96.png',
width: 0,
},
},
},
{
name: 'ITEM_3',
synonyms: ['Item 3', 'Third item'],
display: {
title: 'Item #3',
description: 'Description of Item #3',
image: {
alt: 'Google Assistant logo',
height: 0,
url: 'https://developers.google.com/assistant/assistant_96.png',
width: 0,
},
},
},
{
name: 'ITEM_4',
synonyms: ['Item 4', 'Fourth item'],
display: {
title: 'Item #4',
description: 'Description of Item #4',
image: {
alt: 'Google Assistant logo',
height: 0,
url: 'https://developers.google.com/assistant/assistant_96.png',
width: 0,
},
},
},
],
},
typeOverrideMode: 'TYPE_REPLACE',
},
],
},
prompt: {
override: false,
content: {
collection: {
items: [
{
key: 'ITEM_1',
},
{
key: 'ITEM_2',
},
{
key: 'ITEM_3',
},
{
key: 'ITEM_4',
},
],
subtitle: 'List subtitle',
title: 'List title',
},
},
firstSimple: {
speech: 'This is a list.',
text: 'This is a list.',
},
},
},
},
},
});
I created a HelpScene which pulls my options from my webhook.
In my slot filling, this is the configuration.
When I use the simulator, the options from my webhook are shown perfectly.
But when I click an item in the list, the app just stops working. "YourApp is currently not responding".
At first I thought it had something to do with my webhook, so I changed the behaviour of the "on slot is filled" condition, that it should prompt something, directly from Google Actions Builder, but the behaviour is still not desired: the app just stops working.
Any ideas what I'm doing wrong?
Thanks in advance!
Okay, after days of searching, I finally figured it out.
It did have something to do with the Jovo framework/setup and/or the scene parameter in the native response.
This is my component, in which I redirect new users to the HelpScene. This scene should show multiple cards in a list/collection/whatever on which the user can tap to receive more information about the application's features.
#Component()
export class WelcomeComponent extends BaseComponent {
async START(): Promise<void> {
const isNewUser = true;
if (isNewUser && this.$device.supports(Capability.Screen)) {
return this.$send(NextSceneOutput, {
name: 'HelpScene',
message: 'Hi, I noticed you are a new user, let me walk you through some options.',
});
}
return this.$send('Welcome!');
}
#Handle(GoogleAssistantHandles.onScene('HelpScene'))
help() {
const sessionData = this.$request.getSession();
if (sessionData && sessionData.prompt_option) {
return this.$send(NextSceneOutput, {
name: 'MainScene',
message: `You picked option ${sessionData.prompt_option}. This is some info about it ... What do you want to do now?`,
});
}
return this.$send({
platforms: {
googleAssistant: {
nativeResponse: {
session: {
id: 'session_id',
languageCode: '',
params: {},
typeOverrides: [
{
name: 'HelpOptionType',
typeOverrideMode: 'TYPE_REPLACE',
synonym: {
entries: [
{
name: 'ITEM_1',
synonyms: ['Item 1', 'First item'],
display: {
title: 'Item #1',
description: 'Description of Item #1',
image: {
alt: 'Google Assistant logo',
height: 0,
url: 'https://developers.google.com/assistant/assistant_96.png',
width: 0,
},
},
},
{
name: 'ITEM_2',
synonyms: ['Item 2', 'Second item'],
display: {
title: 'Item #2',
description: 'Description of Item #2',
image: {
alt: 'Google Assistant logo',
height: 0,
url: 'https://developers.google.com/assistant/assistant_96.png',
width: 0,
},
},
},
{
name: 'ITEM_3',
synonyms: ['Item 3', 'Third item'],
display: {
title: 'Item #3',
description: 'Description of Item #3',
image: {
alt: 'Google Assistant logo',
height: 0,
url: 'https://developers.google.com/assistant/assistant_96.png',
width: 0,
},
},
},
{
name: 'ITEM_4',
synonyms: ['Item 4', 'Fourth item'],
display: {
title: 'Item #4',
description: 'Description of Item #4',
image: {
alt: 'Google Assistant logo',
height: 0,
url: 'https://developers.google.com/assistant/assistant_96.png',
width: 0,
},
},
},
],
},
},
],
},
prompt: {
override: false,
content: {
list: {
items: [
{
key: 'ITEM_1',
},
{
key: 'ITEM_2',
},
{
key: 'ITEM_3',
},
{
key: 'ITEM_4',
},
],
subtitle: 'List subtitle',
title: 'List title',
},
},
firstSimple: {
speech: 'This is a list.',
text: 'This is a list.',
},
},
},
},
},
});
}
// ...other intents...
In AoG I made 2 scenes, 1 MainScene on which a user enters the app and one HelpScene, which looks like this (yaml config). The goal of the HelpScene is only to be used for slot filling on the different options, then a user should go back to the MainScene.
"conditionalEvents":
- "condition": "scene.slots.status == \"FINAL\""
"handler":
"webhookHandler": "Jovo"
"slots":
- "commitBehavior":
"writeSessionParam": "prompt_option"
"name": "prompt_option"
"promptSettings":
"initialPrompt":
"webhookHandler": "Jovo"
"required": true
"type":
"name": "HelpOptionType"
As you can see in my help() method, I just check if the session param is filled out. If it is, I redirect the user to the MainScene, but first give a response about the chosen option.
Hello i am have datefield:
{
xtype: 'datefield',
height: 25,
flex: 1,
margin: '0 0 0 0',
textAlign: 'left',
padding: 0,
format: 'd.m.Y H:i'
}
And this field in model: { name: 'calendar', type: 'date' },
But when i am sent in server in request 'calendar' have this format calendar: "3388463160", and then when i am get from server 'calendar' i
received this calendar:"0001-01-01T00:00:00" How i can right format for server from extJs ?
use submitFormat property for datefield
{
xtype: 'datefield',
height: 25,
flex: 1,
margin: '0 0 0 0',
textAlign: 'left',
padding: 0,
submitFormat:'d.m.Y H:i',
format: 'd.m.Y H:i'
}
I am add in field this: { name: 'calendar', type: 'date', dateFormat: 'c' }' and all work right
I am trying to lead data from my controller. The queries work right but i cant seem to load the data in the view. If anyone can see my mistake, i will appreciate it.
controller
public ActionResult GetItemList(int RRGroupID)
{
var item = ReportEngineHelper.GetReportingEngine(Session).Generate<ItemListQuery>(new Filter()
{
Item=new Item()
{
RRGroupID = RRGroupID,
}
}).ToQueryModel<ItemName>();
var listItemName = new List<ItemName>();
return Json(item, JsonRequestBehavior.AllowGet);
}
view
var detailsSource =
{
url: $.ajax({url: url,
type: "json",
data: {RRGroupID:RRGroupID},
}),
datatype: "json",
datafields: [{ name: "ItemID", type: "int" }, { name: "FullItemName" }],
};
var detailsAdapter = new $.jqx.dataAdapter(detailsSource);
$("#jqxgrid").jqxGrid({
source: detailsAdapter,
autoheight:true,
autowidth: true,
columns: [
{ text: 'Item Name', datafield: 'FullItemName', width: 200, editable: false },
{ text: 'Unit', width: 100, editable: true },
{ text: 'Beginning Balance', width: 180, editable: true },
{ text: 'Loss', width: 80, editable: true, cellsalign: 'right' },
{ text: 'Quantity Recieved', width: 90, editable: true, cellsalign: 'right'},
{ text: 'DOS', width: 100, editable: true, cellsalign: 'right' },
{ text: 'Requested Quantity', width: 100, editable: true, cellsalign: 'right'}
],
});
//this is your function build grid
function buildDetail(data){
var detailsSource:{
localdata:data,
datafields: [{ name: "ItemID", type: "int" }, { name: "FullItemName" }],
type:'json',
};
var detailsAdapter = new $.jqx.dataAdapter(detailsSource);
$("#jqxgrid").jqxGrid({
source: detailsAdapter,
autoheight:true,
autowidth: true,
columns: [
{ text: 'Item Name', datafield: 'FullItemName', width: 200, editable: false },
{ text: 'Unit', width: 100, editable: true },
{ text: 'Beginning Balance', width: 180, editable: true },
{ text: 'Loss', width: 80, editable: true, cellsalign: 'right' },
{ text: 'Quantity Recieved', width: 90, editable: true, cellsalign: 'right'},
{ text: 'DOS', width: 100, editable: true, cellsalign: 'right' },
{ text: 'Requested Quantity', width: 100, editable: true, cellsalign: 'right'}
],
});
}
// now get your data with ajax then build grid.
$(document).ready(function(){
$.ajax({url: url,
type: "json",
data: {RRGroupID:RRGroupID},
success:function(data){
//now call your build function
buildDetail(data);
}
});
})
By this way, you load your data without using jqx.ajax
Good Morning,
I have some problem when I attempted to fill my Grid panel from my web service, the result was an empty grid, thank you for advance.
// Create store
var myStore = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: 'Service.asmx/GetPeople',
headers: {
'Content-type': 'application/json'
}
}),
root: 'd',
id: 'Id',
fields: ['Id', 'FistName', 'LastName', 'BirthDate'],
autoLoad: true
});
//Create grid to display data from store
var gridTest = new Ext.grid.Panel({
store: myStore, // Our store
renderTo: Ext.getBody(),
forceFit: true,
columns: [ // Grid columns
{ xtype: 'gridcolumn', width: 100, text: 'Id', dataIndex: 'Id', flex: 1 },
{ xtype: 'gridcolumn', width: 100, text: 'Nom', dataIndex: 'FirstName', flex: 1 },
{ xtype: 'gridcolumn', width: 100, text: 'Mail', dataIndex: 'LastName', flex: 1 },
{ xtype: 'gridcolumn', width: 100, text: 'Phone', dataIndex: 'BirthDate', flex: 1 }
]
});
and this is my viewport:
Ext.create('Ext.container.Viewport', {
layout: "border",
items: [{
region: "north",
height: 50,
title: "Nord"
}, {
region: "south",
height: 200,
title: "sud",
bodyStyle: 'background: #fffff;',
border: false
}, {
region: "center",
title: "centre",
bodyStyle: 'background: #00000;',
border: false,
items: gridTest
}, {
region: "west",
width: 100,
title: "ouest"
}, {
region: "east",
width: 100,
title: "est"
}]
});
and this is RESPONSE FROM FIREBUG MOZILLA FIREFOX:
{"d": [{
"__type":"WebService4ExtJS.Model.Person",
"Id":0,
"FirstName":"sami",
"LastName":"samibizani#gmail.com",
"BirthDate":"23188219"
}, {
"__type":"WebService4ExtJS.Model.Person",
"Id":1,"FirstName":"admin",
"LastName":"admin#gmail.com",
"BirthDate":"1111111"
}, {
"__type":"WebService4ExtJS.Model.Person",
"Id":2,
"FirstName":"user",
"LastName":"user#gmail.com",
"BirthDate":"2222222"
}]
}
Your Store reader is not defined:
reader: {
type: 'json',
root: 'd',
idProperty: 'Id'
}
You can find the working code here.
And one little mistake: in the fields array, you wrote FistName instead of FirstName.
I am using EXTJS 4.0 and I want to display tips when user move to on my line Charts i already created Group Line Chart and as well as create Rich Tips also but now my problem is when I create tips for every series and run in browser I got blank tips for three line Chart out of four but fourth line chart display the correct Rich tips. My sample code is:
Code For Panel and Line charts:
var ChequesDetailsChartsMonthWiseWin = Ext.create('Ext.panel.Panel', {
width: 800,
height: 600,
hidden: false,
id:'ChequesDetailsChartsMonthWiseWinId',
title: 'Line Chart',
renderTo: Ext.getBody(),
layout: 'fit',
items: {
xtype: 'chart',
style: 'background:#fff',
animate: true,
store: ChequesDetailsLineChartsMonthwiseStore,
shadow: true,
theme: 'Category1',
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
fields: ['Honorarium','Program Expenses','Assets Amount','Human Resource'],
title: 'Amounts (In Rs)',
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}, {
type: 'Category',
position: 'bottom',
fields: ['month'],
title: 'Month of the Year'
}],
series: [{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'month',
yField: 'Honorarium',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Honorarium');
this.setTitle("Information for " + 'Honorarium - Month :' +storeItem.get('month') );
}
} // tips ends here
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'month',
yField: 'Program Expenses',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Program Expenses');
this.setTitle("Information for " + 'Program Expenses - Month :' +storeItem.get('month') );
}
} // tips ends here
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
// fill: true,
xField: 'month',
yField: 'Assets Amount',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Assets Amount');
this.setTitle("Information for " + 'Assets Amount - Month :' +storeItem.get('month') );
}
} // tips ends here
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
// fill: true,
xField: 'month',
yField: 'Human Resource',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Human Resource');
this.setTitle("Information for " + 'Human Resource - Month :' +storeItem.get('month') );
}
} // tips ends here
}]
}
});
And Sample Preview is :
Line Chart :
Line Chart :
Please provide me solution of how to display tips in all charts or where I am doing wrong.