Test: Cover config.fixture with null or custom string, improve docs

qunitjs · Jul 11, 2024 · 9cd5890 · 9cd5890
1 parent 7c9f1ae
commit 9cd5890
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 9 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -75,6 +75,8 @@ module.exports = function (grunt) {
 
             'test/amd.html',
             'test/autostart.html',
+            'test/config-fixture-null.html',
+            'test/config-fixture-string.html',
             'test/dynamic-import.html',
             'test/events-filters.html',
             'test/events-in-test.html',

diff --git a/docs/api/config/fixture.md b/docs/api/config/fixture.md
@@ -1,15 +1,15 @@
 ---
 layout: page-api
 title: QUnit.config.fixture
-excerpt: HTML content to render before each test.
+excerpt: Clean HTML playground before each test.
 groups:
   - config
 redirect_from:
   - "/config/fixture/"
 version_added: "1.0.0"
 ---
 
-In browser environments, this HTML will be rendered in the `#qunit-fixture` element before each test.
+In browser environments, QUnit can create a safe playground for HTML and DOM manipulation, that is automatically cleaned and restored to the default HTML before each test.
 
 <table>
 <tr>
@@ -24,7 +24,7 @@ In browser environments, this HTML will be rendered in the `#qunit-fixture` elem
 
 QUnit automatically resets the contents of `<div id="qunit-fixture">`. This gives every test a fresh start, and automatically cleans up any additions or other changes from your tests. As long as you append or insert your elements inside the fixture, you will never have to manually clean up after your tests to keep them atomic.
 
-By starting with an empty fixture in your test HTML file, you effectively give each test a clean start, as QUnit will automatically remove anything that was added there before the next test begins.
+By starting with an empty fixture in your test HTML file, you effectively give each test a clean start, as QUnit will automatically remove anything that was added or staged there before the next test begins.
 
 If many of your tests require the same markup, you can also set it inside the fixture ahead of time. This reduces duplication between tests. QUnit guruantees that each test will start with a fresh copy of the original fixture, undoing any changes that happened during any previous tests.
 
@@ -57,28 +57,28 @@ Starting with an empty fixture. Any additions are automatically removed.
 QUnit.test('example [first]', function (assert) {
   const fixture = document.querySelector('#qunit-fixture');
 
-  const resultA = document.querySelectorAll('#first');
+  const resultA = fixture.querySelectorAll('.first');
   assert.strictEqual(resultA.length, 0, 'initial');
 
   const div = document.createElement('div');
-  div.id = 'first';
+  div.className = 'first';
   fixture.append(div);
 
-  const resultB = document.querySelectorAll('#first');
+  const resultB = fixture.querySelectorAll('.first');
   assert.strictEqual(resultB.length, 1, 'after append');
 });
 
 QUnit.test('example [second]', function (assert) {
   const fixture = document.querySelector('#qunit-fixture');
 
   // The previous elements were automatically detached.
-  const result = document.querySelectorAll('#first');
+  const result = fixture.querySelectorAll('.first');
   assert.strictEqual(result.length, 0, 'initial is back to zero');
 });
 ```
 
 
-### qunit-fixture HTML
+### default in HTML
 
 ```html
 <body>
@@ -148,7 +148,7 @@ QUnit.test('findText [em]', function (assert) {
 });
 ```
 
-### dynamic qunit-fixture
+### default in JavaScript
 
 ```html
 <body>

diff --git a/test/config-fixture-null.html b/test/config-fixture-null.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>config-fixture-null</title>
+  <link rel="stylesheet" href="../src/qunit.css">
+  <script src="../qunit/qunit.js"></script>
+  <script src="config-fixture-null.js"></script>
+</head>
+<body>
+  <div id="qunit"></div>
+  <div id="qunit-fixture">test markup</div>
+</body>
+</html>
diff --git a/test/config-fixture-null.js b/test/config-fixture-null.js
@@ -0,0 +1,19 @@
+/* eslint-env browser */
+QUnit.module('QUnit.config [fixture=null]');
+
+QUnit.config.reorder = false;
+QUnit.config.fixture = null;
+
+QUnit.test('make dirty', function (assert) {
+  assert.strictEqual(QUnit.config.fixture, null);
+
+  var fixture = document.querySelector('#qunit-fixture');
+  fixture.textContent = 'dirty';
+});
+
+QUnit.test('find dirty', function (assert) {
+  assert.strictEqual(QUnit.config.fixture, null);
+
+  var fixture = document.querySelector('#qunit-fixture');
+  assert.strictEqual(fixture.textContent, 'dirty');
+});
diff --git a/test/config-fixture-string.html b/test/config-fixture-string.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>config-fixture-string</title>
+  <link rel="stylesheet" href="../src/qunit.css">
+  <script src="../qunit/qunit.js"></script>
+  <script src="config-fixture-string.js"></script>
+</head>
+<body>
+  <div id="qunit"></div>
+  <div id="qunit-fixture">test markup</div>
+</body>
+</html>
diff --git a/test/config-fixture-string.js b/test/config-fixture-string.js
@@ -0,0 +1,20 @@
+/* eslint-env browser */
+QUnit.module('QUnit.config [fixture=string]');
+
+QUnit.config.reorder = false;
+QUnit.config.fixture = '<p>Hi <strong>there</strong>, stranger!</p>';
+
+QUnit.test('example [first]', function (assert) {
+  var fixture = document.querySelector('#qunit-fixture');
+
+  assert.strictEqual(fixture.textContent, 'Hi there, stranger!');
+
+  fixture.querySelector('strong').remove();
+
+  assert.strictEqual(fixture.textContent, 'Hi , stranger!');
+});
+
+QUnit.test('example [second]', function (assert) {
+  var fixture = document.querySelector('#qunit-fixture');
+  assert.strictEqual(fixture.textContent, 'Hi there, stranger!');
+});