Merge pull request #52 from vb/feature/tests

Feature/tests
vb · Oct 13, 2021 · 42605e4 · 42605e4
2 parents 78b3ac8 + 0559611
commit 42605e4
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -40,7 +40,8 @@
   "scripts": {
     "build": "./node_modules/.bin/rollup -c",
     "dev": "./node_modules/.bin/rollup -c -w",
-    "test": "npm run build && ava"
+    "test": "npm run build && ava -s",
+    "test:watch": "npm run build && ava -s -w"
   },
   "files": [
     "dist",

diff --git a/src/lazyframe.js b/src/lazyframe.js
@@ -65,18 +65,12 @@ const Lazyframe = () => {
       for (let i = 0; i < selector.length; i++) {
         loop(selector[i]);
       }
-
     } else if (typeof elements.length === 'undefined'){
       loop(elements);
-
-    } else if (elements.length > 1) {
-
+    } else {
       for (let i = 0; i < elements.length; i++) {
         loop(elements[i]);
       }
-
-    } else {
-      loop(elements[0]);
     }
 
     if (settings.lazyload) {

diff --git a/test/browser.js b/test/browser.js
@@ -12,18 +12,96 @@ const script = new Script(
   readFileSync(path.join(__dirname, '..', 'dist', 'lazyframe.min.js'))
 );
 
-const dom = new JSDOM(``, {
-  url: 'http://localhost:3000/',
-  referrer: 'http://localhost:3000/',
-  contentType: 'text/html',
-  includeNodeLocations: true,
-  resources: 'usable',
-  runScripts: 'dangerously',
-  virtualConsole
-});
+test.beforeEach(t => {
+  const dom = new JSDOM(``, {
+    includeNodeLocations: true,
+    resources: 'usable',
+    runScripts: 'dangerously',
+    virtualConsole
+  });
+
+  dom.runVMScript(script);  
+  global.document = dom.window.document;
+  global.window = dom.window;
+})
 
-dom.runVMScript(script);
+const createDomNode = (vendor, src, title, thumbnail) => {
+  const node = document.createElement('div');
+  node.classList.add('lazyframe');
+  node.setAttribute('data-src', src)
+  if (vendor) {
+    node.setAttribute('data-vendor', vendor)
+  }
+  if (title) {
+    node.setAttribute('data-title', title);
+  }
+  if (thumbnail) {
+    node.setAttribute('data-thumbnail', thumbnail);
+  }
+  document.body.appendChild(node);
+  return node;
+}
 
 test('should expose lazyframe()', (t) => {
-  t.true(typeof dom.window.lazyframe === 'function');
+  t.true(typeof window.lazyframe === 'function');
 });
+
+test('should initialize one node with a string selector', (t) => {
+  createDomNode('youtube', 'http://www.youtube.com/embed/iwGFalTRHDA/?rel=0') 
+  window.lazyframe('.lazyframe');
+  t.is(document.querySelectorAll('.lazyframe--loaded').length, 1);
+})
+
+test('should initialize mulitple nodes with a string selector', (t) => {
+  createDomNode('youtube', 'http://www.youtube.com/embed/iwGFalTRHDB/?rel=0') 
+  createDomNode('youtube', 'http://www.youtube.com/embed/iwGFalTRHDC/?rel=0') 
+  window.lazyframe('.lazyframe');
+  t.is(document.querySelectorAll('.lazyframe--loaded').length, 2);
+})
+
+test('should initialize with a single node', (t) => {
+  const node = createDomNode('youtube', 'http://www.youtube.com/embed/iwGFalTRHDB/?rel=0') 
+  window.lazyframe(node);
+  t.is(document.querySelectorAll('.lazyframe--loaded').length, 1);
+})
+
+test('should initialize with a nodelist', (t) => {
+  createDomNode('youtube', 'http://www.youtube.com/embed/iwGFalTRHDB/?rel=0') 
+  createDomNode('youtube', 'http://www.youtube.com/embed/iwGFalTRHDC/?rel=0')
+  const nodes = document.querySelectorAll('.lazyframe')
+  window.lazyframe(nodes);
+  t.is(document.querySelectorAll('.lazyframe--loaded').length, 2);
+})
+
+test('should append an iframe on click', (t) => {
+  const node = createDomNode('youtube', 'http://www.youtube.com/embed/iwGFalTRHDB/?rel=0') 
+  window.lazyframe('.lazyframe');
+  node.click();
+
+  t.assert(node.querySelector('iframe'))
+})
+
+test('should call onAppend callback function', (t) => {
+  let i = 0;
+  const node1 = createDomNode('youtube', 'http://www.youtube.com/embed/iwGFalTRHDB/?rel=0') 
+  const node2 = createDomNode('youtube', 'http://www.youtube.com/embed/iwGFalTRHDB/?rel=0') 
+  window.lazyframe('.lazyframe', {
+    onAppend() {
+      i++;
+    }
+  });
+  node1.click();
+  node2.click();
+
+  t.is(i, 2)
+})
+
+test('should use data-title', (t) => {
+  const title = 'custom title'
+  const node = createDomNode('youtube', 'http://www.youtube.com/embed/iwGFalTRHDB/?rel=0', title) 
+
+  window.lazyframe('.lazyframe');
+
+  node.click()
+  t.is(document.querySelector('.lazyframe__title').textContent, title)
+})