
describe('InteractiveTimeSeriesChart', () => {

    it('should change the unlocked indicator to the point closest to the last mouse move position', () => {
        const context = new BrowsingContext();
        return ChartTest.importChartScripts(context).then(() => {
            const chart = ChartTest.createInteractiveChartWithSampleCluster(context);

            chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
            chart.fetchMeasurementSets();
            ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);

            const indicatorChangeCalls = [];
            chart.listenToAction('indicatorChange', (...args) => indicatorChangeCalls.push(args));

            let selectionChangeCount = 0;
            chart.listenToAction('selectionChange', () => selectionChangeCount++);

            let canvas;
            return waitForComponentsToRender(context).then(() => {
                expect(chart.currentSelection()).to.be(null);
                expect(chart.currentIndicator()).to.be(null);
                expect(indicatorChangeCalls).to.be.eql([]);

                canvas = chart.content().querySelector('canvas');
                const rect = canvas.getBoundingClientRect();
                canvas.dispatchEvent(new MouseEvent('mousemove', {target: canvas, clientX: rect.right - 1, clientY: rect.top + rect.height / 2, composed: true, bubbles: true}));

                CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                return waitForComponentsToRender(context);
            }).then(() => {
                expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);

                expect(chart.currentSelection()).to.be(null);
                const indicator = chart.currentIndicator();
                expect(indicator).to.not.be(null);
                const currentView = chart.sampledTimeSeriesData('current');
                const lastPoint = currentView.lastPoint();
                expect(indicator.view).to.be(currentView);
                expect(indicator.point).to.be(lastPoint);
                expect(indicator.isLocked).to.be(false);
                expect(indicatorChangeCalls).to.be.eql([[lastPoint.id, false]]);

                expect(selectionChangeCount).to.be(0);
            });
        });
    });

    it('should lock the indicator to the point closest to the clicked position', () => {
        const context = new BrowsingContext();
        return ChartTest.importChartScripts(context).then(() => {
            const chart = ChartTest.createInteractiveChartWithSampleCluster(context);

            chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
            chart.fetchMeasurementSets();
            ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);

            const indicatorChangeCalls = [];
            chart.listenToAction('indicatorChange', (...args) => indicatorChangeCalls.push(args));

            let selectionChangeCount = 0;
            chart.listenToAction('selectionChange', () => selectionChangeCount++);

            let canvas;
            return waitForComponentsToRender(context).then(() => {
                expect(chart.currentSelection()).to.be(null);
                expect(chart.currentIndicator()).to.be(null);
                expect(indicatorChangeCalls).to.be.eql([]);
                canvas = chart.content().querySelector('canvas');
                const rect = canvas.getBoundingClientRect();

                const x = rect.right - 1;
                const y = rect.top + rect.height / 2;
                canvas.dispatchEvent(new MouseEvent('mousemove', {target: canvas, clientX: x, clientY: y, composed: true, bubbles: true}));
                canvas.dispatchEvent(new MouseEvent('mousedown', {target: canvas, clientX: x, clientY: y, composed: true, bubbles: true}));
                canvas.dispatchEvent(new MouseEvent('mousemove', {target: canvas, clientX: x - 0.5, clientY: y + 0.5, composed: true, bubbles: true}));
                canvas.dispatchEvent(new MouseEvent('mouseup', {target: canvas, clientX: x - 0.5, clientY: y + 0.5, composed: true, bubbles: true}));
                canvas.dispatchEvent(new MouseEvent('click', {target: canvas, clientX: x - 0.5, clientY: y + 0.5, composed: true, bubbles: true}));

                CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                return waitForComponentsToRender(context);
            }).then(() => {
                expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);

                const currentView = chart.sampledTimeSeriesData('current');
                const lastPoint = currentView.lastPoint();
                expect(chart.currentSelection()).to.be(null);
                const indicator = chart.currentIndicator();
                expect(indicator.view).to.be(currentView);
                expect(indicator.point).to.be(lastPoint);
                expect(indicator.isLocked).to.be(true);
                expect(indicatorChangeCalls).to.be.eql([[lastPoint.id, false], [lastPoint.id, true]]);

                expect(selectionChangeCount).to.be(0);
            });
        });
    });

    it('should clear the unlocked indicator when the mouse cursor exits the chart', () => {
        const context = new BrowsingContext();
        return ChartTest.importChartScripts(context).then(() => {
            const chart = ChartTest.createInteractiveChartWithSampleCluster(context);

            chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
            chart.fetchMeasurementSets();
            ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);

            const indicatorChangeCalls = [];
            chart.listenToAction('indicatorChange', (...args) => indicatorChangeCalls.push(args));

            let selectionChangeCount = 0;
            chart.listenToAction('selectionChange', () => selectionChangeCount++);

            let canvas;
            let rect;
            let lastPoint;
            return waitForComponentsToRender(context).then(() => {
                expect(chart.currentSelection()).to.be(null);
                expect(chart.currentIndicator()).to.be(null);
                expect(indicatorChangeCalls).to.be.eql([]);

                canvas = chart.content().querySelector('canvas');
                rect = canvas.getBoundingClientRect();
                canvas.dispatchEvent(new MouseEvent('mousemove', {target: canvas, clientX: rect.right - 1, clientY: rect.top + rect.height / 2, composed: true, bubbles: true}));

                CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                return waitForComponentsToRender(context);
            }).then(() => {
                expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);

                const currentView = chart.sampledTimeSeriesData('current');
                lastPoint = currentView.lastPoint();
                expect(chart.currentSelection()).to.be(null);
                const indicator = chart.currentIndicator();
                expect(indicator.view).to.be(currentView);
                expect(indicator.point).to.be(lastPoint);
                expect(indicator.isLocked).to.be(false);
                expect(indicatorChangeCalls).to.be.eql([[lastPoint.id, false]]);

                canvas.parentNode.dispatchEvent(new MouseEvent('mousemove', {target: canvas, clientX: rect.right + 50, clientY: rect.bottom + 50, composed: true, bubbles: true}));
                canvas.dispatchEvent(new MouseEvent('mouseleave', {target: canvas, clientX: rect.right + 50, clientY: rect.bottom + 50, composed: true, bubbles: true}));

                CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                return waitForComponentsToRender(context);
            }).then(() => {
                expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);

                expect(chart.currentSelection()).to.be(null);
                expect(chart.currentIndicator()).to.be(null);
                expect(indicatorChangeCalls).to.be.eql([[lastPoint.id, false], [null, false]]);

                expect(selectionChangeCount).to.be(0);
            });
        });
    });

    it('should not clear the locked indicator when the mouse cursor exits the chart', () => {
        const context = new BrowsingContext();
        return ChartTest.importChartScripts(context).then(() => {
            const chart = ChartTest.createInteractiveChartWithSampleCluster(context);

            chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
            chart.fetchMeasurementSets();
            ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);

            const indicatorChangeCalls = [];
            chart.listenToAction('indicatorChange', (...args) => indicatorChangeCalls.push(args));

            let selectionChangeCount = 0;
            chart.listenToAction('selectionChange', () => selectionChangeCount++);

            let canvas;
            let rect;
            let currentView;
            let lastPoint;
            return waitForComponentsToRender(context).then(() => {
                expect(chart.currentSelection()).to.be(null);
                expect(chart.currentIndicator()).to.be(null);
                expect(indicatorChangeCalls).to.be.eql([]);

                canvas = chart.content().querySelector('canvas');
                rect = canvas.getBoundingClientRect();
                canvas.dispatchEvent(new MouseEvent('click', {target: canvas, clientX: rect.right - 1, clientY: rect.top + rect.height / 2, composed: true, bubbles: true}));

                CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                return waitForComponentsToRender(context);
            }).then(() => {
                expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);

                currentView = chart.sampledTimeSeriesData('current');
                lastPoint = currentView.lastPoint();
                expect(chart.currentSelection()).to.be(null);
                const indicator = chart.currentIndicator();
                expect(indicator.view).to.be(currentView);
                expect(indicator.point).to.be(lastPoint);
                expect(indicator.isLocked).to.be(true);
                expect(indicatorChangeCalls).to.be.eql([[lastPoint.id, true]]);

                canvas.parentNode.dispatchEvent(new MouseEvent('mousemove', {target: canvas, clientX: rect.right + 50, clientY: rect.bottom + 50, composed: true, bubbles: true}));
                canvas.dispatchEvent(new MouseEvent('mouseleave', {target: canvas, clientX: rect.right + 50, clientY: rect.bottom + 50, composed: true, bubbles: true}));

                CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                return waitForComponentsToRender(context);
            }).then(() => {
                expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(false);

                expect(chart.currentSelection()).to.be(null);
                const indicator = chart.currentIndicator();
                expect(indicator.view).to.be(currentView);
                expect(indicator.point).to.be(lastPoint);
                expect(indicator.isLocked).to.be(true);
                expect(indicatorChangeCalls).to.be.eql([[lastPoint.id, true]]);

                expect(selectionChangeCount).to.be(0);
            })
        });
    });

    it('should clear the locked indicator when clicked', () => {
        const context = new BrowsingContext();
        return ChartTest.importChartScripts(context).then(() => {
            const chart = ChartTest.createInteractiveChartWithSampleCluster(context);

            chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
            chart.fetchMeasurementSets();
            ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);

            const indicatorChangeCalls = [];
            chart.listenToAction('indicatorChange', (...args) => indicatorChangeCalls.push(args));

            let selectionChangeCount = 0;
            chart.listenToAction('selectionChange', () => selectionChangeCount++);

            let canvas;
            let rect;
            let y;
            let currentView;
            let lastPoint;
            return waitForComponentsToRender(context).then(() => {
                expect(chart.currentSelection()).to.be(null);
                expect(chart.currentIndicator()).to.be(null);
                expect(indicatorChangeCalls).to.be.eql([]);

                canvas = chart.content().querySelector('canvas');
                rect = canvas.getBoundingClientRect();
                y = rect.top + rect.height / 2;
                canvas.dispatchEvent(new MouseEvent('click', {target: canvas, clientX: rect.right - 1, clientY: y, composed: true, bubbles: true}));

                CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                return waitForComponentsToRender(context);
            }).then(() => {
                expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);

                currentView = chart.sampledTimeSeriesData('current');
                lastPoint = currentView.lastPoint();
                expect(chart.currentSelection()).to.be(null);
                const indicator = chart.currentIndicator();
                expect(indicator.view).to.be(currentView);
                expect(indicator.point).to.be(lastPoint);
                expect(indicator.isLocked).to.be(true);
                expect(indicatorChangeCalls).to.be.eql([[lastPoint.id, true]]);

                canvas.dispatchEvent(new MouseEvent('click', {target: canvas, clientX: rect.left + 1, clientY: y, composed: true, bubbles: true}));

                CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                return waitForComponentsToRender(context);
            }).then(() => {
                expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);

                expect(chart.currentSelection()).to.be(null);
                const firstPoint = currentView.firstPoint();
                const indicator = chart.currentIndicator();
                expect(indicator.view).to.be(currentView);
                expect(indicator.point).to.be(firstPoint);
                expect(indicator.isLocked).to.be(false);
                expect(indicatorChangeCalls).to.be.eql([[lastPoint.id, true], [firstPoint.id, false]]);

                expect(selectionChangeCount).to.be(0);
            })
        });
    });

    it('should change the selection when the mouse cursor is dragged', () => {
        const context = new BrowsingContext();
        return ChartTest.importChartScripts(context).then(() => {
            const chart = ChartTest.createInteractiveChartWithSampleCluster(context, null, {selection: {lineStyle: '#f93', lineWidth: 2, fillStyle: '#ccc'}});

            chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
            chart.fetchMeasurementSets();
            ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);

            const indicatorChangeCalls = [];
            chart.listenToAction('indicatorChange', (...args) => indicatorChangeCalls.push(args));

            const selectionChangeCalls = [];
            chart.listenToAction('selectionChange', (...args) => selectionChangeCalls.push(args));

            const zoomButton = chart.content('zoom-button');

            let canvas;
            let rect;
            let y;
            let currentView;
            let firstPoint;
            let oldRange;
            let newRange;
            return waitForComponentsToRender(context).then(() => {
                expect(chart.currentSelection()).to.be(null);
                expect(chart.currentIndicator()).to.be(null);
                expect(selectionChangeCalls).to.be.eql([]);

                canvas = chart.content().querySelector('canvas');
                rect = canvas.getBoundingClientRect();
                y = rect.top + rect.height / 2;
                canvas.dispatchEvent(new MouseEvent('mousemove', {target: canvas, clientX: rect.left + 5, clientY: y, composed: true, bubbles: true}));

                CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                return waitForComponentsToRender(context);
            }).then(() => {
                expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);

                currentView = chart.sampledTimeSeriesData('current');
                firstPoint = currentView.firstPoint();
                expect(chart.currentSelection()).to.be(null);
                let indicator = chart.currentIndicator();
                expect(indicator.view).to.be(currentView);
                expect(indicator.point).to.be(firstPoint);
                expect(indicator.isLocked).to.be(false);
                expect(indicatorChangeCalls).to.be.eql([[firstPoint.id, false]]);
                expect(zoomButton.offsetHeight).to.be(0);

                canvas.dispatchEvent(new MouseEvent('mousedown', {target: canvas, clientX: rect.left + 5, clientY: y, composed: true, bubbles: true}));

                CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                return waitForComponentsToRender(context);
            }).then(() => {
                expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(false);

                expect(chart.currentSelection()).to.be(null);
                let indicator = chart.currentIndicator();
                expect(indicator.view).to.be(currentView);
                expect(indicator.point).to.be(firstPoint);
                expect(indicator.isLocked).to.be(false);
                expect(selectionChangeCalls).to.be.eql([]);
                expect(indicatorChangeCalls).to.be.eql([[firstPoint.id, false]]);
                expect(zoomButton.offsetHeight).to.be(0);

                canvas.dispatchEvent(new MouseEvent('mousemove', {target: canvas, clientX: rect.left + 15, clientY: y + 5, composed: true, bubbles: true}));

                CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                return waitForComponentsToRender(context);
            }).then(() => {
                expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);

                expect(chart.currentSelection()).to.not.be(null);
                expect(chart.currentIndicator()).to.be(null);
                expect(selectionChangeCalls.length).to.be(1);
                oldRange = selectionChangeCalls[0][0];
                expect(oldRange).to.be.eql(chart.currentSelection());
                expect(selectionChangeCalls[0][1]).to.be(false);
                expect(indicatorChangeCalls).to.be.eql([[firstPoint.id, false], [null, false]]);
                expect(zoomButton.offsetHeight).to.be(0);

                canvas.dispatchEvent(new MouseEvent('mousemove', {target: canvas, clientX: rect.right - 5, clientY: y + 5, composed: true, bubbles: true}));

                CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                return waitForComponentsToRender(context);
            }).then(() => {
                expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);

                expect(chart.currentSelection()).to.not.be(null);
                expect(chart.currentIndicator()).to.be(null);
                expect(selectionChangeCalls.length).to.be(2);
                newRange = selectionChangeCalls[1][0];
                expect(newRange).to.be.eql(chart.currentSelection());
                expect(newRange[0]).to.be(oldRange[0]);
                expect(newRange[1]).to.be.greaterThan(oldRange[1]);
                expect(selectionChangeCalls[1][1]).to.be(false);
                expect(zoomButton.offsetHeight).to.be(0);

                canvas.dispatchEvent(new MouseEvent('mouseup', {target: canvas, clientX: rect.right - 5, clientY: y + 5, composed: true, bubbles: true}));
                canvas.dispatchEvent(new MouseEvent('click', {target: canvas, clientX: rect.right - 5, clientY: y + 5, composed: true, bubbles: true}));

                CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                return waitForComponentsToRender(context);
            }).then(() => {
                expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);

                expect(chart.currentSelection()).to.be.eql(newRange);
                expect(chart.currentIndicator()).to.be(null);
                expect(selectionChangeCalls.length).to.be(3);
                expect(selectionChangeCalls[2][0]).to.be.eql(newRange);
                expect(selectionChangeCalls[2][1]).to.be(true);
                expect(zoomButton.offsetHeight).to.be(0);
            });
        });
    });

    it('should dispatch the "zoom" action when the zoom button is clicked', () => {
        const context = new BrowsingContext();
        return ChartTest.importChartScripts(context).then(() => {
            const chart = ChartTest.createInteractiveChartWithSampleCluster(context, null, {selection: {lineStyle: '#f93', lineWidth: 2, fillStyle: '#ccc'}, zoomButton: true});

            chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
            chart.fetchMeasurementSets();
            ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);

            const zoomCalls = [];
            chart.listenToAction('zoom', (...args) => zoomCalls.push(args));
            const zoomButton = chart.content('zoom-button');

            let selection;
            let canvas;
            return waitForComponentsToRender(context).then(() => {
                expect(zoomButton.offsetHeight).to.be(0);
                canvas = chart.content().querySelector('canvas');
                const rect = canvas.getBoundingClientRect();
                const y = rect.top + rect.height / 2;
                canvas.dispatchEvent(new MouseEvent('mousemove', {target: canvas, clientX: rect.left + 5, clientY: y, composed: true, bubbles: true}));
                canvas.dispatchEvent(new MouseEvent('mousedown', {target: canvas, clientX: rect.left + 5, clientY: y, composed: true, bubbles: true}));
                canvas.dispatchEvent(new MouseEvent('mousemove', {target: canvas, clientX: rect.right - 10, clientY: y + 5, composed: true, bubbles: true}));
                canvas.dispatchEvent(new MouseEvent('mouseup', {target: canvas, clientX: rect.right - 10, clientY: y + 5, composed: true, bubbles: true}));

                CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                return waitForComponentsToRender(context);
            }).then(() => {
                expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);

                selection = chart.currentSelection();
                expect(selection).to.not.be(null);
                expect(chart.currentIndicator()).to.be(null);
                expect(zoomButton.offsetHeight).to.not.be(0);
                expect(zoomCalls).to.be.eql([]);
                zoomButton.click();
            }).then(() => {
                expect(zoomCalls).to.be.eql([[selection]]);

                CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                return waitForComponentsToRender(context);
            }).then(() => {
                expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(false);
            });
        });
    });

    it('should clear the selection when clicked', () => {
        const context = new BrowsingContext();
        return ChartTest.importChartScripts(context).then(() => {
            const chart = ChartTest.createInteractiveChartWithSampleCluster(context, null, {selection: {lineStyle: '#f93', lineWidth: 2, fillStyle: '#ccc'}});

            chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
            chart.fetchMeasurementSets();
            ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);

            let canvas;
            let rect;
            let y;
            return waitForComponentsToRender(context).then(() => {
                canvas = chart.content().querySelector('canvas');
                rect = canvas.getBoundingClientRect();
                y = rect.top + rect.height / 2;
                canvas.dispatchEvent(new MouseEvent('mousemove', {target: canvas, clientX: rect.left + 5, clientY: y, composed: true, bubbles: true}));
                canvas.dispatchEvent(new MouseEvent('mousedown', {target: canvas, clientX: rect.left + 5, clientY: y, composed: true, bubbles: true}));
                canvas.dispatchEvent(new MouseEvent('mousemove', {target: canvas, clientX: rect.right - 10, clientY: y + 5, composed: true, bubbles: true}));
                canvas.dispatchEvent(new MouseEvent('mouseup', {target: canvas, clientX: rect.right - 10, clientY: y + 5, composed: true, bubbles: true}));
                canvas.dispatchEvent(new MouseEvent('click', {target: canvas, clientX: rect.right - 10, clientY: y + 5, composed: true, bubbles: true}));

                CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                return waitForComponentsToRender(context);
            }).then(() => {
                expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);

                expect(chart.currentSelection()).to.not.be(null);
                expect(chart.currentIndicator()).to.be(null);

                canvas.dispatchEvent(new MouseEvent('click', {target: canvas, clientX: rect.left + 1, clientY: y + 5, composed: true, bubbles: true}));

                CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                return waitForComponentsToRender(context);
            }).then(() => {
                expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);

                expect(chart.currentSelection()).to.be(null);
                const currentView = chart.sampledTimeSeriesData('current');
                const indicator = chart.currentIndicator();
                expect(indicator.view).to.be(currentView);
                expect(indicator.point).to.be(currentView.firstPoint());
                expect(indicator.isLocked).to.be(false);
            });
        });
    });

    it('should dispatch "annotationClick" action when an annotation is clicked', () => {
        const context = new BrowsingContext();
        return ChartTest.importChartScripts(context).then(() => {
            const chart = ChartTest.createInteractiveChartWithSampleCluster(context, null,
                {annotations: { textStyle: '#000', textBackground: '#fff', minWidth: 3, barHeight: 10, barSpacing: 1, fillStyle: '#ccc'}});

            chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
            chart.fetchMeasurementSets();
            ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);

            const diff = ChartTest.sampleCluster.endTime - ChartTest.sampleCluster.startTime;
            const annotations = [{
                startTime: ChartTest.sampleCluster.startTime + diff / 2,
                endTime: ChartTest.sampleCluster.endTime - diff / 4,
                label: 'hello, world',
            }];
            chart.setAnnotations(annotations);

            const annotationClickCalls = [];
            chart.listenToAction('annotationClick', (...args) => annotationClickCalls.push(args));

            let canvas;
            let init;
            return waitForComponentsToRender(context).then(() => {
                expect(annotationClickCalls).to.be.eql([]);
                expect(chart.content('annotation-label').textContent).to.not.contain('hello, world');

                canvas = chart.content().querySelector('canvas');
                const rect = canvas.getBoundingClientRect();
                init = {target: canvas, clientX: rect.right - rect.width / 4, clientY: rect.bottom - 5, composed: true, bubbles: true};
                canvas.dispatchEvent(new MouseEvent('mousemove', init));

                CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                return waitForComponentsToRender(context);
            }).then(() => {
                expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);

                expect(chart.content('annotation-label').textContent).to.contain('hello, world');
                expect(annotationClickCalls).to.be.eql([]);
                canvas.dispatchEvent(new MouseEvent('mousedown', init));
                canvas.dispatchEvent(new MouseEvent('mouseup', init));
                canvas.dispatchEvent(new MouseEvent('click', init));

                expect(annotationClickCalls).to.be.eql([[annotations[0]]]);

                CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                return waitForComponentsToRender(context);
            }).then(() => {
                expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(false);
            });
        });
    });

    describe('render', () => {
        it('should render the unlocked indicator when options.indicator is specified', () => {
            const context = new BrowsingContext();
            return ChartTest.importChartScripts(context).then(() => {
                const chartWithoutIndicator = ChartTest.createInteractiveChartWithSampleCluster(context);
                const chartWithIndicator = ChartTest.createInteractiveChartWithSampleCluster(context, null,
                    {indicator: {lineStyle: 'rgb(51, 204, 255)', lineWidth: 2, pointRadius: 2}, interactiveChart: true});
                const indicatorColor = {r: 51, g: 204, b: 255};

                chartWithoutIndicator.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
                chartWithoutIndicator.fetchMeasurementSets();
                ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);

                chartWithIndicator.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
                chartWithIndicator.fetchMeasurementSets();

                let canvasWithoutIndicator;
                let canvasWithIndicator;
                return waitForComponentsToRender(context).then(() => {
                    canvasWithoutIndicator = chartWithoutIndicator.content().querySelector('canvas');
                    canvasWithIndicator = chartWithIndicator.content().querySelector('canvas');

                    const rect = canvasWithIndicator.getBoundingClientRect();
                    const x = rect.right - 1;
                    const y = rect.top + rect.height / 2;
                    canvasWithIndicator.dispatchEvent(new MouseEvent('mousemove', {target: canvasWithIndicator, clientX: x, clientY: y, composed: true, bubbles: true}));

                    CanvasTest.fillCanvasBeforeRedrawCheck(canvasWithIndicator);
                    return waitForComponentsToRender(context);
                }).then(() => {
                    expect(CanvasTest.hasCanvasBeenRedrawn(canvasWithIndicator)).to.be(true);

                    const indicator = chartWithIndicator.currentIndicator();
                    const currentView = chartWithIndicator.sampledTimeSeriesData('current');
                    expect(indicator.view).to.be(currentView);
                    expect(indicator.point).to.be(currentView.lastPoint());
                    expect(indicator.isLocked).to.be(false);

                    CanvasTest.expectCanvasesMismatch(canvasWithoutIndicator, canvasWithIndicator);
                    expect(CanvasTest.canvasContainsColor(canvasWithoutIndicator, indicatorColor)).to.be(false);
                    expect(CanvasTest.canvasContainsColor(canvasWithIndicator, indicatorColor)).to.be(true);
                });
            });
        });

        it('should render the locked indicator differently from the unlocked indicator when options.lockedIndicator is specified', () => {
            const context = new BrowsingContext();
            return ChartTest.importChartScripts(context).then(() => {
                const chartOptions = {
                    indicator: {lineStyle: 'rgb(51, 204, 255)', lineWidth: 2, pointRadius: 3},
                    lockedIndicator: {lineStyle: 'rgb(51, 102, 204)', fillStyle: 'rgb(250, 250, 250)', lineWidth: 2, pointRadius: 3}
                };
                const unlockedColor = {r: 51, g: 204, b: 255};
                const lockedColor = {r: 51, g: 102, b: 204};
                const lockedFillColor = {r: 250, g: 250, b: 250};
                const chartWithUnlockedIndicator = ChartTest.createInteractiveChartWithSampleCluster(context, null, chartOptions);
                const chartWithLockedIndicator = ChartTest.createInteractiveChartWithSampleCluster(context, null, chartOptions);

                chartWithUnlockedIndicator.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
                chartWithUnlockedIndicator.fetchMeasurementSets();
                ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);

                chartWithLockedIndicator.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
                chartWithLockedIndicator.fetchMeasurementSets();

                let canvasWithUnlockedIndicator;
                let canvasWithLockedIndicator;
                return waitForComponentsToRender(context).then(() => {
                    canvasWithUnlockedIndicator = chartWithUnlockedIndicator.content().querySelector('canvas');
                    canvasWithLockedIndicator = chartWithLockedIndicator.content().querySelector('canvas');

                    const rect = canvasWithUnlockedIndicator.getBoundingClientRect();
                    const x = rect.right - 1;
                    const y = rect.top + rect.height / 2;
                    canvasWithUnlockedIndicator.dispatchEvent(new MouseEvent('mousemove', {target: canvasWithUnlockedIndicator, clientX: x, clientY: y, composed: true, bubbles: true}));
                    canvasWithLockedIndicator.dispatchEvent(new MouseEvent('click', {target: canvasWithLockedIndicator, clientX: x, clientY: y, composed: true, bubbles: true}));

                    CanvasTest.fillCanvasBeforeRedrawCheck(canvasWithUnlockedIndicator);
                    CanvasTest.fillCanvasBeforeRedrawCheck(canvasWithLockedIndicator);
                    return waitForComponentsToRender(context);
                }).then(() => {
                    expect(CanvasTest.hasCanvasBeenRedrawn(canvasWithUnlockedIndicator)).to.be(true);
                    expect(CanvasTest.hasCanvasBeenRedrawn(canvasWithLockedIndicator)).to.be(true);

                    let indicator = chartWithUnlockedIndicator.currentIndicator();
                    let currentView = chartWithUnlockedIndicator.sampledTimeSeriesData('current');
                    expect(indicator.view).to.be(currentView);
                    expect(indicator.point).to.be(currentView.lastPoint());
                    expect(indicator.isLocked).to.be(false);

                    indicator = chartWithLockedIndicator.currentIndicator();
                    currentView = chartWithLockedIndicator.sampledTimeSeriesData('current');
                    expect(indicator.view).to.be(currentView);
                    expect(indicator.point).to.be(currentView.lastPoint());
                    expect(indicator.isLocked).to.be(true);

                    CanvasTest.expectCanvasesMismatch(canvasWithUnlockedIndicator, canvasWithLockedIndicator);
                    expect(CanvasTest.canvasContainsColor(canvasWithUnlockedIndicator, unlockedColor)).to.be(true);
                    expect(CanvasTest.canvasContainsColor(canvasWithUnlockedIndicator, lockedFillColor)).to.be(false);
                    expect(CanvasTest.canvasContainsColor(canvasWithLockedIndicator, lockedColor)).to.be(true);
                    expect(CanvasTest.canvasContainsColor(canvasWithLockedIndicator, lockedFillColor)).to.be(true);
                });
            });
        });
    });

    describe('moveLockedIndicatorWithNotification', () => {
        it('should move the locked indicator to the right when forward boolean is true', () => {
            const context = new BrowsingContext();
            return ChartTest.importChartScripts(context).then(() => {
                const chart = ChartTest.createInteractiveChartWithSampleCluster(context);

                chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
                chart.fetchMeasurementSets();
                let indicatorChangeCount = 0;
                chart.listenToAction('indicatorChange', () => indicatorChangeCount++);
                ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);

                let canvas;
                return waitForComponentsToRender(context).then(() => {
                    expect(indicatorChangeCount).to.be(0);

                    canvas = chart.content().querySelector('canvas');

                    const rect = canvas.getBoundingClientRect();
                    const x = rect.left + 1;
                    const y = rect.top + rect.height / 2;
                    canvas.dispatchEvent(new MouseEvent('click', {target: canvas, clientX: x, clientY: y, composed: true, bubbles: true}));

                    CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                    return waitForComponentsToRender(context);
                }).then(() => {
                    expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
                    expect(indicatorChangeCount).to.be(1);

                    let indicator = chart.currentIndicator();
                    let currentView = chart.sampledTimeSeriesData('current');
                    expect(indicator.view).to.be(currentView);
                    expect(indicator.point).to.be(currentView.firstPoint());
                    expect(indicator.isLocked).to.be(true);

                    chart.moveLockedIndicatorWithNotification(true);

                    CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                    return waitForComponentsToRender(context);
                }).then(() => {
                    expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
                    expect(indicatorChangeCount).to.be(2);

                    let indicator = chart.currentIndicator();
                    let currentView = chart.sampledTimeSeriesData('current');
                    expect(indicator.view).to.be(currentView);
                    expect(indicator.point).to.not.be(currentView.firstPoint());
                    expect(indicator.point).to.be(currentView.nextPoint(currentView.firstPoint()));
                    expect(currentView.previousPoint(indicator.point)).to.be(currentView.firstPoint());
                    expect(indicator.isLocked).to.be(true);
                    expect(indicatorChangeCount).to.be(2);
                });
            });
        });

        it('should move the locked indicator to the left when forward boolean is false', () => {
            const context = new BrowsingContext();
            return ChartTest.importChartScripts(context).then(() => {
                const chart = ChartTest.createInteractiveChartWithSampleCluster(context);

                chart.setDomain(ChartTest.sampleCluster.startTime, ChartTest.sampleCluster.endTime);
                chart.fetchMeasurementSets();
                let indicatorChangeCount = 0;
                chart.listenToAction('indicatorChange', () => indicatorChangeCount++);
                ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);

                let canvas;
                return waitForComponentsToRender(context).then(() => {
                    expect(indicatorChangeCount).to.be(0);

                    canvas = chart.content().querySelector('canvas');

                    const rect = canvas.getBoundingClientRect();
                    const x = rect.right - 1;
                    const y = rect.top + rect.height / 2;
                    canvas.dispatchEvent(new MouseEvent('click', {target: canvas, clientX: x, clientY: y, composed: true, bubbles: true}));

                    CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                    return waitForComponentsToRender(context);
                }).then(() => {
                    expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
                    expect(indicatorChangeCount).to.be(1);

                    let indicator = chart.currentIndicator();
                    let currentView = chart.sampledTimeSeriesData('current');
                    expect(indicator.view).to.be(currentView);
                    expect(indicator.point).to.be(currentView.lastPoint());
                    expect(indicator.isLocked).to.be(true);

                    chart.moveLockedIndicatorWithNotification(false);

                    CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                    return waitForComponentsToRender(context);
                }).then(() => {
                    expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
                    expect(indicatorChangeCount).to.be(2);

                    let indicator = chart.currentIndicator();
                    let currentView = chart.sampledTimeSeriesData('current');
                    expect(indicator.view).to.be(currentView);
                    expect(indicator.point).to.not.be(currentView.firstPoint());
                    expect(indicator.point).to.be(currentView.previousPoint(currentView.lastPoint()));
                    expect(currentView.nextPoint(indicator.point)).to.be(currentView.lastPoint());
                    expect(indicator.isLocked).to.be(true);
                    expect(indicatorChangeCount).to.be(2);
                });
            });
        });

        it('should not move the locked indicator when there are no points within the domain', () => {
            const context = new BrowsingContext();
            return ChartTest.importChartScripts(context).then(() => {
                const chart = ChartTest.createInteractiveChartWithSampleCluster(context);

                // The domain inclues points 2, 3
                chart.setDomain(posixTime('2016-01-05T20:00:00Z'), posixTime('2016-01-06T00:00:00Z'));
                chart.fetchMeasurementSets();
                let indicatorChangeCount = 0;
                chart.listenToAction('indicatorChange', () => indicatorChangeCount++);
                ChartTest.respondWithSampleCluster(context.symbols.MockRemoteAPI.requests[0]);

                let canvas;
                let currentView;
                return waitForComponentsToRender(context).then(() => {
                    expect(indicatorChangeCount).to.be(0);

                    canvas = chart.content().querySelector('canvas');

                    const rect = canvas.getBoundingClientRect();
                    const x = rect.right - 1;
                    const y = rect.top + rect.height / 2;
                    canvas.dispatchEvent(new MouseEvent('click', {target: canvas, clientX: x, clientY: y, composed: true, bubbles: true}));

                    CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                    return waitForComponentsToRender(context);
                }).then(() => {
                    expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);
                    expect(indicatorChangeCount).to.be(1);

                    currentView = chart.sampledTimeSeriesData('current');
                    expect(currentView.length()).to.be(4); // points 0 and 4 are added to draw lines extending beyond the domain.
                    expect([...currentView].map((point) => point.id)).to.be.eql([1000, 1002, 1003, 1004]);

                    const indicator = chart.currentIndicator();
                    expect(indicator.view).to.be(currentView);
                    expect(indicator.point.id).to.be(1003);
                    expect(indicator.isLocked).to.be(true);

                    chart.moveLockedIndicatorWithNotification(true);

                    CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                    return waitForComponentsToRender(context);
                }).then(() => {
                    expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(false);

                    expect(indicatorChangeCount).to.be(1);
                    const indicator = chart.currentIndicator();
                    expect(indicator.view).to.be(currentView);
                    expect(indicator.point.id).to.be(1003);
                    expect(indicator.isLocked).to.be(true);

                    chart.moveLockedIndicatorWithNotification(false);

                    CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                    return waitForComponentsToRender(context);
                }).then(() => {
                    expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(true);

                    expect(indicatorChangeCount).to.be(2);
                    const indicator = chart.currentIndicator();
                    expect(indicator.view).to.be(currentView);
                    expect(indicator.point.id).to.be(1002);
                    expect(indicator.isLocked).to.be(true);

                    chart.moveLockedIndicatorWithNotification(false);

                    CanvasTest.fillCanvasBeforeRedrawCheck(canvas);
                    return waitForComponentsToRender(context);
                }).then(() => {
                    expect(CanvasTest.hasCanvasBeenRedrawn(canvas)).to.be(false);

                    expect(indicatorChangeCount).to.be(2);
                    const indicator = chart.currentIndicator();
                    expect(indicator.view).to.be(currentView);
                    expect(indicator.point.id).to.be(1002);
                    expect(indicator.isLocked).to.be(true);
                });
            });
        });

    });
});