From dc77c5257003a47aa0fe2dfb3a68cbccda07d885 Mon Sep 17 00:00:00 2001
From: Viktor Bergehall <viktorbergehall@gmail.com>
Date: Thu, 14 Oct 2021 09:21:22 +0200
Subject: [PATCH] Updated tests

---
 test/browser.js | 52 ++++++++++++++++++++++++++++++-------------------
 1 file changed, 32 insertions(+), 20 deletions(-)

diff --git a/test/browser.js b/test/browser.js
index 36fdcc2..8d1faff 100644
--- a/test/browser.js
+++ b/test/browser.js
@@ -25,18 +25,11 @@ test.beforeEach(t => {
   global.window = dom.window;
 })
 
-const createDomNode = (vendor, src, title, thumbnail) => {
+const createDomNode = (params = {}) => {
   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);
+  for (const [ key, value ] of Object.entries(params)) {
+    node.setAttribute(`data-${key}`, value)
   }
   document.body.appendChild(node);
   return node;
@@ -47,34 +40,38 @@ test('should expose lazyframe()', (t) => {
 });
 
 test('should initialize one node with a string selector', (t) => {
-  createDomNode('youtube', 'http://www.youtube.com/embed/iwGFalTRHDA/?rel=0') 
+  createDomNode({ vendor: 'youtube', src: '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') 
+  createDomNode({ vendor: 'youtube', src: 'http://www.youtube.com/embed/iwGFalTRHDA/?rel=0' });
+  createDomNode({ vendor: 'youtube', src: 'http://www.youtube.com/embed/iwGFalTRHDA/?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') 
+  const node = createDomNode({ vendor: 'youtube', src: 'http://www.youtube.com/embed/iwGFalTRHDA/?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')
+  createDomNode({ vendor: 'youtube', src: 'http://www.youtube.com/embed/iwGFalTRHDB/?rel=0' });
+  createDomNode({ vendor: 'youtube', src: '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') 
+  const node = createDomNode({ vendor: 'youtube', src: 'http://www.youtube.com/embed/iwGFalTRHDA/?rel=0' });
+
   window.lazyframe('.lazyframe');
   node.click();
   
@@ -83,8 +80,9 @@ test('should append an iframe on click', (t) => {
 
 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') 
+  const node1 = createDomNode({ vendor: 'youtube', src: 'http://www.youtube.com/embed/iwGFalTRHDA/?rel=0' });
+  const node2 = createDomNode({ vendor: 'youtube', src: 'http://www.youtube.com/embed/iwGFalTRHDA/?rel=0' });
+
   window.lazyframe('.lazyframe', {
     onAppend() {
       i++;
@@ -98,10 +96,24 @@ test('should call onAppend callback function', (t) => {
 
 test('should use data-title', (t) => {
   const title = 'custom title'
-  const node = createDomNode('youtube', 'http://www.youtube.com/embed/iwGFalTRHDB/?rel=0', title) 
+  const node = createDomNode({ vendor: 'youtube', src: 'http://www.youtube.com/embed/iwGFalTRHDA/?rel=0', title });
 
   window.lazyframe('.lazyframe');
 
   node.click()
   t.is(document.querySelector('.lazyframe__title').textContent, title)
+})
+
+test('should append optional query params from data-src', (t) => {
+  const query = 'rel=0&p=1'
+  const node = createDomNode({ vendor: 'youtube', src: 'http://www.youtube.com/embed/iwGFalTRHDA/?' + query });
+  
+  window.lazyframe('.lazyframe');
+
+  node.click()
+  const iframe = node.querySelector('iframe');
+  const src = iframe.getAttribute('src');
+  const [,iframQuery] = src.split('?autoplay=1&')
+
+  t.is(iframQuery, query);
 })
\ No newline at end of file