Component ProfileAboutCard: Component creation

leaderboardsgg · Oct 19, 2021 · ca03ea4 · ca03ea4
1 parent ebba4d3
commit ca03ea4
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 0 deletions.
diff --git a/components/ProfileAboutCard/ProfileAboutCard.test.js b/components/ProfileAboutCard/ProfileAboutCard.test.js
@@ -0,0 +1,16 @@
+import { stubbedRender } from '@/testUtils';
+import ProfileAboutCard from './ProfileAboutCard';
+
+describe('<ProfileAboutCard />', () => {
+  it('should render without crashing', () => {
+    const { unmount } = stubbedRender(ProfileAboutCard);
+
+    unmount();
+  });
+
+  it('renders correctly', () => {
+    const { container } = stubbedRender(ProfileAboutCard);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/components/ProfileAboutCard/ProfileAboutCard.vue b/components/ProfileAboutCard/ProfileAboutCard.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="profile-about-card">
+    <div class="border-b border-gray-300">
+      <h2 class="text-xl font-bold">About</h2>
+    </div>
+
+    <div>
+      <p class="text-black">{{ bio }}</p>
+      <div class="mt-5">
+        <CoreSocialButtons :socials="socials" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api';
+
+export default defineComponent({
+  props: {
+    bio: {
+      default: () =>
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget dapibus libero. Morbi ultricies varius accumsan.',
+      type: String,
+    },
+    socials: {
+      default: () => [
+        {
+          icon: 'dscrd',
+          name: 'Discord',
+          url: 'https://discord.com/',
+        },
+        {
+          icon: 'twch',
+          name: 'Twitch',
+          url: 'https://twitch.tv/',
+        },
+        {
+          icon: 'twtr',
+          name: 'Twitter',
+          url: 'https://twitter.com/',
+        },
+        {
+          icon: 'yt',
+          name: 'Youtube',
+          url: 'https://youtube.com/',
+        },
+      ],
+      type: Array,
+    },
+  },
+});
+</script>
+
+<style scoped>
+.profile-about-card {
+  @apply hidden md:flex flex-col border rounded border-gray-300;
+}
+
+.profile-about-card > div {
+  @apply p-5;
+}
+</style>
diff --git a/components/ProfileAboutCard/__snapshots__/ProfileAboutCard.test.js.snap b/components/ProfileAboutCard/__snapshots__/ProfileAboutCard.test.js.snap
@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ProfileAboutCard /> renders correctly 1`] = `
+<div
+  class="profile-about-card"
+>
+  <div
+    class="border-b border-gray-300"
+  >
+    <h2
+      class="text-xl font-bold"
+    >
+      About
+    </h2>
+  </div>
+   
+  <div>
+    <p
+      class="text-black"
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget dapibus libero. Morbi ultricies varius accumsan.
+    </p>
+     
+    <div
+      class="mt-5"
+    >
+      <div
+        class="social-button--container"
+      >
+        <a
+          alt="Discord"
+          class="social-button"
+          href="https://discord.com/"
+        >
+          
+    dscrd
+  
+        </a>
+        <a
+          alt="Twitch"
+          class="social-button"
+          href="https://twitch.tv/"
+        >
+          
+    twch
+  
+        </a>
+        <a
+          alt="Twitter"
+          class="social-button"
+          href="https://twitter.com/"
+        >
+          
+    twtr
+  
+        </a>
+        <a
+          alt="Youtube"
+          class="social-button"
+          href="https://youtube.com/"
+        >
+          
+    yt
+  
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+`;