github.com/pf-qiu/concourse/v6@v6.7.3-0.20201207032516-1f455d73275f/web/elm/tests/WelcomeCardTests.elm (about) 1 module WelcomeCardTests exposing (all, hasWelcomeCard) 2 3 import Application.Application as Application 4 import Assets 5 import ColorValues 6 import Common exposing (defineHoverBehaviour) 7 import Concourse 8 import Concourse.Cli as Cli 9 import DashboardTests exposing (apiData, darkGrey, givenDataAndUser, givenDataUnauthenticated, iconSelector, userWithRoles, whenOnDashboard) 10 import Data 11 import Expect 12 import Html.Attributes as Attr 13 import Message.Callback as Callback 14 import Message.Effects as Effects 15 import Message.Message as Msgs 16 import Message.TopLevelMessage as ApplicationMsgs 17 import Test exposing (Test, describe, test) 18 import Test.Html.Query as Query 19 import Test.Html.Selector exposing (attribute, containing, id, style, tag, text) 20 import Views.Styles 21 22 23 all : Test 24 all = 25 describe "welcome card" 26 [ describe "when unauthenticated with no teams" <| 27 hasWelcomeCard 28 (\_ -> 29 whenOnDashboard { highDensity = False } 30 |> givenDataUnauthenticated (apiData []) 31 |> Tuple.first 32 |> givenPipelines [] 33 ) 34 ++ [ test "page body is empty" <| 35 \_ -> 36 whenOnDashboard { highDensity = False } 37 |> givenDataUnauthenticated (apiData []) 38 |> Tuple.first 39 |> givenPipelines [] 40 |> Tuple.first 41 |> Common.queryView 42 |> Query.find [ id "page-below-top-bar" ] 43 |> Query.children [] 44 |> Query.first 45 |> Query.children [] 46 |> Query.count (Expect.equal 0) 47 ] 48 , describe "when unauthenticated with a team but no pipelines" <| 49 hasWelcomeCard 50 (\_ -> 51 whenOnDashboard { highDensity = False } 52 |> givenDataUnauthenticated (apiData [ ( "team", [] ) ]) 53 |> Tuple.first 54 |> givenPipelines [] 55 ) 56 , describe 57 ("when logged in with teams but no pipelines, " 58 ++ "shows no pipelines card" 59 ) 60 <| 61 hasWelcomeCard 62 (\_ -> 63 whenOnDashboard { highDensity = False } 64 |> givenDataAndUser 65 (apiData [ ( "team", [] ) ]) 66 (userWithRoles []) 67 |> Tuple.first 68 |> givenPipelines [] 69 ) 70 , test "no login instruction when logged in" <| 71 \_ -> 72 whenOnDashboard { highDensity = False } 73 |> givenDataAndUser 74 (apiData [ ( "team", [] ) ]) 75 (userWithRoles []) 76 |> Tuple.first 77 |> givenPipelines [] 78 |> Tuple.first 79 |> Common.queryView 80 |> Query.hasNot [ id "login-instruction" ] 81 , test "has login instruction when unauthenticated" <| 82 \_ -> 83 whenOnDashboard { highDensity = False } 84 |> givenDataUnauthenticated (apiData [ ( "team", [] ) ]) 85 |> Tuple.first 86 |> givenPipelines [] 87 |> Tuple.first 88 |> Common.queryView 89 |> Query.find [ id "welcome-card" ] 90 |> Query.find [ id "login-instruction" ] 91 |> Expect.all 92 [ Query.has [ text "login" ] 93 , Query.find [ tag "a", containing [ text "here" ] ] 94 >> Expect.all 95 [ Query.has 96 [ attribute <| Attr.href "/login" ] 97 , Query.has 98 [ style "text-decoration" "underline" ] 99 ] 100 , Query.has [ style "line-height" "42px" ] 101 ] 102 , test "does not appear when there are visible pipelines" <| 103 \_ -> 104 whenOnDashboard { highDensity = False } 105 |> givenPipelines 106 [ Data.pipeline "team" 0 ] 107 |> Tuple.first 108 |> givenDataUnauthenticated (apiData [ ( "team", [] ) ]) 109 |> Tuple.first 110 |> Common.queryView 111 |> Query.hasNot [ text "welcome to concourse" ] 112 , test "does not appear when pipelines have not yet been fetched" <| 113 \_ -> 114 whenOnDashboard { highDensity = False } 115 |> givenDataUnauthenticated (apiData [ ( "team", [] ) ]) 116 |> Tuple.first 117 |> Common.queryView 118 |> Query.hasNot [ text "welcome to concourse" ] 119 ] 120 121 122 hasWelcomeCard : (() -> ( Application.Model, List Effects.Effect )) -> List Test 123 hasWelcomeCard setup = 124 let 125 subject : () -> Query.Single ApplicationMsgs.TopLevelMessage 126 subject = 127 setup 128 >> Tuple.first 129 >> Common.queryView 130 >> Query.find [ id "welcome-card" ] 131 in 132 [ test "exists" <| 133 setup 134 >> Tuple.first 135 >> Common.queryView 136 >> Query.has [ id "welcome-card" ] 137 , test "with light text" <| 138 subject 139 >> Query.has [ style "font-weight" Views.Styles.fontWeightLight ] 140 , test "title says 'welcome to concourse!'" <| 141 subject 142 >> Query.children [] 143 >> Query.first 144 >> Query.has [ text "welcome to concourse!" ] 145 , test "welcome message has large font" <| 146 subject 147 >> Query.children [] 148 >> Query.first 149 >> Query.has [ style "font-size" "32px" ] 150 , test "has dark grey background" <| 151 subject 152 >> Query.has 153 [ style "background-color" ColorValues.grey90 ] 154 , test "is inset from the page" <| 155 subject 156 >> Query.has [ style "margin" "25px" ] 157 , test "has padding around its contents" <| 158 subject 159 >> Query.has [ style "padding" "40px" ] 160 , describe "body" <| 161 let 162 body : () -> Query.Single ApplicationMsgs.TopLevelMessage 163 body = 164 subject >> Query.children [] >> Query.index 1 165 in 166 [ test "has set-pipeline instruction" <| 167 let 168 instruction = 169 "then, use `fly set-pipeline` to set " 170 ++ "up your new pipeline" 171 in 172 body 173 >> Query.has [ text instruction ] 174 , test "has 16px font" <| 175 body 176 >> Query.has 177 [ style "font-size" "16px" ] 178 , describe "CLI download section" <| 179 let 180 downloadSection = 181 body >> Query.children [] >> Query.index 0 182 in 183 [ test 184 ("lays out contents horizontally, " 185 ++ "centers vertically" 186 ) 187 <| 188 downloadSection 189 >> Query.has 190 [ style "display" "flex" 191 , style "align-items" "center" 192 ] 193 , test "says 'first, download the CLI tools:'" <| 194 let 195 instruction = 196 "first, download the CLI tools:" 197 in 198 downloadSection 199 >> Query.children [] 200 >> Query.index 0 201 >> Query.has [ text instruction ] 202 , test 203 ("there is space between the label and " 204 ++ "the icons" 205 ) 206 <| 207 downloadSection 208 >> Query.children [] 209 >> Query.index 0 210 >> Query.has 211 [ style "margin-right" "10px" ] 212 , describe "cli download icons" <| 213 let 214 cliIcons = 215 downloadSection 216 >> Query.children [ tag "a" ] 217 in 218 [ test "have 'download' attribute" <| 219 cliIcons 220 >> Query.each 221 (Query.has 222 [ attribute <| Attr.download "" ] 223 ) 224 , test "icons have descriptive ARIA labels" <| 225 cliIcons 226 >> Expect.all 227 [ Query.count (Expect.equal 3) 228 , Query.index 0 229 >> Query.has 230 [ attribute <| 231 Attr.attribute 232 "aria-label" 233 "Download OS X CLI" 234 ] 235 , Query.index 1 236 >> Query.has 237 [ attribute <| 238 Attr.attribute 239 "aria-label" 240 "Download Windows CLI" 241 ] 242 , Query.index 2 243 >> Query.has 244 [ attribute <| 245 Attr.attribute 246 "aria-label" 247 "Download Linux CLI" 248 ] 249 ] 250 , defineHoverBehaviour 251 { name = "os x cli icon" 252 , setup = setup () |> Tuple.first 253 , query = 254 Common.queryView 255 >> Query.find [ id "top-cli-osx" ] 256 , unhoveredSelector = 257 { description = "grey apple icon" 258 , selector = 259 [ style "opacity" "0.5" 260 , style "margin" "5px" 261 ] 262 ++ iconSelector 263 { size = "32px" 264 , image = Assets.CliIcon Cli.OSX 265 } 266 } 267 , hoverable = 268 Msgs.WelcomeCardCliIcon Cli.OSX 269 , hoveredSelector = 270 { description = "white apple icon" 271 , selector = 272 [ style "opacity" "1" 273 , style "margin" "5px" 274 ] 275 ++ iconSelector 276 { size = "32px" 277 , image = Assets.CliIcon Cli.OSX 278 } 279 } 280 } 281 , defineHoverBehaviour 282 { name = "windows cli icon" 283 , setup = setup () |> Tuple.first 284 , query = 285 Common.queryView 286 >> Query.find 287 [ id "top-cli-windows" ] 288 , unhoveredSelector = 289 { description = "grey windows icon" 290 , selector = 291 [ style "opacity" "0.5" 292 , style "margin" "5px" 293 ] 294 ++ iconSelector 295 { size = "32px" 296 , image = Assets.CliIcon Cli.Windows 297 } 298 } 299 , hoverable = 300 Msgs.WelcomeCardCliIcon Cli.Windows 301 , hoveredSelector = 302 { description = "white windows icon" 303 , selector = 304 [ style "opacity" "1" 305 , style "margin" "5px" 306 ] 307 ++ iconSelector 308 { size = "32px" 309 , image = Assets.CliIcon Cli.Windows 310 } 311 } 312 } 313 , defineHoverBehaviour 314 { name = "linux cli icon" 315 , setup = setup () |> Tuple.first 316 , query = 317 Common.queryView 318 >> Query.find 319 [ id "top-cli-linux" ] 320 , unhoveredSelector = 321 { description = "grey linux icon" 322 , selector = 323 [ style "opacity" "0.5" 324 , style "margin" "5px" 325 ] 326 ++ iconSelector 327 { size = "32px" 328 , image = Assets.CliIcon Cli.Linux 329 } 330 } 331 , hoverable = 332 Msgs.WelcomeCardCliIcon Cli.Linux 333 , hoveredSelector = 334 { description = "white linux icon" 335 , selector = 336 [ style "opacity" "1" 337 , style "margin" "5px" 338 ] 339 ++ iconSelector 340 { size = "32px" 341 , image = Assets.CliIcon Cli.Linux 342 } 343 } 344 } 345 ] 346 ] 347 ] 348 , describe "ascii art" <| 349 let 350 art : () -> Query.Single ApplicationMsgs.TopLevelMessage 351 art = 352 subject >> Query.children [] >> Query.index 2 353 in 354 [ test "not selectable for all browsers" <| 355 art 356 >> Query.has 357 [ style "user-select" "none" 358 , style "-ms-user-select" "none" 359 , style "-moz-user-select" "none" 360 , style "-khtml-user-select" "none" 361 , style "-webkit-user-select" "none" 362 , style "-webkit-touch-callout" "none" 363 ] 364 , test "cursor is set to default" <| 365 art 366 >> Query.has [ style "cursor" "default" ] 367 ] 368 ] 369 370 371 givenPipelines : List Concourse.Pipeline -> Application.Model -> ( Application.Model, List Effects.Effect ) 372 givenPipelines pipelines model = 373 model 374 |> Application.handleCallback (Callback.AllPipelinesFetched <| Ok pipelines)