CODEWITHSUNDEEP
javascriptgebratpack
Dominic Patmore
Dominic Patmore

Reputation: 11

geb testing on ratpack and vuejs

I'm building a frontend using Ratpack and the asset-pipeline and am testing it using Geb. I require some of the pages to be dynamic, and as Knockoutjs seems to be no longer in development, I've been using VueJS. My problem is that while I'm able to visually see the data from my Vue model, my Geb tests break as the content isn't found. I've tried adding extra time, switching to different browsers (I mainly use PhantomJS,but have tried with Firefox and Chrome), and each time I'm not able to see the elements when it's running int this fashion. I could look away and continue developing, but that doesn't feel right if I can't at least validate the content is appearing on the page. I know Vue is relatively new, but I imagine the same might happen if you're using something using ReactJS. I've attached the relevant code parts below. What is the best way to test this?

build.gradle

    testCompile "org.spockframework:spock-core:1.0-groovy-2.4", {
      exclude module: "groovy-all"
  }
  testCompile "org.gebish:geb-spock:0.10.0"
  // Geb integration

    testCompile "org.seleniumhq.selenium:selenium-chrome-driver:2.51.0"
    testCompile "org.seleniumhq.selenium:selenium-firefox-driver:2.51.0"
    testCompile("com.codeborne:phantomjsdriver:1.2.1") {
        // phantomjs driver pulls in a different selenium version
        transitive = false
    }

vuetest.gtpl

    layout 'layouts/main.gtpl',                                   
    title: 'Vue Test',                                
    bodyContents: contents {
        div('id':'main'){
            p "The result is:"
            vuetest{}
        }

   }

VueTest.js

    Vue.component('vuetest', {
    template: '<p>Hello from Vue</p>'
})

VueTestPage.groovy

import geb.Page

class VueTestPage extends Page {

  static url = "/"

  static at = { title == "Vue Test" }

  static content = {
    vueGreeting(required:false){$('p',text:"Hello from Vue").text()}
  }
}

geb test

      def "vue testing"(){
    when:
    to VueTestPage
    then:
    at VueTestPage
    waitFor(vueGreeting.displayed) //fails
  }

Upvotes: 0

Views: 253

Answers (1)

Dan Hyun
Dan Hyun

Reputation: 536

This is more of a Geb question. When I reproduced your steps I got a message saying:

Caused by: groovy.lang.MissingPropertyException: No such property: displayed for class: java.lang.String

Which makes sense given that you asked for vueGreeting(required:false){$('p',text:"Hello from Vue").text()}

You could either change the content to be vueGreeting(required:false){$('p',text:"Hello from Vue")} in order to use vueGreeting.displayed

or with original vueGreeting definition change spec to say

then:
waitFor {
    vueGreeting == 'Hello from Vue'
}

Upvotes: 1

Related Questions