feat(example): add examples of usage protractor framework with angula…

…r-material components; (#4891)

example/angular_material/conf.js

@@ -0,0 +1,27 @@
+// An example configuration file.
+exports.config = {
+    directConnect: true,
+
+    // Capabilities to be passed to the webdriver instance.
+    capabilities: {
+      'browserName': 'chrome'
+    },
+
+    // Framework to use. Jasmine is recommended.
+    framework: 'jasmine',
+
+    // Spec patterns are relative to the current working directory when
+    // protractor is called.
+    specs: [
+        'input_spec.js',
+        'mat_paginator_spec.js'
+    ],
+
+    // Disable promise manager because we are going to use async/await
+    SELENIUM_PROMISE_MANAGER: false,
+
+    // Options to be passed to Jasmine.
+    jasmineNodeOpts: {
+      defaultTimeoutInterval: 30000
+    }
+};

example/angular_material/input_spec.js

@@ -0,0 +1,15 @@
+describe('angular-material input component page', function() {
+  const EC = protractor.ExpectedConditions;
+
+  it('Should change input component value', async() => {
+    await browser.get('https://material.angular.io/components/input/examples');
+
+    await browser.wait(EC.elementToBeClickable($('.mat-button-wrapper>.mat-icon')), 5000);
+
+    const emailInputField = $$('.mat-form-field-infix>input').get(1);
+
+    await emailInputField.sendKeys('invalid');
+
+    expect($('mat-error').isPresent()).toBe(true);
+  });
+});

example/angular_material/mat_paginator_spec.js

@@ -0,0 +1,31 @@
+describe('angular-material paginator component page', () => {
+  const EC = protractor.ExpectedConditions;
+
+  beforeAll(async() => {
+    await browser.get('https://material.angular.io/components/paginator/examples');
+
+    await browser.wait(EC.elementToBeClickable($('.mat-button-wrapper>.mat-icon')), 5000);
+  });
+
+  it('Should navigate to next page', async() => {
+    await $('button[aria-label=\'Next page\']').click();
+
+    await expect($('.mat-paginator-range-label').getAttribute('innerText')).toEqual('11 - 20 of 100');
+  });
+
+  it('Should navigate to previous page', async() => {
+    await $('button[aria-label=\'Previous page\']').click();
+
+    await expect($('.mat-paginator-range-label').getAttribute('innerText')).toEqual('1 - 10 of 100');
+  });
+
+  it('Should change list length to 5 items per page', async() => {
+    await $('mat-select>div').click();
+
+    const fiveItemsOption = $$('mat-option>.mat-option-text').first();
+
+    await fiveItemsOption.click();
+
+    await expect($('.mat-paginator-range-label').getAttribute('innerText')).toEqual('1 - 5 of 100');
+  });
+});