How do I submit a test case on GMD?

Introduction

Creating Test Cases are very important to GMD Projects to ensure the quality of our Material Design widget's API, not only it's behavioral aspect but also the layout / structure of it. We used the default GWT Test which is the integration of JUnit Testing Framework and it's an Open Source project.

On the other hand, we are using BrowserStack Automate to easily create a StoryBoard of your GMD Application for Testing on different Browser / Platform - using Selenium Test.

Click here for more information on GWT Testing.

Widget Testing Guide (JUnit Framework)

On this guide, you will learn how to contribute a simple test case of each Widget API. Let's focus first on how you will create new Test Case for existing Widget. Also take note that we created already each individual Material Widget initial tests.

• Step 1 - Go to respective test directory, for the packaging we put our individual Widget Test Case inside the test.xxx.client.ui. You can see below the other GMD Project Test Directories.

  • GMD Test Suite
  • GMD Addins Test Suite
  • GMD Table Test Suite

• Step 2 - Go to any kind of widget you want to add / update a test case (For e.g MaterialFabTest)

• Step 3 - Adding new test method requires to be called inside the init() method see for checkStructure as for example.

• Step 4 - After that, you can now run your test suite by going to GwtMaterialTestComponent::testFab() and click the little refresh icon.

Result

• Step 5 - If the test you've updated / created are successfull you can now submit a Pull Request for your contribution. Please see the Contribution Guidelines.

App Test (Selenium Framework)

• BrowserStack Automate - will provide you an instant automated testing on desktop browsers, real iOS and Android devices. Say goodbye to your internal Selenium grid.

• First POC has been implemented. Wait for any updates regarding the Best Test setup. https://github.com/GwtMaterialDesign/gwt-material-demo/pull/69

Simple Test Suite for GMD Widget

1. Open Browser
2. Navigate to gmd demo
3. Click on Icon Search
4. Open Search and Type DatePicker
5. Click on the first DatePicker

Selenium Source Code

   @Test
    public void testDatePicker() throws MalformedURLException {
        String gmdUrl = "https://gwtmaterialdesign.github.io/gwt-material-demo/";

        DesiredCapabilities caps = new DesiredCapabilities();
        caps.setCapability("os", "OS X");
        caps.setCapability("browser", "chrome");
        caps.setCapability("browserstack.debug", "true");
        caps.setCapability("resolution", "1920x1080");
        caps.setCapability("build", "First build");

        WebDriver driver = new RemoteWebDriver(new URL(URL), caps);
        driver.manage().window().maximize();
        driver.get("https://gwtmaterialdesign.github.io/gwt-material-demo/");

        WebElement searchIcon = driver.findElement(By.cssSelector("header nav .nav-wrapper a:nth-child(3)"));
        Assert.assertNotNull(searchIcon);
        searchIcon.click();

        WebElement searchInput = driver.findElement(By.cssSelector("header nav .nav-wrapper .input-field input[type=search]"));
        Assert.assertNotNull(searchInput);
        searchInput.sendKeys("Date Picker");
        searchInput.sendKeys(Keys.ENTER);

        Assert.assertEquals(driver.getCurrentUrl(), gmdUrl + "#pickers");

        // DatePicker
        WebElement datePicker = driver.findElement(By.cssSelector("main .code:nth-child(1) .input-field input"));
        datePicker.click();

        System.out.println(driver.getTitle());
        driver.quit();
    }

Screenshots from Browserstack