Vue.js link redirection to external site - vue.js

I am new to Vue.js and I am trying to solve the following issue.
I have a component which look as follows:
<template>
<div class="capture-photo">
<input id="chooseFile"
type="file"
accept="image/*"
capture="environment"
#change="onImageCaptured($event.target.name,
$event.target.files)">
<div v-show="imgURL">
<img v-bind:src="imgURL" style="width:200px">
<button id="sendImage" v-on:click.prevent="post">Send Image</button>
<div id="extractedLink">
<a id="extractedLinkButton" v-bind:href="urlLink">{{ urlLink }}</a>
</div>
</div>
and I am trying to run a test that would check that the link is clicked and redirects to the correct page (the urlLink is defines in the data element of my component. The testing in done using nightwatch and the test code looks like this:
'Redirect the extracted url to the actual website': function test(browser) {
const devServer = browser.globals.devServerURL;
browser
.url(devServer)
.waitForElementVisible('#app', 5000)
.click('input[id="chooseFile"]')
.setValue('input[type="file"]', require('path').resolve('http://www.coolture.pt/wp-content/uploads/2017/10/nos-alive-18-3.jpg'))
.click("#sendImage")
.assert.elementPresent('#extractedLink', 'http://nosalive.com')
.assert.elementPresent("#extractedLinkButton")
.click("#extractedLinkButton")
.assert.urlEquals('http://nosalive.com')
.end();
},`
when running the test, the error message that I receive is the following:
TEST FAILURE: 1 assertions failed, 35 passed. (38.623s)
✖ capturePhoto
- Redirect the extracted url to the actual website (2.8s)
Testing if the URL equals "http://nosalive.com". - expected "http://nosalive.com" but got: "http://localhost:8081/#/"`
where http://nosalive.com, being the urlLink value.
Any help would be greatly appreciated.
Thank you
N

Related

passing props to bundled vuejs project

I created a bundled myproject.min.js file using rollup, now I am using this in other frameworks(aurelia and angular).
Now my concern is how to pass data as props to this vue bundle from other frameworks:
in script file:
Vue.use(window.VueMainComponent);
new Vue({}).$mount('#app');
in HTML file:
<div id="app">
<vue-main-component :data="somedata"></vue-main-component>
</div>
I am trying above approach, but obviously getting the error somedata is not defined.
Okay I have figured this out, I made use of Vue.prototype.
in script file:
Vue.prototype.$somedata = {};
Vue.use(window.VueMainComponent);
new Vue({}).$mount('#app');
in HTML file:
<div id="app">
<vue-main-component :data="$somedata"></vue-main-component>
</div>

anchor is not redirecting to display inside ng-view, rather reloading with new page

I wrote a simple angular application in a learning purpose. However the controllers are working in my system but not in plunker. But, that is not my concern. My concern is I am unable to see the linked pages inside ng-view. They are rather opening as a new page replacing the home page. Secondly, the expressions are not reflecting their values. Kindly help me out. I have uploaded the codes in plunker.
Link to Plunker
<div ng-controller="RamFirstCtrl">{{name}}</div>
<div ng-include="'navbar-top.html'"></div>
<div style="border:1px solid green; position:relative;" ng-view></div>
Noticed couple thing:
http to https, there is error in console, it might be the reason it doesn't work in plunker
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
you have to use the url define in your router:
ng-href="aboutUS.html" to ng-href="#!/aboutUS"
.when("/aboutUS", {
templateUrl : "aboutUS.html"
})
<div>
<a ng-href="#!/aboutUS">
AboutUs
</a>
</div>
Note:#! will be added to url by angular router by default

How to do Protractor Testing for ui-view or ng-if?

I am trying to use protractor testing for my website. When I run the test, Firefox displays "Welcome home soldier" which is the part from ng-view="admin" (correct view) in the screen. However the test results as failed.
index.html:
<div ui-view="!admin">
<h1> Please sign up </h1>
</div>
<div ui-view="admin">
<h1> Welcome home soldier </h1>
</div>
index_spec.js:
If I do this then the test fails:
expect($('[ui-view="admin"]').isDisplayed()).toBe(true);
If I do this then the test success:
expect($('[ui-view="admin"]').isDisplayed()).toBe(false);
I have tried to do isPresent(), but it gives me the same result.
If try this, do you get the good result ?
browser.wait(function () {
return $('[ui-view="admin"]').isDisplayed();
}, 5000);
expect($('[ui-view="admin"]').isDisplayed()).toBe(true);
Please check if your HTML or CSS doesn't have the elements as hidden - using display:none or display:block, under which the isDisplayed() method would return false. This is as defined by the code for isDisplayed() method here.
Also, you can checkelement.size()!=0 to check if it's displayed (it's not a full proof solution though)

"Unable to resolve constructor for: '"dojox.mobile.TextBox"'"

I am facing following issue while working with dojo inline template:
I am creating the template in a html page by defining the template in between the following tags(It has mvc also integrated)
`<script id="createNewItem" type="text/template">
<div>
<div data-dojo-type='dijit/TitlePane' data-dojo-props='open:false'>
<div class='accordionRev'>
<input type="number" name="qty" placeholder="Quantity (required)" data-dojo-type="dojox.mobile.TextBox" class='quantity' data-dojo-props="value: at('rel:','quantity'), class:at('rel:', 'quantityErr')" onchange="cntrl.createQuoteFields(true, this, '{{lineNumber}}');" onkeypress="cntrl.quantityHandler.call(this, '{{lineNumber}}')" onpaste="cntrl.pastehandler.call(this)" tabindex=0/>
</div>
</div>
</div>
</script>'
I will be using this template in another page like this
`<ul id="rfqTitlePane" class="hide"
data-dojo-type="dojox/mvc/WidgetList"
data-dojo-mixins="dojox/mvc/_InlineTemplateMixin"
data-dojo-props="children: at(cntrl.createQuoteList,'items').direction(at.from)"
data-mvc-child-type="dojox/mvc/Templated"
data-mvc-child-props="clickable: true, variableHeight: 'true',
indexAtStartup: this.indexAtStartup,
customTitle: at(this.target, 'title').direction(at.both), titlePaneDOM:at(this.target,'displayDetails').direction(at.from).transform({format:custom.helpers.RequestMarkup})">
<script type="dojox/mvc/InlineTemplate">
<li>
${titlePaneDOM}
</li>
</script>
</ul>`
I am getting "Unable to resolve constructor for: '"dojox.mobile.TextBox"'" error. I actually defined textbox before the template gets loaded. I am not sure where its going wrong
It appears that the question contains wrong markdown, so I'd recommend fixing that so that better answers can be provided. Meanwhile some things I can say are:
You may want to try importing dojox/mobile/TextBox module before running the template.
Recent releases of Dojo prefers AMD format in data-dojo-type e.g. data-dojo-typ="dojox/mobile/TextBox".
dojox/mvc/InlineTemplateMixin looks at <script type="dojox/mvc/InlineTemplate"> instead of <script type="text/template">.
Hope this helps.
Best, Akira

Google script HTML api can´t process file upload field

I am trying to create a simple web app in google scripts with the HTML api.
code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function processForm(formObject) {
var formBlob = formObject.myFile;
var driveFile = DriveApp.createFile(formBlob);
return driveFile.getUrl();
}
index.html
<script>
function updateUrl(url) {
var div = document.getElementById('output');
div.innerHTML = 'Got it!';
}
</script>
<form id="myForm">
<input name="myFile" type="file" />
<input type="button" value="Submit"
onclick="google.script.run
.withSuccessHandler(updateUrl)
.processForm(this.parentNode)" />
</form>
<div id="output"></div>
The form fails to submit. I´m using google chrome Versión 30.0.1599.101 m
This appears in the console: Uncaught NetworkError: Form submission failed.
Here is the app: https://script.google.com/d/1yrgM20n1ZI99bChN2qtQWgGck36OccLN3A16Gn7tCPvsJw0EcK_ql7C5/edit?usp=sharing
Maybe you should add encoding="multipart/form-data" attribute to form tag.
If not solved already – did you try changing the input type from "button" to "submit"? On top of that I'd also try giving it another value than "Submit" since that might interfere with the actual submit parameter.