Set up some meaningful e2e tests.

e2e/app.e2e-spec.ts

@@ -7,8 +7,25 @@ describe('convertorizr App', () => {
     page = new ConvertorizrPage();
   });
 
-  it('should display message saying app works', () => {
+  it('should display a textarea that is initially empty', () => {
-    page.navigateTo();
+    page.navigateTo()
-    expect(page.getInputfieldContent(0)).toEqual('');
+      .then(() => page.getInputFieldContent(0))
+      .then((value: string) => {
+        expect(value).toEqual('');
+      });
+  });
+
+  it('should convert a string to its base64 representation', () => {
+    page.navigateTo()
+      .then(() => page.setInputFieldContent(0, 'Hello, World!'))
+      .then(() => page.getSelectedConverterOption(0))
+      .then((option: string) => {
+        expect(option).toEqual('Select conversion ...');
+      })
+      .then(() => page.selectConverterOption(0, 'Encode Base 64'))
+      .then(() => page.getInputFieldContent(1))
+      .then((content: string) => {
+        expect(content).toEqual('SGVsbG8sIFdvcmxkIQ==');
+      });
   });
 });

e2e/app.po.ts

@@ -1,25 +1,44 @@
-import {browser, by, element} from 'protractor';
+import {browser, by, element, ElementFinder} from 'protractor';
+import {promise, WebElementPromise} from 'selenium-webdriver';
 
 export class ConvertorizrPage {
-  navigateTo() {
+  navigateTo(): promise.Promise<any> {
     return browser.get('/');
   }
 
-  public foo() {
+  private getInputField(index: number): WebElementPromise {
-    return 'bar';
+    return element
+      .all(by.css('app-root div.inputwrapper'))
+      .get(index)
+      .element(by.css('.textwrapper textarea'))
+      .getWebElement();
   }
 
-  public getInputfieldContent(index: number): Promise<any> {
+  getInputFieldContent(index: number): promise.Promise<string> {
-    const css1 = by.css('app-root div.inputwrapper');
+    return this.getInputField(index).getText();
-    console.log(css1);
+  }
-    const el1 = element.all(css1)[index];
+
-    console.log(el1);
+  setInputFieldContent(index: number, content: string): promise.Promise<void> {
-    const css2 = by.css('.textwrapper textarea');
+    return this.getInputField(index).sendKeys(content);
-    console.log(css2);
+  }
-    const el2 = el1.findElement(css2);
+
-    console.log(el2);
+  private getConverterDropdown(index: number): ElementFinder {
-    const t = el2.getText();
+    return element
-    console.log(t);
+      .all(by.css('app-root div.inputwrapper'))
-    return t;
+      .get(index)
+      .element(by.css('.selectwrapper select'));
+  }
+
+  getSelectedConverterOption(index: number): promise.Promise<string> {
+    return this.getConverterDropdown(index)
+      .$('option:checked')
+      .getWebElement()
+      .getText();
+  }
+
+  selectConverterOption(index: number, optionName: string): promise.Promise<void> {
+    return this.getConverterDropdown(index)
+      .element(by.cssContainingText('option', optionName))
+      .click();
   }
 }