Merge branch 'main' into dependabot/npm_and_yarn/express-4.21.2

docs/pull_request_template.md

@@ -1,6 +1,6 @@
 #### Por favor, verifique se o seu pull request está de acordo com o checklist abaixo:
 
-- [x] A implementação feita possui testes (Caso haja um motivo para não haver testes, descrever abaixo)
+- [x] A implementação feita possui testes (Caso haja um motivo para não haver testes/haver apenas testes de snapshot, descrever abaixo)
 - [x] A documentação no mdx foi feita ou atualizada, caso necessário
 - [x] O eslint passou localmente
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sysvale/cuida",
-	"version": "3.79.1",
+	"version": "3.79.2",
 	"description": "A design system built by Sysvale, using storybook and Vue components",
 	"repository": {
 		"type": "git",

src/components/AlertCard.vue

@@ -65,6 +65,27 @@ export default {
 			type: String,
 			default: 'info',
 		},
+		/**
+		 * Define se o AlertCard é selecionável.
+		 */
+		selectable: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Variante de estilo muted do componente.
+		 */
+		muted: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Controla exibição do título do AlertCard.
+		 */
+		noTitle: {
+			type: Boolean,
+			default: false,
+		},
 		/**
 		 * O título do alerta. O título também pode ser usado com o slot.
 		 */

src/components/BarChart.vue

@@ -35,16 +35,16 @@ export default {
 		 * `data` (array com os valores númericos).
 		 */
 		data: {
-			type: Object,
+			type: Array,
 			required: true,
-			default: () => ({
+			default: () => ([{
 				datasets: [
 					{
 						label: '',
 						data: [],
 					}
 				]
-			})
+			}])
 		},
 		/**
 		 * Personaliza a paleta de cores do gráfico. São 11 variantes implementadas:

src/components/Chip.vue

@@ -3,6 +3,7 @@
 	<div
 		class="chip__container"
 		:class="classList"
+		data-testid="chip-container"
 		@click="handleClick"
 	>
 		<div
@@ -44,7 +45,7 @@ export default {
 
 	props: {
 		/**
-		 *  Controla a exibição do bottom sheet.
+		 *  Controla o estado de seleção da chip.
 		 */
 		modelValue: {
 			type: Boolean,

src/components/CollapsibleContainer.vue

@@ -20,6 +20,7 @@
 		<div
 			v-if="internalValue"
 			class="collapsible-container__content"
+			data-testid="collapsible-content"
 		>
 			<!-- @slot Slot para renderização conteúdo do container
 				quando o componente está expandido

src/components/PasswordInput.vue

@@ -67,6 +67,7 @@
 <script>
 import CdsIcon from './Icon.vue';
 import Cdstip from '../utils/directives/cdstip';
+import CdsClickable from './Clickable.vue';
 import { generateKey } from '../utils';
 
 
@@ -76,7 +77,8 @@ export default {
 	},
 
 	components: {
-		CdsIcon
+		CdsIcon,
+		CdsClickable,
 	},
 
 	props: {

src/components/ProgressCircular.vue

@@ -6,7 +6,6 @@
 	>
 		<path
 			class="progress-circular__ring-background"
-			:stroke="backgroundColor"
 			:stroke-width="stroke"
 			d="M18 2.0845
 			a 15.9155 15.9155 0 0 1 0 31.831
@@ -35,7 +34,7 @@
 </template>
 
 <script>
-import { colorOptions, colorHexCode } from '../utils/constants/colors';
+import { colorHexCode } from '../utils/constants/colors';
 
 export default {
 	props: {

src/components/Select.vue

@@ -118,12 +118,17 @@ import { generateKey } from '../utils';
 import cloneDeep from 'lodash.clonedeep';
 import removeAccents from '../utils/methods/removeAccents';
 import CdsIcon from './Icon.vue';
+import Cdstip from '../utils/directives/cdstip';
 
 export default {
 	components: {
 		CdsIcon,
 	},
 
+	directives: {
+		cdstip: Cdstip,
+	},
+
 	props: {
 		/**
 		 * Especifica o título do select.

src/components/SideBar.vue

@@ -34,8 +34,6 @@
 				</div>
 			</div>
 
-
-
 			<div
 				v-if="searchButton"
 				class="side-bar__search-button"
@@ -63,8 +61,6 @@
 				</span>
 			</div>
 
-
-
 			<ul
 				:class="{'side-bar__container': items.length >= 1}"
 			>
@@ -303,12 +299,14 @@ import CdsPopover from './Popover.vue';
 import CdsAvatar from './Avatar.vue';
 import CdsRichTooltip from './RichTooltip.vue';
 import Cdstip from '../utils/directives/cdstip';
+import vClickOutside from 'click-outside-vue3';
 
 import { colorOptions, colorHexCode } from '../utils/constants/colors';
 
 export default {
 	directives: {
 		cdstip: Cdstip,
+		'on-click-outside': vClickOutside.directive,
 	},
 
 	components: {

src/components/WebcamModal.vue

@@ -104,12 +104,12 @@
 
 <script setup>
 import { computed, ref, watch } from 'vue';
-import Button from './Button.vue';
+import CdsButton from './Button.vue';
 import Flexbox from './Flexbox.vue';
 import Modal from './Modal.vue';
 import Spinner from './Spinner.vue';
-
-const CdsButton = Button;
+import CdsIcon from './Icon.vue';
+import CdsFlexbox from './Flexbox.vue';
 
 const emit = defineEmits([
 	/**

src/tests/AlertCard.spec.ts

@@ -1,4 +1,3 @@
-// @vitest-environment jsdom
 import { describe, test, expect } from 'vitest';
 import AlertCard from '../components/AlertCard.vue';
 import { mount } from '@vue/test-utils';

src/tests/BarChart.spec.ts

@@ -1,7 +1,42 @@
-import { describe, test, expect } from 'vitest';
+import { describe, test, expect, vi } from 'vitest';
 import BarChart from '../components/BarChart.vue';
 import { shallowMount } from '@vue/test-utils';
 
+vi.mock('../utils/methods/paleteBuilder.js', () => ({
+	default: vi.fn((rawPalete) => {
+		return [
+			{
+				colorName: 'Light Neutrals',
+				variantName: 'Light',
+				color400: '#E7EDF3',
+				colorShades: ['#FFFFFF', '#FAFCFE', '#F4F8FB', '#E7EDF3', '#DFE5EC'],
+				colorTokens: ['$n-0', '$n-10', '$n-20', '$n-30', '$n-40'],
+				colorData: [
+					{ shade: '#FFFFFF', token: '$n-0' },
+					{ shade: '#FAFCFE', token: '$n-10' },
+					{ shade: '#F4F8FB', token: '$n-20' },
+					{ shade: '#E7EDF3', token: '$n-30' },
+					{ shade: '#DFE5EC', token: '$n-40' }
+				]
+			},
+			{
+				colorName: 'Piccolo Green',
+				variantName: 'Green',
+				color400: '#6ddfb1',
+				colorShades: ['#f3fcf8', '#e2f8ef', '#abedd3', '#6ddfb1', '#2db981'],
+				colorTokens: ['$gp-50', '$gp-100', '$gp-200', '$gp-300', '$gp-400'],
+				colorData: [
+					{ shade: '#f3fcf8', token: '$gp-50' },
+					{ shade: '#e2f8ef', token: '$gp-100' },
+					{ shade: '#abedd3', token: '$gp-200' },
+					{ shade: '#6ddfb1', token: '$gp-300' },
+					{ shade: '#2db981', token: '$gp-400' }
+				]
+			}
+		];
+	})
+}));
+
 const mockedData = [
 	{
 		name: 'Ecocardiograma',

src/tests/Breadcrumb.spec.ts

@@ -1,7 +1,6 @@
-// @vitest-environment jsdom
 import { describe, test, expect } from 'vitest';
 import Breadcrumb from '../components/Breadcrumb.vue';
-import { mount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 
 const items = [
 	{
@@ -29,7 +28,12 @@ const items = [
 
 describe('Breadcrumb snapshot test', () => {
 	test('renders correctly', () => {
-		const wrapper = mount(Breadcrumb, {
+		const wrapper = shallowMount(Breadcrumb, {
+			global: {
+				stubs: {
+					'router-link': true,
+				},
+			},
 			props: {
 				items: items,
 			},

src/tests/Checkbox.spec.ts

@@ -6,7 +6,7 @@ describe('Checkbox', () => {
 	test('renders correctly', async () => {
 		const wrapper = mount(Checkbox, {
 			props: {
-				value: false,
+				modelValue: false,
 				label: 'checkbox test'
 			},
 		});

src/tests/Chip.spec.ts

@@ -1,12 +1,12 @@
-// @vitest-environment jsdom
 import { describe, test, expect } from 'vitest';
 import Chip from '../components/Chip.vue';
-import { mount } from '@vue/test-utils';
+import { flushPromises, mount } from '@vue/test-utils';
 
 describe('Chip', () => {
 	test('renders correctly', async () => {
 		const wrapper = mount(Chip, {
 			props: {
+				modelValue: false,
 				variant: 'gray',
 			},
 			slots: {
@@ -16,4 +16,32 @@ describe('Chip', () => {
 
 		expect(wrapper.html()).toMatchSnapshot();
 	});
+
+	test('emits update modelValue event based on click correctly', async () => {
+		expect.assertions(2);
+
+		const wrapper = mount(Chip, {
+			props: {
+				modelValue: false,
+				variant: 'gray',
+			},
+			slots: {
+				default: 'Chip'
+			}
+		});
+
+		const container = wrapper.find('[data-testid="chip-container"]');
+
+		container.trigger('click');
+
+		await flushPromises();
+
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([true]);
+
+		container.trigger('click');
+
+		await flushPromises();
+
+		expect(wrapper.emitted()['update:modelValue'][1]).toEqual([false]);
+	});
 });

src/tests/CollapsibleContainer.spec.ts

@@ -1,16 +1,37 @@
 import { describe, test, expect } from 'vitest';
 import CollapsibleContainer from '../components/CollapsibleContainer.vue';
-import { mount } from '@vue/test-utils';
+import { flushPromises, mount } from '@vue/test-utils';
 
 describe('CollapsibleContainer', () => {
 	test('renders correctly', async () => {
 		const wrapper = mount(CollapsibleContainer, {
 			props: {
-				value: true,
+				modelValue: true,
 				title: 'Seu universo expandido',
 			},
 		});
 
 		expect(wrapper.html()).toMatchSnapshot();
 	});
+
+	test('content is rendered correctly on modelValue change', async () => {
+		expect.assertions(2);
+
+		const wrapper = mount(CollapsibleContainer, {
+			props: {
+				modelValue: false,
+				title: 'Seu universo expandido',
+			},
+		});
+
+		expect(wrapper.findAll('[data-testid="collapsible-content"]').length).toBe(0);
+
+		wrapper.setProps({
+			modelValue: true,
+		});
+
+		await flushPromises();
+
+		expect(wrapper.findAll('[data-testid="collapsible-content"]').length).toBe(1);
+	})
 });