github.com/pf-qiu/concourse/v6@v6.7.3-0.20201207032516-1f455d73275f/web/elm/tests/SideBarFeature.elm (about) 1 module SideBarFeature exposing (all) 2 3 import Application.Application as Application 4 import Assets 5 import Base64 6 import ColorValues 7 import Colors 8 import Common 9 exposing 10 ( defineHoverBehaviour 11 , given 12 , iOpenTheBuildPage 13 , myBrowserFetchedTheBuild 14 , then_ 15 , when 16 ) 17 import Concourse 18 import Concourse.BuildStatus exposing (BuildStatus(..)) 19 import DashboardTests exposing (iconSelector) 20 import Data 21 import Dict 22 import Expect 23 import Html.Attributes as Attr 24 import Http 25 import Message.Callback as Callback 26 import Message.Effects as Effects exposing (pipelinesSectionName) 27 import Message.Message as Message exposing (PipelinesSection(..)) 28 import Message.Subscription as Subscription 29 import Message.TopLevelMessage as TopLevelMessage 30 import Routes 31 import Set 32 import Test exposing (Test, describe, test) 33 import Test.Html.Event as Event 34 import Test.Html.Query as Query 35 import Test.Html.Selector 36 exposing 37 ( attribute 38 , class 39 , containing 40 , id 41 , style 42 , tag 43 , text 44 ) 45 import Time 46 import Url 47 48 49 pageLoadIsSideBarCompatible : (() -> ( Application.Model, List Effects.Effect )) -> List Test 50 pageLoadIsSideBarCompatible iAmLookingAtThePage = 51 [ test "fetches pipelines on page load" <| 52 when iAmLookingAtThePage 53 >> then_ myBrowserFetchesPipelines 54 , test "fetches screen size on page load" <| 55 when iAmLookingAtThePage 56 >> then_ myBrowserFetchesScreenSize 57 , test "listens for sidebar state on page load" <| 58 when iAmLookingAtThePage 59 >> then_ myBrowserListensForSideBarStates 60 , test "fetches sidebar state on page load" <| 61 when iAmLookingAtThePage 62 >> then_ myBrowserFetchesSideBarState 63 ] 64 65 66 hasSideBar : (() -> ( Application.Model, List Effects.Effect )) -> List Test 67 hasSideBar iAmLookingAtThePage = 68 let 69 iHaveAnOpenSideBar_ = 70 given iAmLookingAtThePage 71 >> given iAmOnANonPhoneScreen 72 >> given myBrowserFetchedPipelines 73 >> given iClickedTheHamburgerIcon 74 75 iHaveAnExpandedTeam = 76 iHaveAnOpenSideBar_ >> iClickedThePipelineGroup 77 in 78 [ test "top bar is exactly 54px tall" <| 79 given iAmLookingAtThePage 80 >> given iAmOnANonPhoneScreen 81 >> when iAmLookingAtTheTopBar 82 >> then_ iSeeItIs54PxTall 83 , describe "hamburger icon" 84 [ test "appears in the top bar on non-phone screens" <| 85 given iAmLookingAtThePage 86 >> given iAmOnANonPhoneScreen 87 >> given iAmLookingAtTheLeftHandSectionOfTheTopBar 88 >> when iAmLookingAtTheFirstChild 89 >> then_ iSeeAHamburgerIcon 90 , test "does not appear on phone screens" <| 91 given iAmLookingAtThePage 92 >> given iAmOnAPhoneScreen 93 >> when iAmLookingAtTheLeftHandSectionOfTheTopBar 94 >> then_ iSeeNoHamburgerIcon 95 , test "is clickable when there are pipelines" <| 96 given iAmLookingAtThePage 97 >> given iAmOnANonPhoneScreen 98 >> given myBrowserFetchedPipelines 99 >> when iAmLookingAtTheHamburgerMenu 100 >> then_ (itIsClickable Message.HamburgerMenu) 101 , describe "before pipelines are fetched" 102 [ defineHoverBehaviour 103 { name = "hamburger icon" 104 , setup = 105 iAmLookingAtThePage () 106 |> given iAmOnANonPhoneScreen 107 |> Tuple.first 108 , query = (\a -> ( a, [] )) >> iAmLookingAtTheHamburgerMenu 109 , unhoveredSelector = 110 { description = "grey" 111 , selector = [ containing [ style "opacity" "0.5" ] ] 112 } 113 , hoverable = Message.HamburgerMenu 114 , hoveredSelector = 115 { description = "still grey" 116 , selector = [ containing [ style "opacity" "0.5" ] ] 117 } 118 } 119 , test "is not clickable" <| 120 given iAmLookingAtThePage 121 >> given iAmOnANonPhoneScreen 122 >> when iAmLookingAtTheHamburgerMenu 123 >> then_ itIsNotClickable 124 ] 125 , test "is not clickable when there are no pipelines" <| 126 given iAmLookingAtThePage 127 >> given iAmOnANonPhoneScreen 128 >> given myBrowserFetchedNoPipelines 129 >> when iAmLookingAtTheHamburgerMenu 130 >> then_ itIsNotClickable 131 , test """has a dark dividing line separating it from the concourse 132 logo""" <| 133 given iAmLookingAtThePage 134 >> given iAmOnANonPhoneScreen 135 >> when iAmLookingAtTheHamburgerMenu 136 >> then_ iSeeADarkDividingLineToTheRight 137 , defineHoverBehaviour 138 { name = "hamburger icon" 139 , setup = 140 iAmLookingAtThePage () 141 |> iAmOnANonPhoneScreen 142 |> myBrowserFetchedPipelines 143 |> Tuple.first 144 , query = (\a -> ( a, [] )) >> iAmLookingAtTheHamburgerMenu 145 , unhoveredSelector = 146 { description = "grey" 147 , selector = [ containing [ style "opacity" "0.5" ] ] 148 } 149 , hoverable = Message.HamburgerMenu 150 , hoveredSelector = 151 { description = "white" 152 , selector = [ containing [ style "opacity" "1" ] ] 153 } 154 } 155 , test "browser saves sidebar state on click" <| 156 when iHaveAnOpenSideBar_ 157 >> then_ myBrowserSavesSideBarState { isOpen = True, width = 275 } 158 , test "background becomes lighter on click" <| 159 given iHaveAnOpenSideBar_ 160 >> when iAmLookingAtTheHamburgerMenu 161 >> then_ iSeeALighterBackground 162 , test "icon becomes bright on click" <| 163 given iHaveAnOpenSideBar_ 164 >> when iAmLookingAtTheHamburgerIcon 165 >> then_ iSeeItIsBright 166 , test "background does not become lighter when opened but there are no pipelines" <| 167 given iHaveAnOpenSideBar_ 168 >> given myBrowserFetchedNoPipelines 169 >> when iAmLookingAtTheHamburgerMenu 170 >> then_ iSeeADarkerBackground 171 , test "browser toggles sidebar state on click" <| 172 when iHaveAnOpenSideBar_ 173 >> given iClickedTheHamburgerIcon 174 >> then_ myBrowserSavesSideBarState { isOpen = False, width = 275 } 175 , test "background toggles back to dark" <| 176 given iHaveAnOpenSideBar_ 177 >> given iClickedTheHamburgerIcon 178 >> when iAmLookingAtTheHamburgerMenu 179 >> then_ iSeeADarkerBackground 180 , test "when shrinking viewport hamburger icon disappears" <| 181 given iAmLookingAtThePage 182 >> given iAmOnANonPhoneScreen 183 >> given iShrankTheViewport 184 >> when iAmLookingAtTheLeftHandSectionOfTheTopBar 185 >> then_ iDoNotSeeAHamburgerIcon 186 , test "side bar does not expand before teams and pipelines are fetched" <| 187 given iAmLookingAtThePage 188 >> given iAmOnANonPhoneScreen 189 >> given iClickedTheHamburgerIcon 190 >> when iAmLookingAtThePageBelowTheTopBar 191 >> then_ iSeeNoSideBar 192 ] 193 , describe "sidebar layout" 194 [ test "sidebar state is read from sessionstorage" <| 195 given iAmLookingAtThePage 196 >> given iAmOnANonPhoneScreen 197 >> given myBrowserFetchedPipelines 198 >> given myBrowserReadSideBarState 199 >> when iAmLookingAtThePageBelowTheTopBar 200 >> then_ iSeeASideBar 201 , test "page below top bar contains a side bar" <| 202 given iHaveAnOpenSideBar_ 203 >> when iAmLookingAtThePageBelowTheTopBar 204 >> then_ iSeeASideBar 205 , test "when shrinking viewport sidebar disappears" <| 206 given iHaveAnOpenSideBar_ 207 >> given iShrankTheViewport 208 >> when iAmLookingAtThePageBelowTheTopBar 209 >> then_ iSeeNoSideBar 210 , test "page below top bar has exactly two children" <| 211 given iHaveAnOpenSideBar_ 212 >> when iAmLookingAtThePageBelowTheTopBar 213 >> then_ iSeeTwoChildren 214 , test "sidebar and page contents are side by side" <| 215 given iHaveAnOpenSideBar_ 216 >> when iAmLookingAtThePageBelowTheTopBar 217 >> then_ iSeeItLaysOutHorizontally 218 , test "sidebar is separated from top bar by a thin line" <| 219 given iHaveAnOpenSideBar_ 220 >> when iAmLookingAtTheTopBar 221 >> then_ iSeeADividingLineBelow 222 , test "sidebar is separated from page contents by a thin line" <| 223 given iHaveAnOpenSideBar_ 224 >> when iAmLookingAtTheSideBar 225 >> then_ iSeeADividingLineToTheRight 226 , test "sidebar has hamburger menu background" <| 227 given iHaveAnOpenSideBar_ 228 >> when iAmLookingAtTheSideBar 229 >> then_ iSeeALighterBackground 230 , test "sidebar fills height" <| 231 given iHaveAnOpenSideBar_ 232 >> when iAmLookingAtTheSideBar 233 >> then_ iSeeItFillsHeight 234 , test "sidebar does not shrink" <| 235 given iHaveAnOpenSideBar_ 236 >> when iAmLookingAtTheSideBar 237 >> then_ iSeeItDoesNotShrink 238 , test "sidebar scrolls independently" <| 239 given iHaveAnOpenSideBar_ 240 >> when iAmLookingAtTheSideBar 241 >> then_ iSeeItScrollsIndependently 242 , test "sidebar is 275px wide by default" <| 243 given iHaveAnOpenSideBar_ 244 >> when iAmLookingAtTheSideBar 245 >> then_ iSeeItIs275PxWide 246 , test "sidebar width is determined by sidebar state" <| 247 given iHaveAnOpenSideBar_ 248 >> given myBrowserReceives400PxWideSideBarState 249 >> when iAmLookingAtTheSideBar 250 >> then_ iSeeItHasWidth 400 251 , test "sidebar has bottom padding" <| 252 given iHaveAnOpenSideBar_ 253 >> when iAmLookingAtTheSideBar 254 >> then_ iSeeItHasBottomPadding 255 , test "sidebar has a resize handle" <| 256 given iHaveAnOpenSideBar_ 257 >> when iAmLookingAtTheSideBar 258 >> then_ iSeeItHasAResizeHandle 259 , test "dragging resize handle resizes sidebar" <| 260 given iHaveAnOpenSideBar_ 261 >> given iDragTheSideBarHandleTo 400 262 >> when iAmLookingAtTheSideBar 263 >> then_ iSeeItHasWidth 400 264 , test "resize handle ignores mouse events when no longer dragging" <| 265 given iHaveAnOpenSideBar_ 266 >> given iDragTheSideBarHandleTo 400 267 >> given iMoveMyMouseXTo 500 268 >> when iAmLookingAtTheSideBar 269 >> then_ iSeeItHasWidth 400 270 , test "dragging resize handle saves the side bar state" <| 271 given iHaveAnOpenSideBar_ 272 >> when iDragTheSideBarHandleTo 400 273 >> then_ myBrowserSavesSideBarState { isOpen = True, width = 400 } 274 , test "dragging resize handle fetches the viewport of the dashboard" <| 275 given iHaveAnOpenSideBar_ 276 >> when iPressTheSideBarHandle 277 >> when iMoveMyMouseXTo 400 278 >> then_ myBrowserFetchesTheDashboardViewport 279 , test "max sidebar width is 600px" <| 280 given iHaveAnOpenSideBar_ 281 >> given iDragTheSideBarHandleTo 700 282 >> when iAmLookingAtTheSideBar 283 >> then_ iSeeItHasWidth 600 284 , test "min sidebar width is 100px" <| 285 given iHaveAnOpenSideBar_ 286 >> given iDragTheSideBarHandleTo 50 287 >> when iAmLookingAtTheSideBar 288 >> then_ iSeeItHasWidth 100 289 , test "toggles away" <| 290 given iHaveAnOpenSideBar_ 291 >> given iClickedTheHamburgerIcon 292 >> when iAmLookingAtThePageBelowTheTopBar 293 >> then_ iSeeNoSideBar 294 ] 295 , describe "favorites section" <| 296 [ test "exists when there are favorited pipelines" <| 297 given iHaveAnOpenSideBar_ 298 >> given myBrowserFetchedFavoritedPipelines 299 >> when iAmLookingAtTheSideBar 300 >> then_ iSeeFavoritesSection 301 , test "does not exist when there are no favorited pipelines" <| 302 given iHaveAnOpenSideBar_ 303 >> when iAmLookingAtTheSideBar 304 >> then_ iDoNotSeeFavoritesSection 305 , test "does not exist when localStorage has pipelines that no longer exist" <| 306 given iHaveAnOpenSideBar_ 307 >> given myBrowserFetchedFavoritedPipelinesThatDoNotExist 308 >> when iAmLookingAtTheSideBar 309 >> then_ iDoNotSeeFavoritesSection 310 , test "don't show teams that have no favorited pipelines" <| 311 given iHaveAnOpenSideBar_ 312 >> given myBrowserFetchedPipelinesFromMultipleTeams 313 >> given myBrowserFetchedFavoritedPipelines 314 >> when iAmLookingAtTheFavoritesSection 315 >> then_ iDoNotSeeTheOtherTeam 316 , test "teams are expanded by default" <| 317 given iHaveAnOpenSideBar_ 318 >> given myBrowserFetchedFavoritedPipelines 319 >> when iAmLookingAtTheTeamInTheFavoritesSection 320 >> then_ iSeeItIsExpanded 321 ] 322 , describe "archived pipelines" <| 323 [ test "not displayed in sidebar" <| 324 given iHaveAnOpenSideBar_ 325 >> given myBrowserFetchedArchivedAndNonArchivedPipelines 326 >> when iAmLookingAtTheSideBar 327 >> then_ iDoNotSeeTheArchivedPipeline 328 , test "if also favorited, is displayed in sidebar" <| 329 given iHaveAnOpenSideBar_ 330 >> given myBrowserFetchedArchivedAndNonArchivedPipelines 331 >> given myBrowserFetchedFavoritedPipelines 332 >> when iAmLookingAtTheSideBar 333 >> then_ iSeeTheArchivedPipeline 334 , test "if all pipelines are archived, does not show sidebar" <| 335 given iHaveAnOpenSideBar_ 336 >> given myBrowserFetchedOnlyArchivedPipelines 337 >> when iAmLookingAtTheSideBar 338 >> then_ iSeeNoSideBar 339 , test "if all pipelines are archived, sidebar is not clickable" <| 340 given iHaveAnOpenSideBar_ 341 >> given myBrowserFetchedOnlyArchivedPipelines 342 >> when iAmLookingAtTheHamburgerMenu 343 >> then_ itIsNotClickable 344 ] 345 , describe "teams list" <| 346 [ test "sidebar contains pipeline groups" <| 347 given iHaveAnOpenSideBar_ 348 >> when iAmLookingAtTheSideBar 349 >> then_ iSeeSomeChildren 350 , test "team header lays out horizontally" <| 351 given iHaveAnOpenSideBar_ 352 >> when iAmLookingAtTheTeamHeader 353 >> then_ iSeeItLaysOutHorizontally 354 , test "team header centers contents" <| 355 given iHaveAnOpenSideBar_ 356 >> when iAmLookingAtTheTeamHeader 357 >> then_ iSeeItCentersContents 358 , test "team lays out vertically" <| 359 given iHaveAnOpenSideBar_ 360 >> when iAmLookingAtTheTeam 361 >> then_ iSeeItLaysOutVertically 362 , test "team has narrower lines" <| 363 given iHaveAnOpenSideBar_ 364 >> when iAmLookingAtTheTeam 365 >> then_ iSeeItHasNarrowerLines 366 , test "team has top padding" <| 367 given iHaveAnOpenSideBar_ 368 >> when iAmLookingAtTheTeam 369 >> then_ iSeeItHasTopPadding 370 , test "team header contains team icon, arrow, and team name" <| 371 given iHaveAnOpenSideBar_ 372 >> when iAmLookingAtTheTeamHeader 373 >> then_ iSeeThreeChildrenDivs 374 , test "team icon is a picture of two people" <| 375 given iHaveAnOpenSideBar_ 376 >> when iAmLookingAtTheTeamIcon 377 >> then_ iSeeAPictureOfTwoPeople 378 , test "team icon does not shrink" <| 379 given iHaveAnOpenSideBar_ 380 >> when iAmLookingAtTheTeamIcon 381 >> then_ iSeeItDoesNotShrink 382 , test "team has a plus icon" <| 383 given iHaveAnOpenSideBar_ 384 >> when iAmLookingAtThePlusMinusIcon 385 >> then_ iSeeAPlusIcon 386 , test "plus icon does not shrink" <| 387 given iHaveAnOpenSideBar_ 388 >> when iAmLookingAtThePlusMinusIcon 389 >> then_ iSeeItDoesNotShrink 390 , test "team name has text content of team's name" <| 391 given iHaveAnOpenSideBar_ 392 >> when iAmLookingAtTheTeamName 393 >> then_ iSeeTheTeamName 394 , test "team name has large font" <| 395 given iHaveAnOpenSideBar_ 396 >> when iAmLookingAtTheTeamName 397 >> then_ iSeeMediumFont 398 , test "team name has padding" <| 399 given iHaveAnOpenSideBar_ 400 >> when iAmLookingAtTheTeamName 401 >> then_ iSeeItHasProperPadding 402 , test "team name stretches" <| 403 given iHaveAnOpenSideBar_ 404 >> when iAmLookingAtTheTeamName 405 >> then_ iSeeItStretches 406 , test "team name will ellipsize if it is too long" <| 407 given iHaveAnOpenSideBar_ 408 >> when iAmLookingAtTheTeamName 409 >> then_ iSeeItEllipsizesLongText 410 , test "team name will have an id" <| 411 given iHaveAnOpenSideBar_ 412 >> when iAmLookingAtTheTeamName 413 >> then_ iSeeItHasAValidTeamId 414 , test "team header is clickable" <| 415 given iHaveAnOpenSideBar_ 416 >> when iAmLookingAtTheTeamHeader 417 >> then_ (itIsClickable <| Message.SideBarTeam AllPipelinesSection "team") 418 , test "there is a minus icon when group is clicked" <| 419 given iHaveAnOpenSideBar_ 420 >> given iClickedThePipelineGroup 421 >> when iAmLookingAtThePlusMinusIcon 422 >> then_ iSeeAMinusIcon 423 , test "it's still a minus icon after data refreshes" <| 424 given iHaveAnOpenSideBar_ 425 >> given iClickedThePipelineGroup 426 >> given dataRefreshes 427 >> when iAmLookingAtThePlusMinusIcon 428 >> then_ iSeeAMinusIcon 429 , test "pipeline list expands when header is clicked" <| 430 given iHaveAnOpenSideBar_ 431 >> given iClickedThePipelineGroup 432 >> when iAmLookingAtTheTeam 433 >> then_ iSeeItLaysOutVertically 434 , test "pipeline list has two children" <| 435 given iHaveAnOpenSideBar_ 436 >> given iClickedThePipelineGroup 437 >> when iAmLookingAtThePipelineList 438 >> then_ iSeeTwoChildren 439 , test "pipeline star icon is clickable" <| 440 given iHaveAnOpenSideBar_ 441 >> given iClickedThePipelineGroup 442 >> when iAmLookingAtTheFirstPipelineStar 443 >> then_ (itIsClickable <| Message.SideBarFavoritedIcon 0) 444 , test "pipeline gets favorited when star icon is clicked" <| 445 given iHaveAnOpenSideBar_ 446 >> given iClickedThePipelineGroup 447 >> given iClickedTheFirstPipelineStar 448 >> when iAmLookingAtTheFirstPipelineStar 449 >> then_ iSeeFilledStarIcon 450 , test "clicked on favorited pipeline has unfilled star icon" <| 451 given iHaveAnOpenSideBar_ 452 >> given iClickedThePipelineGroup 453 >> given iClickedTheFirstPipelineStar 454 >> given iClickedTheFirstPipelineStar 455 >> when iAmLookingAtTheFirstPipelineStar 456 >> then_ iSeeUnfilledStarIcon 457 , test "favorited pipelines are loaded from local storage" <| 458 given iHaveAnOpenSideBar_ 459 >> given iClickedThePipelineGroup 460 >> given myBrowserFetchedFavoritedPipelines 461 >> when iAmLookingAtTheFirstPipelineStar 462 >> then_ iSeeFilledStarIcon 463 , test "pipeline list lays out vertically" <| 464 given iHaveAnOpenSideBar_ 465 >> given iClickedThePipelineGroup 466 >> when iAmLookingAtThePipelineList 467 >> then_ iSeeItLaysOutVertically 468 , test "pipeline has three children" <| 469 given iHaveAnOpenSideBar_ 470 >> given iClickedThePipelineGroup 471 >> when iAmLookingAtTheFirstPipeline 472 >> then_ iSeeThreeChildren 473 , test "pipeline lays out horizontally" <| 474 given iHaveAnOpenSideBar_ 475 >> given iClickedThePipelineGroup 476 >> when iAmLookingAtTheFirstPipeline 477 >> then_ iSeeItLaysOutHorizontally 478 , test "pipeline centers contents" <| 479 given iHaveAnOpenSideBar_ 480 >> given iClickedThePipelineGroup 481 >> when iAmLookingAtTheFirstPipeline 482 >> then_ iSeeItCentersContents 483 , test "pipeline has padding" <| 484 given iHaveAnOpenSideBar_ 485 >> given iClickedThePipelineGroup 486 >> when iAmLookingAtTheFirstPipeline 487 >> then_ iSeeItHasProperPadding 488 , test "pipeline has icon on the left" <| 489 given iHaveAnOpenSideBar_ 490 >> given iClickedThePipelineGroup 491 >> when iAmLookingAtTheFirstPipelineIcon 492 >> then_ iSeeAPipelineIcon 493 , test "pipeline icon has left margin" <| 494 given iHaveAnOpenSideBar_ 495 >> given iClickedThePipelineGroup 496 >> when iAmLookingAtTheFirstPipelineIcon 497 >> then_ iSeeItHasLeftMargin 498 , test "pipeline icon does not shrink when pipeline name is long" <| 499 given iHaveAnOpenSideBar_ 500 >> given iClickedThePipelineGroup 501 >> when iAmLookingAtTheFirstPipelineIcon 502 >> then_ iSeeItDoesNotShrink 503 , test "pipeline icon is dim" <| 504 given iHaveAnOpenSideBar_ 505 >> given iClickedThePipelineGroup 506 >> when iAmLookingAtTheFirstPipelineIcon 507 >> then_ iSeeThePipelineIconIsDim 508 , test "pipeline link has padding" <| 509 given iHaveAnOpenSideBar_ 510 >> given iClickedThePipelineGroup 511 >> when iAmLookingAtTheFirstPipelineLink 512 >> then_ iSeeItHasProperPadding 513 , test "first pipeline link contains text of pipeline name" <| 514 given iHaveAnOpenSideBar_ 515 >> given iClickedThePipelineGroup 516 >> when iAmLookingAtTheFirstPipelineLink 517 >> then_ iSeeItContainsThePipelineName 518 , test "pipeline link is a link to the pipeline" <| 519 given iHaveAnOpenSideBar_ 520 >> given iClickedThePipelineGroup 521 >> when iAmLookingAtTheFirstPipeline 522 >> then_ iSeeItIsALinkToTheFirstPipeline 523 , test "pipeline link has large font" <| 524 given iHaveAnOpenSideBar_ 525 >> given iClickedThePipelineGroup 526 >> when iAmLookingAtTheFirstPipelineLink 527 >> then_ iSeeMediumFont 528 , test "pipeline link stretches" <| 529 given iHaveAnOpenSideBar_ 530 >> given iClickedThePipelineGroup 531 >> when iAmLookingAtTheFirstPipelineLink 532 >> then_ iSeeItStretches 533 , test "pipeline link will ellipsize if it is too long" <| 534 given iHaveAnOpenSideBar_ 535 >> given iClickedThePipelineGroup 536 >> when iAmLookingAtTheFirstPipelineLink 537 >> then_ iSeeItEllipsizesLongText 538 , test "pipeline will have a valid id" <| 539 given iHaveAnOpenSideBar_ 540 >> given iClickedThePipelineGroup 541 >> when iAmLookingAtTheFirstPipeline 542 >> then_ iSeeItHasAValidPipelineId 543 , test "pipeline icon is white when pipeline link is hovered" <| 544 given iHaveAnOpenSideBar_ 545 >> given iClickedThePipelineGroup 546 >> given iHoveredThePipelineLink 547 >> when iAmLookingAtTheFirstPipelineIcon 548 >> then_ iSeeThePipelineIconIsWhite 549 , defineHoverBehaviour 550 { name = "pipeline" 551 , setup = 552 iAmViewingTheDashboardOnANonPhoneScreen () 553 |> iClickedTheHamburgerIcon 554 |> iClickedThePipelineGroup 555 |> Tuple.first 556 , query = (\a -> ( a, [] )) >> iAmLookingAtTheFirstPipeline 557 , unhoveredSelector = 558 { description = "grey" 559 , selector = 560 [ style "color" ColorValues.grey30 ] 561 } 562 , hoverable = Message.SideBarPipeline AllPipelinesSection Data.pipelineId 563 , hoveredSelector = 564 { description = "dark background and light text" 565 , selector = 566 [ style "background-color" Colors.sideBarHovered 567 , style "color" ColorValues.white 568 ] 569 } 570 } 571 , test "subscribes to 5-second tick" <| 572 given iAmLookingAtThePage 573 >> then_ myBrowserNotifiesEveryFiveSeconds 574 , test "fetches pipelines every five seconds" <| 575 given iAmLookingAtThePage 576 >> given myBrowserFetchedPipelines 577 >> when fiveSecondsPass 578 >> then_ myBrowserFetchesPipelines 579 , test "sidebar has two pipeline groups" <| 580 given iAmLookingAtThePage 581 >> given iAmOnANonPhoneScreen 582 >> given myBrowserFetchedPipelinesFromMultipleTeams 583 >> given iClickedTheHamburgerIcon 584 >> when iAmLookingAtTheSideBar 585 >> then_ iSeeTwoTeams 586 , test "sidebar has text content of second team's name" <| 587 given iAmLookingAtThePage 588 >> given iAmOnANonPhoneScreen 589 >> given myBrowserFetchedPipelinesFromMultipleTeams 590 >> given iClickedTheHamburgerIcon 591 >> when iAmLookingAtTheSideBar 592 >> then_ iSeeTheSecondTeamName 593 , test "pipeline names align with the teamName" <| 594 given iHaveAnExpandedTeam 595 >> when iAmLookingAtTheFirstPipelineIcon 596 >> then_ iSeeItAlignsWithTheTeamName 597 ] 598 ] 599 600 601 hasCurrentPipelineInSideBar : 602 (() -> ( Application.Model, List Effects.Effect )) 603 -> List Test 604 hasCurrentPipelineInSideBar iAmLookingAtThePage = 605 [ test "team containing current pipeline expands when opening sidebar" <| 606 given iAmLookingAtThePage 607 >> given iAmOnANonPhoneScreen 608 >> given myBrowserFetchedPipelinesFromMultipleTeams 609 >> given iClickedTheHamburgerIcon 610 >> when iAmLookingAtTheOtherPipelineList 611 >> then_ iSeeOneChild 612 , test "current team only automatically expands on page load" <| 613 given iAmLookingAtThePage 614 >> given iAmOnANonPhoneScreen 615 >> given myBrowserFetchedPipelinesFromMultipleTeams 616 >> given iClickedTheHamburgerIcon 617 >> given iClickedTheOtherPipelineGroup 618 >> given iNavigateToTheDashboard 619 >> given iNavigateBackToThePipelinePage 620 >> given myBrowserFetchedPipelinesFromMultipleTeams 621 >> when iAmLookingAtTheOtherPipelineList 622 >> then_ iSeeNoPipelineNames 623 , test "current team has team icon" <| 624 given iAmLookingAtThePage 625 >> given iAmOnANonPhoneScreen 626 >> given myBrowserFetchedPipelinesFromMultipleTeams 627 >> given iClickedTheHamburgerIcon 628 >> when iAmLookingAtTheOtherTeamIcon 629 >> then_ iSeeTheTeamIcon 630 , test "current team name is bright" <| 631 given iAmLookingAtThePage 632 >> given iAmOnANonPhoneScreen 633 >> given myBrowserFetchedPipelinesFromMultipleTeams 634 >> given iClickedTheHamburgerIcon 635 >> given iClickedTheOtherPipelineGroup 636 >> when iAmLookingAtTheOtherTeamName 637 >> then_ iSeeTheTextIsBright 638 , test "current pipeline name has grey background" <| 639 given iAmLookingAtThePage 640 >> given iAmOnANonPhoneScreen 641 >> given myBrowserFetchedPipelinesFromMultipleTeams 642 >> given iClickedTheHamburgerIcon 643 >> when iAmLookingAtTheOtherPipeline 644 >> then_ iSeeADarkBackground 645 , test "current pipeline has bright pipeline icon" <| 646 given iAmLookingAtThePage 647 >> given iAmOnANonPhoneScreen 648 >> given myBrowserFetchedPipelinesFromMultipleTeams 649 >> given iClickedTheHamburgerIcon 650 >> when iAmLookingAtTheOtherPipelineIcon 651 >> then_ iSeeThePipelineIconIsBright 652 , test "current pipeline name is bright" <| 653 given iAmLookingAtThePage 654 >> given iAmOnANonPhoneScreen 655 >> given myBrowserFetchedPipelinesFromMultipleTeams 656 >> given iClickedTheHamburgerIcon 657 >> when iAmLookingAtTheOtherPipeline 658 >> then_ iSeeTheTextIsBright 659 , test "pipeline with same name on other team has invisible border" <| 660 given iAmLookingAtThePage 661 >> given iAmOnANonPhoneScreen 662 >> given myBrowserFetchedPipelinesFromMultipleTeams 663 >> given iClickedTheHamburgerIcon 664 >> given iClickedThePipelineGroup 665 >> when iAmLookingAtThePipelineWithTheSameName 666 >> then_ iSeeAnInvisibleBackground 667 ] 668 669 670 all : Test 671 all = 672 describe "sidebar" 673 [ describe "on dashboard page" <| hasSideBar (when iVisitTheDashboard) 674 , describe "loading dashboard page" <| pageLoadIsSideBarCompatible iVisitTheDashboard 675 , describe "dashboard page exceptions" 676 [ test "page contents are to the right of the sidebar" <| 677 given iHaveAnOpenSideBar 678 >> when iAmLookingAtThePageContents 679 >> then_ iSeeTheUsualDashboardContentsScrollingIndependently 680 , test "sidebar remains expanded when toggling high-density view" <| 681 given iHaveAnOpenSideBar 682 >> given iToggledToHighDensity 683 >> when iAmLookingAtThePageBelowTheTopBar 684 >> then_ iSeeTwoChildren 685 , test "left hand section of top bar lays out horizontally" <| 686 given iVisitTheDashboard 687 >> given iAmOnANonPhoneScreen 688 >> when iAmLookingAtTheLeftHandSectionOfTheTopBar 689 >> then_ iSeeItLaysOutHorizontally 690 ] 691 , describe "loading pipeline page" <| pageLoadIsSideBarCompatible iOpenedThePipelinePage 692 , describe "on pipeline page" <| hasSideBar (when iOpenedThePipelinePage) 693 , describe "pipeline page current pipeline" <| 694 hasCurrentPipelineInSideBar (when iOpenedThePipelinePage) 695 , describe "pipeline page exceptions" 696 [ describe "hamburger icon" 697 [ test "shows turbulence when pipelines fail to fetch" <| 698 given iAmViewingThePipelinePageOnANonPhoneScreen 699 >> when myBrowserFailsToFetchPipelines 700 >> then_ iSeeTheTurbulenceMessage 701 702 -- TODO find a more general description 703 ] 704 , describe "sidebar" 705 [ test "clicking a pipeline link respects sidebar state" <| 706 given iHaveAnExpandedPipelineGroup 707 >> when iClickAPipelineLink 708 >> then_ iSeeThePipelineGroupIsStillExpanded 709 , test "navigating to the dashboard respects sidebar state" <| 710 given iHaveAnExpandedPipelineGroup 711 >> when iNavigateToTheDashboard 712 >> then_ iSeeThePipelineGroupIsStillExpanded 713 ] 714 ] 715 , describe "loading build page" <| pageLoadIsSideBarCompatible iOpenTheBuildPage 716 , describe "on build page" <| hasSideBar (when iOpenTheBuildPage) 717 , describe "build page current pipeline" <| 718 hasCurrentPipelineInSideBar (when iOpenTheJobBuildPage) 719 , describe "build page exceptions" 720 [ test "current team is expanded when pipelines are fetched before build" <| 721 given iOpenTheBuildPage 722 >> given iAmOnANonPhoneScreen 723 >> given myBrowserFetchedPipelinesFromMultipleTeams 724 >> given myBrowserFetchedTheBuild 725 >> given iClickedTheHamburgerIcon 726 >> when iAmLookingAtTheOtherPipelineList 727 >> then_ iSeeOneChild 728 ] 729 , describe "loading job page" <| pageLoadIsSideBarCompatible iOpenTheJobPage 730 , describe "on job page" <| hasSideBar (when iOpenTheJobPage) 731 , describe "job page current pipeline" <| 732 hasCurrentPipelineInSideBar (when iOpenTheJobPage) 733 , describe "loading resource page" <| pageLoadIsSideBarCompatible iOpenTheResourcePage 734 , describe "on resource page" <| hasSideBar (when iOpenTheResourcePage) 735 , describe "resource page current pipeline" <| 736 hasCurrentPipelineInSideBar (when iOpenTheResourcePage) 737 , describe "on notfound page" <| hasSideBar (when iOpenTheNotFoundPage) 738 ] 739 740 741 iAmViewingTheDashboardOnANonPhoneScreen = 742 iAmViewingTheDashboard 743 >> iAmOnANonPhoneScreen 744 745 746 iAmOnANonPhoneScreen = 747 Tuple.first 748 >> Application.handleCallback 749 (Callback.ScreenResized 750 { scene = 751 { width = 0 752 , height = 0 753 } 754 , viewport = 755 { x = 0 756 , y = 0 757 , width = 1200 758 , height = 900 759 } 760 } 761 ) 762 763 764 iAmLookingAtTheTopBar = 765 Tuple.first >> Common.queryView >> Query.find [ id "top-bar-app" ] 766 767 768 iSeeItIs54PxTall = 769 Query.has [ style "height" "54px" ] 770 771 772 iAmLookingAtTheLeftHandSectionOfTheTopBar = 773 iAmLookingAtTheTopBar 774 >> Query.children [] 775 >> Query.first 776 777 778 iAmLookingAtTheFirstChild = 779 Query.children [] >> Query.first 780 781 782 iSeeAHamburgerIcon = 783 Query.has 784 (DashboardTests.iconSelector 785 { size = hamburgerIconWidth 786 , image = Assets.HamburgerMenuIcon 787 } 788 ) 789 790 791 hamburgerIconWidth = 792 "54px" 793 794 795 iSeeItLaysOutHorizontally = 796 Query.has [ style "display" "flex" ] 797 798 799 iSeeItLaysOutVertically = 800 Query.has [ style "display" "flex", style "flex-direction" "column" ] 801 802 803 iAmViewingTheDashboardOnAPhoneScreen = 804 iAmViewingTheDashboard 805 >> iAmOnAPhoneScreen 806 807 808 iAmOnAPhoneScreen = 809 Tuple.first 810 >> Application.handleCallback 811 (Callback.ScreenResized 812 { scene = 813 { width = 0 814 , height = 0 815 } 816 , viewport = 817 { x = 0 818 , y = 0 819 , width = 360 820 , height = 640 821 } 822 } 823 ) 824 825 826 iAmViewingTheDashboard = 827 iVisitTheDashboard 828 >> dataRefreshes 829 830 831 iVisitTheDashboard _ = 832 Application.init 833 { turbulenceImgSrc = "" 834 , notFoundImgSrc = "" 835 , csrfToken = "" 836 , authToken = "" 837 , pipelineRunningKeyframes = "" 838 } 839 { protocol = Url.Http 840 , host = "" 841 , port_ = Nothing 842 , path = "/" 843 , query = Nothing 844 , fragment = Nothing 845 } 846 847 848 apiDataLoads = 849 Tuple.first 850 >> Application.handleCallback 851 (Callback.AllTeamsFetched <| 852 Ok 853 [ { name = "team", id = 0 } 854 , { name = "other-team", id = 1 } 855 ] 856 ) 857 >> Tuple.first 858 >> Application.handleCallback 859 (Callback.AllPipelinesFetched <| 860 Ok 861 [ Data.pipeline "team" 0 |> Data.withName "pipeline" 862 , Data.pipeline "team" 1 |> Data.withName "other-pipeline" 863 ] 864 ) 865 866 867 dataRefreshes = 868 apiDataLoads 869 >> Tuple.first 870 >> Application.handleCallback 871 (Callback.AllPipelinesFetched <| 872 Ok 873 [ Data.pipeline "team" 0 |> Data.withName "pipeline" 874 , Data.pipeline "team" 1 |> Data.withName "other-pipeline" 875 ] 876 ) 877 878 879 iSeeNoHamburgerIcon = 880 Query.hasNot 881 (DashboardTests.iconSelector 882 { size = hamburgerIconWidth 883 , image = Assets.HamburgerMenuIcon 884 } 885 ) 886 887 888 iAmLookingAtTheHamburgerMenu = 889 iAmLookingAtTheTopBar 890 >> Query.find [ id "hamburger-menu" ] 891 892 893 itIsClickable domID = 894 Expect.all 895 [ Query.has [ style "cursor" "pointer" ] 896 , Event.simulate Data.leftClickEvent 897 >> Event.expect 898 (TopLevelMessage.Update <| 899 Message.Click domID 900 ) 901 ] 902 903 904 iDragTheSideBarHandleTo x = 905 iPressTheSideBarHandle 906 >> iMoveMyMouseXTo x 907 >> iReleaseTheSideBarHandle 908 909 910 iPressTheSideBarHandle = 911 Tuple.first 912 >> Application.update 913 (TopLevelMessage.Update <| Message.Click Message.SideBarResizeHandle) 914 915 916 iMoveMyMouseXTo x = 917 Tuple.first 918 >> Application.handleDelivery 919 (Subscription.Moused { x = x, y = 0 }) 920 921 922 iReleaseTheSideBarHandle = 923 Tuple.first 924 >> Application.handleDelivery 925 Subscription.MouseUp 926 927 928 iClickedTheHamburgerIcon = 929 Tuple.first 930 >> Application.update 931 (TopLevelMessage.Update <| Message.Click Message.HamburgerMenu) 932 933 934 iSeeALighterBackground = 935 Query.has [ style "background-color" ColorValues.grey90 ] 936 937 938 iSeeADarkerBackground = 939 Query.has [ style "background-color" ColorValues.grey100 ] 940 941 942 iSeeTwoChildren = 943 Query.children [] >> Query.count (Expect.equal 2) 944 945 946 iSeeTwoTeams = 947 Query.children [ class "side-bar-team" ] >> Query.first >> Query.children [] >> Query.count (Expect.equal 2) 948 949 950 iSeeThreeChildren = 951 Query.children [] >> Query.count (Expect.equal 3) 952 953 954 iAmLookingAtThePageBelowTheTopBar = 955 Tuple.first 956 >> Common.queryView 957 >> Query.find [ id "page-below-top-bar" ] 958 959 960 iAmLookingAtThePageContents = 961 iAmLookingAtThePageBelowTheTopBar 962 >> Query.children [] 963 >> Query.index 1 964 965 966 iSeeTheUsualDashboardContentsScrollingIndependently = 967 Expect.all 968 [ Query.has 969 [ style "box-sizing" "border-box" 970 , style "display" "flex" 971 , style "height" "100%" 972 , style "width" "100%" 973 , style "overflow-y" "auto" 974 ] 975 , Query.has [ text "pipeline" ] 976 ] 977 978 979 iAmLookingAtTheSideBar = 980 iAmLookingAtThePageBelowTheTopBar >> Query.children [] >> Query.first 981 982 983 iSeeADividingLineBelow = 984 Query.has [ style "border-bottom" <| "1px solid " ++ ColorValues.black ] 985 986 987 iSeeADividingLineToTheRight = 988 Query.has [ style "border-right" <| "1px solid " ++ ColorValues.black ] 989 990 991 iSeeItIs275PxWide = 992 Query.has [ style "width" "275px", style "box-sizing" "border-box" ] 993 994 995 iSeeItHasWidth width = 996 Query.has [ style "width" <| String.fromFloat width ++ "px" ] 997 998 999 iAmLookingAtTheTeam = 1000 iAmLookingAtTheSideBar 1001 >> Query.children [ containing [ text "team" ] ] 1002 >> Query.first 1003 1004 1005 iSeeItIsAsWideAsTheHamburgerIcon = 1006 Query.has 1007 [ style "width" hamburgerIconWidth 1008 , style "box-sizing" "border-box" 1009 ] 1010 1011 1012 iAmLookingAtTheTeamIcon = 1013 iAmLookingAtTheTeamHeader >> Query.children [] >> Query.index 1 1014 1015 1016 iSeeAPictureOfTwoPeople = 1017 Query.has 1018 (DashboardTests.iconSelector 1019 { size = "18px" 1020 , image = Assets.PeopleIcon 1021 } 1022 ) 1023 1024 1025 iAmLookingAtThePlusMinusIcon = 1026 iAmLookingAtTheTeamHeader >> Query.children [] >> Query.index 0 1027 1028 1029 iSeeAPlusIcon = 1030 Query.has 1031 (DashboardTests.iconSelector 1032 { size = "10px" 1033 , image = Assets.PlusIcon 1034 } 1035 ) 1036 1037 1038 iSeeTheTeamName = 1039 Query.has [ text "team" ] 1040 1041 1042 iDoNotSeeTheOtherTeam = 1043 Query.hasNot [ text "other-team" ] 1044 1045 1046 iSeeItSpreadsAndCentersContents = 1047 Query.has 1048 [ style "align-items" "center" 1049 , style "justify-content" "space-between" 1050 ] 1051 1052 1053 iSeeItHas5PxPadding = 1054 Query.has [ style "padding" "5px" ] 1055 1056 1057 iSeeItHasPaddingAndMargin = 1058 Query.has [ style "padding" "2.5px", style "margin" "2.5px" ] 1059 1060 1061 iSeeMediumFont = 1062 Query.has [ style "font-size" "14px" ] 1063 1064 1065 iSeeItEllipsizesLongText = 1066 Query.has 1067 [ style "white-space" "nowrap" 1068 , style "overflow" "hidden" 1069 , style "text-overflow" "ellipsis" 1070 ] 1071 1072 1073 iSeeItHasAValidTeamId = 1074 Query.has 1075 [ id <| 1076 (pipelinesSectionName AllPipelinesSection 1077 ++ "_" 1078 ++ Base64.encode "team" 1079 ) 1080 ] 1081 1082 1083 iSeeItHasAValidPipelineId = 1084 Query.has 1085 [ id <| 1086 (pipelinesSectionName AllPipelinesSection 1087 ++ "_" 1088 ++ Base64.encode "team" 1089 ++ "_" 1090 ++ Base64.encode "pipeline" 1091 ) 1092 ] 1093 1094 1095 iSeeItScrollsIndependently = 1096 Query.has [ style "overflow-y" "auto" ] 1097 1098 1099 iSeeItFillsHeight = 1100 Query.has [ style "height" "100%", style "box-sizing" "border-box" ] 1101 1102 1103 iSeeItDoesNotShrink = 1104 Query.has [ style "flex-shrink" "0" ] 1105 1106 1107 iSeeItHasRightPadding = 1108 Query.has [ style "padding-right" "10px" ] 1109 1110 1111 iSeeItHasBottomPadding = 1112 Query.has [ style "padding-bottom" "10px" ] 1113 1114 1115 iSeeItHasAResizeHandle = 1116 Query.has [ style "cursor" "col-resize" ] 1117 1118 1119 iSeeUnfilledStarIcon = 1120 Query.has 1121 (DashboardTests.iconSelector 1122 { size = "18px" 1123 , image = Assets.FavoritedToggleIcon { isFavorited = False, isHovered = False, isSideBar = True } 1124 } 1125 ) 1126 1127 1128 iSeeFilledStarIcon = 1129 Query.has 1130 (DashboardTests.iconSelector 1131 { size = "18px" 1132 , image = Assets.FavoritedToggleIcon { isFavorited = True, isHovered = False, isSideBar = True } 1133 } 1134 ) 1135 1136 1137 iClickedThePipelineGroup = 1138 Tuple.first 1139 >> Application.update 1140 (TopLevelMessage.Update <| 1141 Message.Click <| 1142 Message.SideBarTeam AllPipelinesSection "team" 1143 ) 1144 1145 1146 iClickedTheFirstPipelineStar = 1147 Tuple.first 1148 >> Application.update 1149 (TopLevelMessage.Update <| 1150 Message.Click <| 1151 Message.SideBarFavoritedIcon 0 1152 ) 1153 1154 1155 iClickedFavoritedPipelineStar = 1156 iClickedTheFirstPipelineStar 1157 1158 1159 iAmLookingAtThePreviousPipelineStar = 1160 iAmLookingAtTheFirstPipeline 1161 >> Query.findAll [ attribute <| Attr.attribute "aria-label" "Favorite Icon" ] 1162 >> Query.index 0 1163 1164 1165 iSeeAMinusIcon = 1166 Query.has 1167 (iconSelector 1168 { size = "10px" 1169 , image = Assets.MinusIcon 1170 } 1171 ) 1172 1173 1174 iSeeThePipelineIconIsDim = 1175 Query.has 1176 [ style "background-image" <| 1177 Assets.backgroundImage <| 1178 Just Assets.PipelineIconGrey 1179 ] 1180 1181 1182 iSeeThePipelineIconIsBright = 1183 Query.has 1184 [ style "background-image" <| 1185 Assets.backgroundImage <| 1186 Just Assets.PipelineIconLightGrey 1187 ] 1188 1189 1190 iSeeThePipelineIconIsWhite = 1191 Query.has 1192 [ style "background-image" <| 1193 Assets.backgroundImage <| 1194 Just Assets.PipelineIconWhite 1195 ] 1196 1197 1198 iSeeTheFavoritedIconIsDim = 1199 Query.has 1200 [ style "background-image" <| 1201 Assets.backgroundImage <| 1202 Just <| 1203 Assets.FavoritedToggleIcon { isFavorited = False, isHovered = False, isSideBar = True } 1204 ] 1205 1206 1207 iSeeTheFavoritedIconIsBright = 1208 Query.has 1209 [ style "background-image" <| 1210 Assets.backgroundImage <| 1211 Just <| 1212 Assets.FavoritedToggleIcon { isFavorited = False, isHovered = True, isSideBar = True } 1213 ] 1214 1215 1216 iSeeTheTeamIcon = 1217 Query.has 1218 [ style "background-image" <| 1219 Assets.backgroundImage <| 1220 Just Assets.PeopleIcon 1221 ] 1222 1223 1224 iSeeTheTextIsBright = 1225 Query.has [ style "color" ColorValues.grey20 ] 1226 1227 1228 iSeeItIsBright = 1229 Query.has [ style "opacity" "1" ] 1230 1231 1232 iSeeItIsGreyedOut = 1233 Query.has [ style "opacity" "0.7" ] 1234 1235 1236 iSeeItIsDim = 1237 Query.has [ style "opacity" "0.5" ] 1238 1239 1240 iAmLookingAtThePipelineList = 1241 iAmLookingAtTheAllPipelinesSection 1242 >> Query.children [] 1243 >> Query.index 0 1244 1245 1246 iAmLookingAtTheFirstPipeline = 1247 iAmLookingAtThePipelineList >> Query.children [] >> Query.index 1 >> Query.children [] >> Query.first 1248 1249 1250 iAmLookingAtTheFirstPipelineLink = 1251 iAmLookingAtTheFirstPipeline >> Query.children [] >> Query.index 1 1252 1253 1254 iSeeItContainsThePipelineName = 1255 Query.has [ text "pipeline" ] 1256 1257 1258 iAmLookingAtTheTeamHeader = 1259 iAmLookingAtTheTeam >> Query.children [] >> Query.first >> Query.children [] >> Query.first 1260 1261 1262 iAmLookingAtTheTeamName = 1263 iAmLookingAtTheTeamHeader >> Query.children [] >> Query.index 2 1264 1265 1266 iSeeItIsALinkToTheFirstPipeline = 1267 Query.has 1268 [ tag "a", attribute <| Attr.href "/teams/team/pipelines/pipeline" ] 1269 1270 1271 iToggledToHighDensity = 1272 Tuple.first 1273 >> Application.update 1274 (TopLevelMessage.DeliveryReceived <| 1275 Subscription.RouteChanged <| 1276 Routes.Dashboard 1277 { searchType = Routes.HighDensity 1278 , dashboardView = Routes.ViewNonArchivedPipelines 1279 } 1280 ) 1281 1282 1283 fiveSecondsPass = 1284 Tuple.first 1285 >> Application.handleDelivery 1286 (Subscription.ClockTicked 1287 Subscription.FiveSeconds 1288 (Time.millisToPosix 0) 1289 ) 1290 1291 1292 myBrowserFetchesPipelines ( a, effects ) = 1293 let 1294 pipelinesDirectly = 1295 List.member Effects.FetchAllPipelines effects 1296 1297 pipelinesThroughData = 1298 List.member Effects.FetchAllTeams effects 1299 in 1300 if pipelinesDirectly || pipelinesThroughData then 1301 Expect.pass 1302 1303 else 1304 Expect.fail <| 1305 "Expected " 1306 ++ Debug.toString effects 1307 ++ " to contain " 1308 ++ Debug.toString Effects.FetchAllPipelines 1309 ++ " or " 1310 ++ Debug.toString Effects.FetchAllTeams 1311 1312 1313 iHaveAnOpenSideBar = 1314 iAmViewingTheDashboardOnANonPhoneScreen 1315 >> iClickedTheHamburgerIcon 1316 1317 1318 iSeeItHasTopPadding = 1319 Query.has [ style "padding-top" "5px" ] 1320 1321 1322 iSeeItHasInvisibleBorder = 1323 Query.has [ style "border" <| "1px solid " ++ Colors.frame ] 1324 1325 1326 iSeeItHasNarrowerLines = 1327 Query.has [ style "line-height" "1.2" ] 1328 1329 1330 iAmLookingAtTheFirstPipelineIcon = 1331 iAmLookingAtTheFirstPipeline >> Query.children [] >> Query.first 1332 1333 1334 iAmLookingAtTheFirstPipelineStar = 1335 iAmLookingAtTheFirstPipeline 1336 >> Query.findAll [ attribute <| Attr.attribute "aria-label" "Favorite Icon" ] 1337 >> Query.index 0 1338 1339 1340 iAmLookingAtTheAllPipelinesSection = 1341 Tuple.first >> Common.queryView >> Query.find [ id "all-pipelines" ] 1342 1343 1344 iAmLookingAtTheFavoritesSection = 1345 Tuple.first >> Common.queryView >> Query.find [ id "favorites" ] 1346 1347 1348 iSeeAPipelineIcon = 1349 Query.has 1350 [ style "background-image" <| 1351 Assets.backgroundImage <| 1352 Just Assets.PipelineIconGrey 1353 , style "background-repeat" "no-repeat" 1354 , style "height" "18px" 1355 , style "width" "18px" 1356 , style "background-size" "contain" 1357 , style "background-position" "center" 1358 ] 1359 1360 1361 iSeeItCentersContents = 1362 Query.has [ style "align-items" "center" ] 1363 1364 1365 iSeeItHasLeftMargin = 1366 Query.has [ style "margin-left" "28px" ] 1367 1368 1369 iSeeItHasProperPadding = 1370 Query.has [ style "padding" "5px 2.5px" ] 1371 1372 1373 iSeeASideBar = 1374 Query.has [ id "side-bar" ] 1375 1376 1377 iAmLookingAtTheLeftSideOfThePage = 1378 iAmLookingBelowTheTopBar 1379 >> Query.children [] 1380 >> Query.first 1381 1382 1383 iAmLookingBelowTheTopBar = 1384 Tuple.first 1385 >> Common.queryView 1386 >> Query.find [ id "page-below-top-bar" ] 1387 1388 1389 iAmViewingThePipelinePageOnANonPhoneScreen = 1390 iAmViewingThePipelinePage 1391 >> Application.handleCallback 1392 (Callback.ScreenResized 1393 { scene = 1394 { width = 0 1395 , height = 0 1396 } 1397 , viewport = 1398 { x = 0 1399 , y = 0 1400 , width = 1200 1401 , height = 900 1402 } 1403 } 1404 ) 1405 1406 1407 iAmViewingThePipelinePageOnAPhoneScreen = 1408 iAmViewingThePipelinePage 1409 >> Application.handleCallback 1410 (Callback.ScreenResized 1411 { scene = 1412 { width = 0 1413 , height = 0 1414 } 1415 , viewport = 1416 { x = 0 1417 , y = 0 1418 , width = 360 1419 , height = 640 1420 } 1421 } 1422 ) 1423 1424 1425 iOpenedThePipelinePage _ = 1426 Application.init 1427 { turbulenceImgSrc = "" 1428 , notFoundImgSrc = "" 1429 , csrfToken = "" 1430 , authToken = "" 1431 , pipelineRunningKeyframes = "" 1432 } 1433 { protocol = Url.Http 1434 , host = "" 1435 , port_ = Nothing 1436 , path = "/teams/other-team/pipelines/yet-another-pipeline" 1437 , query = Nothing 1438 , fragment = Nothing 1439 } 1440 1441 1442 iAmViewingThePipelinePage = 1443 iOpenedThePipelinePage >> Tuple.first 1444 1445 1446 iShrankTheViewport = 1447 Tuple.first >> Application.handleDelivery (Subscription.WindowResized 300 300) 1448 1449 1450 iAmLookingAtTheHamburgerIcon = 1451 iAmLookingAtTheHamburgerMenu 1452 >> Query.children [] 1453 >> Query.first 1454 1455 1456 iSeeADarkDividingLineToTheRight = 1457 Query.has 1458 [ style "border-right" <| "1px solid " ++ ColorValues.black 1459 , style "opacity" "1" 1460 ] 1461 1462 1463 itIsHoverable domID = 1464 Expect.all 1465 [ Event.simulate Event.mouseEnter 1466 >> Event.expect 1467 (TopLevelMessage.Update <| 1468 Message.Hover <| 1469 Just domID 1470 ) 1471 , Event.simulate Event.mouseLeave 1472 >> Event.expect 1473 (TopLevelMessage.Update <| 1474 Message.Hover Nothing 1475 ) 1476 ] 1477 1478 1479 iDoNotSeeAHamburgerIcon = 1480 Query.hasNot 1481 (DashboardTests.iconSelector 1482 { size = hamburgerIconWidth 1483 , image = Assets.HamburgerMenuIcon 1484 } 1485 ) 1486 1487 1488 iSeeNoSideBar = 1489 Query.hasNot [ id "side-bar" ] 1490 1491 1492 iSeeFavoritesSection = 1493 Query.has [ text "favorite pipelines" ] 1494 1495 1496 iDoNotSeeFavoritesSection = 1497 Query.hasNot [ text "favorite pipelines" ] 1498 1499 1500 myBrowserFetchedPipelinesFromMultipleTeams = 1501 Tuple.first 1502 >> Application.handleCallback 1503 (Callback.AllPipelinesFetched <| 1504 Ok 1505 [ Data.pipeline "team" 0 |> Data.withName "pipeline" 1506 , Data.pipeline "team" 1 |> Data.withName "other-pipeline" 1507 , Data.pipeline "team" 2 |> Data.withName "yet-another-pipeline" 1508 , Data.pipeline "other-team" 3 |> Data.withName "yet-another-pipeline" 1509 ] 1510 ) 1511 1512 1513 myBrowserFetchedPipelines = 1514 Tuple.first 1515 >> Application.handleCallback 1516 (Callback.AllPipelinesFetched <| 1517 Ok 1518 [ Data.pipeline "team" 0 |> Data.withName "pipeline" 1519 , Data.pipeline "team" 1 |> Data.withName "other-pipeline" 1520 ] 1521 ) 1522 1523 1524 myBrowserFetchedArchivedAndNonArchivedPipelines = 1525 Tuple.first 1526 >> Application.handleCallback 1527 (Callback.AllPipelinesFetched <| 1528 Ok 1529 [ Data.pipeline "team" 0 |> Data.withName "archived" |> Data.withArchived True 1530 , Data.pipeline "team" 1 |> Data.withName "non-archived" 1531 ] 1532 ) 1533 1534 1535 myBrowserFetchedOnlyArchivedPipelines = 1536 Tuple.first 1537 >> Application.handleCallback 1538 (Callback.AllPipelinesFetched <| 1539 Ok 1540 [ Data.pipeline "team" 0 |> Data.withName "archived1" |> Data.withArchived True 1541 , Data.pipeline "team" 1 |> Data.withName "archived2" |> Data.withArchived True 1542 ] 1543 ) 1544 1545 1546 iDoNotSeeTheArchivedPipeline = 1547 Query.hasNot [ text "archived" ] 1548 1549 1550 iSeeTheArchivedPipeline = 1551 Query.has [ text "archived" ] 1552 1553 1554 myBrowserFetchedFavoritedPipelines = 1555 Tuple.first 1556 >> Application.handleDelivery 1557 (Subscription.FavoritedPipelinesReceived <| 1558 Ok (Set.singleton 0) 1559 ) 1560 1561 1562 myBrowserFetchedFavoritedPipelinesThatDoNotExist = 1563 Tuple.first 1564 >> Application.handleDelivery 1565 (Subscription.FavoritedPipelinesReceived <| 1566 Ok (Set.singleton 100) 1567 ) 1568 1569 1570 iAmLookingAtTheTeamInTheFavoritesSection = 1571 iAmLookingAtTheFavoritesSection >> Query.children [ containing [ text "team" ] ] >> Query.first 1572 1573 1574 itIsNotClickable = 1575 Expect.all 1576 [ Query.has [ style "cursor" "default" ] 1577 , Event.simulate Event.click >> Event.toResult >> Expect.err 1578 ] 1579 1580 1581 iSeeTheTurbulenceMessage = 1582 Tuple.first 1583 >> Common.queryView 1584 >> Query.find [ class "error-message" ] 1585 >> Query.hasNot [ class "hidden" ] 1586 1587 1588 myBrowserFailsToFetchPipelines = 1589 Tuple.first 1590 >> Application.handleCallback 1591 (Callback.AllPipelinesFetched <| Data.httpInternalServerError) 1592 1593 1594 iSeeSomeChildren = 1595 Query.children [] >> Query.count (Expect.greaterThan 0) 1596 1597 1598 iAmLookingAtThePipelineGroup = 1599 iAmLookingAtTheSideBar >> Query.children [] >> Query.first 1600 1601 1602 iAmLookingAtTheGroupHeader = 1603 iAmLookingAtThePipelineGroup >> Query.children [] >> Query.first 1604 1605 1606 iAmLookingAtTheSecondPipelineGroup = 1607 iAmLookingAtTheSideBar >> Query.children [] >> Query.index 1 1608 1609 1610 iSeeTheSecondTeamName = 1611 Query.has [ text "other-team" ] 1612 1613 1614 iSeeABlueBackground = 1615 Query.has [ style "background-color" Colors.paused ] 1616 1617 1618 myBrowserFetchedNoPipelines = 1619 Tuple.first >> Application.handleCallback (Callback.AllPipelinesFetched <| Ok []) 1620 1621 1622 iHaveAnExpandedPipelineGroup = 1623 iHaveAnOpenSideBar >> iClickedThePipelineGroup 1624 1625 1626 iHoveredThePipelineLink = 1627 Tuple.first 1628 >> Application.update 1629 (TopLevelMessage.Update <| 1630 Message.Hover <| 1631 Just <| 1632 Message.SideBarPipeline AllPipelinesSection Data.pipelineId 1633 ) 1634 1635 1636 iHoveredNothing = 1637 Tuple.first 1638 >> Application.update (TopLevelMessage.Update <| Message.Hover Nothing) 1639 1640 1641 iSeeTheTeamNameAbove = 1642 Query.children [] >> Query.first >> Query.has [ text "team" ] 1643 1644 1645 iSeeThePipelineNameBelow = 1646 Query.children [] >> Query.index 1 >> Query.has [ text "pipeline" ] 1647 1648 1649 iSeeNoPipelineNames = 1650 Query.hasNot [ text "pipeline" ] 1651 1652 1653 iSeeAllPipelineNames = 1654 Query.children [] 1655 >> Expect.all 1656 [ Query.index 1 >> Query.has [ text "pipeline" ] 1657 , Query.index 1 >> Query.has [ text "other-pipeline" ] 1658 ] 1659 1660 1661 iClickedTheOtherPipelineGroup = 1662 Tuple.first 1663 >> Application.update 1664 (TopLevelMessage.Update <| 1665 Message.Click <| 1666 Message.SideBarTeam AllPipelinesSection "other-team" 1667 ) 1668 1669 1670 iSeeTheSecondTeamsPipeline = 1671 Query.has [ text "yet-another-pipeline" ] 1672 1673 1674 iAmLookingAtTheOtherPipelineGroup = 1675 iAmLookingAtTheSideBar 1676 >> Query.children [ containing [ text "other-team" ] ] 1677 >> Query.first 1678 >> Query.children [] 1679 >> Query.index 1 1680 1681 1682 iAmLookingAtTheOtherPipelineList = 1683 iAmLookingAtTheOtherPipelineGroup 1684 >> Query.children [] 1685 >> Query.index 1 1686 1687 1688 iAmLookingAtTheOtherTeamName = 1689 iAmLookingAtTheOtherPipelineGroup 1690 >> Query.children [] 1691 >> Query.first 1692 >> Query.children [] 1693 >> Query.index 2 1694 1695 1696 iAmLookingAtTheOtherTeamIcon = 1697 iAmLookingAtTheOtherPipelineGroup 1698 >> Query.children [] 1699 >> Query.first 1700 >> Query.children [] 1701 >> Query.index 1 1702 1703 1704 iAmLookingAtTheOtherPipeline = 1705 iAmLookingAtTheOtherPipelineList 1706 >> Query.children [] 1707 >> Query.first 1708 1709 1710 iAmLookingAtTheOtherPipelineIcon = 1711 iAmLookingAtTheOtherPipelineList 1712 >> Query.children [] 1713 >> Query.first 1714 >> Query.children [] 1715 >> Query.first 1716 1717 1718 iSeeItAlignsWithTheTeamName = 1719 Query.has [ style "margin-left" "28px" ] 1720 1721 1722 iSeeItIsALinkToThePipeline = 1723 Query.has 1724 [ tag "a" 1725 , attribute <| Attr.href "/teams/team/pipelines/pipeline" 1726 ] 1727 1728 1729 iClickAPipelineLink = 1730 Tuple.first 1731 >> Application.update 1732 (TopLevelMessage.DeliveryReceived <| 1733 Subscription.RouteChanged <| 1734 Routes.Pipeline 1735 { groups = [] 1736 , id = Data.pipelineId |> Data.withPipelineName "other-pipeline" 1737 } 1738 ) 1739 1740 1741 iSeeThePipelineGroupIsStillExpanded = 1742 iAmLookingAtThePipelineList >> iSeeAllPipelineNames 1743 1744 1745 iSeeItIsExpanded = 1746 iSeeItContainsThePipelineName 1747 1748 1749 iSeeItIsCollapsed = 1750 iSeeNoPipelineNames 1751 1752 1753 iNavigateToTheDashboard = 1754 Tuple.first 1755 >> Application.update 1756 (TopLevelMessage.DeliveryReceived <| 1757 Subscription.RouteChanged <| 1758 Routes.Dashboard 1759 { searchType = Routes.Normal "" 1760 , dashboardView = Routes.ViewNonArchivedPipelines 1761 } 1762 ) 1763 1764 1765 iSeeOneChild = 1766 Query.children [] >> Query.count (Expect.equal 1) 1767 1768 1769 iNavigateBackToThePipelinePage = 1770 Tuple.first 1771 >> Application.update 1772 (TopLevelMessage.DeliveryReceived <| 1773 Subscription.RouteChanged <| 1774 Routes.Pipeline 1775 { groups = [] 1776 , id = 1777 Data.pipelineId 1778 |> Data.withTeamName "other-team" 1779 |> Data.withPipelineName "yet-another-pipeline" 1780 } 1781 ) 1782 1783 1784 iSeeAnInvisibleBackground = 1785 Query.has [ style "background-color" "inherit" ] 1786 1787 1788 iAmLookingAtThePipelineWithTheSameName = 1789 iAmLookingAtThePipelineList 1790 >> Query.children [ containing [ text "yet-another-pipeline" ] ] 1791 >> Query.first 1792 1793 1794 myBrowserNotifiesEveryFiveSeconds = 1795 Tuple.first 1796 >> Application.subscriptions 1797 >> Common.contains (Subscription.OnClockTick Subscription.FiveSeconds) 1798 1799 1800 iOpenTheJobBuildPage = 1801 iOpenTheBuildPage 1802 >> myBrowserFetchedTheBuild 1803 1804 1805 iAmLookingAtAOneOffBuildPageOnANonPhoneScreen = 1806 iOpenTheBuildPage 1807 >> Tuple.first 1808 >> Application.handleCallback 1809 (Callback.ScreenResized 1810 { scene = 1811 { width = 0 1812 , height = 0 1813 } 1814 , viewport = 1815 { x = 0 1816 , y = 0 1817 , width = 1200 1818 , height = 900 1819 } 1820 } 1821 ) 1822 >> Tuple.first 1823 >> Application.handleCallback 1824 (Callback.BuildFetched 1825 (Ok 1826 { id = 1 1827 , name = "1" 1828 , job = Nothing 1829 , status = BuildStatusStarted 1830 , duration = { startedAt = Nothing, finishedAt = Nothing } 1831 , reapTime = Nothing 1832 } 1833 ) 1834 ) 1835 >> Tuple.first 1836 >> Application.handleCallback 1837 (Callback.AllPipelinesFetched 1838 (Ok 1839 [ Data.pipeline "team" 0 |> Data.withName "pipeline" ] 1840 ) 1841 ) 1842 >> Tuple.first 1843 1844 1845 iAmLookingAtTheLeftSideOfTheTopBar = 1846 Common.queryView 1847 >> Query.find [ id "top-bar-app" ] 1848 >> Query.children [] 1849 >> Query.first 1850 1851 1852 iSeeAHamburgerMenu = 1853 Query.has 1854 (DashboardTests.iconSelector 1855 { size = "54px" 1856 , image = Assets.HamburgerMenuIcon 1857 } 1858 ) 1859 1860 1861 myBrowserFetchesScreenSize = 1862 Tuple.second 1863 >> Common.contains Effects.GetScreenSize 1864 1865 1866 iOpenTheJobPage _ = 1867 Application.init 1868 { turbulenceImgSrc = "" 1869 , notFoundImgSrc = "" 1870 , csrfToken = "" 1871 , authToken = "" 1872 , pipelineRunningKeyframes = "" 1873 } 1874 { protocol = Url.Http 1875 , host = "" 1876 , port_ = Nothing 1877 , path = "/teams/other-team/pipelines/yet-another-pipeline/jobs/job" 1878 , query = Nothing 1879 , fragment = Nothing 1880 } 1881 1882 1883 iOpenTheResourcePage _ = 1884 Application.init 1885 { turbulenceImgSrc = "" 1886 , notFoundImgSrc = "" 1887 , csrfToken = "" 1888 , authToken = "" 1889 , pipelineRunningKeyframes = "" 1890 } 1891 { protocol = Url.Http 1892 , host = "" 1893 , port_ = Nothing 1894 , path = "/teams/other-team/pipelines/yet-another-pipeline/resources/r" 1895 , query = Nothing 1896 , fragment = Nothing 1897 } 1898 1899 1900 iOpenTheNotFoundPage = 1901 iOpenTheJobPage 1902 >> Tuple.first 1903 >> Application.handleCallback 1904 (Callback.JobFetched <| Data.httpNotFound) 1905 1906 1907 iSeeAGreyBackground = 1908 Query.has [ style "background-color" "#353434" ] 1909 1910 1911 iSeeADarkBackground = 1912 Query.has [ style "background-color" ColorValues.grey100 ] 1913 1914 1915 iSeeItStretches = 1916 Query.has [ style "flex-grow" "1" ] 1917 1918 1919 iSeeThreeChildrenDivs = 1920 Query.children [ tag "div" ] >> Query.count (Expect.equal 3) 1921 1922 1923 myBrowserListensForSideBarStates = 1924 Tuple.first 1925 >> Application.subscriptions 1926 >> Common.contains Subscription.OnSideBarStateReceived 1927 1928 1929 myBrowserReadSideBarState = 1930 Tuple.first 1931 >> Application.handleDelivery 1932 (Subscription.SideBarStateReceived (Ok { isOpen = True, width = 275 })) 1933 1934 1935 myBrowserReceives400PxWideSideBarState = 1936 Tuple.first 1937 >> Application.handleDelivery 1938 (Subscription.SideBarStateReceived (Ok { isOpen = True, width = 400 })) 1939 1940 1941 myBrowserFetchesSideBarState = 1942 Tuple.second 1943 >> Common.contains Effects.LoadSideBarState 1944 1945 1946 myBrowserFetchesTheDashboardViewport = 1947 Tuple.second 1948 >> Common.contains (Effects.GetViewportOf Message.Dashboard) 1949 1950 1951 myBrowserSavesSideBarState isOpen = 1952 Tuple.second 1953 >> Common.contains (Effects.SaveSideBarState isOpen)