markdown-viewer/test/popup-options.js

var t = require('assert')
var defaults = require('./utils/defaults')


module.exports = ({popup, advanced, content}) => {

  before(async () => {
    await defaults({popup, advanced, content})
  })

  describe('button - raw/markdown', () => {
    before(async () => {
      // popup
      await popup.bringToFront()
      // defaults button
      await popup.click('button:nth-of-type(2)')
    })

    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.waitForTimeout(300)

      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 popup.bringToFront()
      await popup.click('button:nth-of-type(1)')
      // content auto reloads, but there is no way to have both tabs active
      await content.bringToFront()
      await content.reload()

      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)')
    })

    it('github theme should be set by default', async () => {
      // go to page serving markdown as text/markdown
      await content.goto('http://localhost:3000/correct-content-type')
      await content.bringToFront()
      await content.waitForTimeout(300)

      t.strictEqual(
        await content.evaluate(() =>
          /github\.css$/.test(
            document.querySelector('#_theme').getAttribute('href')
          )
        ),
        true,
        'github theme styles should be included'
      )
    })

    it('set github-dark theme', async () => {
      // select github-dark theme
      await popup.bringToFront()
      await popup.select('.m-panel:nth-of-type(1) select', 'github-dark')
      // content auto reloads, but there is no way to have both tabs active
      await content.bringToFront()
      await content.reload()

      t.strictEqual(
        await content.evaluate(() =>
          /github-dark\.css$/.test(
            document.querySelector('#_theme').getAttribute('href')
          )
        ),
        true,
        'github-dark theme styles should be included'
      )
    })

    it('popup should preserve state', async () => {
      // reload popup
      await popup.bringToFront()
      await popup.reload()
      await popup.waitForTimeout(300)

      t.equal(
        await popup.evaluate(() =>
          state.theme
        ),
        'github-dark',
        'state.theme should equal github-dark'
      )
      t.equal(
        await popup.evaluate(() =>
          document.querySelectorAll('.m-panel:nth-of-type(1) select option')[
            document.querySelector('.m-panel:nth-of-type(1) select').selectedIndex
          ].innerText
        ),
        'github-dark',
        'dom select option should be github-dark'
      )
    })
  })

  describe('set compiler options - marked', () => {
    before(async () => {
      // 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
      await content.goto('http://localhost:3000/compiler-options-marked')
      await content.bringToFront()
      await content.waitForTimeout(300)

      t.equal(
        await content.evaluate(() =>
          document.querySelector('#_html p del').innerText
        ),
        'strikethrough',
        'gfm should be rendered'
      )
    })

    it('gfm is disabled', async () => {
      // disable gfm
      await popup.bringToFront()
      // gfm switch
      await popup.click('.m-panel:nth-of-type(2) .m-switch:nth-of-type(2)')
      // content auto reloads, but there is no way to have both tabs active
      await content.bringToFront()
      await content.reload()
      await content.waitForTimeout(300)

      t.equal(
        await content.evaluate(() =>
          document.querySelector('#_html p').innerText
        ),
        '~~strikethrough~~',
        'gfm should not be rendered'
      )
    })

    it('popup should preserve state', async () => {
      // reload popup
      await popup.bringToFront()
      await popup.reload()
      await popup.waitForTimeout(300)

      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
        ),
        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(2)').classList.contains('is-checked')
        ),
        false,
        'dom gfm checkbox should be disabled'
      )
    })
  })

  describe('set compiler options - remark', () => {
    before(async () => {
      // 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 render gfm task lists by default', async () => {
      // go to page serving markdown as text/markdown
      await content.goto('http://localhost:3000/compiler-options-remark')
      await content.bringToFront()
      await content.waitForTimeout(300)

      t.equal(
        await content.evaluate(() =>
          document.querySelector('#_html ul li').getAttribute('class')
        ),
        null,
        'no class on dom li'
      )
      t.strictEqual(
        await content.evaluate(() =>
          document.querySelector('#_html ul li [type=checkbox]').hasAttribute('disabled')
        ),
        true,
        'dom li should contain checkbox in it'
      )
      t.equal(
        await content.evaluate(() =>
          document.querySelector('#_html ul li').innerText
        ),
        ' task',
        'dom li should contain the task text'
      )
    })

    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')
      // content auto reloads, but there is no way to have both tabs active
      await content.bringToFront()
      await content.reload()
      await content.waitForTimeout(300)

      t.equal(
        await content.evaluate(() =>
          document.querySelector('#_html ul li').getAttribute('class')
        ),
        'task-list-item',
        'dom li should have a class set'
      )
      t.strictEqual(
        await content.evaluate(() =>
          document.querySelector('#_html ul li [type=checkbox]').hasAttribute('disabled')
        ),
        true,
        'dom li should contain checkbox in it'
      )
      t.equal(
        await content.evaluate(() =>
          document.querySelector('#_html ul li').innerText
        ),
        ' task',
        'dom li should contain the task text'
      )
    })

    it('remark disable gfm', async () => {
      // redraw popup
      await popup.bringToFront()
      await popup.reload()
      await popup.waitForTimeout(300)

      // disable gfm - gfm switch
      await popup.click('.m-panel:nth-of-type(2) .m-switch[title~=GFM]')
      // content auto reloads, but there is no way to have both tabs active
      await content.bringToFront()
      await content.reload()
      await content.waitForTimeout(300)

      t.equal(
        await content.evaluate(() =>
          document.querySelector('#_html ul li').innerText
        ),
        '[ ] task',
        'gfm task lists should not be rendered'
      )
    })

    it('popup should preserve state', async () => {
      // reload popup
      await popup.bringToFront()
      await popup.reload()
      await popup.waitForTimeout(300)

      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[title~=GFM]').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.waitForTimeout(300)

      t.strictEqual(
        await content.evaluate(() =>
          document.querySelector('#_toc')
        ),
        null,
        'toc should be disabled'
      )
    })

    it('enable toc', async () => {
      // enable toc
      await popup.bringToFront()
      // toc switch
      await popup.click('.m-panel:nth-of-type(3) .m-switch:nth-of-type(3)')
      // content auto reloads, but there is no way to have both tabs active
      await content.bringToFront()
      await content.reload()
      await content.waitForTimeout(300)

      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.waitForTimeout(300)

      // scroll down 200px
      await content.evaluate(() =>
        document.querySelector('html').scrollTop = 200
      )
      await content.waitForTimeout(300)

      // reload page
      await content.reload()
      await content.waitForTimeout(300)

      t.strictEqual(
        await content.evaluate(() =>
          document.querySelector('html').scrollTop,
        ),
        200,
        'scrollTop should be 200px'
      )
    })

    it('scroll to top', async () => {
      // disable scroll option
      await popup.bringToFront()
      // scroll switch
      await popup.click('.m-panel:nth-of-type(3) .m-switch:nth-of-type(2)')
      // content auto reloads, but there is no way to have both tabs active
      await content.bringToFront()
      await content.reload()
      await content.waitForTimeout(300)

      t.strictEqual(
        await content.evaluate(() =>
          document.querySelector('html').scrollTop,
        ),
        0,
        'scrollTop should be 0px'
      )

      // scroll down 200px
      await content.evaluate(() =>
        document.querySelector('html').scrollTop = 200
      )
      await content.waitForTimeout(300)

      // reload page
      await content.reload()
      await content.waitForTimeout(300)

      t.strictEqual(
        await content.evaluate(() =>
          document.querySelector('html').scrollTop,
        ),
        0,
        'scrollTop should be 0px'
      )
    })

    it('scroll to anchor', async () => {
      // click on header link
      await content.click('h2 a')
      await content.waitForTimeout(300)

      t.strictEqual(
        await content.evaluate(() =>
          document.querySelector('html').scrollTop + 1
        ),
        await content.evaluate(() =>
          document.querySelector('h2').offsetTop
        ),
        'page should be scrolled to the anchor'
      )

      // scroll down 200px
      await content.evaluate(() =>
        document.querySelector('html').scrollTop += 200
      )
      await content.waitForTimeout(300)

      t.strictEqual(
        await content.evaluate(() =>
          document.querySelector('html').scrollTop + 1
        ),
        await content.evaluate(() =>
          document.querySelector('h2').offsetTop + 200
        ),
        'page should be scrolled below the anchor'
      )

      // reload page
      await content.reload()
      await content.waitForTimeout(300)

      t.strictEqual(
        await content.evaluate(() =>
          document.querySelector('html').scrollTop
        ),
        await content.evaluate(() =>
          document.querySelector('h2').offsetTop
        ),
        'page should be scrolled back to the anchor'
      )
    })
  })

  describe('set content options - autoreload', () => {
    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)')

      await content.goto('about:blank')
      await content.bringToFront()
      await content.waitForTimeout(300)

      // go to test page
      await content.goto('http://localhost:3000/popup-autoreload')
      await content.bringToFront()
      await content.waitForTimeout(300)

      // enable autoreload
      await popup.bringToFront()
      // autoreload switch
      await popup.click('.m-panel:nth-of-type(3) .m-switch:nth-of-type(5)')
      // content auto reloads, but there is no way to have both tabs active
      await content.bringToFront()
      await content.reload()
      await content.waitForTimeout(300)

      // TODO: wait for https://github.com/GoogleChrome/puppeteer/pull/2812
      // update autoreload interval
      // await content.evaluate(() => state.ms = 250)
    })

    it('test ajax autoreload with non UTF-8 encoding and inactive tab', async () => {
      t.equal(
        await content.evaluate(() =>
          document.querySelector('#_html p').innerText.trim()
        ),
        '你好',
        'first request'
      )
      // the initial interval is 1000
      await content.waitForTimeout(1300)

      t.equal(
        await content.evaluate(() =>
          document.querySelector('#_html p').innerText.trim()
        ),
        '你好',
        'second request - xhr body is UTF-8 - should not trigger reload'
      )
      // the initial interval is 1000
      await content.waitForTimeout(1300)

      t.equal(
        await content.evaluate(() =>
          document.querySelector('#_html p').innerText.trim()
        ),
        '你好你好',
        'third request - actual change'
      )

      // popup
      await popup.bringToFront()
      // the initial interval is 1000
      await content.waitForTimeout(1300)
      await content.bringToFront()
      t.equal(
        await content.evaluate(() =>
          document.querySelector('#_html p').innerText.trim()
        ),
        '你好你好你好',
        'fourth request - should reload inactive tab'
      )
    })
  })

}