cypress-documentation

cypress-documentation copied to clipboard

Suggestion:

I am looking at using Cypress to test modules / functions that have no UI. Much of the code is legacy - i.e. uses functions, not exports, so there needs to be a way to "import" the function into the step_definition from the "global" name space.

eg the following silly simple example:

    // app.js in http://127.0.0.1:8500/Sites/CypressTestApp/index.html

    var myFunc = {
        lastMsg : '',
        say: function(msg){
            console.log('Last msg: '+this.lastMsg)
            console.log('You said: '+msg)
            this.lastMsg = msg;
        },
        getLastMsg : function(){
            return this.lastMsg
        }
    }

It took me a while to find this issue post that answered the question: How do I test the function directly without reference to the DOM? Answer below.

    describe('The Home Page', function () {

        it('successfully loads', function () {
            cy.visit('http://127.0.0.1:8500/Sites/CypressTestApp')
            cy.window().should('have.property', 'myFunc')
        })
        
        it('Should set name to Jane',function(){

            cy.window().then(function(win){
                win.myFunc.say('Fred')
                win.myFunc.say('Jane')
                var lm = win.myFunc.getLastMsg()
                expect(lm).to.equal("Jane")
            })

        })
    })

Thanks!

I strongly endorse this suggestion, for the documentation, too.

My version of the question (and answer with help from my friends) is at: https://stackoverflow.com/questions/72137229/can-we-directly-unit-test-html-embedded-javascript-functions

Testing html embedded, top level, javascript functions was first thing I was looking for a web tester to do. I became wonderfully seduced into Cypress once I installed it and saw it's a Selenium replacement in being able to do some user like UI testing. However, I was some significant way into the documentation, admiring the way Cypress hangs together, but all the while scratching my head on how to do this basic, first, thing.

So indeed I suggest giving prominent place to this basic thing. For example, under "Getting Started" create a new page "Writing JavaScript Unit Tests" with two sections:

• (The suggestion in this thread) Test Javascript functions that are coded in the top level of a <script>; and
• Test JavaScript functions coming from a separate .js file, are ES6/ES2015 export/imported (or CommonJS required), and used in a <script type="module">;

I support that too. Testing the Business Logic layer (all JS classes and a message bus etc, no ui, no selenium etc etc). It was the first thing I did. It took a while to work out a pattern for doing that from Gherkin => test reports. Still not completely happy with the outcome but it works.

Cheers, Murray