I have a couple of functions that use jQuery. And I'm having trouble making sense of the proper way to test them with jQuery-Chai in Mocha+Chai.
I see the list of assertions in the jQuery-Chai plugin. However, I don't understand where we get the DOM data to run those assertions?
Ideally I want to insert a line of html. Run the function on it. And use the jQuery-Chai assertion to validate.
Can someone help clear up where I would include the fixture to test these functions?
Thanks in advance.
Using: Testem with Mocha+Chai.
As you noted, chai-jquery only provides the assertions you can use against DOM elements. You'll need to use a different library to actually populate the DOM. Since you already need jQuery included for chai-jquery to work, the simplest solution may be to use jQuery's append() function to add child elements to the DOM, then remove them at the end of the test using jQuery's remove() function.
Alternatively, if you want to abstract away the DOM manipulation a bit, you could try pulling in a fixtures library. My favorite for this purpose is js-fixtures. You can still easily insert a single line of html using the set() function if that's all you need:
fixtures.set('<div>Your html here</div>');
If your test html becomes more complex though, you can extract it out into a sample html file and load the entirety of it into the DOM with the load() function:
fixtures.load('yourTestPage.html');
Finally, when your test is finished, you can easily clean your fixture using fixtures.cleanUp().
Related
Tailwind offers a feature where you can give an input element the peer class and then, in a sibling element use the peer-invalid: pseudoclass to apply conditional stylings. This is commonly used to provide helper text when a form field is not valid.
I don't see how this can be tested in JS-DOM though, as JS-DOM doesn't have access to the actual CSS when it is just rendering components in unit tests.
The information I have seen about getting JS-DOM to use CSS at all is kinda sketchy, so I was wondering if it's even worth trying to get it to evaluate a bunch of tailwind classes in a NextJS/Jest/RTL project. I'm using Tailwind 3 so it's not even like I have a big file full of generated classes I could try and pass to JS-DOM :/
So can it be done? (Note the hard fact please mods!!!)
(And, somewhat more subjectively, should it be done? Or is there a better way to approach this?)
I have a controller method that fetches data to render(fetched data) a HTML view of the same. I wanted to write a test to ensure the jpa model is queried correctly. However I am not finding a way to intercept what is being passed into render().
Can someone please let me know if there is a way to get what is passed into render from a test case. If not should I move this code/line into a different class that I can test easily.
Thanks
I know it's not exactly what you want but you could just write some selenium tests that will confirm whether the controller is rendering the correct data in the template. (see: http://www.playframework.org/documentation/1.2.4/guide10#selenium)
Also writing a Functional Test may help (see: http://www.playframework.org/documentation/1.2.4/guide10#controller)
Could you see if the Play Response object i.e. the out contains your expected value?
I know that in django integration, it is easy to test if a page would load successfully by making sure status code is 200. However, the project I am working on have pages that might partially load (certain sections of the page will silently fail to load). What is the best way to catch this situation? Is there a way to insert such error into the http response?
I know I can potentially do regex on the text on the page to check for things that might not load or I can probably check that name of certain css class exist. But that does not seem to be too robust an approach.
This will greatly depend on your implementation details, but there are two suitable approaches to testing templates that may help you:
If the partial page loading can be tested/triggered by using nothing more than template syntax, create test templates that conditionally print some text you can match against in the response, such as WORKED or FOO.
If it's something that largely depends upon the context the template receives, then one-off test views, which you define alongside your test case and call directly by passing in a mocked request, work as well. In this case, you'll likely rely on the test view to raise exceptions if the page rendering won't proceed as expected, otherwise everything went well.
Alternatively, you can even mix the two. In this case, you'll rely on the view to generate a HTTP response which you'll then check for some test text.
If that doesn't work, you can resort to overriding the templates. The general problem is that you can't rely on matching against text because it's global. The template can change and potentially cause your tests to misfire. What you can then do is have specific test settings that add additional directories for template discovery where you can provide different template implementations which contain text that does not change which would be suitable and safe for matching against in the test. The difficulty with this approach is that it does not neatly document itself, as opposed to the previous two approaches.
I'm trying to use the khtml library, basically just the DOM html implementation from there, but I even failed to create a basic HTMLDocument from a file using load(), and when I tried to create a HTMLDOcument by mutating it via appendChild I get DOMException with errorcode == 8 (NOT FOUND).
Can anyone please point me to some sample code which uses khtml's dom model without obtaining the document from the GUI components?
Ok, I see what the problem was.
First, if you're using a local html file, your uri needs to be absolute when you call DOM::HTMLDocumemt::load(const DOM::DOMString&).
Secondly, you need to create a DOM document, but it's read-only by default after creation.
So, before you actually call load(), you need to make it editable via
DOM::Document::setDesignMode(bool designOn).
That fixes it.
If I may recommend, WebKit is far superior to khtml now, even konqueror will be using webkit by default next release.
Check QtWebkit.
I'm trying out ASP.NET MVC Framework and would like to create an ajax helper method. Basically this helper would act like ActionLink but without encoding its link text. It is rather trivial to write as an HtmlHelper, you simply have to write your own version of GenerateLinkInternal. This isn't working for AjaxHelpers though, as the ajax version of GenerateLink is indirectly calling ToJavascriptString (through GenerateAjaxScript) which is internal, thus cannot be called outside the MVC assembly. I sure can rewrite the whole thing, but it seems way overkill, is there a better way?
Ultimately, I'd like to make this helper act like BeginForm to make the link surround a block of HTML. I've not looked at it yet, but I assume that it uses ToJavascriptString too. I've searched the web and, looking through the MVC source code, I begin to wonder if I'm completely on the wrong track.
Thanks
Update: The more I look at this problem, the more I think that there's simply no solution. Whoever wrote the MVC Framework didn't think about helping people write their own helpers!
Update: I've ended up writing an helper that pretty much duplicate AjaxOptions functionality.
You could probably do this a lot easier by writing your own helper from scratch (i.e. don't make calls to any of the Html.ActionLink()/Ajax.ActionLink() methods) simply by using Url.Action() instead.
For example, it's pretty trivial to do this:
public static string NonEncodedUrl(this HtmlHelper helper,
string linkAction, string text)
{
// Get a new UrlHelper instance in the current context
var url = new UrlHelper(helper.ViewContext.RequestContext);
return String.Format("{1}", url.Action(linkAction), text);
}
You can of course extend this with overloads and extra parameters to suit your own needs.