Added tests for mobile interactions

NIAEFEUP · Sep 26, 2023 · 6885c18 · 6885c18
1 parent ee2544a
commit 6885c18
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 0 deletions.
diff --git a/src/lib/layout/hexagons/TeamMemberHexagon.stories.ts b/src/lib/layout/hexagons/TeamMemberHexagon.stories.ts
@@ -1,3 +1,5 @@
+import { fireEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
 import TeamMemberHexagon from './TeamMemberHexagon.svelte';
 
 export default {
@@ -9,6 +11,42 @@ export default {
   }
 };
 
+export const MobileHexagon = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile2'
+    }
+  },
+  args: {
+    data: {
+      name: 'Bruno Rosendo',
+      email: 'brunorosendo@gmail.com',
+      role: 'Co-Gestor de Projetos',
+      photo: 'images/previews/bruno_rosendo.png',
+      linkedin: 'https://pt.linkedin.com/',
+      gitHub: 'https://github.com/',
+      websites: [{ url: 'https://www.facebook.com/' }]
+    }
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Open Hexagon', async () => {
+      const container = await canvas.findByTestId('container');
+      const role = await canvas.findByTestId('role');
+      await fireEvent.touchStart(container);
+      await expect(role).toHaveAttribute('style', 'opacity: 1;');
+    });
+
+    await step('Close Hexagon', async () => {
+      const container = await canvas.findByTestId('container');
+      const role = await canvas.findByTestId('role');
+      await fireEvent.touchStart(container);
+      await expect(role).toHaveAttribute('style', 'opacity: 0;');
+    });
+  }
+};
+
 export const CustomIconHexagon = {
   args: {
     data: {

diff --git a/src/lib/layout/hexagons/TeamMemberHexagon.svelte b/src/lib/layout/hexagons/TeamMemberHexagon.svelte
@@ -72,6 +72,7 @@
     data-state="closed"
   >
     <div
+      data-testid="container"
       class="container absolute bottom-0 z-20 w-full px-4 duration-500 group-hover:bottom-1/2 group-hover:translate-y-1/3"
     >
       <p
@@ -80,6 +81,7 @@
         {teamMember.name}
       </p>
       <p
+        data-testid="role"
         class="full-opacity mx-auto text-center text-xs leading-tight text-gray-100 opacity-0 transition-all duration-500 ease-out group-hover:opacity-100 sm:text-xs md:text-sm lg:text-base xl:text-lg"
       >
         {teamMember.role}