/* Copyright (C) 2017 Canonical Ltd. */
'use strict';

const React = require('react');

const ReceiptPopup = require('./receipt-popup');
const Spinner = require('../../../spinner/spinner');
const Popup = require('../../../popup/popup');

const jsTestUtils = require('../../../../utils/component-test-utils');

describe('ReceiptPopup', function() {

  it('can display the loading spinner', function() {
    const renderer = jsTestUtils.shallowRender(
      <ReceiptPopup
        addNotification={sinon.stub()}
        chargeId="charge123"
        close={close}
        getReceipt={sinon.stub()} />, true);
    const output = renderer.getRenderOutput();
    const expected = (
      <Spinner />);
    expect(output.props.children).toEqualJSX(expected);
  });

  it('can display the receipt', function() {
    const close = sinon.stub();
    const getReceipt = sinon.stub().callsArgWith(1, null, '<html>...</html>');
    const renderer = jsTestUtils.shallowRender(
      <ReceiptPopup
        addNotification={sinon.stub()}
        chargeId="charge123"
        close={close}
        getReceipt={getReceipt} />, true);
    const output = renderer.getRenderOutput();
    const expected = (
      <Popup
        className="receipt-popup"
        close={close}
        type="wide">
        <div className="receipt-popup__container">
          <iframe height="100%"
            src="data:text/html;charset=utf-8,%3Chtml%3E...%3C%2Fhtml%3E"
            width="100%">
          </iframe>
        </div>
      </Popup>);
    expect(output).toEqualJSX(expected);
  });

  it('can handle errors when getting the receipt', function() {
    const addNotification = sinon.stub();
    const getReceipt = sinon.stub().callsArgWith(1, 'Uh oh!', null);
    jsTestUtils.shallowRender(
      <ReceiptPopup
        addNotification={addNotification}
        chargeId="charge123"
        close={sinon.stub()}
        getReceipt={getReceipt} />);
    assert.equal(addNotification.callCount, 1);
    assert.deepEqual(addNotification.args[0][0], {
      title: 'Could not load the receipt',
      message: 'Could not load the receipt: Uh oh!',
      level: 'error'
    });
  });

  it('can close the popup', function() {
    const close = sinon.stub();
    const renderer = jsTestUtils.shallowRender(
      <ReceiptPopup
        addNotification={sinon.stub()}
        chargeId="charge123"
        close={close}
        getReceipt={sinon.stub()} />, true);
    const output = renderer.getRenderOutput();
    output.props.close();
    assert.equal(close.callCount, 1);
  });

  it('can abort requests when unmounting', function() {
    const abort = sinon.stub();
    const getReceipt = sinon.stub().returns({abort: abort});
    const renderer = jsTestUtils.shallowRender(
      <ReceiptPopup
        addNotification={sinon.stub()}
        chargeId="charge123"
        close={sinon.stub()}
        getReceipt={getReceipt} />, true);
    renderer.unmount();
    assert.equal(abort.callCount, 1);
  });
});

@@ -79,16 +79,50 @@
 react');
+%0Aconst enzyme = require('enzyme');
 %0A%0Aconst 
@@ -168,323 +168,108 @@
 ');%0A
-const Spinner = require('../../../spinner/spinner');%0Aconst Popup = require('../../../popup/popup');%0A%0Aconst jsTestUtils = require('../../../../utils/component-test-utils');%0A%0Adescribe('ReceiptPopup', function() %7B%0A%0A  it('can display the loading spinner', function() %7B%0A    const renderer = jsTestUtils.shallowRender(%0A  
+%0Adescribe('ReceiptPopup', function() %7B%0A%0A  const renderComponent = (options = %7B%7D) =%3E enzyme.shallow(%0A
     
@@ -280,34 +280,32 @@
 eiptPopup%0A      
-  
 addNotification=
@@ -297,32 +297,59 @@
 ddNotification=%7B
+options.addNotification %7C%7C 
 sinon.stub()%7D%0A  
@@ -344,34 +344,32 @@
 n.stub()%7D%0A      
-  
 chargeId=%22charge
@@ -353,33 +353,54 @@
 %0A      chargeId=
-%22
+%7Boptions.chargeId %7C%7C '
 charge123%22%0A     
@@ -384,36 +384,35 @@
 Id %7C%7C 'charge123
-%22%0A  
+'%7D%0A
       close=%7Bclo
@@ -412,35 +412,79 @@
 se=%7B
-close%7D%0A        getReceipt=%7B
+options.close %7C%7C sinon.stub()%7D%0A      getReceipt=%7Boptions.getReceipt %7C%7C 
 sino
@@ -499,160 +499,157 @@
 %7D /%3E
-, true
+%0A  
 );%0A
+%0A
   
-  const output = renderer.getRenderOutput();%0A    const expected = (%0A      %3CSpinner /%3E);%0A    expect(output.props.children).toEqualJSX(expected
+it('can display the loading spinner', function() %7B%0A    const wrapper = renderComponent();%0A    assert.equal(wrapper.find('Spinner').length, 1
 );%0A 
@@ -703,40 +703,8 @@
 ) %7B%0A
-    const close = sinon.stub();%0A
     
@@ -792,488 +792,120 @@
 nst 
-renderer = jsTestUtils.shallowRender(%0A      %3CReceiptPopup%0A        addNotification=%7Bsinon.stub()%7D%0A        chargeId=%22charge123%22%0A        close=%7Bclose%7D%0A        getReceipt=%7BgetReceipt%7D /%3E, true);%0A    const output = renderer.getRenderOutput();%0A    const expected = (%0A      %3CPopup%0A        className=%22receipt-popup%22%0A        close=%7Bclose%7D%0A        type=%22wide%22%3E%0A        %3Cdiv className=%22receipt-popup__container%22%3E%0A          %3Ciframe height=%22100%25%22%0A            src=%22data:text/html;charset=utf-8,
+wrapper = renderComponent(%7B getReceipt %7D);%0A    assert.equal(%0A      wrapper.find('iframe').prop('src').includes('
 %253Ch
@@ -930,126 +930,22 @@
 l%253E
-%22%0A  
+'),%0A
       
-    width=%22100%25%22%3E%0A          %3C/iframe%3E%0A        %3C/div%3E%0A      %3C/Popup%3E);%0A    expect(output).toEqualJSX(expected
+true
 );%0A 
@@ -1133,189 +1133,71 @@
     
-jsTestUtils.shallowRender(%0A      %3CReceiptPopup%0A        addNotification=%7BaddNotification%7D%0A        chargeId=%22charge123%22%0A        close=%7Bsinon.stub()%7D%0A        getReceipt=%7BgetReceipt%7D /%3E
+renderComponent(%7B%0A      addNotification,%0A      getReceipt%0A    %7D
 );%0A 
@@ -1513,264 +1513,65 @@
 nst 
-renderer = jsTestUtils.shallowRender(%0A      %3CReceiptPopup%0A        addNotification=%7Bsinon.stub()%7D%0A        chargeId=%22charge123%22%0A        close=%7Bclose%7D%0A        getReceipt=%7Bsinon.stub()%7D /%3E, true);%0A    const output = renderer.getRenderOutput();%0A    output
+wrapper = renderComponent(%7B close %7D);%0A    wrapper
 .props
+()
 .clo
@@ -1784,216 +1784,60 @@
 nst 
-renderer = jsTestUtils.shallowRender(%0A      %3CReceiptPopup%0A        addNotification=%7Bsinon.stub()%7D%0A        chargeId=%22charge123%22%0A        close=%7Bsinon.stub()%7D%0A        getReceipt=%7BgetReceipt%7D /%3E, true
+wrapper = renderComponent(%7B getReceipt %7D
 );%0A    
-render
+wrapp
 er.u

Update receipt popup to use enzyme.