Code Monkey home page Code Monkey logo

Comments (13)

ankiiisharma avatar ankiiisharma commented on June 12, 2024

hey @rugk , can you please elaborate this issue more and can you please assign this to me?

from privatebin.

rugk avatar rugk commented on June 12, 2024

What elaboration do you need?

Here there are more information on how to run the unit tests:

from privatebin.

ankiiisharma avatar ankiiisharma commented on June 12, 2024

hey @rugk @elrido ,

These are the potential changes we can make to address the JavaScript test coverage issue :

  • Identify Untested Areas: Use coverage reports to pinpoint and target untested parts, like the bootstrap(3) specific event handler.
  • Add Unit Tests: Write new tests for uncovered functionalities, ensuring coverage of edge cases.
  • Refactor to ES6: Modernize JavaScript code to ES6+ standards for easier testing and maintenance.

Should I proceed with this? or do you guys have anything else in your mind.

from privatebin.

elrido avatar elrido commented on June 12, 2024

If you can stomach it, personally I would prefer if you could focus on adding more test coverage. Would it be an option for you to do a first pass looking over for completely non-covered functions and of those the ones that either just read things from the DOM or that change the DOM? Those are relatively easy to test. Just create a minimal snippet of HTML that gets manipulated, i.e. by copying one from the source view of a live instance. Run the function, check for expected results.

There are areas that we can't test on a node environment, like the drag-n-drop APIs or those that autoselect text. Those are either browser-only APIs or simply not something one can easily detect from the DOM-tree properties alone.

To me, #198 seems more important then the mostly semantic changes of #365 - We have a history of spending a lot of time to refactor code without actually adding features. It's easy to get lost in a rabbit hole with these.

from privatebin.

ankiiisharma avatar ankiiisharma commented on June 12, 2024

@elrido , got it so basically you need to add more test coverages. for example in AttachmentViewer.js we are handling attachments by setting, showing, hiding, and removing , previews and creating downloadable links. We can add more test coverages for Handling Special characters in filename, large file attachments, multiple attachments concurrently, etc.

right?

from privatebin.

ankiiisharma avatar ankiiisharma commented on June 12, 2024

example :

let specialCharsClean = jsdom(),
          specialCharsData = "data:" + mimeType + ";base64," + btoa(rawdata),
          specialCharsResults = [];
        specialCharsFilename = `special_chars_${specialCharsFilename}!@#$%^&*()_+=-{}[];:'"\\|,.<>?`;
        $("body").html(
          '<div id="attachment" role="alert" class="hidden alert ' +
            'alert-info"><span class="glyphicon glyphicon-download-' +
            'alt" aria-hidden="true"></span> <a class="alert-link">' +
            'Download attachment</a></div><div id="attachmentPrevie' +
            'w" class="hidden"></div>'
        );
        $.PrivateBin.AttachmentViewer.init();
        $.PrivateBin.AttachmentViewer.setAttachment(
          specialCharsData,
          specialCharsFilename
        );
        const specialCharsAttachment =
          $.PrivateBin.AttachmentViewer.getAttachment();
        specialCharsResults.push(
          specialCharsAttachment[1] === specialCharsFilename
        );

from privatebin.

elrido avatar elrido commented on June 12, 2024

The AttachmentViewer is already well covered, except for the parts like this one: AttachmentViewer

These are APIs (drag-n-drop, clip-board) that are not emulated by the jsDOM framework under node.

Also, we already generate random input using the jsVerify framework, so special chars should already be covered by the existing test (string covers any valid unicode sequence):

jsc.property(
'displays & hides data as requested',
common.jscMimeTypes(),
'string',
'string',
'string',
'string',
function (mimeType, rawdata, filename, prefix, postfix) {

New tests should ideally get written to leverage the same technique and work with fuzzed input. This is explained in more detail in the development link rugk shared above and you can find the existing assets we created in the common.js:

PrivateBin/js/common.js

Lines 85 to 154 in 2324e83

// provides random lowercase characters from a to z
exports.jscA2zString = function() {
return jsc.elements(a2zString);
};
// provides random lowercase alpha numeric characters (a to z and 0 to 9)
exports.jscAlnumString = function() {
return jsc.elements(alnumString);
};
//provides random characters allowed in hexadecimal notation
exports.jscHexString = function() {
return jsc.elements(hexString);
};
// provides random characters allowed in GET queries
exports.jscQueryString = function() {
return jsc.elements(queryString);
};
// provides random characters allowed in hash queries
exports.jscHashString = function() {
return jsc.elements(hashString);
};
// provides random characters allowed in base64 encoded strings
exports.jscBase64String = function() {
return jsc.elements(base64String);
};
// provides a random URL schema supported by the whatwg-url library
exports.jscSchemas = function(withFtp = true) {
return jsc.elements(withFtp ? schemas : schemas.slice(1));
};
// provides a random supported language string
exports.jscSupportedLanguages = function() {
return jsc.elements(supportedLanguages);
};
// provides a random mime type
exports.jscMimeTypes = function() {
return jsc.elements(mimeTypes);
};
// provides a random PrivateBin paste formatter
exports.jscFormats = function() {
return jsc.elements(formats);
};
// provides random URLs
exports.jscUrl = function(withFragment = true, withQuery = true) {
let url = {
schema: exports.jscSchemas(),
address: jsc.nearray(exports.jscA2zString()),
};
if (withFragment) {
url.fragment = jsc.string;
}
if(withQuery) {
url.query = jsc.array(exports.jscQueryString());
}
return jsc.record(url);
};
exports.urlToString = function (url) {
return url.schema + '://' + url.address.join('') + '/' + (url.query ? '?' +
encodeURI(url.query.join('').replace(/^&+|&+$/gm,'')) : '') +
(url.fragment ? '#' + encodeURI(url.fragment) : '');
};

I think a good candidate to start at is TopNav, where there are no tests yet from rawText onwards (but skip updateExpiration and updateFormat - those are specific for the bootstrap(3) template and should get removed when we cleanup that template)

from privatebin.

ankiiisharma avatar ankiiisharma commented on June 12, 2024

Got it!

from privatebin.

ankiiisharma avatar ankiiisharma commented on June 12, 2024

Hello @elrido , I just raised PR #1338 . I added a small update for the rawText function. I made a few changes based on my understanding so far. Could you please check if everything is okay? regards.

from privatebin.

elrido avatar elrido commented on June 12, 2024

Thank you, it checks out and did increase our code coverage. For that particular function there is not much more to test. Many of those TopNav functions simply hide or display sets of related navigation elements.

from privatebin.

elrido avatar elrido commented on June 12, 2024

@ankiiisharma Weirdly, your new test did pass on the machine I tested it on, but failed when running the full test suite in github actions. Digging in, I realized that a) your test would target more the TopNav.hideAllButtons function, so I renamed it to that and b) TopNav.rawTextis a private function that you can't call directly. But you can trigger it through a click event on the button that the TopNav.initwill register it on:

describe('hideAllButtons', function () {
before(function () {
cleanup();
});
it(
'hides all buttons correctly',
function () {
// Insert any setup code needed for the hideAllButtons function
// Example: Initialize the DOM elements required for testing
$('body').html(
'<nav class="navbar navbar-inverse navbar-static-top">' +
'<div id="navbar" class="navbar-collapse collapse"><ul ' +
'class="nav navbar-nav"><li><button id="newbutton" ' +
'type="button" class="hidden btn btn-warning navbar-btn">' +
'<span class="glyphicon glyphicon-file" aria-hidden="true">' +
'</span> New</button><button id="clonebutton" type="button"' +
' class="hidden btn btn-warning navbar-btn">' +
'<span class="glyphicon glyphicon-duplicate" ' +
'aria-hidden="true"></span> Clone</button><button ' +
'id="rawtextbutton" type="button" class="hidden btn ' +
'btn-warning navbar-btn"><span class="glyphicon ' +
'glyphicon-text-background" aria-hidden="true"></span> ' +
'Raw text</button><button id="qrcodelink" type="button" ' +
'data-toggle="modal" data-target="#qrcodemodal" ' +
'class="hidden btn btn-warning navbar-btn"><span ' +
'class="glyphicon glyphicon-qrcode" aria-hidden="true">' +
'</span> QR code</button></li></ul></div></nav>'
);
$.PrivateBin.TopNav.init();
$.PrivateBin.TopNav.hideAllButtons();
assert.ok($('#newbutton').hasClass('hidden'));
assert.ok($('#clonebutton').hasClass('hidden'));
assert.ok($('#rawtextbutton').hasClass('hidden'));
assert.ok($('#qrcodelink').hasClass('hidden'));
cleanup();
}
);
});
describe('rawText', function () {
before(function () {
cleanup();
});
it(
'displays raw text view correctly',
function () {
const clean = jsdom('', {url: 'https://privatebin.net/?0123456789abcdef#0'});
global.URL = require('jsdom-url').URL;
$('body').html('<button id="rawtextbutton"></button>');
const sample = 'example';
$.PrivateBin.PasteViewer.setText(sample);
$.PrivateBin.Helper.reset();
$.PrivateBin.TopNav.init();
$('#rawtextbutton').click();
assert.equal($('pre').text(), sample);
clean();
}
);
});

Finally, and that took me some trial and error to work out, this function interacts with the window.location URL and the window.history, so I needed to also reset the Helper and setup jsdom for URL handling. It's been a while since I've been writing these and my memory on dealing with these types of interactions has been getting a bit hazy.

This latter test could be improved by feeding PasteViewer.setText with random strings, but the validation would have to be more lenient, since rawText uses dompurify to sanitize malicious content before injecting it into the pre-tag. We'd essentially be testing dompurify, so I thought a validation that the DOM gets updated and the sample inserted into a pre-tag is a sufficient test for now.

from privatebin.

ankiiisharma avatar ankiiisharma commented on June 12, 2024

Hey @elrido , sorry about that. Even i checked this function individually and it was running well.
Let me check this.

from privatebin.

elrido avatar elrido commented on June 12, 2024

I think they are fine for now and you can certainly move on and go for another one. I'll now again better understand what to look for when reviewing these. Just wanted to share with you my findings, so that you can benefit as well.

from privatebin.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.