Skip to content

Commit

Permalink
fix(fab): using new dom (#618)
Browse files Browse the repository at this point in the history 
* fix(fab): using new dom

* fix(fab): resolve test and ts errors

* test(fab): update

* test(fab): update

* fix: resolve lint errors
  • Loading branch information
@LeeJim
LeeJim committed Apr 24, 2023
1 parent fcd86b5 commit 0347f8f
Show file tree
Hide file tree
Showing 10 changed files with 214 additions and 199 deletions.
258 changes: 136 additions & 122 deletions src/fab/__test__/__snapshots__/demo.test.jsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,99 @@
// Vitest Snapshot v1

exports[`Fab > Fab displayVue demo works fine 1`] = `
<div>
<button
aria-disabled="false"
class="t-button t-button--size-middle t-button--base t-button--primary t-button--round t-fab t-fab--icononly"
role="button"
style="right: 16px; bottom: 32px;"
type="button"
exports[`Fab > Fab advanceVue demo works fine 1`] = `
<button
aria-disabled="false"
class="t-button t-button--size-large t-button--base t-button--primary t-button--round t-fab"
role="button"
style="right: 16px; bottom: 32px;"
type="button"
>
<svg
class="t-icon t-icon-add"
fill="none"
height="1em"
style="font-size: 24px;"
viewBox="0 0 16 16"
width="1em"
>
<!---->
<span
class="t-button__content"
>
<svg
class="t-icon t-icon-add"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<!--v-if-->
</span>
<!---->
</button>
</div>
<path
d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__content"
>
按钮文字
</span>
<!---->
</button>
`;

exports[`Fab > Fab baseVue demo works fine 1`] = `
<button
aria-disabled="false"
class="t-button t-button--size-large t-button--base t-button--primary t-button--circle t-fab"
role="button"
style="right: 16px; bottom: 32px;"
type="button"
>
<svg
class="t-icon t-icon-add"
fill="none"
height="1em"
style="font-size: 24px;"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__content"
>
</span>
<!---->
</button>
`;

exports[`Fab > Fab mobileVue demo works fine 1`] = `
<div
class="tdesign-mobile-demo"
data-v-38a07a02=""
>
<h1
class="title"
data-v-38a07a02=""
>
Fab 悬浮按钮
</h1>
<p
class="summary"
data-v-38a07a02=""
>
当功能使用图标即可表示清楚时，可使用纯图标悬浮按钮，例如：添加、发布。
</p>
<div
class="tdesign-mobile-demo-block"
data-v-38a07a02=""
>
<div
class="tdesign-mobile-demo-block__header"
>
<h2
class="tdesign-mobile-demo-block__title"
>
01 类型
01 组件类型
</h2>
<p
class="tdesign-mobile-demo-block__summary"
Expand All @@ -67,119 +102,98 @@ exports[`Fab > Fab mobileVue demo works fine 1`] = `
</p>
</div>
<div
class="tdesign-mobile-demo-block__slot"
class="tdesign-mobile-demo-block__slot with-padding"
>
<div
class="toast-demo"
<button
aria-disabled="false"
class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
data-v-38a07a02=""
role="button"
type="button"
>
<button
aria-disabled="false"
class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
role="button"
type="button"
>
<!---->
<span
class="t-button__content"
>
基础使用
</span>
<!---->
</button>
<button
aria-disabled="false"
class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
role="button"
type="button"
<!---->
<span
class="t-button__content"
>
<!---->
<span
class="t-button__content"
>
进阶使用
</span>
<!---->
</button>
</div>
纯图标悬浮按钮
</span>
<!---->
</button>
</div>
</div>
<div>
<button
aria-disabled="false"
class="t-button t-button--size-middle t-button--base t-button--primary t-button--round t-fab t-fab--icononly"
role="button"
style="right: 16px; bottom: 32px;"
type="button"
<div
class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
data-v-38a07a02=""
>
<div
class="tdesign-mobile-demo-block__header"
>
<!--v-if-->
<p
class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
>
图标加文字悬浮按钮
</p>
</div>
<div
class="tdesign-mobile-demo-block__slot with-padding"
>
<!---->
<span
class="t-button__content"
<button
aria-disabled="false"
class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
data-v-38a07a02=""
role="button"
type="button"
>
<svg
class="t-icon t-icon-add"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
<!---->
<span
class="t-button__content"
>
<path
d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<!--v-if-->
</span>
<!---->
</button>
图标加文字悬浮按钮
</span>
<!---->
</button>
</div>
</div>
<!--v-if-->
</div>
`;

exports[`Fab > Fab textVue demo works fine 1`] = `
<div>
<button
aria-disabled="false"
class="t-button t-button--size-middle t-button--outline t-button--primary t-button--round t-fab"
class="t-button t-button--size-large t-button--base t-button--primary t-button--circle t-fab"
data-v-38a07a02=""
role="button"
style="right: 16px; bottom: 32px;"
type="button"
>
<!---->
<svg
class="t-icon t-icon-add"
fill="none"
height="1em"
style="font-size: 24px;"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__content"
>
<svg
class="t-icon t-icon-add"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<span
class="t-fab__text"
>
按钮文字
</span>
</span>
<!---->
</button>
<!--v-if-->
</div>
`;
33 changes: 16 additions & 17 deletions src/fab/__test__/__snapshots__/index.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,31 @@
exports[`fab > slots > : icon 1`] = `
<button
aria-disabled="false"
class="t-button t-button--size-middle t-button--base t-button--primary t-button--round t-fab"
class="t-button t-button--size-large t-button--base t-button--primary t-button--circle t-fab"
role="button"
style="right: 16px; bottom: 32px;"
type="button"
>
<!---->
<svg
class="t-icon t-icon-app"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__content"
>
<svg
class="t-icon t-icon-app"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<!--v-if-->
</span>
<!---->
Expand Down
8 changes: 4 additions & 4 deletions src/fab/__test__/demo.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@
*/

import { mount } from '@vue/test-utils';
import displayVue from '@/fab/demos/display.vue';
import advanceVue from '@/fab/demos/advance.vue';
import baseVue from '@/fab/demos/base.vue';
import mobileVue from '@/fab/demos/mobile.vue';
import textVue from '@/fab/demos/text.vue';

const mapper = {
displayVue,
advanceVue,
baseVue,
mobileVue,
textVue,
};

describe('Fab', () => {
Expand Down
2 changes: 1 addition & 1 deletion src/fab/__test__/index.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ describe('fab', () => {
const wrapper = mount(Fab, {
props: { text },
});
const textContainer = wrapper.find('.t-fab__text');
const textContainer = wrapper.find('.t-button__content');
expect(textContainer.text()).toBe(text);
});

Expand Down
Loading

0 comments on commit 0347f8f

Please sign in to comment.