github.com/pf-qiu/concourse/v6@v6.7.3-0.20201207032516-1f455d73275f/web/elm/tests/PipelineTests.elm (about)

     1  module PipelineTests exposing (all)
     2  
     3  import Application.Application as Application
     4  import Assets
     5  import Char
     6  import ColorValues
     7  import Colors
     8  import Common exposing (defineHoverBehaviour, queryView)
     9  import Concourse
    10  import Concourse.Cli exposing (Cli(..))
    11  import DashboardTests exposing (iconSelector)
    12  import Data
    13  import Expect exposing (..)
    14  import Html.Attributes as Attr
    15  import Json.Encode
    16  import Keyboard
    17  import Message.Callback as Callback
    18  import Message.Effects as Effects
    19  import Message.Message exposing (Message(..))
    20  import Message.Subscription as Subscription
    21      exposing
    22          ( Delivery(..)
    23          , Interval(..)
    24          )
    25  import Message.TopLevelMessage as Msgs
    26  import Pipeline.Pipeline as Pipeline exposing (update)
    27  import Routes
    28  import Set
    29  import Test exposing (..)
    30  import Test.Html.Event as Event
    31  import Test.Html.Query as Query
    32  import Test.Html.Selector as Selector
    33      exposing
    34          ( attribute
    35          , class
    36          , containing
    37          , id
    38          , style
    39          , tag
    40          , text
    41          )
    42  import Time
    43  import Url
    44  
    45  
    46  rspecStyleDescribe : String -> model -> List (model -> Test) -> Test
    47  rspecStyleDescribe description beforeEach subTests =
    48      Test.describe description
    49          (subTests |> List.map (\f -> f beforeEach))
    50  
    51  
    52  it : String -> (model -> Expectation) -> model -> Test
    53  it desc expectationFunc model =
    54      Test.test desc <|
    55          \_ -> expectationFunc model
    56  
    57  
    58  flags : Application.Flags
    59  flags =
    60      { turbulenceImgSrc = ""
    61      , notFoundImgSrc = ""
    62      , csrfToken = csrfToken
    63      , authToken = ""
    64      , pipelineRunningKeyframes = ""
    65      }
    66  
    67  
    68  all : Test
    69  all =
    70      describe "Pipeline"
    71          [ describe "groups" <|
    72              let
    73                  sampleGroups =
    74                      [ { name = "group"
    75                        , jobs = []
    76                        , resources = []
    77                        }
    78                      , { name = "other-group"
    79                        , jobs = []
    80                        , resources = []
    81                        }
    82                      ]
    83  
    84                  setupGroupsBar groups =
    85                      Application.init
    86                          flags
    87                          { protocol = Url.Http
    88                          , host = ""
    89                          , port_ = Nothing
    90                          , path = "/teams/team/pipelines/pipeline"
    91                          , query = Just "group=other-group"
    92                          , fragment = Nothing
    93                          }
    94                          |> Tuple.first
    95                          |> Application.handleCallback
    96                              (Callback.PipelineFetched
    97                                  (Ok <|
    98                                      (Data.pipeline "team" 0
    99                                          |> Data.withName "pipeline"
   100                                          |> Data.withGroups groups
   101                                      )
   102                                  )
   103                              )
   104                          |> Tuple.first
   105              in
   106              [ describe "groups bar styling"
   107                  [ describe "with groups"
   108                      [ test "has light text on a dark background" <|
   109                          \_ ->
   110                              setupGroupsBar sampleGroups
   111                                  |> Common.queryView
   112                                  |> Query.find [ id "groups-bar" ]
   113                                  |> Query.has
   114                                      [ style "background-color" "#2b2a2a"
   115                                      , style "color" "#FFFFFF"
   116                                      ]
   117                      , test "lays out groups in a horizontal list" <|
   118                          \_ ->
   119                              setupGroupsBar sampleGroups
   120                                  |> Common.queryView
   121                                  |> Query.find [ id "groups-bar" ]
   122                                  |> Query.has
   123                                      [ style "display" "flex"
   124                                      , style "flex-flow" "row wrap"
   125                                      , style "padding" "5px"
   126                                      ]
   127                      , describe "each group" <|
   128                          let
   129                              findGroups =
   130                                  Common.queryView
   131                                      >> Query.find [ id "groups-bar" ]
   132                                      >> Query.children []
   133                          in
   134                          [ test "the individual groups are nicely spaced" <|
   135                              \_ ->
   136                                  setupGroupsBar sampleGroups
   137                                      |> findGroups
   138                                      |> Query.each
   139                                          (Query.has
   140                                              [ style "margin" "5px"
   141                                              , style "padding" "10px"
   142                                              ]
   143                                          )
   144                          , test "the individual groups have large text" <|
   145                              \_ ->
   146                                  setupGroupsBar sampleGroups
   147                                      |> findGroups
   148                                      |> Query.each
   149                                          (Query.has [ style "font-size" "14px" ])
   150                          , describe "the individual groups should each have a box around them"
   151                              [ test "the unselected ones faded" <|
   152                                  \_ ->
   153                                      setupGroupsBar sampleGroups
   154                                          |> findGroups
   155                                          |> Query.index 0
   156                                          |> Query.has
   157                                              [ style "opacity" "0.6"
   158                                              , style "background"
   159                                                  "rgba(151, 151, 151, 0.1)"
   160                                              , style "border" "1px solid #2b2a2a"
   161                                              ]
   162                              , defineHoverBehaviour
   163                                  { name = "group"
   164                                  , setup = setupGroupsBar sampleGroups
   165                                  , query = findGroups >> Query.index 0
   166                                  , unhoveredSelector =
   167                                      { description = "dark outline"
   168                                      , selector =
   169                                          [ style "border" "1px solid #2b2a2a" ]
   170                                      }
   171                                  , hoverable = Message.Message.JobGroup 0
   172                                  , hoveredSelector =
   173                                      { description = "light grey outline"
   174                                      , selector =
   175                                          [ style "border" "1px solid #fff2" ]
   176                                      }
   177                                  }
   178                              , test "the selected ones brighter" <|
   179                                  \_ ->
   180                                      setupGroupsBar sampleGroups
   181                                          |> findGroups
   182                                          |> Query.index 1
   183                                          |> Query.has
   184                                              [ style "opacity" "1"
   185                                              , style "background" "rgba(151, 151, 151, 0.1)"
   186                                              , style "border" "1px solid #979797"
   187                                              ]
   188                              ]
   189                          , test "each group should have a name and link" <|
   190                              \_ ->
   191                                  setupGroupsBar sampleGroups
   192                                      |> findGroups
   193                                      |> Expect.all
   194                                          [ Query.index 0
   195                                              >> Query.has
   196                                                  [ text "group"
   197                                                  , attribute <|
   198                                                      Attr.href
   199                                                          "/teams/team/pipelines/pipeline?group=group"
   200                                                  , tag "a"
   201                                                  ]
   202                                          , Query.index 1
   203                                              >> Query.has
   204                                                  [ text "other-group"
   205                                                  , attribute <|
   206                                                      Attr.href
   207                                                          "/teams/team/pipelines/pipeline?group=other-group"
   208                                                  , tag "a"
   209                                                  ]
   210                                          ]
   211                          ]
   212                      ]
   213                  , test "with no groups does not display groups list" <|
   214                      \_ ->
   215                          setupGroupsBar []
   216                              |> Common.queryView
   217                              |> Query.findAll [ id "groups-bar" ]
   218                              |> Query.count (Expect.equal 0)
   219                  , test "KeyPressed" <|
   220                      \_ ->
   221                          setupGroupsBar []
   222                              |> Application.update
   223                                  (Msgs.DeliveryReceived <|
   224                                      KeyDown <|
   225                                          { ctrlKey = False
   226                                          , shiftKey = False
   227                                          , metaKey = False
   228                                          , code = Keyboard.A
   229                                          }
   230                                  )
   231                              |> Tuple.second
   232                              |> Expect.equal []
   233                  , test "KeyPressed f" <|
   234                      \_ ->
   235                          setupGroupsBar []
   236                              |> Application.update
   237                                  (Msgs.DeliveryReceived <|
   238                                      KeyDown <|
   239                                          { ctrlKey = False
   240                                          , shiftKey = False
   241                                          , metaKey = False
   242                                          , code = Keyboard.F
   243                                          }
   244                                  )
   245                              |> Tuple.second
   246                              |> Expect.equal [ Effects.ResetPipelineFocus ]
   247                  , test "KeyPressed F" <|
   248                      \_ ->
   249                          setupGroupsBar []
   250                              |> Application.update
   251                                  (Msgs.DeliveryReceived <|
   252                                      KeyDown <|
   253                                          { ctrlKey = False
   254                                          , shiftKey = True
   255                                          , metaKey = False
   256                                          , code = Keyboard.F
   257                                          }
   258                                  )
   259                              |> Tuple.second
   260                              |> Expect.equal [ Effects.ResetPipelineFocus ]
   261                  ]
   262              , test "groups bar and pipeline view lay out vertically" <|
   263                  \_ ->
   264                      setupGroupsBar sampleGroups
   265                          |> Common.queryView
   266                          |> Query.find [ id "pipeline-container" ]
   267                          |> Query.has
   268                              [ style "display" "flex"
   269                              , style "flex-direction" "column"
   270                              ]
   271              ]
   272          , test "pipeline view fills available space" <|
   273              \_ ->
   274                  Common.init "/teams/team/pipelines/pipeline"
   275                      |> Common.queryView
   276                      |> Query.find [ id "pipeline-container" ]
   277                      |> Query.has [ style "flex-grow" "1" ]
   278          , test "gets screen size on page load" <|
   279              \_ ->
   280                  Application.init
   281                      { turbulenceImgSrc = ""
   282                      , notFoundImgSrc = ""
   283                      , csrfToken = csrfToken
   284                      , authToken = ""
   285                      , pipelineRunningKeyframes = ""
   286                      }
   287                      { protocol = Url.Http
   288                      , host = ""
   289                      , port_ = Nothing
   290                      , path = "teams/team/pipelines/pipeline"
   291                      , query = Nothing
   292                      , fragment = Nothing
   293                      }
   294                      |> Tuple.second
   295                      |> Common.contains Effects.GetScreenSize
   296          , test "subscribes to screen resizes" <|
   297              \_ ->
   298                  Common.init "/teams/team/pipelines/pipelineName"
   299                      |> Application.subscriptions
   300                      |> Common.contains Subscription.OnWindowResize
   301          , test "title should include the pipeline name" <|
   302              \_ ->
   303                  Common.init "/teams/team/pipelines/pipelineName"
   304                      |> Application.view
   305                      |> .title
   306                      |> Expect.equal "pipelineName - Concourse"
   307          , test "pipeline background should be set from display config" <|
   308              \_ ->
   309                  Common.init "/teams/team/pipelines/pipelineName"
   310                      |> Application.handleCallback
   311                          (Callback.PipelineFetched
   312                              (Ok <|
   313                                  (Data.pipeline "team" 0
   314                                      |> Data.withName "pipeline"
   315                                      |> Data.withBackgroundImage "some-background.jpg"
   316                                  )
   317                              )
   318                          )
   319                      |> Tuple.first
   320                      |> Common.queryView
   321                      |> Query.find [ id "pipeline-background" ]
   322                      |> Query.has
   323                          [ style "background-image" "url(\"some-background.jpg\")"
   324                          , style "background-repeat" "no-repeat"
   325                          , style "background-size" "cover"
   326                          , style "background-position" "center"
   327                          , style "opacity" "30%"
   328                          , style "filter" "grayscale(1)"
   329                          ]
   330          , describe "update" <|
   331              let
   332                  defaultModel : Pipeline.Model
   333                  defaultModel =
   334                      Pipeline.init
   335                          { pipelineLocator =
   336                              Data.pipelineId
   337                                  |> Data.withTeamName "some-team"
   338                                  |> Data.withPipelineName "some-pipeline"
   339                          , turbulenceImgSrc = "some-turbulence-img-src"
   340                          , selectedGroups = []
   341                          }
   342                          |> Tuple.first
   343              in
   344              [ test "CLI icons at bottom right" <|
   345                  \_ ->
   346                      Common.init "/teams/team/pipelines/pipeline"
   347                          |> Common.queryView
   348                          |> Query.find [ class "cli-downloads" ]
   349                          |> Query.children []
   350                          |> Expect.all
   351                              [ Query.index 0
   352                                  >> Query.has
   353                                      [ style "background-image" <|
   354                                          Assets.backgroundImage <|
   355                                              Just (Assets.CliIcon OSX)
   356                                      , style "background-position" "50% 50%"
   357                                      , style "background-repeat" "no-repeat"
   358                                      , style "width" "12px"
   359                                      , style "height" "12px"
   360                                      , style "display" "inline-block"
   361                                      , attribute <| Attr.download ""
   362                                      ]
   363                              , Query.index 1
   364                                  >> Query.has
   365                                      [ style "background-image" <|
   366                                          Assets.backgroundImage <|
   367                                              Just (Assets.CliIcon Windows)
   368                                      , style "background-position" "50% 50%"
   369                                      , style "background-repeat" "no-repeat"
   370                                      , style "width" "12px"
   371                                      , style "height" "12px"
   372                                      , style "display" "inline-block"
   373                                      , attribute <| Attr.download ""
   374                                      ]
   375                              , Query.index 2
   376                                  >> Query.has
   377                                      [ style "background-image" <|
   378                                          Assets.backgroundImage <|
   379                                              Just (Assets.CliIcon Linux)
   380                                      , style "background-position" "50% 50%"
   381                                      , style "background-repeat" "no-repeat"
   382                                      , style "width" "12px"
   383                                      , style "height" "12px"
   384                                      , style "display" "inline-block"
   385                                      , attribute <| Attr.download ""
   386                                      ]
   387                              ]
   388              , test "pipeline subscribes to 1s, 5s, and 1m timers" <|
   389                  \_ ->
   390                      Common.init "/teams/team/pipelines/pipeline"
   391                          |> Application.subscriptions
   392                          |> Expect.all
   393                              [ Common.contains (Subscription.OnClockTick OneSecond)
   394                              , Common.contains (Subscription.OnClockTick FiveSeconds)
   395                              , Common.contains (Subscription.OnClockTick OneMinute)
   396                              ]
   397              , test "on five second timer, refreshes pipeline" <|
   398                  \_ ->
   399                      Common.init "/teams/team/pipelines/pipeline"
   400                          |> Application.update
   401                              (Msgs.DeliveryReceived
   402                                  (ClockTicked FiveSeconds <|
   403                                      Time.millisToPosix 0
   404                                  )
   405                              )
   406                          |> Tuple.second
   407                          |> Common.contains (Effects.FetchPipeline Data.pipelineId)
   408              , test "on one minute timer, refreshes version" <|
   409                  \_ ->
   410                      Common.init "/teams/team/pipelines/pipeline"
   411                          |> Application.update
   412                              (Msgs.DeliveryReceived
   413                                  (ClockTicked OneMinute <|
   414                                      Time.millisToPosix 0
   415                                  )
   416                              )
   417                          |> Tuple.second
   418                          |> Expect.equal [ Effects.FetchClusterInfo ]
   419              , describe "Legend" <|
   420                  let
   421                      clockTick =
   422                          Application.update
   423                              (Msgs.DeliveryReceived
   424                                  (ClockTicked OneSecond <|
   425                                      Time.millisToPosix 0
   426                                  )
   427                              )
   428                              >> Tuple.first
   429  
   430                      clockTickALot n =
   431                          List.foldr (>>) identity (List.repeat n clockTick)
   432                  in
   433                  [ test "Legend has definition for pinned resource color" <|
   434                      \_ ->
   435                          Common.init "/teams/team/pipelines/pipeline"
   436                              |> Common.queryView
   437                              |> Query.find [ id "legend" ]
   438                              |> Query.children []
   439                              |> Expect.all
   440                                  [ Query.count (Expect.equal 20)
   441                                  , Query.index 1 >> Query.has [ text "succeeded" ]
   442                                  , Query.index 3 >> Query.has [ text "errored" ]
   443                                  , Query.index 5 >> Query.has [ text "aborted" ]
   444                                  , Query.index 7 >> Query.has [ text "paused" ]
   445                                  , Query.index 8 >> Query.has [ style "background-color" "#5c3bd1" ]
   446                                  , Query.index 9 >> Query.has [ text "pinned" ]
   447                                  , Query.index 11 >> Query.has [ text "failed" ]
   448                                  , Query.index 13 >> Query.has [ text "pending" ]
   449                                  , Query.index 15 >> Query.has [ text "started" ]
   450                                  , Query.index 17 >> Query.has [ text "dependency" ]
   451                                  , Query.index 19 >> Query.has [ text "dependency (trigger)" ]
   452                                  ]
   453                  , test "HideLegendTimerTicked" <|
   454                      \_ ->
   455                          Common.init "/teams/team/pipelines/pipeline"
   456                              |> clockTick
   457                              |> Common.queryView
   458                              |> Query.find [ id "legend" ]
   459                              |> Query.children []
   460                              |> Query.count (Expect.equal 20)
   461                  , test "HideLegendTimeTicked reaches timeout" <|
   462                      \_ ->
   463                          Common.init "/teams/team/pipelines/pipeline"
   464                              |> clockTickALot 11
   465                              |> Common.queryView
   466                              |> Query.hasNot [ id "legend" ]
   467                  , test "Mouse action after legend hidden reshows legend" <|
   468                      \_ ->
   469                          Common.init "/teams/team/pipelines/pipeline"
   470                              |> clockTickALot 11
   471                              |> Application.update (Msgs.DeliveryReceived <| Moused { x = 0, y = 0 })
   472                              |> Tuple.first
   473                              |> Common.queryView
   474                              |> Query.has [ id "legend" ]
   475                  ]
   476              , rspecStyleDescribe "when on pipeline page"
   477                  (Common.init "/teams/team/pipelines/pipeline")
   478                  [ it "shows a pin icon on top bar" <|
   479                      Common.queryView
   480                          >> Query.find [ id "top-bar-app" ]
   481                          >> Query.has [ id "pin-icon" ]
   482                  , it "shows a star icon on top bar" <|
   483                      Common.queryView
   484                          >> Query.find [ id "top-bar-app" ]
   485                          >> Query.has [ id "top-bar-favorited-icon" ]
   486                  , it "top bar has a dark grey background" <|
   487                      Common.queryView
   488                          >> Query.find [ id "top-bar-app" ]
   489                          >> Query.has [ style "background-color" ColorValues.grey100 ]
   490                  , it "top bar lays out contents horizontally" <|
   491                      Common.queryView
   492                          >> Query.find [ id "top-bar-app" ]
   493                          >> Query.has [ style "display" "flex" ]
   494                  , it "top bar maximizes spacing between the left and right navs" <|
   495                      Common.queryView
   496                          >> Query.find [ id "top-bar-app" ]
   497                          >> Query.has [ style "justify-content" "space-between" ]
   498                  , it "top bar has a square concourse logo on the left" <|
   499                      Common.queryView
   500                          >> Query.find [ id "top-bar-app" ]
   501                          >> Query.children []
   502                          >> Query.index 1
   503                          >> Query.has
   504                              [ style "background-image" <|
   505                                  Assets.backgroundImage <|
   506                                      Just Assets.ConcourseLogoWhite
   507                              , style "background-position" "50% 50%"
   508                              , style "background-repeat" "no-repeat"
   509                              , style "background-size" "42px 42px"
   510                              , style "width" "54px"
   511                              , style "height" "54px"
   512                              ]
   513                  , it "concourse logo on the left is a link to homepage" <|
   514                      Common.queryView
   515                          >> Query.find [ id "top-bar-app" ]
   516                          >> Query.find
   517                              [ style "background-image" <|
   518                                  Assets.backgroundImage <|
   519                                      Just Assets.ConcourseLogoWhite
   520                              ]
   521                          >> Query.has [ tag "a", attribute <| Attr.href "/" ]
   522                  ]
   523              , test "top bar lays out contents horizontally" <|
   524                  \_ ->
   525                      Common.init "/teams/team/pipelines/pipeline"
   526                          |> Common.queryView
   527                          |> Query.find [ id "top-bar-app" ]
   528                          |> Query.has [ style "display" "inline-block" ]
   529              , test "top bar maximizes spacing between the left and right navs" <|
   530                  \_ ->
   531                      Common.init "/teams/team/pipelines/pipeline"
   532                          |> Common.queryView
   533                          |> Query.find [ id "top-bar-app" ]
   534                          |> Query.has
   535                              [ style "justify-content" "space-between"
   536                              , style "width" "100%"
   537                              ]
   538              , test "top bar is sticky" <|
   539                  \_ ->
   540                      Common.init "/teams/team/pipelines/pipeline"
   541                          |> Common.queryView
   542                          |> Query.find [ id "top-bar-app" ]
   543                          |> Query.has
   544                              [ style "z-index" "999"
   545                              , style "position" "fixed"
   546                              ]
   547              , test "breadcrumb items are laid out horizontally" <|
   548                  \_ ->
   549                      Common.init "/teams/team/pipelines/pipeline"
   550                          |> Common.queryView
   551                          |> Query.find [ id "top-bar-app" ]
   552                          |> Query.find [ id "breadcrumbs" ]
   553                          |> Query.children []
   554                          |> Query.each
   555                              (Query.has [ style "display" "inline-block" ])
   556              , describe "top bar positioning"
   557                  [ testTopBarPositioning "Dashboard" "/"
   558                  , testTopBarPositioning "Pipeline" "/teams/team/pipelines/pipeline"
   559                  , testTopBarPositioning "Job" "/teams/team/pipelines/pipeline/jobs/job"
   560                  , testTopBarPositioning "Build" "/teams/team/pipelines/pipeline/jobs/job/builds/build"
   561                  , testTopBarPositioning "Resource" "/teams/team/pipelines/pipeline/resources/resource"
   562                  , testTopBarPositioning "FlySuccess" "/fly_success"
   563                  ]
   564              , rspecStyleDescribe "when on job page"
   565                  (Common.init "/teams/team/pipeline/pipeline/jobs/job/builds/1")
   566                  [ it "shows no pin icon on top bar when viewing build page" <|
   567                      Common.queryView
   568                          >> Query.find [ id "top-bar-app" ]
   569                          >> Query.hasNot [ id "pin-icon" ]
   570                  ]
   571              , test "top nav bar is blue when pipeline is paused" <|
   572                  \_ ->
   573                      Common.init "/teams/team/pipelines/pipeline"
   574                          |> Application.handleCallback
   575                              (Callback.PipelineFetched
   576                                  (Ok <|
   577                                      (Data.pipeline "team" 0
   578                                          |> Data.withName "pipeline"
   579                                          |> Data.withPaused True
   580                                      )
   581                                  )
   582                              )
   583                          |> Tuple.first
   584                          |> Common.queryView
   585                          |> Query.find [ id "top-bar-app" ]
   586                          |> Query.has [ style "background-color" "#3498db" ]
   587              , test "top nav bar isn't blue when pipeline is archived" <|
   588                  \_ ->
   589                      Common.init "/teams/team/pipelines/pipeline"
   590                          |> Application.handleCallback
   591                              (Callback.PipelineFetched
   592                                  (Ok <|
   593                                      (Data.pipeline "team" 0
   594                                          |> Data.withName "pipeline"
   595                                          |> Data.withPaused True
   596                                          |> Data.withArchived True
   597                                      )
   598                                  )
   599                              )
   600                          |> Tuple.first
   601                          |> Common.queryView
   602                          |> Query.find [ id "top-bar-app" ]
   603                          |> Query.hasNot [ style "background-color" "#3498db" ]
   604              , test "breadcrumb list is laid out horizontally" <|
   605                  \_ ->
   606                      Common.init "/teams/team/pipelines/pipeline"
   607                          |> Common.queryView
   608                          |> Query.find [ id "top-bar-app" ]
   609                          |> Query.find [ id "breadcrumbs" ]
   610                          |> Query.has
   611                              [ style "display" "inline-block"
   612                              , style "padding" "0 10px"
   613                              ]
   614              , test "pipeline breadcrumb is laid out horizontally" <|
   615                  \_ ->
   616                      Common.init "/teams/team/pipelines/pipeline"
   617                          |> Common.queryView
   618                          |> Query.find [ id "top-bar-app" ]
   619                          |> Query.find [ id "breadcrumb-pipeline" ]
   620                          |> Query.has [ style "display" "inline-block" ]
   621              , test "top bar has pipeline breadcrumb with icon rendered first" <|
   622                  \_ ->
   623                      Common.init "/teams/team/pipelines/pipeline"
   624                          |> Common.queryView
   625                          |> Query.find [ id "top-bar-app" ]
   626                          |> Query.find [ id "breadcrumb-pipeline" ]
   627                          |> Query.children []
   628                          |> Query.first
   629                          |> Query.has pipelineBreadcrumbSelector
   630              , test "top bar has pipeline name after pipeline icon" <|
   631                  \_ ->
   632                      Common.init "/teams/team/pipelines/pipeline"
   633                          |> Common.queryView
   634                          |> Query.find [ id "top-bar-app" ]
   635                          |> Query.find [ id "breadcrumb-pipeline" ]
   636                          |> Query.has [ text "pipeline" ]
   637              , describe "top bar star icon" <|
   638                  let
   639                      givenFavoritedPipelinesFetched =
   640                          Common.init "/teams/t/pipelines/p"
   641                              |> Application.handleCallback
   642                                  (Callback.PipelineFetched
   643                                      (Ok <|
   644                                          Data.pipeline "team" 0
   645                                      )
   646                                  )
   647                              |> Tuple.first
   648                              |> Application.handleDelivery
   649                                  (Subscription.FavoritedPipelinesReceived <|
   650                                      Ok <|
   651                                          Set.singleton 0
   652                                  )
   653  
   654                      favMsg =
   655                          Msgs.Update <|
   656                              Message.Message.Click <|
   657                                  Message.Message.TopBarFavoritedIcon 0
   658  
   659                      iSeeStarUnfilled =
   660                          Query.has
   661                              (iconSelector
   662                                  { size = "20px"
   663                                  , image = Assets.FavoritedToggleIcon { isFavorited = False, isHovered = False, isSideBar = False }
   664                                  }
   665                              )
   666                  in
   667                  [ defineHoverBehaviour
   668                      { name = "star icon"
   669                      , setup = Common.init "teams/t/pipelines/p"
   670                      , query =
   671                          queryView
   672                              >> Query.find [ id "top-bar-favorited-icon" ]
   673                              >> Query.children []
   674                              >> Query.first
   675                      , unhoveredSelector =
   676                          { description = "faded star icon"
   677                          , selector =
   678                              [ style "cursor" "pointer"
   679                              , style "margin" "17px"
   680                              ]
   681                                  ++ iconSelector
   682                                      { size = "20px"
   683                                      , image = Assets.FavoritedToggleIcon { isFavorited = False, isHovered = False, isSideBar = False }
   684                                      }
   685                          }
   686                      , hoveredSelector =
   687                          { description = "bright star icon"
   688                          , selector =
   689                              [ style "cursor" "pointer"
   690                              , style "margin" "17px"
   691                              ]
   692                                  ++ iconSelector
   693                                      { size = "20px"
   694                                      , image = Assets.FavoritedToggleIcon { isFavorited = False, isHovered = True, isSideBar = False }
   695                                      }
   696                          }
   697                      , hoverable = Message.Message.TopBarFavoritedIcon -1
   698                      }
   699                  , test "favoriting icon has click handler" <|
   700                      \_ ->
   701                          givenFavoritedPipelinesFetched
   702                              |> Tuple.first
   703                              |> queryView
   704                              |> Query.find [ id "top-bar-favorited-icon" ]
   705                              |> Query.children []
   706                              |> Query.first
   707                              |> Event.simulate Event.click
   708                              |> Event.expect favMsg
   709                  , test "click has FavoritedPipeline effect" <|
   710                      \_ ->
   711                          givenFavoritedPipelinesFetched
   712                              |> Tuple.first
   713                              |> Application.update
   714                                  (Msgs.Update <|
   715                                      Message.Message.Click <|
   716                                          Message.Message.TopBarFavoritedIcon
   717                                              0
   718                                  )
   719                              |> Tuple.second
   720                              |> Expect.equal
   721                                  [ Effects.SaveFavoritedPipelines <|
   722                                      Set.empty
   723                                  ]
   724                  , test "clicking favorited icon unfills the filled star" <|
   725                      \_ ->
   726                          givenFavoritedPipelinesFetched
   727                              |> Tuple.first
   728                              |> Application.update
   729                                  (Msgs.Update <|
   730                                      Message.Message.Click <|
   731                                          Message.Message.TopBarFavoritedIcon
   732                                              0
   733                                  )
   734                              |> Tuple.first
   735                              |> Common.queryView
   736                              |> iSeeStarUnfilled
   737                  ]
   738              ]
   739          ]
   740  
   741  
   742  pinBadgeSelector : List Selector.Selector
   743  pinBadgeSelector =
   744      [ id "pin-badge" ]
   745  
   746  
   747  pipelineBreadcrumbSelector : List Selector.Selector
   748  pipelineBreadcrumbSelector =
   749      [ style "background-image" <|
   750          Assets.backgroundImage <|
   751              Just (Assets.BreadcrumbIcon Assets.PipelineComponent)
   752      , style "background-repeat" "no-repeat"
   753      ]
   754  
   755  
   756  jobBreadcrumbSelector : List Selector.Selector
   757  jobBreadcrumbSelector =
   758      [ style "background-image" <|
   759          Assets.backgroundImage <|
   760              Just (Assets.BreadcrumbIcon Assets.JobComponent)
   761      , style "background-repeat" "no-repeat"
   762      ]
   763  
   764  
   765  resourceBreadcrumbSelector : List Selector.Selector
   766  resourceBreadcrumbSelector =
   767      [ style "background-image" <|
   768          Assets.backgroundImage <|
   769              Just (Assets.BreadcrumbIcon Assets.ResourceComponent)
   770      , style "background-repeat" "no-repeat"
   771      ]
   772  
   773  
   774  csrfToken : String
   775  csrfToken =
   776      "csrf_token"
   777  
   778  
   779  givenPinnedResource : Application.Model -> Application.Model
   780  givenPinnedResource =
   781      Application.handleCallback
   782          (Callback.ResourcesFetched <|
   783              Ok
   784                  [ Data.resource "v1" ]
   785          )
   786          >> Tuple.first
   787  
   788  
   789  givenMultiplePinnedResources : Application.Model -> Application.Model
   790  givenMultiplePinnedResources =
   791      Application.handleCallback
   792          (Callback.ResourcesFetched <|
   793              Ok
   794                  [ Data.resource "v1"
   795                  , Data.resource "v2"
   796                  ]
   797          )
   798          >> Tuple.first
   799  
   800  
   801  testTopBarPositioning : String -> String -> Test
   802  testTopBarPositioning pageName url =
   803      describe pageName
   804          [ test "whole page fills the whole screen" <|
   805              \_ ->
   806                  Common.init url
   807                      |> Common.queryView
   808                      |> Query.has
   809                          [ id "page-including-top-bar"
   810                          , style "height" "100%"
   811                          ]
   812          , test "lower section fills the whole screen as well" <|
   813              \_ ->
   814                  Common.init url
   815                      |> Common.queryView
   816                      |> Query.find [ id "page-below-top-bar" ]
   817                      |> Query.has
   818                          [ style "padding-top" "54px"
   819                          , style "height" "100%"
   820                          ]
   821          ]