feat(stepper): Add e2e test (#6776)

* add e2e test for stepper * create material example to run e2e tests * Modifiy example
2026-09-14 13:54:52 +08:00 · 2017-09-06 13:36:07 -07:00
parent 5f4c44ebb1
commit bef6271c61
11 changed files with 166 additions and 2 deletions
@@ -0,0 +1,84 @@
+import {
+  browser, by, element, ElementFinder, ExpectedConditions
+} from 'protractor';
+import {expectFocusOn, expectToExist} from '../util/asserts';
+import {pressKeys} from '../util/actions';
+import {Key} from 'selenium-webdriver';
+import {screenshot} from '../screenshot';
+
+describe('stepper', () => {
+  beforeEach(() => browser.get('/stepper'));
+
+  it('should render a stepper', () => {
+    expectToExist('md-horizontal-stepper');
+    screenshot('md-horizontal-stepper');
+  });
+
+  describe('basic behavior', () => {
+    it('should change steps correctly when stepper button is clicked', async () => {
+      const previousButton = element.all(by.buttonText('Back'));
+      const nextButton = element.all(by.buttonText('Next'));
+
+      expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
+          .toBe('1\nFill out your name');
+
+      screenshot('start');
+      nextButton.get(0).click();
+
+      expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
+          .toBe('2\nFill out your address');
+
+      await browser.wait(ExpectedConditions.not(
+          ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
+      screenshot('click next');
+
+      previousButton.get(0).click();
+
+      expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
+          .toBe('1\nFill out your name');
+
+      await browser.wait(ExpectedConditions.not(
+          ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
+      screenshot('click back');
+    });
+
+    it('should change focus with keyboard interaction', () => {
+      let stepHeaders = element.all(by.css('md-step-header'));
+      stepHeaders.get(0).click();
+
+      expectFocusOn(stepHeaders.get(0));
+
+      pressKeys(Key.RIGHT);
+      expectFocusOn(stepHeaders.get(1));
+
+      pressKeys(Key.RIGHT);
+      expectFocusOn(stepHeaders.get(2));
+
+      pressKeys(Key.RIGHT);
+      expectFocusOn(stepHeaders.get(0));
+
+      pressKeys(Key.LEFT);
+      expectFocusOn(stepHeaders.get(2));
+
+      pressKeys(Key.SPACE, Key.ENTER);
+      expectFocusOn(stepHeaders.get(2));
+    });
+  });
+
+  describe('linear stepper', () => {
+    let linearButton: ElementFinder;
+
+    beforeEach(() => {
+      linearButton = element(by.id('toggle-linear'));
+      linearButton.click();
+    });
+
+    it('should not move to next step when stepper button is clicked', () => {
+      let nextButton = element.all(by.buttonText('Next'));
+      nextButton.get(0).click();
+
+      expect(element(by.css('md-step-header[aria-selected="true"]')).getText())
+          .toBe('1\nFill out your name');
+    });
+  });
+});