@@ -0,0 +1,12 @@ 
+@GIT.5
+Feature: Event Creation
+    Background:
+        Given I am vistor
+        And I have created an event
+    Scenario: I see my event detail
+        When I am on the event page
+        And I go to the event detail page
+        Then I see the name of the event
+        Then I see the date of the event
+        Then I see the address of the event
+        Then I see the address map of the event

@@ -0,0 +1,39 @@ 
+import {Page} from './_page';
+import {NewEventStep2} from './newEventStep2';
+class _EventDetails extends Page {
+  /**
+   *
+   * @param {string} selector
+   * @return {string}
+   */
+  field(selector) {
+    switch (selector) {
+      case 'name':
+        return '#MenuHeaderTitle';
+      case 'date':
+        return '#EventDate';
+      case 'address':
+        return '#EventAddress';
+      case 'address map':
+        return '#EventAddressMap';
+      case 'submit':
+      case 'edit':
+        return '#DetailsEditBtn';
+    }
+    throw new Error('Unknown selector ' + selector);
+  }
+
+  get name() {
+    return 'EventDetails';
+  }
+
+  async submit() {
+    await new Promise(resolve => {
+      setTimeout(resolve, 1000);
+    });
+    await super.submit();
+    global.SCENE.scene = NewEventStep2;
+    await NewEventStep2.waitForDisplayed();
+  }
+}
+export const EventDetails = new _EventDetails('/');

@@ -1,4 +1,5 @@ 
 import {Page} from './_page';
+import {EventDetails} from './eventDetails';
 class _EventPage extends Page {
   /**
    *
@@ -6,10 +7,18 @@ * @param {string} selector
    * @return {string}
    */
   field(selector) {
-    // switch (selector) {
-    //   case 'form':
-    //     return '#NewEvent';
-    // }
+    switch (selector) {
+      case 'menu':
+        return '#MenuMoreInfo';
+      case 'title':
+        return '#MenuHeaderTitle';
+      case 'detail tab':
+        return '#DetailsTab';
+      case 'new car tab':
+        return '#NewCarTab';
+      case 'invite tab':
+        return '#InviteTab';
+    }
     throw new Error('Unknown selector ' + selector);
   }
 
@@ -20,6 +29,21 @@ 
   async open() {
     this._path = `/e/${global.SCENE.event.id}`;
     return super.open();
+  }
+  async openMenu() {
+    const menu = await $(this.field('menu'));
+    await menu.click();
+    await browser.saveScreenshotByName(`${this.name}--openMenu`);
+  }
+  async openTab(tab) {
+    await this.openMenu();
+    switch (tab) {
+      case 'details':
+        const tab = await $(this.field('detail tab'));
+        await tab.click();
+        global.SCENE.scene = EventDetails;
+        await EventDetails.waitForDisplayed();
+    }
   }
 
   async submit() {

@@ -4,8 +4,17 @@ Then(/^I see the event page$/, async () => {
   await browser.saveScreenshotByName('NewEvent--success');
 });
 
+Then(/^I see the (.+) of the event$/, async field => {
+  const element = await $(global.SCENE.scene.field(field));
+  if (typeof global.SCENE.event[field] !== 'undefined') {
+    const value = global.SCENE.event[field];
+    const elementValue = await element.getText();
+    expect(value).toBe(elementValue);
+  }
+});
+
 Then(/^I see my event$/, async () => {
-  const titleElement = await $('.MuiToolbar-root h6');
+  const titleElement = await $(global.SCENE.scene.field('title'));
   const headerTitle = await titleElement.getText();
-  expect(headerTitle).toBe(SCENE.event.name);
+  expect(headerTitle).toBe(global.SCENE.event.name);
 });

@@ -23,3 +23,7 @@ 
 When(/^I write (.+) in (.+) field$/, {}, async (field, value) => {
   await global.SCENE.scene.type(field, value);
 });
+
+When(/^I go to the event detail page$/, {}, async (field, value) => {
+  await global.SCENE.scene.openTab('details');
+});