<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>
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(() => {
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)
})
})