product swatch mockup

product-swatch-spec.js

describe('ProductSwatch Widget', function() {
  var fixture_markup = '<div>' // replace me with a reference to the above.
  var product_swatch = null
  
  beforeEach(function () {
    $(document.body).appendChild(fixture_markup)
    product_swatch = new window.clique.ProductSwatch()
  })

  afterEach(function () {
    $('.js-product-swatch').remove()
    product_swatch = null
  })

  describe('#init', function () {
    beforeEach(function () {
      product_swatch.init()
    })
    
    it('should bind a hover listener to the widget', function () {
      expect(window.jQuery).toHaveBeenCalledWith('.js-product-swatch')
    })
  })
  
  describe('when visiting on desktop', function () {
    beforeEach(function () {
      product_swatch.init()
    })

    describe('when a user hovers over a product image', function () {
      beforeEach(function () {
        $('.product-image').eq(3).trigger('hover')
      })
      
      it('should swap out the source of the main image', function () {
        expect($('.main-image').prop('src')).toEqual($('.product-image').eq(3).data('full-image'))
      })

      it('should swap out the product link of the main image', function () {
        expect($('.main-image-link').href()).toEqual($('.product-image').eq(3).href())
      })
    })
  })

  describe('when visiting on a touch device', function () {})
})

product-swatch.html

<div class="js-product-swatch row">
  <div class="co-md-4">
    <a class="product-link" href="https://clique.com/product.html">
      <img class="product-image" data-full-image="https://linktomyimage.com/full-image.jpg" src="https://linktomyimage.com/image.jpg" />
    </a>
    <a class="product-link" href="https://clique.com/product.html">
      <img class="product-image" data-full-image="https://linktomyimage.com/full-image.jpg" src="https://linktomyimage.com/image.jpg" />
    </a>
  </div>
  <div class="col-md-4">
    <a class="main-image-link">
      <img class="main-image" src="https://default.com/image.jpg" />
    </a>
  </div>
  <div class="co-md-4">
    <a class="product-link" href="https://clique.com/product.html">
      <img class="product-image" data-full-image="https://linktomyimage.com/full-image.jpg" src="https://linktomyimage.com/image.jpg" />
    </a>
    <a class="product-link" href="https://clique.com/product.html">
      <img class="product-image" data-full-image="https://linktomyimage.com/full-image.jpg" src="https://linktomyimage.com/image.jpg" />
    </a>
  </div>
</div>

product-swatch.js

(function($, clique) {
  'use strict';
  /**
   * @class ProductSwatch
   * @description 4 product images sit around a central highlighted image. Hovering over any one product image causes it's associated highlighted image to display in the middle.
   * @requires jQuery
   * @param {Node} node - the top-level node to bind to.
   */
  function ProductSwatch (node) {
    var $node = $(node);
    var $product_images = $node.find('.product-image');

    /**
     * @method show_product
     * @description shows the product from the selected event
     * Assumes that the structure of the widget goes .widget > (.product-link > .product-image) + (.main-image-link > .main-image)
     * Assumes that the product images also have a `data-full-image` property.
     * @param event - From the hover event
     */
    function show_product (event) {
      $('.main-image').prop('src', $(event.target).data('full-image'));
      $('.main-image-link').prop('href', $(event.target.parentNode).href());
    }

    /**
     * @method init
     * @description binds functionality to the component
     */
    this.init = function init () {
      $node.on('hover', '.product-image', show_product);
    };
  }

  clique.ProductSwatch = ProductSwatch;

  $('.js-product-swatch').each(function () {
    var product_swatch = new ProductSwatch(this);
    product_swatch.init();
  })
})(window.jQuery, window.clique);