how to run impress inside backbone? - backbone.js

I have read some code of strut.io but still confusing.
Here is the problem I got, I want to load impress().init();
when
<script type="text/template" id="impress-demo-template">
<div id="impress" onReady=" impress().init();">
</div>
</script>`
this is ready. And i got Uncaught TypeError: Cannot read property 'classList' of null
I know this function needs to load after all children in div#impress.
So I want to know how to deal with it. Should I add that function in my backbone view?
https://github.com/lostpupil/final_project_impressjs/
here is my github repo for that code, so I store data in Avos Cloud and this funciton is tested by test.html and demo.js.

well it seems nobody knows this question, and finally i wrote that program
the program is now host on http://breakingbad.vipsinaapp.com/ and the source code is host on github
feel free to make feed back, help me to improve, I am new to backbonejs, so I will thank you for kindness help.

Related

codeceptjs react testing - Clickable element was not found by text|CSS|XPath

I have a project made with react and rest api(php+mysql).I have to put it through a codeceptjs test.The app is working properly with countless of manual testing, and as far as I can see, the codeceptjs test is working too, but it gives the following error:
Error: Clickable element "ADD" was not found by text|CSS|XPath
at new ElementNotFound (node_modules/codeceptjs/lib/helper/errors/ElementNotFound.js:14:11)
at assertElementExists (node_modules/codeceptjs/lib/helper/WebDriver.js:2835:11)
at WebDriver.click (node_modules/codeceptjs/lib/helper/WebDriver.js:917:7)
at processTicksAndRejections (internal/process/task_queues.js:97:5)I }) => {
I.amOnPage('/');
I.click('ADD');
I.seeElement('#product_form');
I.fillField('#sku', 'SKUTest000');
I.fillField('#name', 'NameTest000');
I.fillField('#price', '25');
I.waitForElement('#productType');
I.selectOption('#productType','DVD');
I.waitForElement('#size');
I.fillField('#size','200');
I.click('Save');
My add element looks like this:
<Link title="ADD" to="/add-product">ADD</Link>
Can someone please help me out why is this error appearing and how can I solve it? Thanks in advance!
Update:
I did a couple more tests, and I noticed that sometimes it gives back less/different errors depending on the test's time. For example:
http://165.227.98.170/open?testName=ed
http://165.227.98.170/open?testName=ah
http://165.227.98.170/open?testName=bc
My guess is that is has to do with how react loads in the html elements and manages the rest api calls. How/what should I change in the app to accomodate the test script?
Seems like the problem was I put the whole home page's load after the rest api call by accident.

trying to use angular-timer, am getting this error "TypeError: moment.locale is not a function"

I have been trying to use the angular-timer, in my angularjs app, but I keep getting this error "TypeError: moment.locale is not a function".
I added my scripts like so. please can someone help me out?
<script src="assets/_plugins/classroom/angular-timer/angular-timer.min.js"></script>
<script src="assets/_plugins/classroom/moment/min/moment.min.js"></script>
<script src="assets/_plugins/classroom/angular-timer/humanize-duration.js"></script>
<script src="assets/_plugins/classroom/moment/min/locales.min.js"></script>
<script src="assets/_plugins/classroom/moment/min/moment-with-locales.js"></script>
Looks like your order might be wrong. I would guess that angular-timer depends on moment, locals and moment-with-locals, so it should be last in the loading order.
Update:
Alternatively, as plugin implementation can be problematic. I created a working demo of a custom timer/countdown for a user's question here, perhaps it can be adapted for your solution or at least lead you in the right direction.
You set an end time and supply a function to run when that end time is met.

Non-angular page opened with click - angular not defined using ignoreSynchronization or waiting for Angular without

After a lot of research, and tinkering, I can't seem to actually get my Protractor test to do anything else other than have an Angular related error, even though I am using browser to avoid Angular being detected at all.
The test involves an Angular app, opening a dropdown in it, and clicking on the link for the console; the console opens a non-Angular admin page in a separate window.
So based on the many informative SO posts I found, I first used this...
browser.driver.getAllWindowHandles().then(function(handles) {
browser.driver.switchTo().window(handles[1]).then(function() {
//expect for new window here
});
});
Which appeared to work, as I could get to the window through repl pretty easily.
The issue is when either of the following were added...
browser.driver.getAllWindowHandles().then(function(handles) {
browser.driver.switchTo().window(handles[1]).then(function() {
expect(browser.getLocationAbsUrl()).toContain('/console/login.jsp');
expect(browser.driver.findElement(By.css('th.login')).getText()).toEqual('Login');
});
});
One expect check the URL and the other checks for the header element on the page, which is a table header. When I run this, I get the following:
Error while waiting for Protractor to sync with the page: "angular could not be found on the window"
When I decide to use browser.ignoreSynchronization = true, both in the function, or in a beforeEach, with or without a following afterEach setting it to false, I get the following:
JavascriptError: angular is not defined
I can't seem to get any "useful" errors to help me debug it, and trying it in repl does not help, as I get the same issue.
To be comprehensive, trying my URL expect without getting the second window will give me the root, and the other will fail.
Just doing one or the other will cause the same problem.
Changing to regular syntax (element(by.css...)) does not change things.
So much for my first question...
It appears that my use of browser.getLocationAbsUrl() is meant to be used for an Angular page, and was causing my issue...
Essentially, even though I believed I was using pure Webdriver calls, that call still required Angular on the page to work...
As stated in another post, the use of browser.driver.getCurrentUrl() is a non-Angular call using Webdriver, and fixed the problem. Thus, the final code is the following...
browser.sleep(1000); //to wait for the page to load
browser.driver.getAllWindowHandles().then(function(handles) {
browser.driver.switchTo().window(handles[1]).then(function() {
expect(browser.driver.getCurrentUrl()).toContain('/console/login.jsp');
expect(browser.driver.findElement(By.css('th.login')).getText()).toEqual('Login');
});
});
This works without setting ignoreSynchronization, BTW.
I realized it would probably be something relatively simple to fix it, just didn't expect I'd get it that quickly (I intended on submitting the question last night, but posted it this morning instead).
In any case, I hope this will at least be a good reference for anyone else facing the same issue.
Seems like getLocationAbsUrl is angular abs url.
Try using the native driver getCurrentUrl instead.
-- expect(browser.getLocationAbsUrl()).toContain('/console/login.jsp');
++ expect(browser.driver.getCurrentUrl() ...

AngularJS enter animation not playing on first run

I'm having trouble running enter animation first time the page is loaded. I think this is an old problem having to do with this issue.
You can see my problem here.
The strange thing is that when I put the templates in seperate files (and not as text/ng-template) the animation works flawlessly as you can see here.
Since my application will work on file URI scheme I have to use text/ng-template.
Any workarounds? I couldn't find one that fits.
I was able to fix the issue with the dirty hack down this page.
Added ng-if to my ng-view's container
<div ng-if="true" ng-view></div>
along with:
$rootElement.data("$$ngAnimateState").running = false;
in my first controller.
And here is the working demo.
Thank you.

Backbone.js model not defined in view?

I've decided that I am going to try and learn backbone.js by making a web app. This is the first time I have done anything extensive in javascript, so the answer to my problem may be right in front of my face.
I have the web app on github, along with a running version that doesn't work. The javascript console just says that something is undefined when I don't think it should be. Here's the error that chrome gives for line 30 of app.js:
Uncaught TypeError: Cannot read property 'el' of undefined
I've sort of been referencing the backbone-fundamentals example modular to-do app, and it doesn't seem to have any issues with a similar thing.
If anyone could point out what I am doing wrong, I would be most appreciative!
Thanks in advance!
Your Machine view render method was missing return this and by default all methods return undefined - that's why chaining didn't work
Edit: and a small tip:
jQuery, Underscore and Backbone register globally - and thanks to that you don't have to define them as dependencies every time - it's enough if you require them in your main script once and after that you can access them from the global scope as you normally would
In my case i was returning this without the return keyword. As i was using javascript and not coffeescript it failed on me. So, if you are using javascript use return this; instead of just this in the last line of the render() function.
I also had a problem when using this.collection.on('reset', this.render(), this). I instead had to use this.collection.on('reset', this.render.bind(this));

Resources