Merge pull request #35 from FZJ-INM1-BDA/bugfix/sidenavToggle

introduce tests

.github/workflows/e2e.yml

@@ -6,11 +6,11 @@ on:
       - dev
 
 env:
-  DOCKER_IMAGE_NAME: interactive-viewer
+  DOCKER_IMAGE_NAME: gha-iav-image
   DOCKER_IMAGE_TAG: ${{ github.sha }}
   DOCKER_CONTAINER_NAME: gha-iav-built-${{ github.sha }}
   DOCKER_E2E_PPTR: gha-iav-e2e-pptr-${{ github.sha }}
-  DOCKER_E2E_NETWORK: gha-dkr-network-${{ github.sha }}
+  DOCKER_E2E_NETWORK: gha-dkr-network
   ATLAS_URL: http://gha-iav-built-${{ github.sha }}:3000/
 
 jobs:
@@ -33,6 +33,10 @@ jobs:
     runs-on: self-hosted
     needs: buildimage
     steps:
+    - name: clean up previous 
+      run: |
+        GHA_CONTAINERS=$( docker ps | grep gha | awk '{print $1}' )
+        if [ -z "$GHA_CONTAINERS" ]; then for f in $GHA_CONTAINERS; do docker stop $f; done; fi
     - name: run docker image ${{ env.DOCKER_IMAGE_NAME }}:${{ env.DOCKER_IMAGE_TAG }} as container ${{ env.DOCKER_CONTAINER_NAME }}
       run: |
         docker run \
@@ -58,16 +62,17 @@ jobs:
         docker exec -t ${DOCKER_E2E_PPTR} npm i puppeteer
     - name: Setup docker network
       run: |
-        docker network create ${{ env.DOCKER_E2E_NETWORK }}
         docker network connect ${{ env.DOCKER_E2E_NETWORK }} ${{ env.DOCKER_E2E_PPTR }}
         docker network connect ${{ env.DOCKER_E2E_NETWORK }} ${{ env.DOCKER_CONTAINER_NAME }}
     - name: run pptr tests - ${{ env.ATLAS_URL }}
       run: |
         docker exec --env ATLAS_URL=${ATLAS_URL} -t -w /iav ${DOCKER_E2E_PPTR} npm run e2e
-    - name: cleanup, stop container ${{ env.DOCKER_CONTAINER_NAME }}
+    - name: cleanup, stop container ${{ env.DOCKER_CONTAINER_NAME }} && ${{ env.DOCKER_E2E_PPTR }}
       if: success()
       run: |
         docker stop ${DOCKER_CONTAINER_NAME}
         docker stop ${DOCKER_E2E_PPTR}
-        docker network rm ${DOCKER_E2E_NETWORK}
+    - name: cleanup, remove image ${{ env.DOCKER_IMAGE_NAME }}:${{ env.DOCKER_IMAGE_TAG }}
+      if: success()
+      run: |
         docker rmi ${DOCKER_IMAGE_NAME}:${DOCKER_IMAGE_TAG}

e2e/src/layout/layout.e2e-spec.js

+const chromeOpts = require('../../chromeOpts')
+const pptr = require('puppeteer')
+const ATLAS_URL = (process.env.ATLAS_URL || 'http://localhost:3000').replace(/\/$/, '')
+if (ATLAS_URL.length === 0) throw new Error(`ATLAS_URL must either be left unset or defined.`)
+if (ATLAS_URL[ATLAS_URL.length - 1] === '/') throw new Error(`ATLAS_URL should not trail with a slash: ${ATLAS_URL}`)
+
+const MAT_SIDENAV_TIMEOUT = 500
+
+const getVisibility = page => async selector => await page.evaluate(sel => {
+  const el = document.querySelector(sel)
+  if (el) return el.style.visibility
+  else return null
+}, selector)
+
+const clickTab = async page => {
+  await page.evaluate(() => {
+    const el = document.querySelector('button[mat-drawer-trigger]')
+    el.click()
+  })
+}
+
+let browser
+describe('IAV layout e2e', () => {
+  beforeAll(async () => {
+    browser = await pptr.launch({
+      ...(
+        chromeOpts.indexOf('--headless') >= 0
+          ? { headless: true }
+          : {}
+      ),
+      args: [
+        ...chromeOpts
+      ]
+    })
+  })
+
+  describe('toggling side panel', () => {
+    let page
+
+    beforeAll(async () => {
+      const urlMni152JuBrain = `${ATLAS_URL}/?templateSelected=MNI+152+ICBM+2009c+Nonlinear+Asymmetric&parcellationSelected=JuBrain+Cytoarchitectonic+Atlas&cRegionsSelected=%7B%22jubrain+mni152+v18+left%22%3A%222%22%2C%22jubrain+mni152+v18+right%22%3A%222%22%7D&cNavigation=0.0.0.-W000..2_ZG29.-ASCS.2-8jM2._aAY3..BSR0..70hl~.1w4W0~.70hk..1Pl9`
+      page = await browser.newPage()
+      await page.goto(urlMni152JuBrain, {waitUntil: 'networkidle2'})
+      await page.waitFor('mat-drawer')
+    })
+
+    it('on init, side drawer should be visible', async () => {
+      const visibility = await (getVisibility(page))('mat-drawer[mat-drawer-opened]')
+      expect(
+        visibility
+      ).toBe('visible')
+    })
+
+    it('toggle tab should hide', async () => {
+      await clickTab(page)
+      await page.waitFor('mat-drawer[mat-drawer-opened=false]')
+      await page.waitFor(MAT_SIDENAV_TIMEOUT)
+
+      const visibility = await (getVisibility(page))('mat-drawer[mat-drawer-opened]')
+      expect(
+        visibility
+      ).toBe('hidden')
+    })
+
+    it('toggle tab should show', async () => {
+      await clickTab(page)
+      await page.waitFor('mat-drawer[mat-drawer-opened=true]')
+      await page.waitFor(MAT_SIDENAV_TIMEOUT)
+
+      const visibility = await (getVisibility(page))('mat-drawer[mat-drawer-opened]')
+      expect(
+        visibility
+      ).toBe('visible')
+    })
+
+    it('sidepanel property window should be hidden when side panel is shown', async () => {
+
+      const visibility = await (getVisibility(page))('mat-drawer[mat-drawer-opened]')
+      expect(
+        visibility
+      ).toBe('visible')
+
+      const statusPanel = await page.$('[mat-drawer-status-panel]')
+      expect(statusPanel).toBeNull
+    })
+
+    it('side panel property window should be visible when panel is hidden', async () => {
+      await clickTab(page)
+
+      await page.waitFor('mat-drawer[mat-drawer-opened=false]')
+      await page.waitFor(MAT_SIDENAV_TIMEOUT)
+      const visibility = await (getVisibility(page))('mat-drawer[mat-drawer-opened]')
+      expect(
+        visibility
+      ).toBe('hidden')
+
+      const statusPanel = await page.$('[mat-drawer-status-panel]')
+      expect(statusPanel).toBeTruthy
+    })
+
+    it('side panel, if visible, should open side panel', async () => {
+
+      const statusPanel = await page.$('[mat-drawer-status-panel]')
+      expect(statusPanel).toBeTruthy
+
+      await page.evaluate(() => {
+        const el = document.querySelector('[mat-drawer-status-panel]')
+        if (el) el.click()
+        else throw new Error(`mat-drawer-status-panel not found`)
+      })
+
+      await page.waitFor(MAT_SIDENAV_TIMEOUT)
+      
+      const visibility = await (getVisibility(page))('mat-drawer[mat-drawer-opened]')
+      expect(
+        visibility
+      ).toBe('visible')
+    })
+
+    it('after open with status panel, tag should continue to work', async () => {
+      await clickTab(page)
+
+      await page.waitFor('mat-drawer[mat-drawer-opened=false]')
+      await page.waitFor(MAT_SIDENAV_TIMEOUT)
+      const visibility = await (getVisibility(page))('mat-drawer[mat-drawer-opened]')
+      expect(
+        visibility
+      ).toBe('hidden')
+    })
+  })
+})

src/atlasViewer/atlasViewer.template.html

@@ -41,7 +41,6 @@
 <!-- atlas template -->
 <ng-template #viewerBody>
   <div class="atlas-container" (drag-drop)="localFileService.handleFileDrop($event)">
-
     <ui-nehuba-container
       iav-mouse-hover 
       #iavMouseHoverEl="iavMouseHover"
@@ -55,11 +54,17 @@
     <div class="z-index-10 position-absolute pe-none w-100 h-100">
 
       <!-- dataset search side nav -->
-      <mat-drawer-container *ngIf="newViewer$ | async" [hasBackdrop]="false"
+      <mat-drawer-container
+        *ngIf="newViewer$ | async"
+        [hasBackdrop]="false"
         class="w-100 h-100 bg-none mat-drawer-content-overflow-visible">
         <mat-drawer mode="push"
           class="col-10 col-sm-10 col-md-4 col-lg-3 col-xl-2 p-2 bg-none box-shadow-none overflow-visible"
-          [disableClose]="true" [autoFocus]="false" [opened]="sidePanelIsOpen$ | async" #sideNavDrawer>
+          [disableClose]="true"
+          [autoFocus]="false"
+          [opened]="sidePanelIsOpen$ | async"
+          [attr.mat-drawer-opened]="sidePanelIsOpen$ | async"
+          #sideNavDrawer>
           <search-side-nav (dismiss)="toggleSideNavMenu(true)"
             class="h-100 d-block overflow-visible" #searchSideNav>
           </search-side-nav>
@@ -69,17 +74,25 @@
         <!-- tag for opening and closing side nav -->
         <div class="d-flex h-100 align-items-start bg-none pe-none">
 
-          <button mat-flat-button matBadgePosition="above after" matBadgeColor="accent"
+          <button mat-flat-button
+            matBadgePosition="above after"
+            matBadgeColor="accent"
             [matBadge]="!sideNavDrawer.opened && (selectedRegions$ | async)?.length ? (selectedRegions$ | async)?.length : null"
             [matTooltip]="!sideNavDrawer.opened ? (selectedRegions$ | async)?.length ?  ('Explore ' + (selectedRegions$ | async)?.length + ' selected regions.') : 'Explore current view' : null"
             [ngClass]="{'translate-x-6-n': !sideNavDrawer.opened, 'translate-x-7-n': sideNavDrawer.opened}"
-            class="pe-all mt-5" (click)="toggleSideNavMenu(sideNavDrawer.opened)">
+            class="pe-all mt-5"
+            (click)="toggleSideNavMenu(sideNavDrawer.opened)"
+            mat-drawer-trigger>
             <i [ngClass]="{'fa-chevron-left': sideNavDrawer.opened, 'fa-chevron-right': !sideNavDrawer.opened}"
               class="fas translate-x-3"></i>
 
           </button>
 
-          <mat-card *ngIf="!sideNavDrawer.opened" (click)="toggleSideNavMenu(false)" mat-ripple
+          <mat-card
+            *ngIf="!sideNavDrawer.opened"
+            (click)="toggleSideNavMenu(false)"
+            mat-ripple
+            mat-drawer-status-panel
             class="pe-all mt-4 muted translate-x-4-n">
             <mat-card-content>
               <viewer-state-mini>
@@ -95,8 +108,8 @@
 
     <div class="d-flex flex-row justify-content-end z-index-10 position-absolute pe-none w-100 h-100">
       <signin-banner
-              signinWrapper
-              [parcellationIsSelected]="selectedParcellation? true : false">
+          signinWrapper
+          [parcellationIsSelected]="selectedParcellation? true : false">
       </signin-banner>
     </div>
 

src/components/dropdown/dropdown.component.spec.ts

@@ -6,9 +6,6 @@ import { RadioList } from '../radiolist/radiolist.component'
 import { DropdownComponent } from './dropdown.component';
 
 describe('dropdown component', () => {
-  it('jasmine works', () => {
-    expect(1).toBe(1)
-  })
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [