Feat/section: add test codes, change scss variable (#76)

pubg · Feb 5, 2024 · e505218 · e505218
1 parent 33b21ce
commit e505218
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 11 deletions.
diff --git a/packages/vlossom/src/components/vs-page/VsPage.scss b/packages/vlossom/src/components/vs-page/VsPage.scss
@@ -1,7 +1,7 @@
 .vs-page {
     position: relative;
     padding: var(--vs-page-padding, 3rem 4rem);
-    color: var(--vs-page-fontColor, var(--vs-font-color));
+    color: var(--vs-page-color, var(--vs-font-color));
 
     .page-header {
         margin: var(--vs-page-headerMargin, 0 0 2.4rem 0);

diff --git a/packages/vlossom/src/components/vs-page/stories/VsPage.stories.ts b/packages/vlossom/src/components/vs-page/stories/VsPage.stories.ts
@@ -33,7 +33,7 @@ export const Default: Story = {
 
 export const StyleSet: Story = {
     args: {
-        styleSet: { padding: '1.2rem 3rem', fontColor: '#3559e0', headerMargin: '0 0 4rem 0' },
+        styleSet: { padding: '1.2rem 3rem', color: '#3559e0', headerMargin: '0 0 4rem 0' },
     },
 };
 

diff --git a/packages/vlossom/src/components/vs-page/types.ts b/packages/vlossom/src/components/vs-page/types.ts
@@ -1,5 +1,5 @@
 export interface VsPageStyleSet {
-    fontColor?: string;
+    color?: string;
     headerMargin?: string;
     padding?: string;
 }
diff --git a/packages/vlossom/src/components/vs-section/VsSection.scss b/packages/vlossom/src/components/vs-section/VsSection.scss
@@ -1,10 +1,10 @@
 .vs-section {
-    position: relative;
-    padding: var(--vs-section-padding, 2.8rem 3.2rem);
     background-color: var(--vs-section-backgroundColor, var(--vs-area-backgroundColor));
-    color: var(--vs-section-fontColor, var(--vs-font-color));
     border-radius: var(--vs-section-borderRadius, 0.4rem);
     box-shadow: var(--vs-section-boxShadow, var(--vs-area-shadow));
+    color: var(--vs-section-color, var(--vs-font-color));
+    padding: var(--vs-section-padding, 2.8rem 3.2rem);
+    position: relative;
 
     .section-title {
         margin: var(--vs-section-titleMargin, 0 0 1.2rem 0);

diff --git a/packages/vlossom/src/components/vs-section/__test__/vs-section.test.ts b/packages/vlossom/src/components/vs-section/__test__/vs-section.test.ts
@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { VsSection } from '@/components';
+
+describe('vs-section', () => {
+    it('title slot을 설정하지 않으면 section-title 영역이 없다', () => {
+        // given
+        const wrapper = mount(VsSection);
+
+        //then
+        expect(wrapper.find('.section-title').exists()).toBe(false);
+    });
+
+    it('slot으로 title을 설정할 수 있다', () => {
+        // given
+        const wrapper = mount(VsSection, {
+            slots: {
+                title: '<div>Title</div>',
+            },
+        });
+
+        // then
+        expect(wrapper.find('.section-title').exists()).toBe(true);
+        expect(wrapper.html()).toContain('<div>Title</div>');
+    });
+
+    it('default slot에 삽입된 내용을 보여준다', () => {
+        // given
+        const wrapper = mount(VsSection, {
+            slots: {
+                default: 'This is section content',
+            },
+        });
+
+        // then
+        expect(wrapper.html()).toContain('This is section content');
+    });
+});
diff --git a/packages/vlossom/src/components/vs-section/stories/VsSection.stories.ts b/packages/vlossom/src/components/vs-section/stories/VsSection.stories.ts
@@ -1,4 +1,4 @@
-import { colorScheme, getColorSchemeTemplate, getMetaArguments } from '@/storybook/args';
+import { colorScheme, getColorSchemeTemplate } from '@/storybook/args';
 import VsSection from './../VsSection.vue';
 import { chromaticParameters } from '@/storybook/parameters';
 
@@ -20,7 +20,6 @@ const meta: Meta<typeof VsSection> = {
     },
 };
 
-meta.args = getMetaArguments(VsSection.props, meta.args);
 export default meta;
 type Story = StoryObj<typeof VsSection>;
 

diff --git a/packages/vlossom/src/components/vs-section/types.ts b/packages/vlossom/src/components/vs-section/types.ts
@@ -2,7 +2,7 @@ export interface VsSectionStyleSet {
     backgroundColor?: string;
     borderRadius?: string;
     boxShadow?: string;
-    fontColor?: string;
+    color?: string;
     padding?: string;
     titleMargin?: string;
 }
diff --git a/packages/vlossom/src/storybook/style-sets.ts b/packages/vlossom/src/storybook/style-sets.ts
@@ -113,7 +113,7 @@ const vsNotice: VsNoticeStyleSet = {
 };
 
 const vsPage: VsPageStyleSet = {
-    fontColor: '#ff90bc',
+    color: '#ff90bc',
     padding: '0.8rem 1.5rem',
 };
 
@@ -125,7 +125,7 @@ const vsProgress: VsProgressStyleSet = {
 
 const vsSection: VsSectionStyleSet = {
     backgroundColor: '#90caf9',
-    fontColor: 'white',
+    color: 'white',
 };
 
 const vsTabs: VsTabsStyleSet = {
-Original file line number
+Diff line change
@@ Expand Up / @@ -33,7 +33,7 @@ export const Default: Story = { @@
     export const StyleSet: Story = {
         args: {
-            styleSet: { padding: '1.2rem 3rem', fontColor: '#3559e0', headerMargin: '0 0 4rem 0' },
+            styleSet: { padding: '1.2rem 3rem', color: '#3559e0', headerMargin: '0 0 4rem 0' },
         },
     };
@@ Expand Down @@