import { d3, initChart } from './c3-helper'

describe('c3 chart', function() {
  'use strict'

  var chart

  var args: any = {
    svg: {
      classname: 'customclass'
    },
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25],
        ['data3', 150, 120, 110, 140, 115, 125]
      ]
    }
  }

  beforeEach(function(done) {
    chart = initChart(chart, args, done)
  })

  describe('init', function() {
    it('should be created', function() {
      var svg = d3.select('#chart svg')
      expect(svg).not.toBeNull()
    })

    it('should bind to window focus event', done => {
      const addEventListener = window.addEventListener
      window.addEventListener = (event, handler) => {
        if (event === 'focus') {
          setTimeout(() => {
            expect(handler).toBe(chart.internal.windowFocusHandler)
            window.addEventListener = addEventListener // restore the original
            done()
          }, 10)
        }
      }
      chart = initChart(chart, args, () => {})
    })

    describe('should set 3rd party property to Function', function() {
      beforeAll(function() {
        ;(Function.prototype as any).$extIsFunction = true
      })

      it('should be created even if 3rd party property has been set', function() {
        var svg = d3.select('#chart svg')
        expect(svg).not.toBeNull()
      })

      it('should be created with a custom class', function() {
        var svg = d3.select('#chart svg')
        expect(svg.attr('class')).not.toBeNull()
        expect(svg.attr('class')).toBe('customclass')
      })
    })
  })

  describe('size', function() {
    it('should have same width', function() {
      var svg = d3.select('#chart svg')
      expect(+svg.attr('width')).toBe(640)
    })

    it('should have same height', function() {
      var svg = d3.select('#chart svg')
      expect(+svg.attr('height')).toBe(480)
    })
  })

  describe('call resize and resized callbacks', function() {
    beforeAll(function() {
      args.bindto = '#chart'
      args.axis = {
        rotated: true
      }
      args.resize_var = false
      args.resized_var = false

      args.onresize = function() {
        args.resize_var = true
      }
      args.onresized = function() {
        args.resized_var = true
      }
    })

    it('arbitrary parameters should be false before resize', function() {
      expect(args.resize_var).toBe(false)
      expect(args.resized_var).toBe(false)
    })

    it('arbitrary parameters should be true after resize', function() {
      window.dispatchEvent(new Event('resize'))
      expect(args.resize_var).toBe(true)
      expect(args.resized_var).toBe(true)
    })
  })

  describe('bindto', function() {
    describe('selector', function() {
      beforeAll(function() {
        d3.select('#chart').html('')
        args.bindto = '#chart'
      })

      it('should be created', function() {
        var svg = d3.select('#chart svg')
        expect(svg.size()).toBe(1)
      })
    })

    describe('d3.selection object', function() {
      beforeAll(function() {
        d3.select('#chart').html('')
        args.bindto = d3.select('#chart')
      })
      it('should be created', function() {
        var svg = d3.select('#chart svg')
        expect(svg.size()).toBe(1)
      })
    })

    describe('null', function() {
      beforeAll(function() {
        d3.select('#chart').html('')
        args.bindto = null
      })

      it('should not be created', function() {
        var svg = d3.select('#chart svg')
        expect(svg.size()).toBe(0)
      })
    })

    describe('empty string', function() {
      beforeAll(function() {
        d3.select('#chart').html('')
        args.bindto = ''
      })

      it('should not be created', function() {
        var svg = d3.select('#chart svg')
        expect(svg.size()).toBe(0)
      })
    })
    describe('bind to selector with rotated axis', function() {
      beforeAll(function() {
        args.bindto = '#chart'
        args.axis = {
          rotated: true
        }
      })

      it('should be created', function() {
        var svg = d3.select('#chart svg')
        expect(svg.size()).toBe(1)
      })
    })
  })

  describe('empty data', function() {
    beforeAll(function() {
      args = {
        data: {
          columns: [['data1'], ['data2']]
        }
      }
    })

    it('should generate a chart', function() {
      var ticks = chart.internal.main.select('.c3-axis-x').selectAll('g.tick')
      expect(ticks.size()).toBe(0)
    })

    describe('more empty data', function() {
      beforeAll(function() {
        args = {
          data: {
            x: 'x',
            columns: [['x'], ['data1'], ['data2']]
          },
          axis: {
            x: {
              type: 'timeseries'
            }
          }
        }
      })

      it('should generate a chart', function() {
        var ticks = chart.internal.main.select('.c3-axis-x').selectAll('g.tick')
        expect(ticks.size()).toBe(0)
      })
    })
  })
})