I have an angular app (using AngularAMD/RequireJS) and I'm converting the design to use angular-material. I have a toolbar directive that has md-icon using md-svg-src.
Trouble running the toolbar-directive_test.js file.
At first it kept complaining "Unresolve GET request images/icon.svg". I resolved in the test setup using:
$httpBackend.whenGET(/\.svg$/).respond('');
Now if I run that test file using fdescribe(...) all the tests pass.
But if I run all my app tests (without fdescribe on that toolbar test file), they are somehow failing because of the md-icons. The error I get, which appears on another test file:
TypeError: Cannot read property 'element' of undefined
The stack-trace does not give any guidance on what is causing it. Only mentions angular-mocks.js, and then exits around the any random assertion on this test file where the error is showing. And if I xdescribe this file which is showing the element of undefined error, the next test file is failing with this error instead.
If I use xdescribe on toolbar-directive_test.js file (the one which has the md-icon), all the tests pass.
And if I run all tests including the toolbar-directive_test.js file, but I remove all the md-icon instances from its template, again all the tests are passing.
I have tried including ngMaterial-mocks package in my tests, and that doesn't do anything. But in general, I'm not using that package (but I am using ngMocks).
Any suggestions on how to debug this?
As #Widget suggested, this works:
$httpBackend.whenGET(/\.svg$/).respond('<svg></svg>');
Where this didn't work:
$httpBackend.whenGET(/\.svg$/).respond('');
Related
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.
I am migrating an application from Angular1 to Angular2, in which I used the svg.js library to draw an SVG. Some elements of the SVG contained "ng-click" directives, that I made the SVG library print to the final SVG.
That worked alright in Angular1, however, now the directive is called "(click)" and everything breaks. I traced the SVG sources and found that the following call
this.node.setAttribute(attr, value.toString())
results in the following error message:
VM22161:1 Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '(click)' is not a valid attribute name.(…)
Any ideas to solve that problem? Patching the SVG source would be ok for me, if there's no other way.
A valid and quick workaround is to use the binding syntax of Angular2, that allows to use "on-click" instead of "(click)".
Has anybody had any luck with using blueimp jquery-file-upload with browserify? I have the following requires in my javascript ...
require("jquery");
require("blueimp-file-upload/js/jquery.iframe-transport.js");
require("blueimp-file-upload");
require("blueimp-file-upload/js/jquery.fileupload-angular.js");
and I get the following error when I use the resulting browserified code...
TypeError: $element.fileupload is not a function
... at the line ...
$element.fileupload(angular.extend(
... inside of jquery.fileupload-angular.js. Without browserify this was working fine. I can't figure out where the fileupload() function is being added to the prototype of the $element.
By request I'm posting what I did here to get around the issue. So technically speaking not an answer but a "work around". As I indicated in my comment above I used gulp-concat along with gulp-uglify to do the minimizing "manually". I say manually because I have to list all of the source files here rather than relying on the requires.
gulp.src([src1, src2, ..., srcN])
.pipe(concat('bundle.js'))
.pipe(uglify())
.pipe(gulp.dest(outputdir));
I'm trying to use the AngularJS directive ui-tinymce with tinyMce 4.0.25 and IE10, and am unable to get it to work at all.
My html looks like this:
<textarea ui-tinymce ng-model="fubar"></textarea>
In my controller, I have:
$scope.fubar = "this is a <b>test</b>";
It all goes badly at these two lines in the tinymce initialization code itself.
Theme = ThemeManager.get(settings.theme);
self.theme = new Theme(self, ThemeManager.urls[settings.theme]);
The first line sets Theme to undefined and the last line aborts with the message "Object doesn't support this action". The value of ThemeManager.urls[settings.theme] is "http://localhost:57683/Scripts/tinymce/themes/modern", which seems right.
I can no longer find it, but I'd previously found a post where this issue was due to this code being executed before some other part of tinyMCE had been loaded. The solution there was to use a certain tinyMCE option that forced loading in a certain way, however that option has been removed in tinyMCE 4.x. Even more frustrating is that I had tinyMCE working for days with my own directive when suddenly this occurred. I've simplified this to just using ui-tinymce (with the same result) to rule out any of my code as the culprit.
Mea culpa! I'd switched to using tinymce.js instead of tinymce.min.js and didn't realize that the min code expects the theme to be modern/theme.min.js (which I had) but the unminified code expects the theme to be modern/theme.js.
I'm having an issue where I run my jasmine unit tests in Karma, and one of my unit tests that depends on an external template (AngularJS directive) doesn't pass. When I go into DEBUG mode in the browser and I view the console however, it shows that this unit test is passing and I can confirm this when I step through the unit test in the browser debugger.
I have other unit tests that also depend on external templates that are passing in Karma as expected, but just this particular test is failing in Karma, but passing the in browser console.
Does anyone have any ideas what might be causing this behavior?
EDIT:
Here's what Karma shows:
TypeError: Unable to get value of the property 'then': object is null or undefined
My project handles templates a little differently than AngularJS typically handles them. We have a templateService we created where it retrieves the correct template based on the templateUrl of a directive which looks like this
templateUrl: "navigation-template"
So I've set up Karma to pull the templates and store them in the templateCache. Then I extract the templates with the key Karma used (the file path) and re-insert them into the templateCache with the templateUrl the directive is expecting. Here's how I do it
var template = '<div>' + templateCache.get(templateFilePath) + '</div>'; }
// template files contain multiple templates so this filters out the one I want
template = $("[TemplateId='" + directiveTemplateUrl + "']", template).html();
templateCache.put(directiveTemplateUrl, template);
For all of the other tests, this works fine, but one in particular is producing the error above. What's more interesting is that if I add console logs like this
var template = '<div>' + templateCache.get(templateFilePath) + '</div>';
if (template.indexOf("undefined") > -1) { throw new Error("Template not in cache."); }
template = $("[TemplateId='" + directiveTemplateUrl + "']", template).html();
if (!template) { throw new Error("Template not found."); }
templateCache.put(directiveTemplateUrl, template);
It logs out that the template wasn't found.
Error: Template not in cache.,Error: Unexpected request: GET navigation-template No more request expected
If I DEBUG in the browser (the DEBUG button when Karma loads the browser), I can confirm the template is there and in the browser console (not the command line where Karma is running, but the F12 developer tools in the browser) it logs out that the test was successful like this
LOG: SUCCESS ButtonsDirectives NavigationDirective Should render a loading message
Here's what I know:
There are no significant differences between the failing unit test and the passing ones. It is unrelated to the order in which the unit tests run (this one just happens to run first).
I've figured it out. It turns out the template of the failing unit test contained the following:
<a href="javascript:void(0)" ... > ... </a>
While the unit tests themselves were similar, the failing test is the only template with this particular tag in it.
I was running my unit tests through Karma using IE 9 and javascript:void(0) turns out to have problems in IE 9 (I think it's the browser, not sure if this would cause an issue in other browsers. I cannot confirm with my current setup). Removing javascript:void(0) from the anchor tag resolves my issue.
EDIT:
Confirmed, it is a bug with IE 9. It works fine in Chrome.