test: should fix them

ForkbombEu · Aug 12, 2024 · 92e4af3 · 92e4af3
1 parent 6ed477c
commit 92e4af3
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 40 deletions.
diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx
@@ -30,7 +30,7 @@ export class Avatar {
       const initials = this.generateInitials();
       return (
         <Host aria-label={this.name} role="figure">
-          {initials ? <span class="font-medium uppercase">{initials}</span> : <d-icon icon="person" size={28} />}
+          {initials ? <span class="font-medium uppercase">{initials}</span> : <d-icon icon="profile" size={28} />}
         </Host>
       );
     }

diff --git a/src/components/avatar/test/avatar.spec.tsx b/src/components/avatar/test/avatar.spec.tsx
@@ -10,9 +10,7 @@ describe('d-avatar', () => {
     expect(page.root).toEqualHtml(`
       <d-avatar role="figure" shape="round" size="m">
         <mock:shadow-root>
-          <svg fill="none" height="28" viewBox="0 0 28 28" width="28" xmlns="http://www.w3.org/2000/svg">
-            <path clip-rule="evenodd" d="M14.0015 16.2796C11.9477 16.2795 9.68689 16.8564 8 18C6.31311 19.1436 5.28077 20.7992 4.5638 22.6777C4.30879 23.3422 4.85297 24 5.5793 24H22.4192C23.1478 24 23.6897 23.3422 23.437 22.6777C22.72 20.7992 21.6869 19.1436 20 18C18.3131 16.8564 16.0554 16.2795 14.0015 16.2796ZM19.0289 8.9125C19.0289 10.2154 18.4987 11.4649 17.5548 12.3862C16.6109 13.3074 15.3307 13.825 13.9959 13.825C12.661 13.825 11.3808 13.3074 10.4369 12.3862C9.49304 11.4649 8.96277 10.2154 8.96277 8.9125C8.96277 7.60962 9.49304 6.36011 10.4369 5.43884C11.3808 4.51756 12.661 4 13.9959 4C15.3307 4 16.6109 4.51756 17.5548 5.43884C18.4987 6.36011 19.0289 7.60962 19.0289 8.9125Z" fill="#F8FAFE" fill-rule="evenodd"></path>
-          </svg>
+          <d-icon icon="profile" size="28"></d-icon>
         </mock:shadow-root>
       </d-avatar>
     `);
@@ -42,9 +40,7 @@ describe('d-avatar', () => {
     expect(root).toEqualHtml(`
     <d-avatar aria-label="" role="figure" shape="square" size="m">
       <mock:shadow-root>
-        <svg fill="none" height="28" viewBox="0 0 28 28" width="28" xmlns="http://www.w3.org/2000/svg">
-          <path clip-rule="evenodd" d="M14.0015 16.2796C11.9477 16.2795 9.68689 16.8564 8 18C6.31311 19.1436 5.28077 20.7992 4.5638 22.6777C4.30879 23.3422 4.85297 24 5.5793 24H22.4192C23.1478 24 23.6897 23.3422 23.437 22.6777C22.72 20.7992 21.6869 19.1436 20 18C18.3131 16.8564 16.0554 16.2795 14.0015 16.2796ZM19.0289 8.9125C19.0289 10.2154 18.4987 11.4649 17.5548 12.3862C16.6109 13.3074 15.3307 13.825 13.9959 13.825C12.661 13.825 11.3808 13.3074 10.4369 12.3862C9.49304 11.4649 8.96277 10.2154 8.96277 8.9125C8.96277 7.60962 9.49304 6.36011 10.4369 5.43884C11.3808 4.51756 12.661 4 13.9959 4C15.3307 4 16.6109 4.51756 17.5548 5.43884C18.4987 6.36011 19.0289 7.60962 19.0289 8.9125Z" fill="#F8FAFE" fill-rule="evenodd"></path>
-        </svg>
+        <d-icon icon="profile" size="28"></d-icon>
     </mock:shadow-root>
     </d-avatar>
     `);

diff --git a/src/components/d-settings-menu/test/d-settings-menu.spec.tsx b/src/components/d-settings-menu/test/d-settings-menu.spec.tsx
@@ -10,7 +10,38 @@ describe('d-settings-menu', () => {
     expect(page.root).toEqualHtml(`
       <d-settings-menu>
         <mock:shadow-root>
-          <slot></slot>
+          <div class="flex flex-col justify-between">
+           <div class="flex flex-col gap-4">
+             <d-buttons-group>
+               <d-button aria-hidden="" disabled="" size="large">
+                 <d-icon icon="profile" outline="" slot="start"></d-icon>
+               </d-button>
+               <d-button disabled="" href="/" size="large">
+                 <d-icon icon="lock" outline="" slot="start"></d-icon>
+               </d-button>
+               <d-button aria-hidden="" size="large">
+                 <d-icon icon="notification" outline="" slot="start"></d-icon>
+               </d-button>
+               <d-button aria-hidden="" size="large">
+                 <d-icon icon="language" outline="" slot="start"></d-icon>
+               </d-button>
+             </d-buttons-group>
+             <d-buttons-group>
+               <d-button href="https://didroom.com/guides/1_orgadmin/support.html" size="large">
+                 <d-icon icon="help" outline="" slot="start"></d-icon>
+               </d-button>
+               <d-button href="https://didroom.com/guides/2_wallet/5_privacy-policy.html" size="large">
+                 <d-icon icon="shield" outline="" slot="start"></d-icon>
+               </d-button>
+             </d-buttons-group>
+             <d-buttons-group>
+               <d-button aria-hidden="" size="large">
+                 <d-icon icon="logout" outline="" slot="start"></d-icon>
+               </d-button>
+             </d-buttons-group>
+           </div>
+           <d-app-details></d-app-details>
+         </div>
         </mock:shadow-root>
       </d-settings-menu>
     `);

diff --git a/src/components/icon/d-icon.tsx b/src/components/icon/d-icon.tsx
@@ -7,7 +7,7 @@ import { fetchIcon } from './utils';
   styleUrl: 'd-icon.css',
   shadow: true,
 })
-export class LibraryNameIcon {
+export class DIcon {
   @Element() el: HTMLElement;
   @Prop() icon: string = null;
   @Prop() outline: boolean = false;

diff --git a/src/components/icon/test/d-icon.spec.tsx b/src/components/icon/test/d-icon.spec.tsx
@@ -1,18 +1,18 @@
-// import { newSpecPage } from '@stencil/core/testing';
-// import { DIcon } from '../d-icon';
+import { newSpecPage } from '@stencil/core/testing';
+import { DIcon } from '../d-icon';
 
-// describe('d-icon', () => {
-//   it('renders', async () => {
-//     const page = await newSpecPage({
-//       components: [DIcon],
-//       html: `<d-icon></d-icon>`,
-//     });
-//     expect(page.root).toEqualHtml(`
-//       <d-icon>
-//         <mock:shadow-root>
-//           <slot></slot>
-//         </mock:shadow-root>
-//       </d-icon>
-//     `);
-//   });
-// });
+describe('d-icon', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [DIcon],
+      html: `<d-icon></d-icon>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <d-icon>
+        <mock:shadow-root>
+          <svg fill="currentColor" height="24" stroke="none" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"></svg>
+        </mock:shadow-root>
+      </d-icon>
+    `);
+  });
+});
diff --git a/src/components/illustration/test/d-illustration.spec.tsx b/src/components/illustration/test/d-illustration.spec.tsx
@@ -8,10 +8,10 @@ describe('d-illustration', () => {
       html: `<d-illustration></d-illustration>`,
     });
     expect(page.root).toEqualHtml(`
-      <d-illustration>
-        <mock:shadow-root>
-          <slot></slot>
-        </mock:shadow-root>
+      <d-illustration class="block fill-highlight h-fit max-h-[50vh] opacity-50 relative shrink-0 w-full" style="background-image: url(undefined); background-size: cover; background-position: center;">
+       <div class="w-full">
+         <div class="max-w-96 mx-auto w-fit"></div>
+       </div>
       </d-illustration>
     `);
   });

diff --git a/src/components/swipable-page/test/d-swipable-page.spec.tsx b/src/components/swipable-page/test/d-swipable-page.spec.tsx
@@ -10,7 +10,17 @@ describe('d-swipable-page', () => {
     expect(page.root).toEqualHtml(`
       <d-swipable-page>
         <mock:shadow-root>
-          <slot></slot>
+        <div class="flex flex-col justify-between">
+           <d-illustration>
+             <slot></slot>
+           </d-illustration>
+           <div class="flex flex-col gap-4 px-4">
+             <d-heading size="s">
+               ,
+             </d-heading>
+             <d-text size="m"></d-text>
+           </div>
+         </div>
         </mock:shadow-root>
       </d-swipable-page>
     `);

diff --git a/src/components/tab-button/d-tab-button.tsx b/src/components/tab-button/d-tab-button.tsx
@@ -12,7 +12,6 @@ export class DTabButton {
   @Prop() hasAlert: boolean = false;
 
   render() {
-
     const svg = (): JSX.Element | null => {
       const icons: Record<string, Tab> = {
         home: 'home',
@@ -22,12 +21,11 @@ export class DTabButton {
       };
 
       const icon = icons[this.tab];
-      if (!icon) return null; 
+      if (!icon) return null;
 
-      return <d-icon icon={icon} {...(this.active ? {} : { outline: true })} />;
+      return <d-icon icon={icon} size={28} {...(this.active ? {} : { outline: true })} />;
     };
 
-
     return (
       <Host>
         <ion-tab-button

diff --git a/src/components/tab-button/test/d-tab-button.spec.tsx b/src/components/tab-button/test/d-tab-button.spec.tsx
@@ -12,11 +12,7 @@ describe('d-tab-button', () => {
        <mock:shadow-root>
          <ion-tab-button class="text-on-alt" href="/home" tab="home">
            <div class="relative w-fit">
-              <svg fill="none" height="28" viewBox="0 0 28 28" width="28" xmlns="http://www.w3.org/2000/svg">
-                <g id="Icon / outline / home">
-                  <path d="M14 4.25C14.35 4.25 14.6875 4.35916 14.9618 4.55665L23.1284 10.4366C23.3249 10.5781 23.4816 10.7595 23.5885 10.9647L24.2537 10.6182L23.5885 10.9647C23.6952 11.1697 23.75 11.3939 23.75 11.62V22.26C23.75 22.6451 23.5909 23.0209 23.2972 23.3029C23.0024 23.5859 22.5962 23.75 22.1667 23.75H17.6167C17.4656 23.75 17.3265 23.6921 17.2286 23.5981C17.1318 23.5051 17.0833 23.3857 17.0833 23.268V17.78C17.0833 16.9769 16.7507 16.2132 16.1693 15.655C15.5889 15.0979 14.8081 14.79 14 14.79C13.1919 14.79 12.4111 15.0979 11.8307 15.655C11.2493 16.2132 10.9167 16.9769 10.9167 17.78V23.268C10.9167 23.3857 10.8682 23.5051 10.7714 23.5981C10.6735 23.6921 10.5344 23.75 10.3833 23.75H5.83333C5.40375 23.75 4.99762 23.5859 4.70282 23.3029C4.40906 23.0209 4.25 22.6451 4.25 22.26V11.62C4.25 11.3939 4.30475 11.1697 4.41152 10.9647C4.51838 10.7595 4.67507 10.5781 4.87156 10.4367L4.43333 9.828L4.87156 10.4367L13.0382 4.55665C13.3125 4.35916 13.65 4.25 14 4.25Z" id="Vector" stroke="currentColor" stroke-width="1.5"></path>
-                </g>
-              </svg>
+              <d-icon icon="home" outline="" size="28"></d-icon>
             </div>
            <ion-label>
              <d-text class="capitalize font-medium leading-[normal] text-center text-on-alt text-xs" size="s">