Merge pull request #100 from baruchiro/MainGrid

Main grid from ElementUI to Vuetify
brafdlog · Feb 17, 2020 · 0cbaa81 · 0cbaa81
2 parents 1de43bc + 60d72df
commit 0cbaa81
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 47 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,7 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+screenshots/
 
 # Runtime data
 pids

diff --git a/src/App.vue b/src/App.vue
@@ -1,30 +1,5 @@
 <template>
-  <v-app>
-    <v-app-bar
-      app
-      color="primary"
-      dark
-    >
-      <div class="d-flex align-center">
-        <span class="shrink mr-2 headline">Israeli Bank Scrapers Desktop</span>
-      </div>
-
-      <v-spacer />
-
-      <v-btn
-        href="https://github.com/baruchiro/israeli-bank-scrapers-desktop"
-        target="_blank"
-        text
-      >
-        <span class="mr-2">Open in Github</span>
-        <v-icon>mdi-open-in-new</v-icon>
-      </v-btn>
-    </v-app-bar>
-
-    <v-content>
-      <MainPage />
-    </v-content>
-  </v-app>
+  <MainPage />
 </template>
 
 <script>

diff --git a/src/components/MainPage.vue b/src/components/MainPage.vue
@@ -1,17 +1,48 @@
 <template>
-  <div id="wrapper">
-    <el-container>
-      <el-aside>
-        <Importers />
-      </el-aside>
-      <el-main>
-        <DataTable />
-      </el-main>
-      <el-aside border="solid">
-        <Exporters />
-      </el-aside>
-    </el-container>
-  </div>
+  <v-app>
+    <v-app-bar
+      app
+      color="primary"
+    >
+      <v-app-bar-nav-icon
+        data-test="drawerLeftToggle"
+        @click.stop="drawerLeft = !drawerLeft"
+      />
+      <div class="d-flex align-center">
+        <span class="shrink mr-2 headline">Israeli Bank Scrapers Desktop</span>
+      </div>
+
+      <v-spacer />
+
+      <v-btn
+        href="https://github.com/baruchiro/israeli-bank-scrapers-desktop"
+        target="_blank"
+        text
+      >
+        <span class="mr-2">Open in Github</span>
+        <v-icon>mdi-open-in-new</v-icon>
+      </v-btn>
+      <v-app-bar-nav-icon @click.stop="drawerRight = !drawerRight" />
+    </v-app-bar>
+
+    <v-navigation-drawer
+      v-model="drawerLeft"
+      app
+      left
+    >
+      <Importers />
+    </v-navigation-drawer>
+    <v-content>
+      <DataTable />
+    </v-content>
+    <v-navigation-drawer
+      v-model="drawerRight"
+      app
+      right
+    >
+      <Exporters />
+    </v-navigation-drawer>
+  </v-app>
 </template>
 
 <script>
@@ -22,6 +53,12 @@ import Exporters from '@/components/MainPage/Exporters';
 export default {
   name: 'MainPage',
   components: { Importers, DataTable, Exporters },
+  data() {
+    return {
+      drawerLeft: null,
+      drawerRight: null,
+    };
+  },
 };
 </script>
 
@@ -45,7 +82,6 @@ body {
     rgba(229, 229, 229, 0.9) 100%
   );
   height: 100%;
-  width: 100vw;
   display: flex;
   flex-direction: column;
   align-items: stretch;

diff --git a/test/e2e/specs/Launch.spec.js b/test/e2e/specs/Launch.spec.js
@@ -56,21 +56,21 @@ const skip = process.env.GITHUB_ACTIONS && process.platform === 'win32';
   });
 
   test('Show AddScraper components when clicking on AddScraper', async () => {
-    await interactions.getCollapseAddImporter().then((element) => element.click());
-    await interactions.waitForAddScrapersVisible();
+    await interactions.toggleLeftDrawer();
+    await interactions.clickCollapseAddImporter();
 
     const addScrapers = await interactions.getAddScrapers();
     const visiblities = await Promise.all(addScrapers.map((scraper) => scraper.isVisible()));
     expect(visiblities).not.toContain(false);
   });
 
   afterEach(async () => {
-    if (!fs.existsSync(screenshotsDir)) {
-      fs.mkdirSync(screenshotsDir);
-    }
-
     if (global.lastTest.failed) {
-      const screenshotFile = path.join(screenshotsDir, `${global.lastTest.test.name.trim()}.png`);
+      if (!fs.existsSync(screenshotsDir)) {
+        fs.mkdirSync(screenshotsDir);
+      }
+
+      const screenshotFile = path.join(screenshotsDir, `${global.lastTest.test.name.replace(/\s/g, '')}.png`);
       const imgBuffer = await win.capturePage();
       fs.writeFileSync(screenshotFile, imgBuffer);
     }

diff --git a/test/e2e/utils/interactions.js b/test/e2e/utils/interactions.js
@@ -1,13 +1,22 @@
 import Element from './element';
 
 const CollapseAddImporter = 'div[data-test="CollapseAddImporter"]';
+const CollapseAddImporterButton = 'div[data-test="CollapseAddImporter"] div[role="button"]';
 const AddScrapers = `${CollapseAddImporter} div[data-test]`;
+const DrawerLeftToggle = 'button[data-test="drawerLeftToggle"]';
+
+const wait = async (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
 export default class Interactions {
   constructor(client) {
     this.client = client;
   }
 
+  async click(json) {
+    const element = json.ELEMENT || json.value.ELEMENT;
+    return this.client.elementIdClick(element);
+  }
+
   async getCollapseAddImporter() {
     const json = await this.client.$(CollapseAddImporter);
     return new Element(this.client, json.value);
@@ -21,4 +30,14 @@ export default class Interactions {
   async waitForAddScrapersVisible() {
     return this.client.waitForVisible(AddScrapers, 1000);
   }
+
+  async toggleLeftDrawer() {
+    await this.client.$(DrawerLeftToggle).then((json) => this.click(json.value));
+    await wait(1000);
+  }
+
+  async clickCollapseAddImporter() {
+    await this.client.$(CollapseAddImporterButton).then((json) => this.click(json));
+    return this.client.waitForVisible(`${AddScrapers}:nth-of-type(3)`, 1000);
+  }
 }