chrisirhc/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Test Scenario 1 (after improvements)
Read about this and more on the ThousandEyes blog.
http://blog.thousandeyes.com/tips-for-a-front-end-test-friendly-web-application-targeting/

  
## index.html
<!DOCTYPE html>
<html>

  <head>
  <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body>
    <pre id="result"></pre>
    <div class="widget-processor"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="script.js"></script>
  </body>

</html>

## script.js
/* global $ */
var BOXES = 3,
    BOX_SIZE = 80,
    boxReady = [],
    boxCount = 0;

function loadBoxes() {
    for (var i = 0; i < BOXES; i++) {
        setTimeout(addBox, Math.random()*100, i);
    }
}

function addBox(i) {
    var $box = $('<div></div>')
        .addClass('box')
        .append(i+1)
        .appendTo('.widget-processor');

    var $button = $('<button></button>')
        .text('GO')
        .appendTo($box);

    $button
    .addClass('el-step-' + i)
    .on('click', function () {
        if (i === 0 || boxReady[i - 1]) {
            boxReady[i] = true;
            $box.css('background', 'lightgreen');
            if (i === BOXES - 1) {
                $('#result').append('Horray!!\n');
            }
        } else {
            $box.css('background', 'lightpink');
            $('#result').append('Fail :(\n');
        }
    });

    boxCount++;
}

loadBoxes();

## style.css
.box {
  display: inline-block;
  border: 1px solid grey;
  margin: 1px;
  width: 80px;
  height: 80px;
}

button {
  display: block
}
	<!DOCTYPE html>
	<html>

	<head>
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>

	<body>
	<pre id="result"></pre>
	<div class="widget-processor"></div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="script.js"></script>
	</body>

	</html>
	/* global $ */
	var BOXES = 3,
	BOX_SIZE = 80,
	boxReady = [],
	boxCount = 0;

	function loadBoxes() {
	for (var i = 0; i < BOXES; i++) {
	setTimeout(addBox, Math.random()*100, i);
	}
	}

	function addBox(i) {
	var $box = $('<div></div>')
	.addClass('box')
	.append(i+1)
	.appendTo('.widget-processor');

	var $button = $('<button></button>')
	.text('GO')
	.appendTo($box);

	$button
	.addClass('el-step-' + i)
	.on('click', function () {
	if (i === 0 \|\| boxReady[i - 1]) {
	boxReady[i] = true;
	$box.css('background', 'lightgreen');
	if (i === BOXES - 1) {
	$('#result').append('Horray!!\n');
	}
	} else {
	$box.css('background', 'lightpink');
	$('#result').append('Fail :(\n');
	}
	});

	boxCount++;
	}

	loadBoxes();
	.box {
	display: inline-block;
	border: 1px solid grey;
	margin: 1px;
	width: 80px;
	height: 80px;
	}

	button {
	display: block
	}