refactor: view fixes and changes, update packages, add e2e sidebar tests

package.json

@@ -31,32 +31,32 @@
     "release": "npm-run-all clearCache lint build test:unit test:e2e"
   },
   "dependencies": {
-    "@coreui/coreui": "^3.2.0",
+    "@coreui/coreui": "^3.2.2",
     "@coreui/icons": "^2.0.0-beta.3",
     "@coreui/utils": "^1.3.1",
-    "@coreui/vue": "^3.0.12",
+    "@coreui/vue": "^3.1.1",
     "@coreui/vue-chartjs": "^1.0.5",
     "vue": "~2.6.11",
-    "vue-router": "~3.3.2",
-    "vuex": "~3.4.0"
+    "vue-router": "~3.3.4",
+    "vuex": "~3.5.1"
   },
   "devDependencies": {
-    "@babel/core": "~7.10.2",
-    "@vue/cli-plugin-babel": "~4.4.1",
-    "@vue/cli-plugin-e2e-nightwatch": "~4.3.1",
-    "@vue/cli-plugin-eslint": "~4.4.1",
-    "@vue/cli-plugin-unit-jest": "~4.4.1",
-    "@vue/cli-service": "~4.4.1",
-    "@vue/test-utils": "1.0.0-beta.29",
+    "@babel/core": "~7.10.5",
+    "@vue/cli-plugin-babel": "~4.4.6",
+    "@vue/cli-plugin-e2e-nightwatch": "~4.4.6",
+    "@vue/cli-plugin-eslint": "~4.4.6",
+    "@vue/cli-plugin-unit-jest": "~4.4.6",
+    "@vue/cli-service": "~4.4.6",
+    "@vue/test-utils": "1.0.3",
     "babel-eslint": "~10.1.0",
-    "babel-jest": "~26.0.1",
-    "chromedriver": "83.0.0",
+    "babel-jest": "~26.1.0",
+    "chromedriver": "83.0.1",
     "core-js": "~3.6.5",
-    "eslint": "~6.8.0",
+    "eslint": "~7.4.0",
     "eslint-plugin-vue": "~6.2.2",
     "node-sass": "~4.14.1",
     "npm-run-all": "~4.1.5",
-    "sass-loader": "~8.0.2",
+    "sass-loader": "~9.0.2",
     "vue-template-compiler": "~2.6.11"
   },
   "browserslist": [

src/containers/TheFooter.vue

@@ -4,9 +4,9 @@
       <a href="https://coreui.io" target="_blank">CoreUI</a>
       <span class="ml-1">&copy; {{new Date().getFullYear()}} creativeLabs.</span>
     </div>
-    <div class="ml-auto">
-      <span class="mr-1">Powered by</span>
-      <a href="https://coreui.io/vue" target="_blank">CoreUI for Vue</a>
+    <div class="mfs-auto">
+      <span class="mr-1" target="_blank">Powered by</span>
+      <a href="https://coreui.io/vue">CoreUI for Vue</a>
     </div>
   </CFooter>
 </template>

src/containers/TheHeaderDropdownAccnt.vue

@@ -20,19 +20,19 @@
     </CDropdownHeader>
     <CDropdownItem>
       <CIcon name="cil-bell"/> Updates
-      <CBadge color="info" class="ml-auto">{{ itemsCount }}</CBadge>
+      <CBadge color="info" class="mfs-auto">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownItem>
       <CIcon name="cil-envelope-open" /> Messages
-      <CBadge color="success" class="ml-auto">{{ itemsCount }}</CBadge>
+      <CBadge color="success" class="mfs-auto">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownItem>
       <CIcon name="cil-task" /> Tasks
-      <CBadge color="danger" class="ml-auto">{{ itemsCount }}</CBadge>
+      <CBadge color="danger" class="mfs-auto">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownItem>
       <CIcon name="cil-comment-square" /> Comments
-      <CBadge color="warning" class="ml-auto">{{ itemsCount }}</CBadge>
+      <CBadge color="warning" class="mfs-auto">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownHeader
       tag="div"
@@ -49,11 +49,11 @@
     </CDropdownItem>
     <CDropdownItem>
       <CIcon name="cil-dollar" /> Payments
-      <CBadge color="secondary" class="ml-auto">{{ itemsCount }}</CBadge>
+      <CBadge color="secondary" class="mfs-auto">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownItem>
       <CIcon name="cil-file" /> Projects
-      <CBadge color="primary" class="ml-auto">{{ itemsCount }}</CBadge>
+      <CBadge color="primary" class="mfs-auto">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownDivider/>
     <CDropdownItem>

src/views/base/Collapses.vue

@@ -40,17 +40,89 @@
     </CCol>
     <CCol col="12" md="6">
       <CCard>
-        <CCardHeader 
-          @click="cardCollapse = !cardCollapse" 
-          class="btn text-left"
+        <CButton
+          @click="cardCollapse = !cardCollapse"
+          tag="button"
+          color="link" 
+          block
+          class="text-left shadow-none card-header"
         > 
-          <strong>Collapsible card</strong>
-        </CCardHeader>
+          <h5 class="m-0">Collapsible card</h5>
+        </CButton>
         <CCollapse :show="cardCollapse">
           <CCardBody class="m-1">
             {{text}}
           </CCardBody>
-          </CCollapse>
+        </CCollapse>
+      </CCard>
+    </CCol>
+    <CCol xl="6">
+      <CCard>
+        <CCardHeader>
+          Collapse
+          <small> accordion</small>
+        </CCardHeader>
+        <CCardBody>
+          <div>
+            <CCard class="mb-0">
+              <CButton 
+                block 
+                color="link" 
+                class="text-left shadow-none card-header" 
+                @click="accordion = accordion === 0 ? false : 0" 
+              >
+                <h5 class="m-0">Collapsible Group Item #1</h5>
+              </CButton>
+              <CCollapse :show="accordion === 0">
+                <CCardBody>
+                  1. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
+                  cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
+                  on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
+                  nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
+                  beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven''t heard of them accusamus labore sustainable VHS.
+                </CCardBody>
+              </CCollapse>
+            </CCard>
+            <CCard class="mb-0">
+              <CButton 
+                block 
+                color="link" 
+                class="text-left shadow-none card-header" 
+                @click="accordion = accordion === 1 ? false : 1" 
+              >
+                <h5 class="m-0">Collapsible Group Item #2</h5>
+              </CButton>
+              <CCollapse :show="accordion === 1">
+                <CCardBody>
+                  2. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
+                  cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
+                  on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
+                  nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
+                  beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven''t heard of them accusamus labore sustainable VHS.
+                </CCardBody>
+              </CCollapse>
+            </CCard>
+            <CCard class="mb-0">
+              <CButton 
+                block 
+                color="link" 
+                class="text-left shadow-none card-header" 
+                @click="accordion = accordion === 2 ? false : 2" 
+              >
+                <h5 class="m-0">Collapsible Group Item #3</h5>
+              </CButton>
+              <CCollapse :show="accordion === 2">
+                <CCardBody>
+                  3. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
+                  cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
+                  on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
+                  nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
+                  beer farm-to-table, raw denim aesthetic synth nesciunt you probably havent heard of them accusamus labore sustainable VHS.
+                </CCardBody>
+              </CCollapse>
+            </CCard>
+          </div>
+        </CCardBody>
       </CCard>
     </CCol>
   </CRow>
@@ -64,6 +136,7 @@ export default {
       collapse: false,
       cardCollapse: true,
       innerCollapse: false,
+      accordion: 0,
       text: `
         Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
         richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor

src/views/base/Forms.vue

@@ -175,6 +175,7 @@
                 horizontal
                 :options="options"
                 placeholder="Please select"
+                custom
               />
               <CSelect
                 label="Select"
@@ -202,6 +203,50 @@
                   </CCol>
                 </CRow>
               </template>
+              <CRow form class="form-group">
+                  <CCol tag="label" sm="3" class="col-form-label">
+                    Switch checkboxes
+                  </CCol>
+                  <CCol sm="9">
+                    <CSwitch
+                      class="mr-1"
+                      color="primary"
+                      :checked="true"
+                    />
+                    <CSwitch
+                      class="mr-1"
+                      color="success"
+                      :checked="true"
+                      variant="outline"
+                    />
+                    <CSwitch
+                      class="mr-1"
+                      color="warning"
+                      :checked="true"
+                      variant="opposite"
+                    />
+                    <CSwitch
+                      class="mr-1"
+                      color="danger"
+                      :checked="true"
+                      shape="pill"
+                    />
+                    <CSwitch
+                      class="mr-1"
+                      color="info"
+                      :checked="true"
+                      shape="pill"
+                      variant="outline"
+                    />
+                    <CSwitch
+                      class="mr-1"
+                      color="dark"
+                      :checked="true"
+                      shape="pill"
+                      variant="opposite"
+                    />
+                  </CCol>
+                </CRow>
               <template v-for="(name, key) in radioNames">
                 <CRow form class="form-group" :key="name">
                   <CCol sm="3">
@@ -533,10 +578,10 @@
               autocomplete="email"
             >
               <template #prepend>
-                <CButton color="primary"><CIcon name="cib-facebook" height="14"/></CButton>
+                <CButton color="primary"><CIcon name="cib-facebook"/></CButton>
               </template>
               <template #append>
-                <CButton color="primary"><CIcon name="cib-twitter" height="14"/></CButton>
+                <CButton color="primary"><CIcon name="cib-twitter"/></CButton>
               </template>
             </CInput>
           </CCardBody>

tests/e2e/specs/test.js

@@ -18,29 +18,64 @@ module.exports = {
 
     // const devServer = browser.globals.devServerURL
     const devServer = process.env.VUE_DEV_SERVER_URL
+    const toggle = (mobile = false) => {
+      if (mobile) {
+        browser.click('.c-header-toggler.d-lg-none')
+      } else {
+        browser.click('.c-header-toggler.d-md-down-none')
+      }
+    }
+    const sidebarIsVisible = () => {
+      browser.expect.element('.c-sidebar').to.have.css('margin-left').which.equals('0px')
+    }
+
+    const sidebarIsHidden = () => {
+      browser.expect.element('.c-sidebar').to.have.css('margin-left').which.not.equals('0px')
+    }
 
 
     browser.url(devServer).pause(500).expect.element('body').to.be.present
 
-    browser.waitForElementVisible('.c-app', 2000)
+    browser.waitForElementVisible('.c-app', 1000)
       .assert.elementPresent('.c-header')
       .assert.elementPresent('.c-sidebar')
       .assert.elementPresent('.c-footer')
       .assert.elementPresent('.c-sidebar')
       .assert.elementPresent('.c-body')
-      
-    // browser.resizeWindow(700, 800)
-    // browser.expect.element('.c-sidebar').to.have.css('margin-left').which.equals('-256px')
-    // browser.resizeWindow(1900, 800)
-    // browser.expect.element('.c-sidebar').to.have.css('margin-left').which.equals('0px')
-    // browser.pause(1500)
-    // browser.click('.c-sidebar-minimizer')
-    // browser.pause(1000)
-    // browser.expect.element('.c-sidebar').to.have.css('width').which.equals('56px')
-    // browser.click('button.c-header-toggler')
-    // browser.pause(1000)
-    // browser.expect.element('.c-sidebar').to.have.css('margin-left').which.equals('-256px')
-    // browser.pause(1000)
+
+    browser.resizeWindow(700, 800)
+    sidebarIsHidden()
+    toggle('mobile')
+    browser.pause(500)
+    sidebarIsVisible()
+    browser.click('.c-sidebar-backdrop')
+    browser.pause(500)
+    sidebarIsHidden()
+    toggle('mobile')
+    browser.pause(500)
+    browser.click('.c-sidebar-nav-dropdown-toggle')
+    browser.pause(500)
+    sidebarIsVisible()
+    browser.click('.c-sidebar-nav-item')
+    browser.pause(500)
+    sidebarIsHidden()
+
+    browser.resizeWindow(1900, 800)
+    sidebarIsVisible()
+    browser.pause(500)
+    browser.click('.c-sidebar-minimizer')
+    browser.click('.c-body')
+    browser.pause(500)
+    browser.expect.element('.c-sidebar').to.have.css('width').which.equals('56px')
+    browser.click('.c-sidebar-minimizer')
+    browser.click('.c-body')
+    browser.pause(500)
+    browser.expect.element('.c-sidebar').to.have.css('width').which.equals('256px')
+    browser.click('.c-header-toggler.d-md-down-none')
+    browser.pause(1000)
+    sidebarIsHidden()
+    browser.pause(1000)
+
 
     browser.end()
   }

tests/unit/containers/__snapshots__/TheFooter.spec.js.snap

@@ -20,17 +20,17 @@ exports[`TheFooter.vue renders correctly 1`] = `
   </div>
    
   <div
-    class="ml-auto"
+    class="mfs-auto"
   >
     <span
       class="mr-1"
+      target="_blank"
     >
       Powered by
     </span>
      
     <a
       href="https://coreui.io/vue"
-      target="_blank"
     >
       CoreUI for Vue
     </a>

tests/unit/containers/__snapshots__/TheHeaderDropdownAccnt.spec.js.snap

@@ -36,7 +36,7 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
     
     <cbadge-stub
       activeclass="router-link-active"
-      class="ml-auto"
+      class="mfs-auto"
       color="info"
       event="click"
       exactactiveclass="router-link-exact-active"
@@ -62,7 +62,7 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
     
     <cbadge-stub
       activeclass="router-link-active"
-      class="ml-auto"
+      class="mfs-auto"
       color="success"
       event="click"
       exactactiveclass="router-link-exact-active"
@@ -88,7 +88,7 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
     
     <cbadge-stub
       activeclass="router-link-active"
-      class="ml-auto"
+      class="mfs-auto"
       color="danger"
       event="click"
       exactactiveclass="router-link-exact-active"
@@ -114,7 +114,7 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
     
     <cbadge-stub
       activeclass="router-link-active"
-      class="ml-auto"
+      class="mfs-auto"
       color="warning"
       event="click"
       exactactiveclass="router-link-exact-active"
@@ -178,7 +178,7 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
     
     <cbadge-stub
       activeclass="router-link-active"
-      class="ml-auto"
+      class="mfs-auto"
       color="secondary"
       event="click"
       exactactiveclass="router-link-exact-active"
@@ -204,7 +204,7 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
     
     <cbadge-stub
       activeclass="router-link-active"
-      class="ml-auto"
+      class="mfs-auto"
       color="primary"
       event="click"
       exactactiveclass="router-link-exact-active"

tests/unit/views/base/__snapshots__/Collapses.spec.js.snap

@@ -108,13 +108,17 @@ exports[`Collapses.vue renders correctly 1`] = `
     <div
       class="card"
     >
-      <header
-        class="card-header btn text-left"
+      <button
+        class="btn text-left shadow-none card-header btn-link btn-block"
+        tag="button"
+        type="button"
       >
-        <strong>
+        <h5
+          class="m-0"
+        >
           Collapsible card
-        </strong>
-      </header>
+        </h5>
+      </button>
        
       <div
         class=""
@@ -138,5 +142,125 @@ exports[`Collapses.vue renders correctly 1`] = `
       </div>
     </div>
   </div>
+   
+  <div
+    class="col-xl-6"
+  >
+    <div
+      class="card"
+    >
+      <header
+        class="card-header"
+      >
+        
+        Collapse
+        
+        <small>
+           accordion
+        </small>
+      </header>
+       
+      <div
+        class="card-body"
+      >
+        <div>
+          <div
+            class="card mb-0"
+          >
+            <button
+              class="btn text-left shadow-none card-header btn-link btn-block"
+              type="button"
+            >
+              <h5
+                class="m-0"
+              >
+                Collapsible Group Item #1
+              </h5>
+            </button>
+             
+            <div
+              class=""
+            >
+              <div
+                class="card-body"
+              >
+                
+                1. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
+                cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
+                on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
+                nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
+                beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven''t heard of them accusamus labore sustainable VHS.
+              
+              </div>
+            </div>
+          </div>
+           
+          <div
+            class="card mb-0"
+          >
+            <button
+              class="btn text-left shadow-none card-header btn-link btn-block"
+              type="button"
+            >
+              <h5
+                class="m-0"
+              >
+                Collapsible Group Item #2
+              </h5>
+            </button>
+             
+            <div
+              class=""
+              style="display: none;"
+            >
+              <div
+                class="card-body"
+              >
+                
+                2. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
+                cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
+                on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
+                nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
+                beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven''t heard of them accusamus labore sustainable VHS.
+              
+              </div>
+            </div>
+          </div>
+           
+          <div
+            class="card mb-0"
+          >
+            <button
+              class="btn text-left shadow-none card-header btn-link btn-block"
+              type="button"
+            >
+              <h5
+                class="m-0"
+              >
+                Collapsible Group Item #3
+              </h5>
+            </button>
+             
+            <div
+              class=""
+              style="display: none;"
+            >
+              <div
+                class="card-body"
+              >
+                
+                3. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
+                cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
+                on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
+                nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
+                beer farm-to-table, raw denim aesthetic synth nesciunt you probably havent heard of them accusamus labore sustainable VHS.
+              
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 `;