Breaking News: Grepper is joining You.com. Read the official announcement!

unit testing vanilla javascript

Vast Vendace answered on November 7, 2022 Popularity 3/10 Helpfulness 1/10

answer unit testing vanilla javascript

unit testing vanilla javascript

Comment

//index.html
<html>
  <head>
    <title>Pun Generator</title>
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
    <style>
      .jumbotron {
        background: #337ab7;
        color: white;
      }

      .jumbotron p {
        max-width: 75%;
        margin: 1em auto 2em;
      }

      #pun-container {
        margin-top: 32px;
      }

      #pun-container p {
        font-size: 24px;
        margin: 32px 0;
      }
    </style>
  </head>
  <body>
    <div class="jumbotron text-center">
      <div class="container">
        <h1>Pun Generator</h1>
        <p>Get ready for some good pun-ch lines.</p>
      </div>
    </div>
    <main>
      <div class="container text-center">
        <div class="row">
          <button class="btn btn-lg btn-primary">Click me for a terrible pun</button>
        </div>
        <div class="row">
          <div id="pun-container"></div>
        </div>
      </div>
    </main>

    <script>
      (function() {
        const puns = [
          "My ceiling isn't the best, but it's up there.",
          'I got fired from the calendar factory, just for taking a day off.',
          "Q: What's the best thing about Switzerland? A: Well, the flag is a big plus.",
          'The past, present, and future walk into a bar. It was tense.',
          'I tried to make a belt out of watches. It was a waist of time.',
          "Why can't Harry Potter tell the difference between his potion pot and his best friend? They're both cauld ron.",
          "I'm afraid of negative numbers. I'll stop at nothing to avoid them.",
          "Two antennas got married. The ceremony wasn't much, but the reception was excellent.",
          'RIP boiling water. You will be mist.',
          'I met a criminal with a bounty on his head. That was a weird place to keep paper towels.',
          'I did a theatrical performance about puns. It was a play on words.',
          'Knowing how to pick locks has opened a lot of doors for me.',
          'I should have been sad when my flashlight batteries died, but I was delighted.',
          "Santa Claus's elves are subordinate clauses.",
          "I'm designing a reversible jacket. I'm excited to see how it turns out.",
        ];
        let counter = 0;

        const appendNewPun = () => {
          const p = document.createElement('p');
          p.innerHTML = puns[counter++] || "I'm all out of puns!";
          document.querySelector('#pun-container').prepend(p);
        }

        const button = document.querySelector('button');
        button.addEventListener('click', appendNewPun);
      })();
    </script>
  </body>
</html>

//index.test.js
import { fireEvent, getByText } from '@testing-library/dom'
import '@testing-library/jest-dom/extend-expect'
import { JSDOM } from 'jsdom'
import fs from 'fs'
import path from 'path'

const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');

let dom
let container

describe('index.html', () => {
  beforeEach(() => {
    // Constructing a new JSDOM with this option is the key
    // to getting the code in the script tag to execute.
    // This is indeed dangerous and should only be done with trusted content.
    // https://github.com/jsdom/jsdom#executing-scripts
    dom = new JSDOM(html, { runScripts: 'dangerously' })
    container = dom.window.document.body
  })

  it('renders a heading element', () => {
    expect(container.querySelector('h1')).not.toBeNull()
    expect(getByText(container, 'Pun Generator')).toBeInTheDocument()
  })

  it('renders a button element', () => {
    expect(container.querySelector('button')).not.toBeNull()
    expect(getByText(container, 'Click me for a terrible pun')).toBeInTheDocument()
  })

  it('renders a new paragraph via JavaScript when the button is clicked', async () => {
    const button = getByText(container, 'Click me for a terrible pun')
    
    fireEvent.click(button)
    let generatedParagraphs = container.querySelectorAll('#pun-container p')
    expect(generatedParagraphs.length).toBe(1)

    fireEvent.click(button)
    generatedParagraphs = container.querySelectorAll('#pun-container p')
    expect(generatedParagraphs.length).toBe(2)

    fireEvent.click(button)
    generatedParagraphs = container.querySelectorAll('#pun-container p')
    expect(generatedParagraphs.length).toBe(3)
  })
})

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: dev.to

Tags: javascript unit-testing

Link to this answer
Share Copy Link

Contributed on Nov 07 2022

Vast Vendace

0 Answers Avg Quality 2/10

unit testing vanilla javascript

Contents

More Related Answers

unit testing vanilla javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.