test: 💍 remove modal test (#47)

jaskaransarkaria · Mar 16, 2024 · 3fd384d · 3fd384d
1 parent e16fc74
commit 3fd384d
Show file tree

Hide file tree

Showing 3 changed files with 1 addition and 77 deletions.
diff --git a/src/lib/components/DetailedSingleProduct/DetailedSingleProduct.svelte b/src/lib/components/DetailedSingleProduct/DetailedSingleProduct.svelte
@@ -4,7 +4,6 @@
   import AddToBasket from "$lib/components/AddToBasket/AddToBasket.svelte";
   import SwipeImage from "$lib/components/SwipeImage/SwipeImage.svelte";
   import { getImageFilename } from "$lib/utils/getImageFilename";
-  import Modal from "$lib/components/Modal/Modal.svelte";
 
   import type { Product } from "$lib/types/product";
   import { isAvifSupported } from "$lib/stores/isAvifSupported";
@@ -36,7 +35,6 @@
           },
         ];
 
-  let showModal = false;
   let clientWidth: number = 0;
 </script>
 
@@ -47,10 +45,6 @@
         class="mobile-img-container"
         data-testid="mobile-img-container"
         style:width={clientWidth ? clientWidth + "px" : "90vw"}
-        on:click={() => {
-          showModal = true;
-          window.scrollTo(0, 0);
-        }}
       >
         <SwipeImage imgArr={createImgArr(product)} />
       </div>
@@ -78,14 +72,7 @@
 {:else}
   <div class="details-container">
     <div class="desktop-left-container">
-      <div
-        class="desktop-img-container"
-        data-testid="desktop-img-container"
-        on:click={() => {
-          showModal = true;
-          window.scrollTo(0, 0);
-        }}
-      >
+      <div class="desktop-img-container" data-testid="desktop-img-container">
         <SwipeImage imgArr={createImgArr(product)} />
       </div>
     </div>
@@ -108,11 +95,6 @@
     </div>
   </div>
 {/if}
-{#if showModal}
-  <Modal {isMobile} showFullScreen={true} bind:showModal>
-    <SwipeImage imgArr={createImgArr(product)} />
-  </Modal>
-{/if}
 
 <style>
   h2,

diff --git a/src/lib/components/DetailedSingleProduct/DetailedSingleProduct.test.ts b/src/lib/components/DetailedSingleProduct/DetailedSingleProduct.test.ts
@@ -63,41 +63,6 @@ describe("GIVEN DetailedSingleProduct", () => {
         isMobile: false,
         productDescription: "some dummy description",
       });
-
-      expect(
-        screen.queryByTestId("desktop-show-modal")
-      ).not.toBeInTheDocument();
-      await userEvent.click(screen.getByTestId("desktop-img-container"));
-
-      expect(screen.getByTestId("desktop-show-modal")).toBeInTheDocument();
-      expect(screen.getByTestId("desktop-show-modal")).toBeVisible();
-      expect(screen.getByTestId("desktop-show-modal")).toHaveClass(
-        "desktop-show-modal"
-      );
-    });
-
-    it.skip("THEN close full screen", async () => {
-      render(DetailedSingleProduct, {
-        product: dummyProduct,
-        isMobile: false,
-        productDescription: "some dummy description",
-      });
-
-      expect(
-        screen.queryByTestId("desktop-show-modal")
-      ).not.toBeInTheDocument();
-      await userEvent.click(screen.getByTestId("desktop-img-container"));
-
-      expect(screen.getByTestId("desktop-show-modal")).toBeInTheDocument();
-      expect(screen.getByTestId("desktop-show-modal")).toBeVisible();
-      expect(screen.getByTestId("desktop-show-modal")).toHaveClass(
-        "desktop-show-modal"
-      );
-
-      await userEvent.keyboard("Escape");
-      expect(
-        screen.queryByTestId("desktop-show-modal")
-      ).not.toBeInTheDocument();
     });
 
     it("THEN display formatted product description", () => {
@@ -156,15 +121,6 @@ describe("GIVEN DetailedSingleProduct", () => {
         isMobile: true,
         productDescription: "some dummy description",
       });
-
-      expect(screen.queryByTestId("mobile-show-modal")).not.toBeInTheDocument();
-      await userEvent.click(screen.getByTestId("mobile-img-container"));
-
-      expect(screen.getByTestId("mobile-show-modal")).toBeInTheDocument();
-      expect(screen.getByTestId("mobile-show-modal")).toBeVisible();
-      expect(screen.getByTestId("mobile-show-modal")).toHaveClass(
-        "mobile-show-modal"
-      );
     });
 
     it("THEN close MOBILE full screen", async () => {
@@ -173,18 +129,6 @@ describe("GIVEN DetailedSingleProduct", () => {
         isMobile: true,
         productDescription: "some dummy description",
       });
-
-      expect(screen.queryByTestId("mobile-show-modal")).not.toBeInTheDocument();
-      await userEvent.click(screen.getByTestId("mobile-img-container"));
-
-      expect(screen.getByTestId("mobile-show-modal")).toBeInTheDocument();
-      expect(screen.getByTestId("mobile-show-modal")).toBeVisible();
-      expect(screen.getByTestId("mobile-show-modal")).toHaveClass(
-        "mobile-show-modal"
-      );
-
-      await userEvent.click(screen.getByTestId("mobile-close"));
-      expect(screen.queryByTestId("mobile-show-modal")).not.toBeInTheDocument();
     });
 
     it("THEN display formatted product description", () => {

diff --git a/src/lib/components/SwipeImage/SwipeImage.svelte b/src/lib/components/SwipeImage/SwipeImage.svelte
@@ -37,7 +37,6 @@
               {src}
               {alt}
               data-testid="swipe-img"
-              style:cursor={fullScreen ? null : "pointer"}
               class={fullScreen ? "full-screen" : ""}
             />
             <div class="custom-pagination-div" />
@@ -51,7 +50,6 @@
     <img
       src={imgArr[0].src}
       alt={imgArr[0].alt}
-      style:cursor={fullScreen ? null : "pointer"}
       on:error={() => {
         if (imgArr[0].src != comingSoon) {
           imgArr[0].src = comingSoon;