Untitled

const input = require('../input').input;
const expect = require('chai').expect;
const configureJsDom = require('../test-context').configureJsDom;
const keyboard = input.keyboard;
const Q = require('q');

describe('Made To Measure measurements form', function() {

  beforeEach(() => configureJsDom({
    html: `<html>
             <body>
                <header class="header-site-wide"></header>
                <main class="m2m-standard-product-page-main">
                   <div class="u-hidden m2m-product-info-drawer">
                      <div class="m2m-product-info-drawer-back-link-container">
                         <a class="m2m-product-info-drawer-back-link u-no-underline" href="#">Back to your roller blind</a>
                      </div>
                      <div class="m2m-product-info-drawer-title">
                         <h1>Roller Blind with seven colors, Dark Egg</h1>
                      </div>
                      <div class="m2m-product-details-drawer">
                         <section class="m2m-product-detail m2m-product-detail--info product-detail">
                            <h2 class="product-detail__title">Product details</h2>
                            <div class="m2m-product-detail__content m2m-product-detail__content--info product-detail__content">
                               <ul>
                                  <li>Bright, contemporary design</li>
                                  <li>Soft and durable texture</li>
                                  <li>Child safe with breakaway system</li>
                                  <li>Simple to install</li>
                               </ul>
                               <p>This printed blind is a bright and breezy accent for your room. The fabric has been specially engineered to have a pleasingly soft testure to the touch. What's more, it's speedy to put in place and durable too</p>
                               <p>This blind is operated with a side control mechanism by default. Alternatively, you can upgrade to a spring mechanism with a central cord pull (with acorn handle) if you prefer</p>
                               <p>This blind can be fitted either inside or outside the window recess. Instructions and fittings are included</p>
                            </div>
                         </section>
                         <section class="product-detail product-detail--specifications">
                            <h2 class="product-detail__title">Product specifications</h2>
                         </section>
                      </div>
                   </div>
                   <div class="m2m-standard-product-container">
                      <div class="m2m-standard-product-column-left">
                      </div>
                      <div class="m2m-standard-product-column-right">
                         <div class="m2m-product-info-link">
                         </div>
                         <form class="m2m-measurements-form" action="/update-m2m" method="POST" id="m2m-measurements-form" novalidate="novalidate">
                            <section class="m2m-swatch-list-section">
                               <div class="m2m-swatch-hidden-submit" aria-hidden="true">
                                  <button class="button" type="submit" data-adding-to-basket="Adding..." id="button--add-to-basket" data-alert-text="Adding to basket">Get price</button>
                               </div>
                               <ul class="m2m-swatch-list">
                                  <li class="m2m-swatch-list-item">
                                     <button class="m2m-swatch m2m-swatch--current button" name="skuUrl" value="/roller-blind-with-seven-colors/dark-egg/p/33100015" type="submit">
                                     <img class="swatch-image swatch-image--current" src="//johnlewis.scene7.com/is/image/JohnLewis/002255341alt1?cropN=0.42105263157894735,0.42105263157894735,0.16842105263157894,0.16842105263157894&amp;$rsp-pdp-swtch$" alt="">
                                     <span class="swatch-text">Dark Egg
                                     </span>
                                     <span class="u-audible">This is the current selected colour</span>
                                     </button>
                                  </li>
                                  <li class="m2m-swatch-list-item">
                                     <button class="m2m-swatch button" name="skuUrl" value="/roller-blind-with-seven-colors/pale-lilac/p/33100015" type="submit">
                                     <img class="swatch-image" src="//johnlewis.scene7.com/is/image/JohnLewis/001147358alt1?cropN=0.42105263157894735,0.42105263157894735,0.16842105263157894,0.16842105263157894&amp;$rsp-pdp-swtch$" alt="">
                                     <span class="swatch-text">Pale Lilac
                                     </span>
                                     </button>
                                  </li>
                               </ul>
                            </section>
                            <div class="m2m-measurements-inputs u-padding-default-left u-padding-default-right u-padding-section-top">
                               <h2 class="u-padding-default-right">Add your measurements in centimetres (cm) to get a price</h2>
                               <h3 id="recess-fitting-heading">1. Select a window fitting</h3>
                               <a class="m2m-help-link m2m-help-link--window-fitting" href="#help-to-select-a-window-fitting" id="m2m-window-fitting-help-link">
                               <span>Learn about window fittings</span>
                               <span class="u-audible"> to help you measure your made to measure roller blinds</span>
                               </a>
                               <div class="m2m-recess">
                                  <div class="u-float-left m2m-inside-recess">
                                     <label class="label" for="m2m-inside-recess-btn">Inside recess</label>
                                     <label class="m2m-inside-recess-btn label">
                                     <input class="input" id="inside-recess" type="radio" name="recess" value="Inside recess" placeholder="Select inside recess" aria-label="select inside recess">
                                     <span></span>
                                     </label>
                                  </div>
                                  <div class="u-float-left m2m-outside-recess">
                                     <label class="label" for="m2m-outside-recess-btn">Outside recess</label>
                                     <label class="m2m-outside-recess-btn label">
                                     <input class="input" id="outside-recess" type="radio" name="recess" value="Outside recess" placeholder="Select ouside recess" aria-label="select outside recess">
                                     <span></span>
                                     </label>
                                  </div>
                                  <div class="u-hidden m2m-invalid-recess-error">
                                     <span class="u-audible">error select a window fitting</span>
                                     <span aria-hidden="true">Select a window fitting</span>
                                  </div>
                               </div>
                               <h3 class="u-heavy-text" id="enter-measurements-heading">2. Enter your measurements</h3>
                               <a class="m2m-help-link m2m-help-link--measurements" href="#help-to-measure-roller-blind" id="m2m-measurements-help-link">
                               <span>Learn how to measure correctly</span>
                               <span class="u-audible"> your made to measure roller blinds</span>
                               </a>
                               <div class="m2m-width-container">
                                  <label class="label">Width</label>
                                  <input class="m2m-input-width" type="number" name="width" id="width" step="0.01" pattern="[0-9]+([/,|/.][0-9]+)?" value="" min="41" max="" required="" placeholder="e.g. 150.5" aria-label="width in centimeters" data-incomplete-message="please enter your measurements" autocorrect="off">
                                  <div class="m2m-cm">
                                     <p aria-hidden="true">(cm)</p>
                                  </div>
                                  <p class="m2m-min-width">
                                     <span class="m2m-min-width-text" aria-hidden="true">Min. 41 cm</span>
                                     <span class="m2m-min-width-aria u-audible">Minimum 41 centimeters</span>
                                  </p>
                               </div>
                               <div class="m2m-height-container">
                                  <label class="label">Height</label>
                                  <input class="m2m-input-height" type="number" name="height" id="height" step="0.01" pattern="[0-9]+([/,|/.][0-9]+)?" value="" min="40" max="" required="" placeholder="e.g. 165.2" aria-label="height in centimeters" data-incomplete-message="please enter your measurements" autocorrect="off">
                                  <div class="m2m-cm">
                                     <p aria-hidden="true">(cm)</p>
                                  </div>
                                  <p class="m2m-min-height">
                                     <span class="m2m-min-height-text" aria-hidden="true">Min. 40 cm</span>
                                     <span class="m2m-min-height-aria u-audible">Minimum 40 centimeters</span>
                                  </p>
                               </div>
                               <h3 class="u-heavy-text" id="installation-height-heading">3. Enter your installation height</h3>
                               <a class="m2m-help-link m2m-help-link--installation-height" href="#help-to-measure-installation-height" id="m2m-installation-height-help-link">
                               <span>What is the installation height?</span>
                               </a>
                               <div class="m2m-installation-height-container">
                                  <label class="label" for="installationHeight"></label>
                                  <input class="m2m-input-installation-height" type="number" name="installationHeight" id="installationHeight" step="0.01" pattern="[0-9]+([/,|/.][0-9]+)?" value="" required="" placeholder="e.g. 240.2" aria-label="installation height in centimeters" data-incomplete-message="please enter your measurements" autocorrect="off">
                                  <div class="m2m-cm">
                                     <p aria-hidden="true">(cm)</p>
                                  </div>
                               </div>
                               <h3 id="roll-direction-heading">4. Select which way you want your blind to be rolled</h3>
                               <a class="m2m-help-link m2m-help-link--roll-direction" href="#help-to-select-a-roll-type" id="m2m-roll-direction-help-link">
                               <span>What does roll type mean?</span>
                               </a>
                               <div class="m2m-roll-direction">
                                  <div class="u-float-left m2m-standard-roll">
                                     <label class="label" for="m2m-standard-roll-btn">Standard roll</label>
                                     <label class="m2m-standard-roll-btn label">
                                     <input class="input" id="standard-roll" type="radio" name="rollDirection" value="Standard" placeholder="Select standard roll" aria-label="select standard roll">
                                     <span></span>
                                     </label>
                                  </div>
                                  <div class="u-float-left m2m-reverse-roll">
                                     <label class="label" for="m2m-reverse-roll-btn">Reverse roll</label>
                                     <label class="m2m-reverse-roll-btn label">
                                     <input class="input" id="reverse-roll" type="radio" name="rollDirection" value="Reverse" placeholder="Select reverse roll" aria-label="select reverse roll">
                                     <span></span>
                                     </label>
                                  </div>
                                  <div class="u-hidden m2m-invalid-roll-direction-error">
                                     <span class="u-audible">error select a roll type</span>
                                     <span aria-hidden="true">Select a roll type</span>
                                  </div>
                               </div>
                            </div>
                            <div class="m2m-check-measurements">
                               <p>Please double check your measurements, as we custom make every blind.</p>
                            </div>
                            <div class="m2m-summary-and-cta">
                               <p>Roller Blind with seven colors, Dark Egg</p>
                               <div class="m2m-add-to-basket-item-details">
                                  <p class="m2m-price-from">Blind price from
                                  </p>
                                  <p class="u-semibold-text">£68.48</p>
                                  <p></p>
                                  <p class="price-included-additional-services u-hidden price u-centred">
                                     <span> (inc. additional services)</span>
                                  </p>
                               </div>
                               <button class="button" type="submit" data-adding-to-basket="Adding..." id="button--add-to-basket" data-alert-text="Adding to basket">Get price</button>
                            </div>
                            <input class="m2m-input-sku-id" type="hidden" name="skuId" value="240555" id="sku-id-input">
                            <input class="m2m-input-price-per-metre" type="hidden" name="pricePerMetre" value="35.00" id="price-per-metre-input">
                            <input class="m2m-input-currency-symbol" type="hidden" name="currencySymbol" value="£" id="currency-symbol-input">
                         </form>
                      </div>
                      <div class="m2m-standard-product-column-full">
                         <div class="product-details" id="product-details">
                            <a id="skip-link--product-details" data-skiplink="true" href="#product-details">View product details</a>
                         </div>
                      </div>
                   </div>
                </main>
                <footer class="footer-site-wide">
                   this is test content
                </footer>
             </body>
          </html>`,
    onload(window) {}
  }));

  function mainClass(){
    return document.querySelector( 'main' );
  }

  function selectDetailsForm() {
    return document.querySelector('.m2m-measurements-form')
  }

  function selectWidthContainer() {
    return selectDetailsForm().querySelector('.m2m-width-container');
  }

  function selectHeightContainer() {
    return selectDetailsForm().querySelector('.m2m-height-container');
  }

  function selectInstallationHeightContainer() {
    return selectDetailsForm().querySelector('.m2m-installation-height-container');
  }

  function selectWidthInput() {
    return selectDetailsForm().querySelector('#width');
  }

  function selectHeightInput() {
    return selectDetailsForm().querySelector('#height');
  }

  function selectInstallationHeightInput() {
    return selectDetailsForm().querySelector('#installationHeight');
  }

  function selectReviewYourRollerBlindButton() {
    return selectDetailsForm().querySelector('button[type="submit"]');
  }

  function selectSwatchListSection() {
    return selectDetailsForm().querySelector('.m2m-swatch-list-section')
  }

  it( 'should initialise on m2m product page class', () => {
    expect ( mainClass().classList.contains('m2m-standard-product-page-main') ).to.not.be.null;
  });

  it( "should have an inactive 'review your roller blind' button on load", () => {
    expect (selectReviewYourRollerBlindButton()).to.have.class('button--inactive');
    expect (selectReviewYourRollerBlindButton().innerHTML).to.equal('Review your roller blind');
  });

  it( 'should prevent form submission when input values are empty and error on all fields', (done) => {
    selectReviewYourRollerBlindButton().click();
    setTimeout(function() {
      expect(selectDetailsForm().querySelector('label[for="m2m-inside-recess-btn"]')).to.have.id('m2m-label-error');
      expect(selectDetailsForm().querySelector('label[for="m2m-outside-recess-btn"]')).to.have.id('m2m-label-error');
      expect(selectDetailsForm().querySelector('.m2m-invalid-recess-error')).to.not.have.class('u-hidden');
      expect(selectWidthContainer().querySelector('label')).to.have.id('m2m-label-error');
      expect(selectWidthContainer().querySelector('p.m2m-error-text')).to.exist;
      expect(selectWidthInput()).to.have.class('u-input--invalid');
      expect(selectHeightContainer().querySelector('label')).to.have.id('m2m-label-error');
      expect(selectHeightContainer().querySelector('p.m2m-error-text')).to.exist
      expect(selectHeightInput()).to.have.class('u-input--invalid');
      expect(selectInstallationHeightContainer().querySelector('label')).to.have.id('m2m-label-error');
      expect(selectInstallationHeightContainer().querySelector('p.m2m-error-text')).to.exist;
      expect(selectInstallationHeightInput()).to.have.class('u-input--invalid');
      expect(selectDetailsForm().querySelector('label[for="m2m-standard-roll-btn"]')).to.have.id('m2m-label-error');
      expect(selectDetailsForm().querySelector('label[for="m2m-reverse-roll-btn"]')).to.have.id('m2m-label-error');
      expect(selectDetailsForm().querySelector('.m2m-invalid-roll-direction-error')).to.not.have.class('u-hidden');
      done();
    }, 100);
  });

  it( 'if swatches exist on page, it should remove the hidden core submit button', () => {
    if (selectSwatchListSection()) {
      expect(selectSwatchListSection().querySelector('.m2m-swatch-hidden-submit')).to.not.exist;
    }
  });

  it( 'if swatches exist on page, they should be converted from submits to buttons', () => {
    if (selectSwatchListSection()) {
      expect(selectSwatchListSection().querySelector('.m2m-swatch-list-item button')).to.have.property('type','button');
    }
  });

  it.only( 'should return a total price on all inputs valid', () => {
    //const widthInput = selectWidthInput();
    try {
    keyboard.enter("111", selectWidthInput());


    //console.log(selectWidthInput().value);
    expect(selectWidthInput()).to.have.value('111');
  } catch(err) {
    console.log(err);
  }
  });

/*
    expect(selectWidthInput()).to.have.value('111');
    selectDetailsForm().querySelector('#inside-recess').click();
    selectDetailsForm().querySelector('#reverse-roll').click();

    const heightInput = selectHeightInput();
    const installationHeightInput = selectInstallationHeightInput();

    keyboard.enter("111", heightInput);
    keyboard.enter("111", installationHeightInput);

    expect(widthInput).to.have.value('111');
    expect(heightInput).to.have.value('111');
    expect(installationHeightInput).to.have.value('111');
    console.log(selectDetailsForm().querySelector('#inside-recess'))
    console.log(heightInput.value)
    console.log(widthInput.value)
    console.log(installationHeightInput.value)
    console.log(selectDetailsForm().querySelector('#inside-re'))
    setTimeout(function() {
      expect(selectDetailsForm().querySelector('.m2m-price-from').innerText).to.equal('Total roller blind price');
      done();
    }, 2000);

describe('Suite A', function () {
  it('Foo', function (done) {
    setTimeout(function () {
      (true).should.equal(true);
      done();
    }, 1000);
  });
*/
});