@zap-wunschlachen/wl-shared-components 1.0.0

package/tests/unit/plugins/vuetify.spec.ts

@@ -0,0 +1,221 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+vi.mock('vuetify/styles', () => ({}));
+vi.mock('@mdi/font/css/materialdesignicons.css', () => ({}));
+
+const mockHeroicons = {
+  aliases: {},
+  component: vi.fn(),
+};
+
+vi.mock('../../../heroicons', () => ({
+  default: mockHeroicons,
+}));
+
+vi.mock('vuetify/iconsets/mdi', () => ({
+  aliases: {
+    complete: 'mdi-check',
+    cancel: 'mdi-close',
+  },
+  mdi: {
+    component: vi.fn(),
+    aliases: {},
+  },
+}));
+
+vi.mock('vuetify/components', () => ({
+  VApp: { name: 'VApp' },
+  VBtn: { name: 'VBtn' },
+  VCard: { name: 'VCard' },
+}));
+
+vi.mock('vuetify/directives', () => ({
+  vRipple: { name: 'vRipple' },
+  vTouch: { name: 'vTouch' },
+}));
+
+const createVuetifyMock = vi.fn((config) => ({
+  ...config,
+  install: vi.fn(),
+  display: {},
+  theme: config.theme,
+  icons: config.icons,
+}));
+
+vi.mock('vuetify', () => ({
+  createVuetify: createVuetifyMock,
+}));
+
+describe('vuetify plugin', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.resetModules();
+  });
+
+  it('should create a vuetify instance', async () => {
+    const vuetifyModule = await import('../../../src/plugins/vuetify');
+    const vuetify = vuetifyModule.default;
+
+    expect(vuetify).toBeDefined();
+    expect(createVuetifyMock).toHaveBeenCalled();
+  });
+
+  it('should configure icons with mdi as default set', async () => {
+    await import('../../../src/plugins/vuetify');
+
+    const config = createVuetifyMock.mock.calls[0][0];
+    expect(config.icons).toBeDefined();
+    expect(config.icons.defaultSet).toBe('mdi');
+  });
+
+  it('should include both mdi and heroicons sets', async () => {
+    await import('../../../src/plugins/vuetify');
+
+    const config = createVuetifyMock.mock.calls[0][0];
+    expect(config.icons.sets).toBeDefined();
+    expect(config.icons.sets).toHaveProperty('mdi');
+    expect(config.icons.sets).toHaveProperty('heroicons');
+  });
+
+  it('should include icon aliases', async () => {
+    await import('../../../src/plugins/vuetify');
+
+    const config = createVuetifyMock.mock.calls[0][0];
+    expect(config.icons.aliases).toBeDefined();
+    expect(config.icons.aliases).toHaveProperty('complete');
+    expect(config.icons.aliases).toHaveProperty('cancel');
+  });
+
+  it('should include all vuetify components', async () => {
+    await import('../../../src/plugins/vuetify');
+
+    const config = createVuetifyMock.mock.calls[0][0];
+    expect(config.components).toBeDefined();
+    expect(config.components).toHaveProperty('VApp');
+    expect(config.components).toHaveProperty('VBtn');
+    expect(config.components).toHaveProperty('VCard');
+  });
+
+  it('should include all vuetify directives', async () => {
+    await import('../../../src/plugins/vuetify');
+
+    const config = createVuetifyMock.mock.calls[0][0];
+    expect(config.directives).toBeDefined();
+    expect(config.directives).toHaveProperty('vRipple');
+    expect(config.directives).toHaveProperty('vTouch');
+  });
+
+  describe('theme configuration', () => {
+    it('should set default theme to light', async () => {
+      await import('../../../src/plugins/vuetify');
+
+      const config = createVuetifyMock.mock.calls[0][0];
+      expect(config.theme).toBeDefined();
+      expect(config.theme.defaultTheme).toBe('light');
+    });
+
+    it('should define light and dark themes', async () => {
+      await import('../../../src/plugins/vuetify');
+
+      const config = createVuetifyMock.mock.calls[0][0];
+      expect(config.theme.themes).toBeDefined();
+      expect(config.theme.themes).toHaveProperty('light');
+      expect(config.theme.themes).toHaveProperty('dark');
+    });
+
+    describe('light theme', () => {
+      it('should have dark property set to false', async () => {
+        await import('../../../src/plugins/vuetify');
+
+        const config = createVuetifyMock.mock.calls[0][0];
+        expect(config.theme.themes.light.dark).toBe(false);
+      });
+
+      it('should define opacity variables', async () => {
+        await import('../../../src/plugins/vuetify');
+
+        const config = createVuetifyMock.mock.calls[0][0];
+        expect(config.theme.themes.light.variables).toBeDefined();
+        expect(config.theme.themes.light.variables['activated-opacity']).toBe('0.2');
+        expect(config.theme.themes.light.variables['hover-opacity']).toBe('0.2');
+      });
+
+      it('should define all Dental Blue colors', async () => {
+        await import('../../../src/plugins/vuetify');
+
+        const config = createVuetifyMock.mock.calls[0][0];
+        const colors = config.theme.themes.light.colors;
+
+        expect(colors['Dental-Blue-0']).toBe('#172774');
+        expect(colors['Dental-Blue-1']).toBe('#111c54');
+        expect(colors['Dental-Blue--1']).toBe('#4f5b95');
+        expect(colors['Dental-Blue--2']).toBe('#7079a8');
+        expect(colors['Dental-Blue--3']).toBe('#9198bc');
+        expect(colors['Dental-Blue--4']).toBe('#cacdde');
+        expect(colors['Dental-Blue--5']).toBe('#e5e6ee');
+        expect(colors['Dental-Blue--6']).toBe('#f6f6f8');
+      });
+
+      it('should define all status colors', async () => {
+        await import('../../../src/plugins/vuetify');
+
+        const config = createVuetifyMock.mock.calls[0][0];
+        const colors = config.theme.themes.light.colors;
+
+        expect(colors['Error-Red-0']).toBe('#b00020');
+        expect(colors['Success-Green-0']).toBe('#03dac6');
+        expect(colors['Warning-0']).toBe('#ffe600');
+        expect(colors['Check-0']).toBe('#01d449');
+      });
+
+      it('should define special color Trkis', async () => {
+        await import('../../../src/plugins/vuetify');
+
+        const config = createVuetifyMock.mock.calls[0][0];
+        const colors = config.theme.themes.light.colors;
+
+        expect(colors.Trkis).toBe('#bae6ea');
+      });
+    });
+
+    describe('dark theme', () => {
+      it('should have dark property set to true', async () => {
+        await import('../../../src/plugins/vuetify');
+
+        const config = createVuetifyMock.mock.calls[0][0];
+        expect(config.theme.themes.dark.dark).toBe(true);
+      });
+
+      it('should define subset of colors for dark theme', async () => {
+        await import('../../../src/plugins/vuetify');
+
+        const config = createVuetifyMock.mock.calls[0][0];
+        const colors = config.theme.themes.dark.colors;
+
+        expect(colors['Dental-Blue-0']).toBe('#111c54');
+        expect(colors['Dental-Light-Blue-0']).toBe('#adcbe9');
+        expect(colors['Error-Red-0']).toBe('#630112');
+        expect(colors['Success-Green-0']).toBe('#037a72');
+        expect(colors['Warning-0']).toBe('#4f4700');
+      });
+
+      it('should have fewer colors than light theme', async () => {
+        await import('../../../src/plugins/vuetify');
+
+        const config = createVuetifyMock.mock.calls[0][0];
+        const lightColorCount = Object.keys(config.theme.themes.light.colors).length;
+        const darkColorCount = Object.keys(config.theme.themes.dark.colors).length;
+
+        expect(darkColorCount).toBeLessThan(lightColorCount);
+      });
+    });
+  });
+
+  it('should export a valid vuetify instance with install method', async () => {
+    const vuetifyModule = await import('../../../src/plugins/vuetify');
+    const vuetify = vuetifyModule.default;
+
+    expect(vuetify).toHaveProperty('install');
+    expect(typeof vuetify.install).toBe('function');
+  });
+});

package/tests/unit/setup.ts

@@ -0,0 +1,190 @@
+import { config } from '@vue/test-utils';
+import { vi } from 'vitest';
+
+// Mock specific problematic CSS imports
+vi.mock('vuetify/lib/components/VCode/VCode.css', () => ({}));
+vi.mock('vuetify/styles', () => ({}));
+vi.mock('vuetify/lib/styles', () => ({}));
+
+// Mock Vuetify
+vi.mock('vuetify', () => ({
+  createVuetify: () => ({
+    install: () => {},
+  }),
+}));
+
+// Global test configuration
+config.global.stubs = {
+  // Stub Vuetify components that are commonly used
+  'v-btn': {
+    template: '<button class="v-btn" :disabled="disabled" :readonly="readonly" @click="handleClick" data-testid="root" v-bind="$attrs"><span v-if="prependIcon" class="prepend-icon"></span><slot /><span v-if="appendIcon" class="append-icon"></span></button>',
+    props: ['disabled', 'loading', 'variant', 'color', 'size', 'density', 'rounded', 'elevation', 'flat', 'readonly', 'prependIcon', 'appendIcon'],
+    emits: ['click'],
+    inheritAttrs: false,
+    methods: {
+      handleClick(event) {
+        if (!this.disabled) {
+          this.$emit('click', event);
+        }
+      }
+    }
+  },
+  'v-text-field': {
+    template: '<div data-testid="root" class="v-text-field" :class="classes"><input :id="id" :type="type || \'text\'" :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" /><slot name="prepend"></slot><slot name="prepend-inner"></slot><slot name="append"></slot><slot name="append-inner"></slot><slot name="details"></slot></div>',
+    props: ['modelValue', 'disabled', 'error', 'label', 'placeholder', 'variant', 'density', 'hideDetails', 'persistentHint', 'prependIcon', 'prependInnerIcon', 'appendIcon', 'appendInnerIcon', 'success', 'warning', 'borderOnHover', 'class', 'type', 'id'],
+    emits: ['update:modelValue', 'click:prepend', 'click:prepend-inner', 'click:append', 'click:append-inner'],
+    computed: {
+      classes() {
+        return this.$props.class || '';
+      }
+    }
+  },
+  'v-icon': {
+    template: '<i class="v-icon" data-testid="v-icon" :icon="icon" :size="size" :color="color" v-bind="$attrs"></i>',
+    props: ['icon', 'color', 'size'],
+    inheritAttrs: false
+  },
+  'v-card': {
+    template: '<div class="v-card" data-testid="v-card" :elevation="elevation" :rounded="rounded" :color="color" :variant="variant" :style="style"><div class="v-card-item"><slot name="title" /></div><div class="v-card-text"><slot name="text" /></div><slot /></div>',
+    props: ['elevation', 'rounded', 'color', 'variant', 'style'],
+  },
+  'v-dialog': {
+    template: '<div data-testid="v-dialog" class="v-dialog"><slot /></div>',
+    props: ['modelValue', 'width'],
+  },
+  'v-checkbox': {
+    template: '<div data-testid="root" class="v-checkbox tick-box" :class="$props.class"><input type="checkbox" /><slot name="label"></slot></div>',
+    props: ['modelValue', 'disabled', 'label', 'value', 'density', 'color', 'baseColor', 'trueIcon', 'falseIcon', 'class'],
+  },
+  'v-select': {
+    template: '<select data-testid="v-select"></select>',
+    props: ['modelValue', 'items', 'disabled'],
+  },
+  'v-combobox': {
+    template: '<div data-testid="root" class="v-combobox"><input /><select><option v-for="item in items" :key="item.value" :value="item.value">{{ item.title }}</option></select><slot name="menu"></slot><slot name="prepend"></slot><slot name="prepend-inner"></slot><slot name="append"></slot><slot name="append-inner"></slot></div>',
+    props: ['modelValue', 'items', 'disabled', 'multiple', 'chips', 'clearable', 'variant', 'density', 'label', 'appendIcon', 'appendInnerIcon', 'prependIcon', 'prependInnerIcon', 'menuIcon', 'clearIcon', 'closableChips', 'hideDetails', 'error', 'itemTitle', 'itemValue', 'returnObject'],
+    emits: ['update:modelValue', 'click:append', 'click:appendInner', 'click:clear', 'click:prepend', 'click:prependInner', 'update:search']
+  },
+  'v-textarea': {
+    template: '<textarea data-testid="root" class="text-area v-textarea"></textarea>',
+    props: ['modelValue', 'disabled', 'clearable', 'clearIcon', 'label', 'prependIcon', 'prependInnerIcon', 'appendIcon', 'appendInnerIcon', 'baseColor', 'bgColor', 'variant', 'color', 'rounded'],
+    emits: ['update:modelValue', 'click:append', 'click:appendInner', 'click:clear', 'click:control', 'click:prepend', 'click:prependInner']
+  },
+  'v-expansion-panels': {
+    template: '<div data-testid="root" class="wl-accordion"><slot /></div>',
+    props: ['modelValue', 'multiple', 'variant', 'rounded', 'expandIcon', 'collapseIcon'],
+    emits: ['update:modelValue'],
+  },
+  'v-expansion-panel': {
+    template: '<div data-testid="root"><slot /></div>',
+    props: ['value', 'bgColor'],
+  },
+  'v-expansion-panel-title': {
+    template: '<div data-testid="v-expansion-panel-title"><slot /></div>',
+  },
+  'v-expansion-panel-text': {
+    template: '<div data-testid="v-expansion-panel-text"><slot /></div>',
+  },
+  'v-alert': {
+    template: '<div class="v-alert" data-testid="v-alert" :color="color" :rounded="rounded"><div class="v-alert__content"><slot name="title" /><slot name="text" /></div><slot /></div>',
+    props: ['type', 'color', 'rounded'],
+  },
+  'v-progress-circular': {
+    template: '<div data-testid="v-progress-circular"></div>',
+    props: ['value', 'size'],
+  },
+  'v-timeline': {
+    template: '<div class="v-timeline" data-testid="v-timeline" data-testid="root"><slot /></div>',
+    props: ['density', 'align']
+  },
+  'v-timeline-item': {
+    template: '<div class="v-timeline-item" data-testid="v-timeline-item"><template #icon><slot name="icon" /></template><slot /></div>',
+    props: ['size']
+  },
+  'v-list': {
+    template: '<div data-testid="v-list"><slot /></div>',
+  },
+  'v-list-item': {
+    template: '<div data-testid="v-list-item"><slot /></div>',
+  },
+  'v-hover': {
+    template: '<div data-testid="v-hover"><slot /></div>',
+  },
+  'v-sheet': {
+    template: '<div class="v-sheet" data-testid="v-sheet" :style="style" :elevation="elevation" :border="border" :rounded="rounded" v-bind="$attrs"><slot /></div>',
+    props: ['border', 'rounded', 'elevation', 'style'],
+    inheritAttrs: false
+  },
+  'v-divider': {
+    template: '<hr class="v-divider" data-testid="v-divider" v-bind="$attrs" />',
+    props: ['vertical', 'thickness'],
+    inheritAttrs: false
+  },
+  'v-fab': {
+    template: '<button class="v-fab" data-testid="v-fab"><slot /></button>',
+    props: ['baseColor', 'color', 'readonly', 'icon', 'size']
+  },
+  'v-badge': {
+    template: '<div class="v-badge" data-testid="v-badge"><slot /><template #badge><slot name="badge" /></template></div>',
+    props: ['color']
+  },
+  'v-img': {
+    template: '<img class="v-img" data-testid="v-img" :src="src" :aspect-ratio="aspectRatio" :rounded="rounded" :cover="cover" />',
+    props: ['src', 'aspectRatio', 'rounded', 'cover']
+  },
+  'v-card-actions': {
+    template: '<div class="v-card-actions" data-testid="v-card-actions"><slot /></div>',
+  },
+  'v-progress-linear': {
+    template: '<div class="v-progress-linear custom-progress-linear" data-testid="v-progress-linear" v-bind="$attrs"></div>',
+    props: ['modelValue', 'height', 'color', 'bgColor', 'bgOpacity'],
+    inheritAttrs: false
+  },
+  'teleport': {
+    template: '<div data-testid="teleport"><slot /></div>',
+    props: ['to']
+  },
+  'VPhoneInput': {
+    template: '<div data-testid="root" class="wl-phone-input"><input /></div>',
+    props: ['modelValue', 'placeholder', 'label', 'variant', 'density', 'countryLabel', 'countryAriaLabel', 'phoneAriaLabel', 'preferredCountries', 'ignoredCountries', 'includedCountries', 'includeCountries', 'ariaLabel', 'appendInnerIcon', 'placeHolder', 'displayFormat', 'defaultCountry', 'hideDetails', 'ariaInvalid', 'countryIconMode', 'id', 'class'],
+    emits: ['update:modelValue', 'update:phone']
+  },
+  'v-otp-input': {
+    template: '<div data-testid="v-otp-input"></div>',
+    props: ['modelValue', 'autofocus', 'rounded', 'loading', 'error', 'focus-all', 'focused', 'type'],
+    emits: ['update:modelValue']
+  },
+  'i18n-t': {
+    template: '<p data-testid="i18n-t"><slot></slot><slot name="phoneNumber"></slot></p>',
+    props: ['keypath', 'tag'],
+  },
+};
+
+// Mock window.matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+// Mock IntersectionObserver
+global.IntersectionObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
+
+// Mock ResizeObserver
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));

package/tests/unit/src/components/index.spec.ts

@@ -0,0 +1,193 @@
+import { describe, it, expect } from 'vitest';
+import * as componentsIndex from '@/components/index';
+
+describe('src/components/index.ts', () => {
+  describe('Component Exports', () => {
+    it('exports all expected components', () => {
+      const expectedComponents = [
+        'AccordionItem',
+        'AccordionGroup',
+        'Audio',
+        'Button',
+        'Checkbox',
+        'DateInput',
+        'Dialog',
+        'IconBulletList',
+        'IconBullet',
+        'Input',
+        'NotificationBubble',
+        'Select',
+        'TickBox',
+        'TextArea',
+        'OtpInput',
+        'PhoneInput',
+        'EditField',
+        'Modal'
+      ];
+
+      expectedComponents.forEach(componentName => {
+        expect(componentsIndex).toHaveProperty(componentName);
+        expect(componentsIndex[componentName]).toBeDefined();
+      });
+    });
+
+    it('all exports are valid Vue components', () => {
+      Object.entries(componentsIndex).forEach(([name, component]) => {
+        expect(component).toBeDefined();
+        expect(typeof component).toBe('object');
+
+        // Vue components should have these properties when processed by Vite
+        expect(component).toHaveProperty('__name');
+      });
+    });
+
+    it('exports correct number of components', () => {
+      const componentKeys = Object.keys(componentsIndex);
+      expect(componentKeys.length).toBe(18); // Based on the exports in the file
+    });
+
+    it('component names match file structure', () => {
+      // Verify that component names correspond to their expected file paths
+      expect(componentsIndex.AccordionItem).toBeDefined();
+      expect(componentsIndex.AccordionGroup).toBeDefined();
+      expect(componentsIndex.Audio).toBeDefined();
+      expect(componentsIndex.Button).toBeDefined();
+      expect(componentsIndex.Checkbox).toBeDefined();
+      expect(componentsIndex.DateInput).toBeDefined();
+      expect(componentsIndex.Dialog).toBeDefined();
+      expect(componentsIndex.EditField).toBeDefined();
+      expect(componentsIndex.IconBullet).toBeDefined();
+      expect(componentsIndex.IconBulletList).toBeDefined();
+      expect(componentsIndex.Input).toBeDefined();
+      expect(componentsIndex.Modal).toBeDefined();
+      expect(componentsIndex.NotificationBubble).toBeDefined();
+      expect(componentsIndex.OtpInput).toBeDefined();
+      expect(componentsIndex.PhoneInput).toBeDefined();
+      expect(componentsIndex.Select).toBeDefined();
+      expect(componentsIndex.TextArea).toBeDefined();
+      expect(componentsIndex.TickBox).toBeDefined();
+    });
+  });
+
+  describe('Component Types', () => {
+    it('Button component is properly exported', () => {
+      expect(componentsIndex.Button).toBeDefined();
+      expect(componentsIndex.Button.__name).toBe('Button');
+    });
+
+    it('Input component is properly exported', () => {
+      expect(componentsIndex.Input).toBeDefined();
+      expect(componentsIndex.Input.__name).toBe('Input');
+    });
+
+    it('Select component is properly exported', () => {
+      expect(componentsIndex.Select).toBeDefined();
+      expect(componentsIndex.Select.__name).toBe('Select');
+    });
+
+    it('DateInput component is properly exported', () => {
+      expect(componentsIndex.DateInput).toBeDefined();
+      expect(componentsIndex.DateInput.__name).toBe('DateInput');
+    });
+
+    it('Accordion components are properly exported', () => {
+      expect(componentsIndex.AccordionGroup).toBeDefined();
+      expect(componentsIndex.AccordionItem).toBeDefined();
+      expect(componentsIndex.AccordionGroup.__name).toBe('AccordionGroup');
+      expect(componentsIndex.AccordionItem.__name).toBe('AccordionItem');
+    });
+
+    it('Audio component is properly exported', () => {
+      expect(componentsIndex.Audio).toBeDefined();
+      expect(componentsIndex.Audio.__name).toBe('Audio');
+    });
+  });
+
+  describe('Import Consistency', () => {
+    it('all components can be destructured from the index', () => {
+      const {
+        AccordionItem,
+        AccordionGroup,
+        Audio,
+        Button,
+        Checkbox,
+        DateInput,
+        Dialog,
+        IconBulletList,
+        IconBullet,
+        Input,
+        NotificationBubble,
+        Select,
+        TickBox,
+        TextArea,
+        OtpInput,
+        PhoneInput,
+        EditField,
+        Modal
+      } = componentsIndex;
+
+      expect(AccordionItem).toBeDefined();
+      expect(AccordionGroup).toBeDefined();
+      expect(Audio).toBeDefined();
+      expect(Button).toBeDefined();
+      expect(Checkbox).toBeDefined();
+      expect(DateInput).toBeDefined();
+      expect(Dialog).toBeDefined();
+      expect(IconBulletList).toBeDefined();
+      expect(IconBullet).toBeDefined();
+      expect(Input).toBeDefined();
+      expect(NotificationBubble).toBeDefined();
+      expect(Select).toBeDefined();
+      expect(TickBox).toBeDefined();
+      expect(TextArea).toBeDefined();
+      expect(OtpInput).toBeDefined();
+      expect(PhoneInput).toBeDefined();
+      expect(EditField).toBeDefined();
+      expect(Modal).toBeDefined();
+    });
+
+    it('components maintain their original functionality', () => {
+      // Each component should be a Vue component with proper structure
+      Object.values(componentsIndex).forEach(component => {
+        expect(component).toBeDefined();
+        expect(typeof component).toBe('object');
+      });
+    });
+  });
+
+  describe('Module Structure', () => {
+    it('follows consistent export pattern', () => {
+      // All exports should follow the same pattern: default export from component files
+      Object.entries(componentsIndex).forEach(([name, component]) => {
+        expect(component).toBeDefined();
+        // Component should have Vue-specific properties
+        expect(typeof component).toBe('object');
+        expect(component).toHaveProperty('__name');
+      });
+    });
+
+    it('provides clean API for consumers', () => {
+      // Consumers should be able to import components in multiple ways
+      const component1 = componentsIndex.Button;
+      const { Button: component2 } = componentsIndex;
+
+      expect(component1).toBe(component2);
+    });
+  });
+
+  describe('Bundle Analysis', () => {
+    it('exports do not contain undefined values', () => {
+      Object.entries(componentsIndex).forEach(([name, component]) => {
+        expect(component).not.toBeUndefined();
+        expect(component).not.toBeNull();
+      });
+    });
+
+    it('component names are strings', () => {
+      Object.keys(componentsIndex).forEach(name => {
+        expect(typeof name).toBe('string');
+        expect(name.length).toBeGreaterThan(0);
+      });
+    });
+  });
+});