gnezim
60e2149072
Tasks 16-20: Online Board Tests (Search/Filter, Tabs, Flight List, Details Modal, Time/Date) - Task 16: Search & Filter tests (37 tests) - departure/arrival cities, passenger count, cabin class - Task 17: Arrival/Departure Tabs tests (45 tests) - tab switching, flight display, sorting - Task 18: Flight List View tests (50 tests) - display, sorting, filtering, pagination, loading states - Task 19: Flight Details Modal tests (40 tests) - opening/closing, content display, actions - Task 20: Time & Date Filter tests (43 tests) - date selection, time ranges, calendar navigation Tasks 21-25: Flight Details Tests (Flight Info, Passengers, Seats, Services, Fares) - Task 21: Flight Info Display tests (40 tests) - basic info, airports, route visualization, timeline - Task 22: Passenger Info tests (50 tests) - passenger list, details, services, special requirements - Task 23: Seat Selection tests (50 tests) - seat map, selection, categories, recommendations - Task 24: Service Selection tests (25 tests) - baggage, meals, seats, summary - Task 25: Fare Display tests (55 tests) - fare breakdown, comparisons, discounts, refunds All tests follow AAA pattern and use data-testid selectors matching Angular version. Total: 245 tests across 10 feature suites.
152 lines
3.9 KiB
HTML
152 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Bootstrap 101 Template</title>
|
|
|
|
<script src="./angular.min.js"></script>
|
|
<link rel="stylesheet" href="./bootstrap.min.css">
|
|
|
|
<style type="text/css">
|
|
|
|
p{padding: 10px}
|
|
|
|
.graph{
|
|
margin-bottom: 30px;
|
|
background-color: #eee;
|
|
overflow: auto;
|
|
}
|
|
|
|
.graph p{
|
|
padding: 10px 10px 20px;
|
|
}
|
|
|
|
.page-header small{
|
|
white-space: nowrap;
|
|
}
|
|
|
|
nav span {
|
|
line-height: 4em;
|
|
}
|
|
|
|
@-webkit-keyframes fadeIn { from { opacity:0; transform: translate3d(0,-20px,0);} to { opacity:1; transform: translate3d(0px,0,0);} }
|
|
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
|
|
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
|
|
|
|
.fade-in {
|
|
opacity:0;
|
|
-webkit-animation:fadeIn .3s ease-out 1 forwards 1s;
|
|
-moz-animation:fadeIn .3s ease-out 1 forwards 1s;
|
|
animation:fadeIn .3s ease-out 1 forwards 1s;
|
|
}
|
|
.animateWait{
|
|
-webkit-animation-delay:2s;
|
|
-moz-animation-delay:2s;
|
|
animation-delay:2s;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
|
|
<body ng-app="myApp" ng-controller="MyCtrlr">
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<nav class="navbar navbar-default isBig" ng-if="isBig">
|
|
<div class="container-fluid">
|
|
<span>This is the header. It will only be rendered in the DOM if the window is greater than 768px.</span>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="page-header">
|
|
<h1>Measure Twice</h1>
|
|
<small class="hidden-xs">and cut once.</small>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6 graph fade-in" animated="first">
|
|
<h2>Minima veniam</h2>
|
|
<p>1) Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
|
|
|
|
</div>
|
|
<div class="col-sm-6 graph fade-in animateWait" animated="second">
|
|
<h2>Nisi ut aliquid?</h2>
|
|
<p>1) Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-sm-12">
|
|
<p><strong>Timestamp:</strong> {{timeStr}}</p>
|
|
<p><strong>User agent:</strong> {{userAgentStr}}</p>
|
|
<p><strong>Cookie:</strong> {{cookieStr}}</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
console.log('The DOM is loaded.')
|
|
|
|
myApp = angular.module('myApp', []);
|
|
|
|
myApp.controller('MyCtrlr', ['$scope',function($scope){
|
|
|
|
const IS_BIG_CUTOFF = 768;
|
|
|
|
$scope.allDone = function () {
|
|
console.log('backstop.ready');
|
|
}
|
|
|
|
$scope.timeStr = new Date().getTime();
|
|
$scope.userAgentStr = navigator.userAgent;
|
|
$scope.cookieStr = document.cookie||'No data found.';
|
|
|
|
$scope.isBig = window.innerWidth > IS_BIG_CUTOFF;
|
|
|
|
}]);
|
|
|
|
|
|
myApp.directive('animated', function(){
|
|
return{
|
|
restrict:'A',
|
|
link:function(scope, el, attrs){
|
|
|
|
el.on('webkitAnimationEnd mozAnimationEnd msAnimationEnd oAnimationEnd animationEnd',function(evt){
|
|
|
|
console.log('Transition',attrs.animated,evt);
|
|
|
|
if(attrs.animated==='second'){
|
|
scope.allDone();
|
|
}
|
|
|
|
})
|
|
|
|
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|