how to mock/test a window.prompt feaure using sinoon.js-CodePudding

I have a javascript function hat uses prompt ask details from user:

export function askUserForTeamDetails() {
    const emoji = window.prompt( 'Enter new team’s emoji:' );
    if ( null === emoji ) {
        return;
    }
    const name = window.prompt( 'Enter new team’s name:' );
    if ( null === name ) {
        return;
    }
    return { name, emoji };
}

Then I have Qunit and Sinon.js setup inside an HTML file like this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Rusty Inc. Org Chart WordPress Plugin JavaScript Tests</title>
        <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.7.1.css">
        
    </head>
    <body>
        <div id="qunit"></div>
        <div id="qunit-fixture"></div>
        <div  >
            <h1>Here is the playground</h1>
            <div id="playground"></div>

        </div>
       
        <script src="../node_modules/sinon/pkg/sinon.js"></script>
        <script type="module">
            import sinon from "../node_modules/sinon/pkg/sinon-esm.js";
            console.log('is sinon', sinon)
        </script>
          <script src="https://code.jquery.com/qunit/qunit-2.7.1.js"></script>
        <script type="module">
            import { subscribe, updateTree, updateSecretURL, getTree , createExpandCollapseCallback } from '../framework.js';
            import { ui , askUserForTeamDetails } from '../ui.js';
            const q = QUnit;
            

            q.test('test details function', assert => {
            let windowSpy = sinon.spy(window, 'prompt');

            //Dont  want  to call the  real function because it will cause propmts to display 

            let  askDetailsSub = sinon.stub(askUserForTeamDetails)
            const fake =  sinon.fake(askUserForTeamDetails);


             // this gives an error
            sinon.assert.calledOnce(windowSpy); 

            //how to simulate the process of entering  inouts to prompt progamttaically?

            // verify that  the returned values are the ones inout by users


        } )
        </script>
    </body>
</html>

I feel I have setup the fake function incorrectly and it's giving me an error:failing test description message

The text description of the error is:

Died on test #1     at https://923f663c4822.wp.prod1.devex.live/wp-content/plugins/rusty-inc-org-chart/tests/test.html:68:6: expected prompt to be called once but was called 0 times@ 6 ms
Source:     
AssertError: expected prompt to be called once but was called 0 times
    at Object.fail (https://923f663c4822.wp.prod1.devex.live/wp-content/plugins/rusty-inc-org-chart/node_modules/sinon/pkg/sinon.js:174:25)
    at failAssertion (https://923f663c4822.wp.prod1.devex.live/wp-content/plugins/rusty-inc-org-chart/node_modules/sinon/pkg/sinon.js:120:20)
    at Object.assert.<computed> [as calledOnce] (https://923f663c4822.wp.prod1.devex.live/wp-content/plugins/rusty-inc-org-chart/node_modules/sinon/pkg/sinon.js:149:17)
    at Object.<anonymous> (https://923f663c4822.wp.prod1.devex.live/wp-content/plugins/rusty-inc-org-chart/tests/test.html:76:18)

shouldn't the prompt be called?

I want to test the prompts being called and then simulate an entering value to the prompts. Also that the function returns the correct values. How Do I test it?

CodePudding user response：

You don't have to mock the askUserForTeamDetails function but can rather stub the window.prompt function and fake taking an input by stubbing it's return value like this:

let windowStub = sinon.stub(window, 'prompt');

//fakes taking input by stubbing the return value of prompt
// use `withArgs` to provide return value for the specific call
windowStub.withArgs('Enter new team’s emoji:').returns(testEmoji);
windowStub.withArgs('Enter new team’s name:').returns(testTeam);

A solution would look like this:

q.test('tes inputs function', assert => {
                const testEmoji = `