I am trying to automate form builder drag and drop feature but getting no success in it.
const dataTransfer = new DataTransfer();
cy.get(`div [ref="sidebar-container"] span[data-type="textfield"]`).trigger('formio.dragstart', {
dataTransfer
})
cy.get(`div[ref="form"]`).trigger('formio.drop',
{ clientX: 200, clientY: 500 },
{ force: true }
);
Related
Note: when I upload small size image then the data refreshes and if the image is bigger like 1 mb then it doesn't refresh the data.
I have a add new product modal and when I open it as below:
<NewProduct v-if="showNewProduct" #close-modal="showNewProductModal" #success="showSuccessAlert"/>
and when I add the product and the modal is closed by emitting as below:
Products.addProduct(form)
.then(
this.$emit("closeModal"),
this.$emit("success"),
)
Then in the parent component the data is not refreshed and show the old data and if I refresh the page then it show the new data.
I get data as below in parent component:
data: function () {
return {
showNewProduct: false,
productList: [],
success: false,
};
},
mounted() {
this.getProductList();
},
methods:{
showSuccessAlert() {
this.getProductList(),
this.success = !this.success,
},
showNewProductModal() {
this.showNewProduct = !this.showNewProduct;
},
getProductList() {
User.getProductList()
.then((response) => {
this.productList = response.data;
});
},
}
My goal is that when the modal is closed then the productList should be updated as well with the newly added data without page refresh.
Add product API.
addProduct(form) {
return Api().post("/addProduct", form);
},
It is something related to asynchronous processing. Please, make sure you start fetching record only after the upload is completed.
Products.addProduct(form).then(() => { this.$emit("closeModal")} )
showNewProductModal() { this.getProductList()}
Products.addProduct(form).then(({data: product}) => {
//pass data to close model event
this.$emit("closeModal", product),
this.$emit("success"),
}
showNewProductModal(product) {
this.productList.push(product);
this.showNewProduct = !this.showNewProduct;
}
i want to save result in nativescript, but show error JS: [Error: Network error: Converting circular structure to JSON]
in list.vue i push the id from each button +/-. here is the code
confirm() {
// The result property is true if the dialog is closed with the OK button, false if closed with the Cancel button or undefined if closed with a neutral button.
this.duhmboh=[]
this.pageData.forEach((element,index) => {
if(element.qty>0){
this.duhmboh.push({
id:element.id,
guest: this.guests[index],
qty: element
})
}
});
this.duhmboh.forEach(element => {
console.log("DUMBOH",element)
});
this.$showModal(modal, {
props: {
tempData: this.duhmboh
},
fullscreen: false,
animated: false,
stretched: false,
dimAmount: 0.2,
dismissEnabled: false
})
},
and the modal.vue is like this
save(qty) {
if (this.is_saving) return
this.is_saving = true
var vm = this
this.$apollo.query({
query: gqlUseVoucher,
variables: {
id: this.pageData.id,
qty_used: qty
},
fetchPolicy: 'no-cache'
}).then((resp) => {
if (resp.room.AuthorizeVoucherUsingID) {
vm.is_saving = false
vm.$modal.close()
vm.$store.commit('setSuccess', 'Voucher breakfast berhasil divalidasi')
} else {
vm.is_saving = false
errorHandler(vm, null, 'Voucher breakfast tidak dapat digunakan')
}
}).catch((error) => {
vm.is_saving = false
console.log(error)
errorHandler(vm, error)
})
},
and i still cant click the button ssave. what should i do?
I have created Dialog in AddButtonEntryPoint.js file and I want to access that variable in Form.js file to hide the dialog after click on Submit button So, How can i call.
Here is the code which i have written
AddButtonEntryPoint.js
var w = new Form({});
var d = new Dialog({
id: 'FormDialog',
title: "Bridge Form",
style: "width: 270px; height: 270px;",
content: w,
onHide: function() {
// To prevent destroying the dialog before the animation ends
setTimeout(lang.hitch(this, 'destroyRecursive'), 0);
}
});
d.show();
};
Form.js
return declare( "mypackage.MyForm", Form, {
repotextbox: new TextBox({
name: "text",
placeHolder: "Enter text here."
} , dojo.doc.createElement('input')),
DFMtextbox: new TextBox({
name: "text",
placeHolder: "Enter text here."
} , dojo.doc.createElement('input')),
submitButton: new Button({
type: "submit",
label: "Submit"
}),
constructor: function(args) {
declare.safeMixin(this, args);
},
onSubmit: function() {
var repositoryID = this.repotextbox.get('value');
xhr("https://samples.openweathermap.org/data/2.5/weather?q={repositoryID}",{
// The URL of the request
method: "GET",
handleAs: "json",
}).then(
function(data){
alert(data.success + " " + JSON.stringify(data));
},
function(err){
alert( "Your message could not be sent, please try again.");
});
},
});
}
);
In form.js file, Under onSubmit function I have to hide the dialog created in AddButtonEntryPoint.js when the user click on Submit button.
In Form.js you have to add a property that will reference the Dialog instance
return declare( "mypackage.MyForm", Form, {
myDialog: null,
// etc
}
Then in AddButtonEntryPoint you can either set this property when you initialize w if you put it after:
var d = new Dialog({
id: 'FormDialog',
title: "Bridge Form",
style: "width: 270px; height: 270px;",
content: w,
onHide: function() {
// To prevent destroying the dialog before the animation ends
setTimeout(lang.hitch(this, 'destroyRecursive'), 0);
}
});
var w = new Form({
myDialog: d
});
or you can keep it as it is and call w.set("myDialog", d); later - but in this case any code in postCreate that requires the dialog will not run.
Hope this helps!
Settings can be added to Uploadcare as follows:
var myDialog = uploadcare.openDialog(null, {
imagesOnly: true,
multiple: true,
multipleMin: 1
multipleMax: 7
});
Now how is minDimensions being set? The documentation shows minDimensions(800x600) but that notation doesn't work. The below attempt does not work:
var myDialog = uploadcare.openDialog(null, {
imagesOnly: true,
multiple: true,
multipleMin: 1
multipleMax: 7,
minDimensions: '800,600'
});
Following doesn't work either:
var myDialog = uploadcare.openDialog(null, {
imagesOnly: true,
multiple: true,
multipleMin: 1
multipleMax: 7,
minWidth: 800,
minHeight: 600
});
Additionally, it's unclear what happens if an uploaded image dimenions is less than these settings. Does the Widget show an error?
minDimensions, as well as minWidth and minHeight, are not widget options. The link refers to file validation docs. File validation is a function that invokes before the file is completely uploaded, and have access to the fileInfo object so that you can check file parameters (size, name, image dimensions, etc.) and abort uploading if some parameter doesn't match your requirements.
To set an image dimension validator, you'd need to define a validation function first
function minDimensions(width, height) {
return function(fileInfo) {
var imageInfo = fileInfo.originalImageInfo;
if (imageInfo !== null) {
if (imageInfo.width < width || imageInfo.height < height) {
throw new Error('dimensions');
}
}
}
}
Then, when you open a dialog, you add the validation function to the validators array in the dialog settings
var myDialog = uploadcare.openDialog(null, {
imagesOnly: true,
multiple: true,
multipleMin: 1,
multipleMax: 7,
validators: [minDimensions(800, 600)]
});
If a file doesn't pass the validation, the widget will show the default error message - "Can't upload", but you can customize the error message using the UPLOADCARE_LOCALE_TRANSLATIONS option
UPLOADCARE_LOCALE_TRANSLATIONS = {
// messages for widget
errors: {
'dimensions': 'The image has to be 800x600px or larger.'
},
// messages for dialog’s error page
dialog: { tabs: { preview: { error: {
'dimensions': {
title: 'Error.',
text: 'The image is too small. Try to upload another one.',
back: 'Back'
}
} } } }
};
You need to define your own validator functions and add them to widget/dialog.
So, write minDimensions function with signature and logic of your choice.
The docs have example implementation for imagesOnly and maxDimenstions validation functions. You can use them for inspiration.
When your validation function rejects a file for some reason, you should throw Error, e.g. throw new Error('dimensions');
The 'dimensions' string will be used to look for a user friendly message in your custom localisation map:
UPLOADCARE_LOCALE_TRANSLATIONS = {
errors: {
'dimensions': 'File dimension check failed',
...
},
...
}
You can find more elaborate examples here.
I have an infinite scroll directive that I am trying to unit test. Currently I have this:
describe('Infinite Scroll', function(){
var $compile, $scope;
beforeEach(module('nag.infiniteScroll'));
beforeEach(inject(function($injector) {
$scope = $injector.get('$rootScope');
$compile = $injector.get('$compile');
$scope.scrolled = false;
$scope.test = function() {
$scope.scrolled = true;
};
}));
var setupElement = function(scope) {
var element = $compile('<div><div id="test" style="height:50px; width: 50px;overflow: auto" nag-infinite-scroll="test()">a<br><br><br>c<br><br><br><br>e<br><br>v<br><br>f<br><br>g<br><br>m<br>f<br><br>y<br></div></div>')(scope);
scope.$digest();
return element;
}
it('should have proper initial structure', function() {
var element = setupElement($scope);
element.find('#test').scrollTop(10000);
expect($scope.scrolled).toBe(true);
});
});
However the .scrollTop(10000); does not seem to trigger anything.
Is there anyway to unit test this type of functionality (I am able to unit test other directives with similar interactions like clicking on elements)?
In case it is relative, this is the infinite scroll code:
angular.module('nag.infiniteScroll', [])
.directive('nagInfiniteScroll', [
function() {
return function(scope, elm, attr) {
var raw = elm[0];
elm.bind('scroll', function() {
if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
scope.$apply(attr.nagInfiniteScroll);
}
});
};
}
]);
You have to trigger the scroll event on your element manually in your test:
element.find('#test').scrollTop(10000);
element.find('#test').triggerHandler('scroll');
Had the same issue recently. For the scrolling to work, you will need to set some dimensions on the body tag, so the window can be scrolled.
var scrollEvent = document.createEvent( 'CustomEvent' ); // MUST be 'CustomEvent'
scrollEvent.initCustomEvent( 'scroll', false, false, null );
var expectedLeft = 123;
var expectedTop = 456;
mockWindow.document.body.style.minHeight = '9000px';
mockWindow.document.body.style.minWidth = '9000px';
mockWindow.scrollTo( expectedLeft, expectedTop );
mockWindow.dispatchEvent( scrollEvent );
Unfortunately this does not work in PhantomJS.
If you are running your tests on Travis CI, you can also use Chrome by adding the following to your .travis.yml
before_install:
- export CHROME_BIN=chromium-browser
- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start
And a custom Chrome launcher in your karma config:
module.exports = function(config) {
var configuration = {
// ... your default content
// This is the new content for your travis-ci configuration test
// Custom launcher for Travis-CI
customLaunchers: {
Chrome_travis_ci: {
base: 'Chrome',
flags: ['--no-sandbox']
}
},
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: true
};
if(process.env.TRAVIS){
configuration.browsers = ['Chrome_travis_ci'];
}
config.set( configuration );
};