Cypress drag-drop not working for thesecond time - frontend

I trying to drag and drop items while I am testing a frontend with Cypress.
I already installed the plugin Cypress-drag-drop from:
https://www.npmjs.com/package/#4tw/cypress-drag-drop
This actually works good, but only for the first time.
When I try to drag and drop a similar selector for the second time it is failing.
I have tried to find the source of this problem but couldn't find it.
Just using the following:
cy.get('[data-test-id="gapMatchFact"]:eq(1)').drag('[data-test-id="gapMatchGap"]:eq(0)') //<-- works perfectly
cy.get('[data-test-id="gapMatchGap"]:eq(0)').drag('[data-test-id="gapMatchFact"]:eq(1)') //<-- doesn't work
Please check the printscreens, I can see that the second try has a lot more tries for moving the object. What could be the reason for this? The FrontEnd is native javascript.
I already tried different drag and drop methods. This even did not work for the first drag and drop.
`cy.get('[data-test-id="gapMatchFact"]').eq(1)
.realMouseDown({ button: 'left', position: 'center' })
.realMouseMove(0, 10, { position: 'center' });
cy.get('[data-test-id="gapMatchFact"]').eq(0)
.realMouseMove(0, 0, { position: 'top' })
.realHover().realMouseUp();`

Related

Bevy text isn't displayed and I don't know why

Hello everyone I am trying write the score in the top left corner of the window but for some reason it is not working. Here is the code I used to spawn the text:
commands
.spawn(TextBundle{
text: Text{value: "Score:".to_string(),
font: assets.load("FiraSans-Bold.ttf"),
style:TextStyle{
font_size:30.0,
color:Color::WHITE,
..Default::default()},..Default::default()},
transform: Transform::from_translation(Vec3::new(-380.0,-380.0,2.0)),
..Default::default()
})
.with(TextTag);
Window is 800 by 800. Any help is appreciated.
You may need to add the CameraUiBundle if you did not yet do it.
commands
.spawn(CameraUiBundle::default())
.spawn(TextBundle{
...
})
.with(TextTag);
You might want to do that in your initial setup system in which you also add the camera.
The Bevy version used when answering was 0.4.
Another reason (in bevy 0.8) might be that there's no default font in bevy (check out this answer)
What you'd need to do would be to download a .ttf file, and then load it when spawning the text.
TextStyle {
font_size: 50.0,
color: Color::WHITE,
font: asset_server.load("your_font.ttf"),
},

Azure Bot Framework - Wrap card action and button text

I’m having an issue where buttons and actions in hero and adaptive cards won’t wrap text. I have searched the internet and everyone is mentioning a webchat.js and botchat.js files that can be adjusted to fix this. I can’t seem to find those in my code. Has the name changed? I know botchat was changed to webchat. Would anyone happen to know where to fix this in the Basic Bot NodeJS implementation SDK V4?
Assuming you are using webchat, you could use plain css. This worked for me:
.ac-pushButton > div {
white-space: normal !important;
}
I was able to find an answer in node_modules > wordwrap. There is a function that you can call in there to wrap any text you'd like. Thank you #Hessel for the help.
var wrap = require('wordwrap')(70);
return CardFactory.heroCard(
'',
answer,
CardFactory.images([]),
CardFactory.actions([
{
type: 'postBack',
title: wrap(YOUR_TEXT),
value: YOUR_VALUE
}
])
);

Processing \Animation in NetSuite

I have this client script which copies the line number entered in Copy line# and creates new lines from number of lines entered in Copy #Times.
This thing takes time when you increase the number of lines you require to copy. So can we give any processing animation till all the lines are set so user dont have to worry?
I have tried giving dialog.create but it didnt work. I want the animation to stay until script is executing and after that stop.
var options = {
title: 'Alert',
message: 'Processing. Please wait.',
buttons: [{
label: 'OKK...',
value: 1
},
]
};
dialog.create(options).then(success)
return (true);
success is a function I am calling.
The N/ui/dialog module is intended for showing dismissable messages, and won't really work for progress bars as you cannot hide the buttons, nor close it via code. I would recommend looking at a third party library. A very popular one is SweetAlert2, and there is some sample code on the NetSuite Professionals site for using it with NetSuite.
If you just want a quick hack, you could just used the Ext.js library that NetSuite includes by default on all pages. However I would highly recommend not doing so for any production code because NetSuite could update or remove it at any time in a future upgrade.
var messageBox = Ext.MessageBox.show({
title: 'Lines are being copied...',
msg: 'This may take a couple minutes',
wait: true,
width: 250
});
// your work here
messageBox.hide()

How to change gulp svg sprites code to work with gulp svg sprite

I wanted to follow this technique https://www.liquidlight.co.uk/blog/article/creating-svg-sprites-using-gulp-and-sass/ but when I tried to use gulp-svg-sprites I had problem with installation on Win 7. So I used svg-sprite but then I got
"However I got events.js:72 thro er; // UInhandled error event. ArgumentError: SVGSpriter.compile: "{}" is not a valid mode configuraiton."
I guess I should change these lines below for gulp-svg-sprite. Does anyone can tell me what I should change?
return gulp.src(paths.sprite.src)
.pipe(svgo())
.pipe(svgSprites({
cssFile: paths.sprite.css,
preview: false,
layout: 'diagonal',
padding: 5,
svg: {
sprite: paths.sprite.svg
},
templates: {
css: require("fs").readFileSync(paths.templates.src + 'sprite-template.scss', "utf-8")
}
}))
.pipe(gulp.dest(basePaths.dest));
I understand it might be too late but as the author of svg-sprite (and its Grunt / Gulp wrappers) I suppose you got confused by the incompatibility between gulp-svg-sprites (which was written by Shane Osbourne as a stop-gap until I had ported svg-sprite to Gulp myself; mind the "s" at the end) and the final gulp-svg-sprite that is referenced in the liquidlight article. You could probably solve your configuration woes by using the online configuration kickstarter that's available in the meantime.

How to modify dashlets to auto-refresh?

Is there a simple way to modify a dashlet to automatically re-load itself periodically?
I am particularly thinking of the "My Tasks" dashlet - we are using pooled review workflows, so tasks may come and go all the time as they are created and then are claimed.
It may be frustrating for users to keep clicking on tasks that turn out to have already been claimed - or having to remember to keep re-loading their Dashboard page. I'd prefer the dashlet to refresh on a timed interval so it's always reasonably up to date.
In order to do this you will need to add a new capability to the client-side class Alfresco.dashlet.MyTasks (docs, source) found in the file components/dashlets/my-tasks.get.js. First you will need to add a new method to the prototype extension specified as the second parameter in the YAHOO.lang.augmentObject() call, e.g.
...
}, // end of last OOTB function - add a comment here
// begin changes
reloadData: function MyTasks_onReady()
{
this.widgets.alfrescoDataTable.loadDataTable(
this.options.filters[this.widgets.filterMenuButton.value]
);
}
// end changes
});
})();
It's not the ideal development environment, you can modify the JS file directly in the Share webapp, although you will also need to update the corresponding -min.js file.
Once you've done this, check that it works by running the following line in your browser's JavaScript console
Alfresco.util.ComponentManager.findFirst("Alfresco.dashlet.MyTasks").reloadData();
If that works, then you can wire up your new method to a title bar action (see my DevCon presentation for more background info), in the dashlet web script. The method depends on whether you are using v4.2 or a previous version, but if it is the latter then you need to add some code to the dashlet's Freemarker file my-tasks.get.html.ftl (under WEB-INF/classes/alfresco/site-webscripts/org/alfresco/components/dashlets).
In that file you should see some JavaScript code inside a <script> tag, this sets up an instance of the client-side class and some utility classes, the contents of which you can replace with the following, to add your custom title bar action.
(function()
{
var dashlet = new Alfresco.dashlet.MyTasks("${jsid}").setOptions(
{
hiddenTaskTypes: [<#list hiddenTaskTypes as type>"${type}"<#if type_has_next>, </#if></#list>],
maxItems: ${maxItems!"50"},
filters:
{<#list filters as filter>
"${filter.type?js_string}": "${filter.parameters?js_string}"<#if filter_has_next>,</#if>
</#list>}
}).setMessages(${messages});
new Alfresco.widget.DashletResizer("${id}", "${instance.object.id}");
var refreshDashletEvent = new YAHOO.util.CustomEvent("onDashletRefresh");
refreshDashletEvent.subscribe(dashlet.reloadData, dashlet, true);
new Alfresco.widget.DashletTitleBarActions("${args.htmlid}").setOptions(
{
actions:
[
{
cssClass: "refresh",
eventOnClick: refreshDashletEvent,
tooltip: "${msg("dashlet.refresh.tooltip")?js_string}"
},
{
cssClass: "help",
bubbleOnClick:
{
message: "${msg("dashlet.help")?js_string}"
},
tooltip: "${msg("dashlet.help.tooltip")?js_string}"
}
]
});
})();
You will need to add some styles for the class name specified, in the dashlet's CSS file my-tasks.css, such as the following
.my-tasks .titleBarActions .refresh
{
display: none;
background-image: url('refresh-icon.png');
}
The icon file (here is one you could re-use) must be in the same directory as the CSS file.
Lastly you'll need to define the label dashlet.refresh.tooltop used for the title bar action's tooltip. You can do this in the dashlet web script's .properties file.
For a similar example, check out the source of my Train Times dashlet, which features a refresh title bar action.
In some ways it's actually easier to define your own dashlets than it is to extend the Alfresco-supplied ones, but if you have the option of using 4.2.x, the new method allows you to extend the existing components without duplicating any code, which obviously makes upgrades much easier.

Resources