DEV Community

loading...
Cover image for 🧪 Meet Tessy - World's first Web Monetization testing library!

🧪 Meet Tessy - World's first Web Monetization testing library!

vladodev profile image Vladimir Mikulic ・Updated on ・4 min read

This hackathon has been very interesting to me. The most of encountered this tech for the first time and it didn't stop us from creating astonishing 100+ projects. We developers can be really creative :)

For me, it usually takes more time coming up with the idea rather than building it. This time was different. Seeing all these software projects and examples from fellow DEV members was cool but I knew something was missing - TESTING. I've Googled a bit, and to my surprise, for the first time in my life, Google had no results about existing Web Monetization testing libraries.

I know, we are early adopters, but it's scary when Google fails on you 😨

So, I've decided to fill the gap and create the world's first open-source Web Monetization testing library - Tessy.

👌Interesting... tell me more!

Tessy is a declarative testing library and provides bindings for 3 most popular e2e testing frameworks:

  • Cypress
  • Selenium
  • Puppeteer

Of course, Tessy is not limited to only these 3 frameworks, you can use with/without any library - your choice. I've chosen to provide bindings for these frameworks because they are the most popular & most importantly - the most used ones. If you have other framework in mind, feel free to submit a PR. Bindings in Tessy are really straight forward.

😎 Talk is cheap. Show me the code.

That's what I wanted to hear. Let's go over few examples to see how Tessy is actually useful.

In these examples, I'll be using Cypress, but you can take a look at README and see how you could do the same with Selenium or Puppeteer.

Our first test is going to introduce you to Tessy.

// We pass cy object instance so Tessy can add it's magic 🧙
require('tessy/api/cypress')(cy);

describe('My First Web Monetization Test', () => {
  it('Verifies that Web Monetization API is enabled!', () => {
    // Tessy's visitMonetized method which enables Web Monetization on a specified URL
    cy.visitMonetized('https://testwebmonetization.com').then(
      ({ document }) => {
        const headline = document.querySelector('.headline.my-1');
        const successMsg = 'Monetization events have occurred on this page!';

        expect(headline.textContent.includes(successMsg)).equal(true);
      }
    );
  });
});

Enter fullscreen mode Exit fullscreen mode

testwebmonetization.com

Alright, how was that? Pretty simple, right? Now, let's see a real world example where you would need Tessy.

I've choosen Robert Soriano's funny example, but it illustrates the point. He created a simple website that shows you AD (funny gif in this case) if you are not using Web Monetization. If you are using it, then you will be presented with a counter. Our job as a tester is to verify that AD is not displayed to the users that are using Web Monetization like Coil and actually paying for the content. It would be a terrible user experience. Let's make sure it doesn't ever happen with Tessy!

First, let's clone Robert's repo, install Cypress & Tessy.

$ git clone https://github.com/sorxrob/vite-coil-simulator.git
$ cd vite-coil-simulator
$ npm i
$ npm i cypress tessy -D
Enter fullscreen mode Exit fullscreen mode

Once you've setup the project, add test script to package.json like this:

"test": "cypress open"

Now, run this command to launch Cypress for the first time. After the Cypress App loads, you can close it and you'll see a new folder "cypress" in your project. This where your Cypress tests and plugins reside.

Create index.spec.js inside of a cypress/integration folder. This is the folder where your test files are stored. Copy this code in the index.spec.js:

require('tessy/api/cypress')(cy);

describe('My First Test', () => {
  it('Does not do much!', () => {
    cy.visitMonetized('http://localhost:3000').then(({ document }) => {
      const ad = document.querySelector('.tenor-gif-embed');
      const isAdPresent = ad !== null;

      expect(isAdPresent).equal(false);
    });
  });
});
Enter fullscreen mode Exit fullscreen mode
$ npm run dev # Start the app on localhost:3000 
$ npm test # Start Cypress (In other terminal window/tab)
Enter fullscreen mode Exit fullscreen mode

The Cypress app will open and you will see a list of specs you would like to run. The last one is ours.

Cypress App

Select it and you'll see that our test is passing 🟢

Testing Website

As a tester, your job is done here. Well done 🎉

These were some basic examples but with Tessy you are in charge of your Web Monetized environment. Maybe you have a music platform and you want to make sure that once the user stops streaming, music stops as well, or you need hide that special ebook that is only available for users who appreciate your work, or maybe you want to react on monetizationpending state and inform the user of the current status? No problem, with Tessy anything is testable. Just head over to the docs.

🤔 How did you build that?

I've built it with vanilla JS. No dependecies whatsoever, except the development ones. Web Monetization guide nailed the explanation so I didn't have any problems understanding how this works. Documentation matters a lot!

🦄 Project

Category: Foundational Technology
Thumbnail image provided by Freepik ❤️
The project is hosted on Github and licensed under MIT license.

🎀 Conclusion

I would like to thank DEV for hosting this awesome hackathon. I've really learned a lot and I am looking forward to using Web Monetization on my personal site and encouraging my friends to spread the word so we can make this a browser standard!

Let me know how was your #GFTW and your opinion on Tessy?

Thank you for reading and bye till the next time!

Discussion (4)

pic
Editor guide
Collapse
potherca profile image
Ben Peachey

Consider that repo starred! 🌟

I don't make bets but if I did, my money would be on this for the Hackathon top 3!
Great stuff! Love the vanilla JS choice as well.

At my last job we had a lot of discussion about which testing library to go with, and this just goes ahead and support all three major players! (I personally prefer Puppeteer but Selenium is definitely where most corporates are at).

I'm on something else right now (distributed web stuff with Solid, if you haven't heard about it, check out solidproject.org/) but when I go back to web monitization, I am definitely trying this out!

Collapse
vladodev profile image
Vladimir Mikulic Author

Ben, thank you so much for your kind words and a 🌟 :)

At my last job we had a lot of discussion about which testing library to go with, and this just goes ahead and support all three major players! (I personally prefer Puppeteer but Selenium is definitely where most corporates are at).

I couldn't agree more with this statement. JavaScript ecosystem is fragmented and there are a lot of tools that solve the same problem. Sometimes this is good, but more often than not it's a headache.
To keep everyone happy, I've decided, just like you said, provide out of the box support for three major players.

I've checked out your project Solid. This idea of switching apps easily and reusing data is amazing and highly needed in this modern age. I get anxious every time I have to choose the app for some task because I know I'll be sticking with it for a loooong time and switching to a new app and transferring all this data is not possible.

I truly hope that your project will gain traction and resolve this problem!
Also, looking forward to the next "This Month in Solid" newsletter :)

Collapse
potherca profile image
Ben Peachey

To be clear, Solid is not my project. I'm working with the technology but I didn't invent it.

If you want some background, I've written about it in my weekly update here:

But, yeah, Solid is some pretty awesome stuff 🤩

Thread Thread
vladodev profile image
Vladimir Mikulic Author

Oh, sorry for the misunderstanding 😅
Regardless, Solid has a bright future that I can't wait to embrace!