RMMZ Visual Studio 2022 setup

[Otacon6530]

I spent a week trying to get a decent setup in visual studio 2022 for my plugin development, but have been encountering issues at every step (as usual).

Here is what I have been able to accomplish:

• Created node project
• setup the start (f5) to launch the game from nw.js.
• Tried to Setup basic mocha test in vs, but cant use it because rpgmaker uses the dom.
• Tried to Setup mocha to run from nw.js, but it cant find my required object. E.g. chai

The question is

• How did you setup the build and start buttons?
• How did you run unit and integration testing?
• Have any general advice on setting this up in vs?

 

[Otacon6530]

Ok, this is what I was able to do to for the next person that wants to setup VS pro for Plugin development:

• Create a react solution of the game files.
• Set the start external program setting to use NW.js and setup the command line arguments to point to your project folder (--nwapp). This will make it so you can start the game from VS.

• Use NPM to install Mocha and in my case Chai for testing though Chai is not necessary.
• Setup mocha to run via a plugin. I will provide a plugin soon, but as of right now it is integrated with my mapper plugin (https://dev.azure.com/StephensDev/_git/RPG Maker - Jams Plugin?path=/js/plugins/Jams_MochaTest.js).
• My plugin code related to creating a popup when you start the game.

Spoiler: Plugin Code

 this.mochaDiv.id = 'mocha';
    document.body.appendChild(this.mochaDiv);
    loadScript('node_modules/mocha/mocha.js', function () {
        loadScript('test/appTest.js', function () {
        });
    });
};

function loadScript(url, callback) {
    // Adding the script tag to the head as suggested before
    var head = document.head;
    var script = document.createElement('script');
    script.type = 'module';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
}
 

if (this.doc == null) {
        document.getElementById('errorPrinter').appendChild(this.mochaDiv);
        document.getElementById('errorPrinter').removeChild(this.mochaDiv);
        var divText = this.mochaDiv.outerHTML;
        var myWindow = window.open('', '', 'height=500,width=500,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
        var doc = myWindow.document;
        doc.open();
        doc.write(divText);
        doc.close();

        // Create new link Element
        var link = doc.createElement('link');

        // set the attributes for link element
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = 'node_modules/mocha/mocha.css';

        // Get HTML head element to append
        // link element to it
        doc.getElementsByTagName('HEAD')[0].appendChild(link);

        this.doc = doc;
    }

this.mochaDiv = document.createElement('div');

This is what it looks like after I hit run. You can see the mocha tests in the left popup window.



Here is the test code:

Spoiler: Test Code

const assert = require('chai').assert;
mocha.ui('bdd').run(function (failures) {
    process.on('exit', function () {

        process.exit(failures);
    });
});

describe('App', function () {
    it('app should return hello', function () {
        assert.equal('a','a');
    });
})