feat: added new html fixtures to watcher to use them in e2e tests (#30

) * feat: added new html fixtures to watcher to use them in e2e tests * fix: changed one fixture
dequelabs · Jul 17, 2024 · 4b29ca2 · 4b29ca2
1 parent 80fde4a
commit 4b29ca2
Show file tree

Hide file tree

Showing 13 changed files with 848 additions and 0 deletions.
diff --git a/fixtures/watcher/check.html b/fixtures/watcher/check.html
@@ -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>
diff --git a/fixtures/watcher/delayed-mounting.html b/fixtures/watcher/delayed-mounting.html
@@ -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>
diff --git a/fixtures/watcher/dnd.html b/fixtures/watcher/dnd.html
@@ -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>
diff --git a/fixtures/watcher/form.html b/fixtures/watcher/form.html
@@ -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>
diff --git a/fixtures/watcher/frame.html b/fixtures/watcher/frame.html
@@ -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>
diff --git a/fixtures/watcher/hover.html b/fixtures/watcher/hover.html
@@ -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>
diff --git a/fixtures/watcher/include-exclude.html b/fixtures/watcher/include-exclude.html
@@ -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>