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

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' },

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-->

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;
 

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>
 
@@ -262,6 +265,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'

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>"
+`;

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>"
+`;

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)

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)')
+  })
+})