How does one properly test a javascript widget?

Question

So, I've written a little javascript widget. All a user has to do is paste a script tag into the page, and right below it I insert a div with all of the content the user has requested.

Many sites do similar things, such as Twitter, Delicious and even StackOverflow.

What I'm curious about is how to test this widget to make sure that it will work properly on everyone's webpage. I'm not using an iframe, so I really want to make sure that this code will work when inserted most places. I know it looks the same in all browsers.

Suggestions? Or should I just build one hundred web pages and insert my script tag and see if it works? I would hope there is an easier way than that.

Answer 1

By keeping all your Javascripts under a namespace (global object) with a very unique name, you should be pretty much OK. Also, you can simply use an anonymous function if you just want to print out something.

Similar question: http://stackoverflow.com/questions/628306/how-to-avoid-name-clashes-in-javascript-widgets

Answer 2

At very basic you should make sure your widget works for following test-cases. I am sure then it will work on all web-pages -

• http/https: There should not be any warning for HTTPS pages for unencrypted content.
• <script> / <no-script>: What if JavaScript is disabled? Is your widget still visible?
• What happens when third-party cookies are disabled? Does your widget still work?
• Layout-box restrictions: When parent div element's size is less than your widget. Does your widget overflow the given size and destroys owners page?

Answer 3

Once you have confirmed that your javascript works cross-browser in a controlled environment, here are some things that might cause problems when used on an actual website:

CSS

• You're using a CSS class that is already being used (for a different purpose) by the target website
• You're using positioning that might interfere with the site's CSS
• The elements you are using are being styled by the website's CSS (you might want to use some sort of "reset" CSS that applies only to your widget)

HTML

• You're creating elements with the same id attribute as an element that already exists on the website
• You're specifying a name attribute that is already being used (while name can be used for multiple elements, you may not be expecting that)

Javascript

• What is the expected behaviour without Javascript enabled? If your script creates everything, is it acceptable for nothing to be present without JS?