phantomjs not showing form fields - ember.js

I am using following js script to phantomjs on ember site running locally:
//test_phantomjs.js
require('phantomjs-polyfill');
var page = require('webpage').create();
page.open('http://localhost:4200/', function(status) {
console.log("Status: " + status);
if(status === "success") {
page.render('example.png');
}
phantom.exit();
});
The command I run the test this script is as follow:
phantomjs --remote-debugger-port=9001 --remote-debugger-autorun=yes test_phantomjs.js
I am suppose to get login form, but instead I am not getting the form just an empty page.
however if change the url to development ember app, then I get the full page with form fields.
How can I fix it for locally running ember app so I can test this with poltergeist?

Related

PWA not working properly with Django using Service Workers

I developed a small prototype in django with one model: Profile, and 2 templates with 2 views (a list of profiles, and an edit profile page), with a form in forms.py. I want to test creating a PWA with Django and this is the additional things I did: 1) pip install django-progressive-web-app, 2) added 'pwa' to installed apps, 3) added a render view for the base.html that will be using the service worker!
def base(request):
return render(request,'app/base.html')
4) added it to the urls:
urlpatterns = [
path(r'', profiles, name="profiles"),
path('user/<pk>', profile, name="profile"),
path('', include('pwa.urls')),
]
5) added this to recognise the service worker:
PWA_SERVICE_WORKER_PATH = os.path.join(BASE_DIR, 'posts/static/js', 'serviceworker.js')
6) added the tags:
{% load pwa %}
<head>
...
{% progressive_web_app_meta %}
...
</head>
7) and added this to a serviceworker.js file, situated in the app/static/js:
var staticCacheName = 'djangopwa-v1';
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(staticCacheName).then(function(cache) {
return cache.addAll([
'/base_layout'
]);
})
);
});
self.addEventListener('fetch', function(event) {
var requestUrl = new URL(event.request.url);
if (requestUrl.origin === location.origin) {
if ((requestUrl.pathname === '/')) {
event.respondWith(caches.match('/base_layout'));
return;
}
}
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
What happened is that the service worker is running under Chrome developer tool, but in the django console it displays this error: Not Found: /base_layout, and the homepage is accessible through the Offline mode, but the other path (/user) isn't. And Google Chrome's console displays this error:
The FetchEvent for "http://localhost:8000/manifest.json" resulted in a network error response: the promise was rejected.
Promise.then (async)
(anonymous) # serviceworker.js:19
serviceworker.js:1 Uncaught (in promise) TypeError: Failed to fetch
Also, images are not being loaded.
What did I do wrong?
For the images, add the images url to the array passed to the cache.addAll method. Like so:
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(staticCacheName).then(function(cache) {
return cache.addAll([
'/base_layout',
'/static/img-1.png',
'/static/img-2.png',
]);
})
);
});
To ensure your css and js files load, also add their paths to the array.

Ionic 2: Loading screen does not get dismissed

I have an application made with Ionic 2, The work flow is like this
Case A . When user is using app for the first time
User Logs in (loading is shown)
When successfully logged in loading window is hidden and user is forwarded to Dashboard page.
In dashboard page items are loaded via ajax request.
Case B. When user is already logged in before
The first screen is Dashboard and items are loaded via ajax request.
Problem
In case A, when user logs in and forwarded to DashboardPage, the loading screen doesn't gets dismissed. Sometimes it gets dismissed but most of the time it doesnot? Is this an ionic bug or am I doing something wrong??
Here is my DashboardPage
//imports here
export class DashboardPage {
public loadingmsg: any;
public ajaxRequest: any;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
private webservice: WebService,
private loadingCtrl: LoadingController
)
{
this.loadDashboardContents();
}
loadDashboardContents(){
//other codes
this.loadingmsg = this.loadingCtrl.create({
content:"Loading contents, please wait..."
});
this.loadingmsg.present();
this.ajaxRequest = this.webservice.getDashboardContents(params).subscribe(data => {
this.loadingmsg.dismiss().then(()=>{
//other codes to save retrieved data to localstorage.
});
});
}
}
UPDATE
The login method from login page
loginUser(){
this.loading=this.loadingctrl.create({
content:"Logging in, please wait..."
});
this.loading.present();
this.ajaxRequest = this.webservice.loginUser(params).subscribe(data => {
this.loading.dismiss();
if(data.status =="ok"){
this.navctrl.push(DashboardPage).then(()=>{
const index = this.viewCtrl.index;
this.navctrl.remove(index);
});
}else{
//show error alert
}
}, err =>{
this.loading.dismiss();
});
}
My Ionic and cordova version information
Ionic Framework: 3.5.0
Ionic App Scripts: 1.3.9
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 6.10.3
OS Platform: Windows 10
Cordova Version: 6.5.0
I am currently using loading in my project and it works well in all case. To ensure loading will always dismiss you need to add some code:
1. duration, dismissOnPageChange
let loading = this.loadingCtrl.create({
content: "",
duration: 5000, //ms
dismissOnPageChange: true
})
2. dissmis when ajax call success or error:
.subscribe(success=>{
//some code
loading.dismiss();
},error=>{
//some code
loading.dismiss();
})
It may be due to the this reference inside your subscribe method. I would try declaring loadingmsg locally and removing this.
loadDashboardContents(){
//other codes
let loadingmsg = this.loadingCtrl.create({
content:"Loading contents, please wait..."
});
loadingmsg.present();
this.ajaxRequest = this.webservice.getDashboardContents(params).subscribe(data => {
loadingmsg.dismiss().then(()=>{
//other codes to save retrieved data to localstorage.
});
});
}

auto-refresh (gulp+livereload+jasmine)

I'm trying to creat a gulp task to run a test and automatically refresh when changes occur in any .js test file.
This is the code:
gulp.task('watch-test', function() {
// start live-reload server
plugins.livereload.listen({ start: true});
var filesForTest = [ 'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
'src/app/blocks/testController.module.js',
'src/app/blocks/testController.js',
'src/test/spec/sillyControllerSpec.js']
return gulp.src(filesForTest)
.pipe(watch(filesForTest))
.pipe(plugins.jasmineBrowser.specRunner())
.pipe(plugins.jasmineBrowser.server({port: 8888}))
.pipe(plugins.livereload());
});
It watches the files, but I have to refresh manually the page at the browser.
Any idea what can I do?
I found this package that incluide jasmine + livereload
https://www.npmjs.com/package/gulp-jasmine-livereload-task

how to setup csrf cookie name and header from protractor to make post request to django server to setup fixture to test angular app?

I need to make a post request to django server to insert fixture for my protractor test. To make post request to django, i need to change xsrf setting. i know how to do this in my app :
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
}]);
I don't know how to access $httpProvider within protractor.
my_app_module is where i setup xsrf information. I simply include it in the array as below so that my_api_service can have the desired setup.
// in my test
it('something',function(){
//insert fixture
browser.executeAsyncScript(function(data,callback) {
var api = angular.injector(['ng','my_api_module','my_app_module']).get('my_api_service');
api.insert_new(data).then( function(data){ callback(data);} )
},my_fixture)
.then(function (output) { console.log(output); });
//continue my test ...
})

phantomjs missing cookies, compared with firebug?

i am trying to get cookies using phantomjs, but it appears to be incomplete?
at command line:
phantomjs --cookies-file=cookies.txt --debug=true test.js
test.js:
var page = require('webpage').create();
page.open('http://example.com', function (status) {
page.evaluate(function() {
document.cookie;
});
page.cookies;
phantom.cookies;
});
i compare cookies.txt with firebug cookies and LiveHttpHeaders, and see there are some cookies missing in the phantomjs saved file?