Skip to content

Commit

Permalink
feat: added new html fixtures to watcher to use them in e2e tests (#30
Browse files Browse the repository at this point in the history
)

* feat: added new html fixtures to watcher to use them in e2e tests

* fix: changed one fixture
  • Loading branch information
orest-s authored Jul 17, 2024
1 parent 80fde4a commit 4b29ca2
Show file tree
Hide file tree
Showing 13 changed files with 848 additions and 0 deletions.
34 changes: 34 additions & 0 deletions fixtures/watcher/check.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!doctype html>
<html lang="en">
<head>
<title>Checkbox Change Page State</title>
</head>
<body>
<label for="checkbox"> Check me to change page state </label>

<input
data-testid="checkbox"
type="checkbox"
id="checkbox"
placeholder="checkbox placeholder"
/>

<div id="content">
<p>This content changes when the checkbox is checked.</p>
</div>

<script>
const checkbox = document.getElementById('checkbox')
const content = document.getElementById('content')

checkbox.addEventListener('change', () => {
if (checkbox.checked) {
content.innerHTML = '<p>The checkbox is checked!</p>'
} else {
content.innerHTML =
'<p>This content changes when the checkbox is checked.</p>'
}
})
</script>
</body>
</html>
29 changes: 29 additions & 0 deletions fixtures/watcher/delayed-mounting.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!doctype html>
<html lang="en">
<head>
<title>Interactive Test Fixture</title>
</head>
<body>
<h1>Delayed Mounting Fixture</h1>
<section id="headers"></section>

<script>
const headersSection = document.getElementById('headers')
const addHeader = (number, text) => {
const header = document.createElement('h6')
header.id = `h6-${number}`
header.textContent = text
headersSection.appendChild(header)
}
setTimeout(() => {
addHeader(1, 'First')
}, 500)
setTimeout(() => {
addHeader(2, 'Second')
}, 100)
setTimeout(() => {
addHeader(3, 'Third')
}, 300)
</script>
</body>
</html>
89 changes: 89 additions & 0 deletions fixtures/watcher/dnd.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Drag and Drop Test</title>
<style>
.back-link {
display: block;
margin-bottom: 10px;
color: blue;
cursor: pointer;
}

.drag-and-drop {
display: flex;
gap: 20px;
}

.small-box {
width: 100px;
height: 100px;
background-color: red;
cursor: grab;
}

.small-box.dragging {
opacity: 0.5;
}

.large-box {
width: 300px;
height: 300px;
border: 2px solid #000;
background-color: lightgray;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}

.large-box.inside {
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="drag-and-drop">
<div class="small-box" id="small-box" draggable="true">Drag me!</div>
<div class="large-box" id="large-box">Drag the small box here.</div>
</div>

<script>
const smallBox = document.getElementById('small-box')
const largeBox = document.getElementById('large-box')

smallBox.addEventListener('dragstart', event => {
event.dataTransfer.setData('text/plain', event.target.id)
smallBox.classList.add('dragging')
})

smallBox.addEventListener('dragend', () => {
smallBox.classList.remove('dragging')
})

largeBox.addEventListener('dragenter', event => {
event.preventDefault()
largeBox.classList.add('inside')
})

largeBox.addEventListener('dragleave', () => {
largeBox.classList.remove('inside')
})

largeBox.addEventListener('dragover', event => {
event.preventDefault()
})

largeBox.addEventListener('drop', event => {
event.preventDefault()
const data = event.dataTransfer.getData('text/plain')
if (data === 'small-box') {
largeBox.textContent = 'Success!'
}
smallBox.classList.remove('dragging')
largeBox.classList.add('inside')
})
</script>
</body>
</html>
88 changes: 88 additions & 0 deletions fixtures/watcher/form.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<!doctype html>
<html lang="en">
<head>
<title>Interactive Test Fixture</title>
<style>
.scrollable-div {
height: 50px;
overflow: auto;
border: 1px solid #000;
padding: 10px;
}

.hover-button {
background-color: lightgray; /* Initial background color */
padding: 5px 10px; /* Button padding */
}

.hover-button:hover {
background-color: gray; /* Background color on hover */
}
</style>
</head>
<body>
<form>
<label for="input">Enter text:</label>
<input
data-testid="input"
id="input"
type="text"
placeholder="Enter text here"
/>

<label for="select">Select Option:</label>

<select data-testid="select" id="select">
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>

<label for="file-input">File:</label>
<input
data-testid="file-input"
id="file-input"
type="file"
placeholder="file input placeholder"
/>

<p id="select-value"></p>

<p id="input-value"></p>

<button>Submit Form</button>
</form>

<script>
const input = document.querySelector('#input')
const inputValue = document.querySelector('#input-value')

const select = document.querySelector('#select')
const selectValue = document.querySelector('#select-value')

input.addEventListener('input', e => {
inputValue.textContent = e.target?.value
})

input.removeEventListener('input', () => {
inputValue.textContent = ''
})

input.addEventListener('click', e => {
inputValue.textContent = 'Input was clicked'
})

input.removeEventListener('click', e => {
inputValue.textContent = ''
})

select.addEventListener('change', e => {
selectValue.textContent = e.target?.value
})

select.removeEventListener('change', () => {
selectValue.textContent = ''
})
</script>
</body>
</html>
29 changes: 29 additions & 0 deletions fixtures/watcher/frame.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!doctype html>
<html lang="en">
<head>
<title>FrameBox</title>
</head>
<body>
<iframe id="frame" name="frame-name"></iframe>
<iframe id="second-frame" name="second-frame-name"></iframe>

<button id="outer-button">Outer Button</button>

<script>
const frameContent = `
<!DOCTYPE html>
<html lang="en">
<head>
<title>FrameBox Content</title>
</head>
<body>
<button id='frame-button'>Frame Button</button>
</body>
</html>
`

document.querySelector('#frame').srcdoc = frameContent
document.querySelector('#second-frame').srcdoc = frameContent
</script>
</body>
</html>
60 changes: 60 additions & 0 deletions fixtures/watcher/hover.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!doctype html>
<html lang="en">
<head>
<style>
/* Style for the button */
#hover-button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
/* Hover effect */
#hover-button:hover {
background-color: #0056b3;
}
</style>
<title>Hover Text Fixture</title>
</head>
<body>
<label for="hover-button">Hover label</label>
<button data-testid="hover-button" id="hover-button">Hover over me</button>

<img id="hover-image" alt="hover-alt" src="" />

<input id="hover-input" placeholder="Hover over me placeholder" />

<div id="content">
<p>This content changes when you hover over the button.</p>
</div>

<script>
const button = document.querySelector('#hover-button')
const img = document.querySelector('#hover-image')
const input = document.querySelector('#hover-input')

const content = document.getElementById('content')

function showText() {
content.innerHTML = '<p>Hover effect triggered!</p>'
}

function hideText() {
content.innerHTML =
'<p>This content changes when you hover over the button.</p>'
}

button.addEventListener('mouseenter', showText)
button.addEventListener('mouseleave', hideText)

img.addEventListener('mouseenter', showText)
img.addEventListener('mouseleave', hideText)

input.addEventListener('mouseenter', showText)
input.addEventListener('mouseleave', hideText)
</script>
</body>
</html>
27 changes: 27 additions & 0 deletions fixtures/watcher/include-exclude.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Include/Exclude Fixture</title>
</head>
<body>
<div class="include">
include me
<img src="includeOne.jpg" />
<div class="exclude">
exclude me
<img src="excludeOne.jpg" />
</div>
</div>

<div class="include2">
include me two
<img src="includeTwo.jpg" />
<div class="exclude2">
exclude me two
<img src="excludeTwo.jpg" />
</div>
</div>
</body>
</html>
Loading

0 comments on commit 4b29ca2

Please sign in to comment.