Add popup options toc and scroll tests +

Refactor tests

test/advanced-defaults.js

@@ -4,6 +4,10 @@ var t = require('assert')
 
 module.exports = ({advanced}) => {
 
+  before(async () => {
+    await advanced.bringToFront()
+  })
+
   it('access to file URLs', async () => {
     t.strictEqual(
       await advanced.evaluate(() =>

test/advanced-origins.js

@@ -2,17 +2,18 @@
 var t = require('assert')
 
 
-module.exports = ({browser, advanced}) => {
+module.exports = ({browser, content, advanced}) => {
+
+  before(async () => {
+    // add origin
+    await advanced.bringToFront()
+    await advanced.select('.m-select', 'http')
+    await advanced.type('[type=text]', 'localhost:3000')
+    await advanced.click('button')
+    await advanced.waitFor(() => document.querySelectorAll('.m-list li').length === 2)
+  })
 
   describe('add origin', () => {
-    before(async () => {
-      // add
-      await advanced.select('.m-select', 'http')
-      await advanced.type('[type=text]', 'localhost:3000')
-      await advanced.click('button')
-      await advanced.waitFor(() => document.querySelectorAll('.m-list li').length === 2)
-    })
-
     it('localhost:3000', async () => {
       t.equal(
         await advanced.evaluate(() =>
@@ -39,14 +40,8 @@ module.exports = ({browser, advanced}) => {
   })
 
   describe('disabled header detection + disabled path matching', () => {
-    var content
-
     before(async () => {
-      // add origin
-      await advanced.select('.m-select', 'http')
-      await advanced.type('[type=text]', 'localhost:3000')
-      await advanced.click('button')
-      await advanced.waitFor(() => document.querySelectorAll('.m-list li').length === 2)
+      await advanced.bringToFront()
 
       // disable header detection
       if (await advanced.evaluate(() => state.header)) {
@@ -55,19 +50,21 @@ module.exports = ({browser, advanced}) => {
 
       // disable path matching
       await advanced.evaluate(() => {
-        document.querySelector('.m-list li:nth-of-type(2) input').value = ''
         document.querySelector('.m-list li:nth-of-type(2) input')
-          .dispatchEvent(new Event('keyup', {bubbles: true}))
+          .value = ''
+        document.querySelector('.m-list li:nth-of-type(2) input')
+          .dispatchEvent(new Event('keyup'))
       })
+      // there is debounce timeout of 750ms in the options UI
+      await advanced.waitFor(800)
+    })
 
+    it('text/markdown', async () => {
       // go to page serving markdown as text/markdown
-      content = await browser.newPage()
       await content.goto('http://localhost:3000/correct-content-type')
       await content.bringToFront()
       await content.waitFor('pre')
-    })
 
-    it('text/markdown', async () => {
       t.equal(
         await content.evaluate(() =>
           document.querySelector('pre').innerText
@@ -76,22 +73,11 @@ module.exports = ({browser, advanced}) => {
         'markdown should not be rendered'
       )
     })
-
-    after(async () => {
-      await content.close()
-    })
   })
 
   describe('enabled header detection + disabled path matching', () => {
-    var content
-
     before(async () => {
-      // add origin
       await advanced.bringToFront()
-      await advanced.select('.m-select', 'http')
-      await advanced.type('[type=text]', 'localhost:3000')
-      await advanced.click('button')
-      await advanced.waitFor(() => document.querySelectorAll('.m-list li').length === 2)
 
       // enable header detection
       if (!await advanced.evaluate(() => state.header)) {
@@ -100,20 +86,21 @@ module.exports = ({browser, advanced}) => {
 
       // disable path matching
       await advanced.evaluate(() => {
-        document.querySelector('.m-list li:nth-of-type(2) input').value = ''
         document.querySelector('.m-list li:nth-of-type(2) input')
-          .dispatchEvent(new Event('keyup', {bubbles: true}))
+          .value = ''
+        document.querySelector('.m-list li:nth-of-type(2) input')
+          .dispatchEvent(new Event('keyup'))
       })
-
-      // open up new page
-      content = await browser.newPage()
-      await content.bringToFront()
+      // there is debounce timeout of 750ms in the options UI
+      await advanced.waitFor(800)
     })
 
     it('text/markdown', async () => {
       // go to page serving markdown as text/markdown
       await content.goto('http://localhost:3000/correct-content-type')
+      await content.bringToFront()
       await content.waitFor('#_html')
+
       t.equal(
         await content.evaluate(() =>
           document.querySelector('#_html p strong').innerText
@@ -126,7 +113,9 @@ module.exports = ({browser, advanced}) => {
     it('text/x-markdown', async () => {
       // go to page serving markdown as text/x-markdown
       await content.goto('http://localhost:3000/correct-content-type-variation')
+      await content.bringToFront()
       await content.waitFor('#_html')
+
       t.equal(
         await content.evaluate(() =>
           document.querySelector('#_html p strong').innerText
@@ -135,21 +124,11 @@ module.exports = ({browser, advanced}) => {
         'markdown should be rendered'
       )
     })
-
-    after(async () => {
-      await content.close()
-    })
   })
 
   describe('enabled header detection + enabled path matching', () => {
-    var content
-
     before(async () => {
-      // add origin
-      await advanced.select('.m-select', 'http')
-      await advanced.type('[type=text]', 'localhost:3000')
-      await advanced.click('button')
-      await advanced.waitFor(() => document.querySelectorAll('.m-list li').length === 2)
+      await advanced.bringToFront()
 
       // enable header detection
       if (!await advanced.evaluate(() => state.header)) {
@@ -158,22 +137,21 @@ module.exports = ({browser, advanced}) => {
 
       // enable path matching
       await advanced.evaluate(() => {
-        document.querySelector('.m-list li:nth-of-type(2) input').value = 'wrong-content-type'
         document.querySelector('.m-list li:nth-of-type(2) input')
-          .dispatchEvent(new Event('keyup', {bubbles: true}))
+          .value = 'wrong-content-type'
+        document.querySelector('.m-list li:nth-of-type(2) input')
+          .dispatchEvent(new Event('keyup'))
       })
-      // TODO: figure out why is this needed
-      await advanced.waitFor(600)
-
-      // open up new page
-      content = await browser.newPage()
-      await content.bringToFront()
+      // there is debounce timeout of 750ms in the options UI
+      await advanced.waitFor(800)
     })
 
     it('text/plain', async () => {
       // go to page serving markdown as text/plain
       await content.goto('http://localhost:3000/wrong-content-type')
+      await content.bringToFront()
       await content.waitFor('#_html')
+
       t.equal(
         await content.evaluate(() =>
           document.querySelector('#_html p strong').innerText
@@ -182,10 +160,6 @@ module.exports = ({browser, advanced}) => {
         'markdown should be rendered'
       )
     })
-
-    after(async () => {
-      await content.close()
-    })
   })
 
 }

test/index.js

@@ -39,6 +39,8 @@ describe('markdown-viewer', () => {
     var advanced = await browser.newPage()
     await advanced.goto(`chrome-extension://${id}/content/options.html`)
 
+    var content = await browser.newPage()
+
     await new Promise((resolve, reject) => {
       server = http.createServer()
       server.on('request', (req, res) => {
@@ -62,13 +64,28 @@ describe('markdown-viewer', () => {
           res.setHeader('Content-Type', 'text/x-markdown')
           res.end('- [ ] task')
         }
+        else if (/content-options-toc/.test(req.url)) {
+          res.setHeader('Content-Type', 'text/markdown')
+          res.end('# h1\n# h2\n# h3')
+        }
+        else if (/content-options-scroll/.test(req.url)) {
+          res.setHeader('Content-Type', 'text/markdown')
+          res.end([
+            '# h1',
+            Array(500).fill('lorem ipsum').join(' '),
+            '## h2',
+            Array(500).fill('lorem ipsum').join(' '),
+            '### h3',
+            Array(500).fill('lorem ipsum').join(' '),
+          ].join('\n\n'))
+        }
       })
       server.listen(3000, resolve)
     })
 
     tests.forEach((file) => {
       describe(file, () => {
-        require(`./${file}.js`)({puppeteer, browser, popup, advanced})
+        require(`./${file}.js`)({puppeteer, browser, popup, advanced, content})
       })
     })
 

test/popup-defaults.js

@@ -4,6 +4,10 @@ var t = require('assert')
 
 module.exports = ({popup}) => {
 
+  before(async () => {
+    await popup.bringToFront()
+  })
+
   it('button - raw', async () => {
     t.strictEqual(
       await popup.evaluate(() =>
@@ -22,7 +26,7 @@ module.exports = ({popup}) => {
   })
 
   it('tabs', async () => {
-    t.strictEqual(
+    t.equal(
       await popup.evaluate(() =>
         state.tab
       ),
@@ -49,7 +53,7 @@ module.exports = ({popup}) => {
   })
 
   it('tab - theme', async () => {
-    t.strictEqual(
+    t.equal(
       await popup.evaluate(() =>
         state.theme
       ),
@@ -92,7 +96,8 @@ module.exports = ({popup}) => {
 
   it('tab - compiler', async () => {
     await popup.click('.m-tabs a:nth-of-type(2)')
-    t.strictEqual(
+
+    t.equal(
       await popup.evaluate(() =>
         state.tab
       ),
@@ -157,7 +162,8 @@ module.exports = ({popup}) => {
 
   it('tab - content', async () => {
     await popup.click('.m-tabs a:nth-of-type(3)')
-    t.strictEqual(
+
+    t.equal(
       await popup.evaluate(() =>
         state.tab
       ),

test/popup-options.js

@@ -2,37 +2,132 @@
 var t = require('assert')
 
 
-module.exports = ({browser, popup, advanced}) => {
-
-  describe('set theme', () => {
-    var content
+module.exports = ({browser, popup, advanced, content}) => {
+
+  before(async () => {
+    // add origin
+    await advanced.bringToFront()
+    await advanced.select('.m-select', 'http')
+    await advanced.type('[type=text]', 'localhost:3000')
+    await advanced.click('button')
+    await advanced.waitFor(() => document.querySelectorAll('.m-list li').length === 2)
+
+    // enable header detection
+    if (!await advanced.evaluate(() => state.header)) {
+      await advanced.click('.m-switch')
+    }
+  })
 
+  describe('button - raw/markdown', () => {
     before(async () => {
-      // add origin
-      await advanced.bringToFront()
-      await advanced.select('.m-select', 'http')
-      await advanced.type('[type=text]', 'localhost:3000')
-      await advanced.click('button')
-      await advanced.waitFor(() => document.querySelectorAll('.m-list li').length === 2)
-
-      // enable header detection
-      if (!await advanced.evaluate(() => state.header)) {
-        await advanced.click('.m-switch')
-      }
+      // popup
+      await popup.bringToFront()
+      // defaults button
+      await popup.click('button:nth-of-type(2)')
+    })
 
-      // select github-dark theme
+    it('render markdown as html', async () => {
+      // go to page serving markdown as text/markdown
+      await content.goto('http://localhost:3000/correct-content-type')
+      await content.bringToFront()
+      await content.waitFor('#_html')
+
+      t.equal(
+        await content.evaluate(() =>
+          document.querySelector('#_html p strong').innerText
+        ),
+        'bold',
+        'markdown should be rendered'
+      )
+
+      // popup
       await popup.bringToFront()
+
+      t.strictEqual(
+        await popup.evaluate(() =>
+          state.raw
+        ),
+        false,
+        'state.raw should equal false'
+      )
+      t.equal(
+        await popup.evaluate(() =>
+          document.querySelector('.m-button:first-child').innerText.toLowerCase()
+        ),
+        'markdown',
+        'button text should equal markdown'
+      )
+    })
+
+    it('display raw markdown', async () => {
+      // raw button
+      await content.bringToFront()
+      await popup.click('button:nth-of-type(1)')
+      // content auto reloads
+      await content.waitFor('#_markdown')
+
+      t.equal(
+        await content.evaluate(() =>
+          document.querySelector('#_markdown').innerText
+        ),
+        '**bold**',
+        'markdown should not be rendered'
+      )
+
+      // popup
+      await popup.bringToFront()
+
+      t.strictEqual(
+        await popup.evaluate(() =>
+          state.raw
+        ),
+        true,
+        'state.raw should equal true'
+      )
+      t.equal(
+        await popup.evaluate(() =>
+          document.querySelector('.m-button:first-child').innerText.toLowerCase()
+        ),
+        'html',
+        'button text should equal html'
+      )
+    })
+  })
+
+  describe('set theme', () => {
+    before(async () => {
+      // popup
+      await popup.bringToFront()
+      // defaults button
+      await popup.click('button:nth-of-type(2)')
+      // theme tab
       await popup.click('.m-tabs a:nth-of-type(1)')
-      await popup.select('.m-panel:nth-of-type(1) select', 'github-dark')
+    })
 
+    it('github theme should be set by default', async () => {
       // go to page serving markdown as text/markdown
-      content = await browser.newPage()
       await content.goto('http://localhost:3000/correct-content-type')
       await content.bringToFront()
       await content.waitFor('#_theme')
+
+      t.strictEqual(
+        await content.evaluate(() =>
+          /github\.css$/.test(
+            document.querySelector('#_theme').getAttribute('href')
+          )
+        ),
+        true,
+        'github theme styles should be included'
+      )
     })
 
-    it('content', async () => {
+    it('set github-dark theme', async () => {
+      // select github-dark theme
+      await content.bringToFront()
+      await popup.select('.m-panel:nth-of-type(1) select', 'github-dark')
+      // content auto reloads
+      await content.waitFor('#_theme')
+
       t.strictEqual(
         await content.evaluate(() =>
           /github-dark\.css$/.test(
@@ -44,8 +139,8 @@ module.exports = ({browser, popup, advanced}) => {
       )
     })
 
-    it('popup', async () => {
-      // reaload popup
+    it('popup should preserve state', async () => {
+      // reload popup
       await popup.bringToFront()
       await popup.reload()
       await popup.waitFor('#popup')
@@ -67,43 +162,24 @@ module.exports = ({browser, popup, advanced}) => {
         'dom select option should be github-dark'
       )
     })
-
-    after(async () => {
-      await content.close()
-    })
   })
 
   describe('set compiler options - marked', () => {
-    var content
-
     before(async () => {
-      // add origin
-      await advanced.bringToFront()
-      await advanced.select('.m-select', 'http')
-      await advanced.type('[type=text]', 'localhost:3000')
-      await advanced.click('button')
-      await advanced.waitFor(() => document.querySelectorAll('.m-list li').length === 2)
-
-      // enable header detection
-      if (!await advanced.evaluate(() => state.header)) {
-        await advanced.click('.m-switch')
-      }
-
       // popup
       await popup.bringToFront()
       // defaults button
       await popup.click('button:nth-of-type(2)')
       // compiler tab
       await popup.click('.m-tabs a:nth-of-type(2)')
+    })
 
+    it('gfm is enabled by default', async () => {
       // go to page serving markdown as text/markdown
-      content = await browser.newPage()
       await content.goto('http://localhost:3000/compiler-options-marked')
       await content.bringToFront()
       await content.waitFor('#_html')
-    })
 
-    it('gfm is enabled by default', async () => {
       t.equal(
         await content.evaluate(() =>
           document.querySelector('#_html p del').innerText
@@ -115,13 +191,11 @@ module.exports = ({browser, popup, advanced}) => {
 
     it('gfm is disabled', async () => {
       // disable gfm
-      await popup.bringToFront()
+      await content.bringToFront()
       // gfm switch
       await popup.click('.m-panel:nth-of-type(2) .m-switch:nth-of-type(2)')
-
-      // reload content
-      await content.bringToFront()
-      await content.reload()
+      // content auto reloads
+      await content.waitFor(100)
       await content.waitFor('#_html')
 
       t.equal(
@@ -133,12 +207,21 @@ module.exports = ({browser, popup, advanced}) => {
       )
     })
 
-    it('popup state', async () => {
+    it('popup should preserve state', async () => {
       // reload popup
       await popup.bringToFront()
       await popup.reload()
       await popup.waitFor('#popup')
 
+      t.equal(
+        await popup.evaluate(() =>
+          document.querySelectorAll('.m-panel:nth-of-type(2) .m-select option')[
+            document.querySelector('.m-panel:nth-of-type(2) .m-select').selectedIndex
+          ].innerText
+        ),
+        'marked',
+        'dom select option should be marked'
+      )
       t.strictEqual(
         await popup.evaluate(() =>
           state.options.gfm
@@ -155,43 +238,24 @@ module.exports = ({browser, popup, advanced}) => {
         'dom gfm checkbox should be disabled'
       )
     })
-
-    after(async () => {
-      await content.close()
-    })
   })
 
   describe('set compiler options - remark', () => {
-    var content
-
     before(async () => {
-      // add origin
-      await advanced.bringToFront()
-      await advanced.select('.m-select', 'http')
-      await advanced.type('[type=text]', 'localhost:3000')
-      await advanced.click('button')
-      await advanced.waitFor(() => document.querySelectorAll('.m-list li').length === 2)
-
-      // enable header detection
-      if (!await advanced.evaluate(() => state.header)) {
-        await advanced.click('.m-switch')
-      }
-
       // popup
       await popup.bringToFront()
       // defaults button
       await popup.click('button:nth-of-type(2)')
       // compiler tab
       await popup.click('.m-tabs a:nth-of-type(2)')
+    })
 
+    it('marked should not render gfm task lists', async () => {
       // go to page serving markdown as text/markdown
-      content = await browser.newPage()
       await content.goto('http://localhost:3000/compiler-options-remark')
       await content.bringToFront()
       await content.waitFor('#_html')
-    })
 
-    it('marked should not render gfm task lists', async () => {
       t.equal(
         await content.evaluate(() =>
           document.querySelector('#_html ul li').innerText
@@ -203,12 +267,10 @@ module.exports = ({browser, popup, advanced}) => {
 
     it('remark should render gfm task lists by default', async () => {
       // select remark compiler
-      await popup.bringToFront()
-      await popup.select('.m-panel:nth-of-type(2) select', 'remark')
-
-      // reload content page
       await content.bringToFront()
-      await content.reload()
+      await popup.select('.m-panel:nth-of-type(2) select', 'remark')
+      // content auto reloads
+      await content.waitFor(100)
       await content.waitFor('#_html')
 
       t.equal(
@@ -236,14 +298,17 @@ module.exports = ({browser, popup, advanced}) => {
     })
 
     it('remark disable gfm', async () => {
-      // disable gfm
+      // redraw popup
       await popup.bringToFront()
-      // gfm switch
-      await popup.click('.m-panel:nth-of-type(2) .m-switch:nth-of-type(4)')
+      await popup.reload()
+      await popup.waitFor('#popup')
 
-      // reload content
+      // disable gfm
       await content.bringToFront()
-      await content.reload()
+      // gfm switch
+      await popup.click('.m-panel:nth-of-type(2) .m-switch:nth-of-type(4)')
+      // content auto reloads
+      await content.waitFor(100)
       await content.waitFor('#_html')
 
       t.equal(
@@ -255,8 +320,206 @@ module.exports = ({browser, popup, advanced}) => {
       )
     })
 
-    after(async () => {
-      await content.close()
+    it('popup should preserve state', async () => {
+      // reload popup
+      await popup.bringToFront()
+      await popup.reload()
+      await popup.waitFor('#popup')
+      await popup.waitFor(100)
+
+      t.equal(
+        await popup.evaluate(() =>
+          document.querySelectorAll('.m-panel:nth-of-type(2) .m-select option')[
+            document.querySelector('.m-panel:nth-of-type(2) .m-select').selectedIndex
+          ].innerText
+        ),
+        'remark',
+        'dom select option should be remark'
+      )
+      t.strictEqual(
+        await popup.evaluate(() =>
+          state.options.gfm
+        ),
+        false,
+        'state.options.gfm should be false'
+      )
+      t.strictEqual(
+        await popup.evaluate(() =>
+          document.querySelector('.m-panel:nth-of-type(2) .m-switch:nth-of-type(4)')
+            .classList.contains('is-checked')
+        ),
+        false,
+        'dom gfm checkbox should be disabled'
+      )
+    })
+  })
+
+  describe('set content options - toc', () => {
+    before(async () => {
+      // popup
+      await popup.bringToFront()
+      // defaults button
+      await popup.click('button:nth-of-type(2)')
+      // content tab
+      await popup.click('.m-tabs a:nth-of-type(3)')
+    })
+
+    it('toc is disabled by default', async () => {
+      // go to page serving markdown as text/markdown
+      await content.goto('http://localhost:3000/content-options-toc')
+      await content.bringToFront()
+      await content.waitFor('#_html')
+
+      t.strictEqual(
+        await content.evaluate(() =>
+          document.querySelector('#_toc')
+        ),
+        null,
+        'toc should be disabled'
+      )
+    })
+
+    it('enable toc', async () => {
+      // enable toc
+      await content.bringToFront()
+      // toc switch
+      await popup.click('.m-panel:nth-of-type(3) .m-switch:nth-of-type(3)')
+      // content auto reloads
+      await content.waitFor('#_toc')
+
+      t.deepStrictEqual(
+        await content.evaluate(() =>
+          Array.from(document.querySelectorAll('#_toc #_ul a'))
+            .map((a) => ({href: a.getAttribute('href'), text: a.innerText}))
+        ),
+        [
+          {href: '#h1', text: 'h1'},
+          {href: '#h2', text: 'h2'},
+          {href: '#h3', text: 'h3'},
+        ],
+        'toc should be rendered'
+      )
+    })
+  })
+
+  describe('set content options - scroll', () => {
+    before(async () => {
+      // popup
+      await popup.bringToFront()
+      // defaults button
+      await popup.click('button:nth-of-type(2)')
+      // content tab
+      await popup.click('.m-tabs a:nth-of-type(3)')
+    })
+
+    it('preserve scroll position by default', async () => {
+      // go to page serving markdown as text/markdown
+      await content.goto('http://localhost:3000/content-options-scroll')
+      await content.bringToFront()
+      await content.waitFor('#_html')
+
+      // scroll down 200px
+      await content.evaluate(() =>
+        document.querySelector('body').scrollTop = 200
+      )
+      await content.waitFor(150)
+
+      // reload page
+      await content.reload()
+      await content.waitFor('#_html')
+      await content.waitFor(150)
+
+      t.strictEqual(
+        await content.evaluate(() =>
+          document.querySelector('body').scrollTop,
+        ),
+        200,
+        'scrollTop should be 200px'
+      )
+    })
+
+    it('scroll to top', async () => {
+      // disable scroll option
+      await content.bringToFront()
+      // scroll switch
+      await popup.click('.m-panel:nth-of-type(3) .m-switch:nth-of-type(2)')
+      // content auto reloads
+      await content.waitFor(100)
+      await content.waitFor('#_html')
+
+      t.strictEqual(
+        await content.evaluate(() =>
+          document.querySelector('body').scrollTop,
+        ),
+        0,
+        'scrollTop should be 0px'
+      )
+
+      // scroll down 200px
+      await content.evaluate(() =>
+        document.querySelector('body').scrollTop = 200
+      )
+      await content.waitFor(150)
+
+      // reload page
+      await content.reload()
+      await content.waitFor('#_html')
+      await content.waitFor(150)
+
+      t.strictEqual(
+        await content.evaluate(() =>
+          document.querySelector('body').scrollTop,
+        ),
+        0,
+        'scrollTop should be 0px'
+      )
+    })
+
+    it('scroll to anchor', async () => {
+      // click on header link
+      await content.click('h2 a')
+      await content.waitFor(150)
+
+      t.strictEqual(
+        await content.evaluate(() =>
+          document.querySelector('body').scrollTop + 2
+        ),
+        await content.evaluate(() =>
+          document.querySelector('h2').offsetTop
+        ),
+        'page should be scrolled to the anchor'
+      )
+
+      // scroll down 200px
+      await content.evaluate(() =>
+        document.querySelector('body').scrollTop += 200
+      )
+      await content.waitFor(150)
+
+      t.strictEqual(
+        await content.evaluate(() =>
+          document.querySelector('body').scrollTop + 2
+        ),
+        await content.evaluate(() =>
+          document.querySelector('h2').offsetTop + 200
+        ),
+        'page should be scrolled below the anchor'
+      )
+
+      // reload page
+      await content.reload()
+      await content.waitFor('#_html')
+      await content.waitFor(150)
+
+      t.strictEqual(
+        await content.evaluate(() =>
+          document.querySelector('body').scrollTop
+        ),
+        await content.evaluate(() =>
+          document.querySelector('h2').offsetTop
+        ),
+        'page should be scrolled back to the anchor'
+      )
     })
   })