test(maz-ui): maz-loading-bar tests

LouisMazel · Dec 24, 2023 · 85d3eb8 · 85d3eb8
1 parent 151a13a
commit 85d3eb8
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 11 deletions.
diff --git a/packages/docs/docs/.vitepress/configs/components.mts b/packages/docs/docs/.vitepress/configs/components.mts
@@ -49,6 +49,7 @@ export const components = {
         { text: 'MazGallery', link: '/components/maz-gallery' },
         { text: 'MazIcon', link: '/components/maz-icon' },
         { text: 'MazLazyImg', link: '/components/maz-lazy-img' },
+        { text: 'MazLoadingBar', link: '/components/maz-loading-bar' },
         { text: 'MazPullToRefresh', link: '/components/maz-pull-to-refresh' },
         { text: 'MazStepper', link: '/components/maz-stepper' },
         { text: 'MazSpinner', link: '/components/maz-spinner' },

diff --git a/packages/docs/docs/components/maz-loading-bar.md b/packages/docs/docs/components/maz-loading-bar.md
@@ -0,0 +1,26 @@
+---
+title: MazLoadingBar
+description: MazLoadingBar is a standalone component
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<!--@include: ./../.vitepress/mixins/getting-started.md-->
+
+## Basic usage
+
+<MazLoadingBar color="secondary" />
+
+```vue
+<template>
+  <MazLoadingBar color="secondary" />
+</template>
+
+<script lang="ts" setup>
+  import MazLoadingBar from 'maz-ui/components/MazLoadingBar'
+</script>
+```
+
+<!--@include: ./../.vitepress/generated-docs/maz-loading-bar.doc.md-->
diff --git a/packages/docs/docs/components/maz-table.md b/packages/docs/docs/components/maz-table.md
@@ -100,15 +100,19 @@ You can use MazTable and his child component to build a simple table and enjoy t
 
 <script lang="ts" setup>
   import MazTable from 'maz-ui/components/MazTable'
-  import MazTableRow from 'maz-ui/components/MazTable'
-  import MazTableCell from 'maz-ui/components/MazTable'
+  import MazTableRow from 'maz-ui/components/MazTableRow'
+  import MazTableCell from 'maz-ui/components/MazTableCell'
 </script>
 ```
 
 :::
 
 ## Advanced
 
+You can also provide all your data, the table is auto-generated and you can use the features [listed on top](#key-features)
+
+---
+
 `v-model="{{selectedIds ?? 'undefined'}}"`
 <br />
 `v-model:search-query="{{searchQuery ?? 'undefined'}}"`

diff --git a/packages/lib/components/MazLoadingBar.vue b/packages/lib/components/MazLoadingBar.vue
@@ -26,8 +26,9 @@
 
 <style lang="postcss" scoped>
   .m-loading-bar {
-    @apply maz-relative maz-block maz-h-0.5 maz-w-full maz-overflow-hidden maz-bg-primary-alpha-20;
+    @apply maz-relative maz-block maz-w-full maz-overflow-hidden;
 
+    height: v-bind('height');
     background-color: v-bind('colorCSVariables.alpha');
     overflow: hidden;
 

diff --git a/packages/lib/components/MazTable.vue b/packages/lib/components/MazTable.vue
@@ -18,8 +18,11 @@
           :size="size"
           :color="color"
           :placeholder="searchPlaceholder"
-          left-icon="search"
-        />
+        >
+          <template #left-icon>
+            <SearchIcon class="maz-text-lg" />
+          </template>
+        </MazInput>
       </div>
     </div>
 
@@ -29,7 +32,7 @@
     >
       <caption v-if="caption || $slots.caption">
         <!--
-          @slot caption - replace caption
+          @slot caption - add caption on top or bottom of the table
         -->
         <slot name="caption">
           {{ caption }}
@@ -75,10 +78,10 @@
               -->
                 <slot name="header" :header="header" :label="header.label">
                   <!--
-                  @slot header-label-{key} - replace column header label
-                    @binding {Object} header - header data
-                    @binding {String} label - header label
-                -->
+                    @slot header-label-{key} - replace column header label
+                      @binding {Object} header - header data
+                      @binding {String} label - header label
+                  -->
                   <slot :name="`header-label-${header.key}`" :header="header" :label="header.label">
                     {{ header.label }}
                   </slot>
@@ -97,6 +100,9 @@
               </span>
             </MazTableTitle>
             <MazTableTitle v-if="$slots.actions" align="left" :class="`--${size}`">
+              <!--
+                @slot actions-header - replace text of actions header
+              -->
               <slot name="actions-header"> Actions </slot>
             </MazTableTitle>
           </MazTableRow>
@@ -151,6 +157,9 @@
                 </slot>
               </MazTableCell>
               <MazTableCell v-if="$slots.actions">
+                <!--
+                  @slot actions - will add actions column
+                -->
                 <slot name="actions"></slot>
               </MazTableCell>
             </MazTableRow>
@@ -262,6 +271,7 @@
     watch,
     onBeforeMount,
   } from 'vue'
+  import SearchIcon from './../icons/magnifying-glass.svg'
   import ArrowIcon from './../icons/arrow-up.svg'
   import ChevronIcon from './../icons/chevron-left.svg'
   import ChevronDoubleIcon from './../icons/chevron-double-left.svg'

diff --git a/packages/lib/tests/specs/components/__snapshots__/maz-loading-bar.spec.ts.snap b/packages/lib/tests/specs/components/__snapshots__/maz-loading-bar.spec.ts.snap
@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MazLoadingBar > renders correct HTML structure 1`] = `
+"<div data-v-744a78bd="" class="m-loading-bar">
+  <div data-v-744a78bd=""></div>
+</div>"
+`;
diff --git a/packages/lib/tests/specs/components/__snapshots__/maz-table.spec.ts.snap b/packages/lib/tests/specs/components/__snapshots__/maz-table.spec.ts.snap
@@ -0,0 +1,35 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MazTable > should render the component 1`] = `
+"<div data-v-ac035b54="" class="m-table">
+  <!--v-if-->
+  <table data-v-ac035b54="" class="">
+    <!--v-if-->
+    <thead data-v-ac035b54="">
+      <!--
+          @slot thead - content in thead element
+        -->
+      <maztablerow data-v-ac035b54="" no-hoverable="">
+        <!--v-if-->
+        <!--v-if-->
+      </maztablerow>
+    </thead>
+    <!--v-if-->
+    <tbody data-v-ac035b54="" class="">
+      <maztablerow data-v-ac035b54="">
+        <maztablecell data-v-ac035b54="" colspan="0">
+          <!--
+                  @slot no-results - replace no results
+                -->
+          <p data-v-ac035b54="" class="maz-text-center maz-text-muted">
+            <!--
+                      @slot no-results-text - replace no results test only
+                    --> No results
+          </p>
+        </maztablecell>
+      </maztablerow>
+    </tbody>
+  </table>
+  <!--v-if-->
+</div>"
+`;
diff --git a/packages/lib/tests/specs/components/maz-btn.spec.ts b/packages/lib/tests/specs/components/maz-btn.spec.ts
@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils'
 
 describe('MazBtn', () => {
   test('renders the component elements and classes correctly', () => {
-    const wrapper = shallowMount(MazBtn)
+    const wrapper = shallowMount(MazBtn, { slots: { default: 'Button Text' } })
 
     expect(wrapper.find('button').exists()).toBe(true)
     expect(wrapper.find('.m-btn__icon-left').exists()).toBe(false)

diff --git a/packages/lib/tests/specs/components/maz-loading-bar.spec.ts b/packages/lib/tests/specs/components/maz-loading-bar.spec.ts
@@ -0,0 +1,10 @@
+import { mount } from '@vue/test-utils'
+import MazLoadingBar from '@components/MazLoadingBar.vue'
+
+describe('MazLoadingBar', () => {
+  test('renders default color correctly', () => {
+    const wrapper = mount(MazLoadingBar)
+    expect(wrapper.vm.colorCSVariables.alpha).toBe('var(--maz-color-primary-alpha-20)')
+    expect(wrapper.vm.colorCSVariables.main).toBe('var(--maz-color-primary)')
+  })
+})