test: 💍 fix headings

jaskaransarkaria · Nov 11, 2021 · 9759ae4 · 9759ae4
1 parent ca21f06
commit 9759ae4
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 15 deletions.
diff --git a/.routify/config.js b/.routify/config.js
@@ -8,5 +8,5 @@ module.exports = {
   noHashScroll: false,
   distDir: 'dist',
   extensions: ['svelte', 'html', 'svx', 'md'],
-  started: '2021-11-04T19:22:37.765Z',
+  started: '2021-11-11T19:21:14.278Z',
 };
diff --git a/.routify/routes.js b/.routify/routes.js
@@ -1,10 +1,10 @@
 /**
  * @roxi/routify 2.7.3
- * File generated Thu Nov 04 2021 19:22:40 GMT+0000 (Greenwich Mean Time)
+ * File generated Thu Nov 11 2021 19:21:17 GMT+0000 (Greenwich Mean Time)
  */
 
 export const __version = '2.7.3';
-export const __timestamp = '2021-11-04T19:22:40.292Z';
+export const __timestamp = '2021-11-11T19:21:17.177Z';
 
 //buildRoutes
 import { buildClientTree } from '@roxi/routify/runtime/buildRoutes';

diff --git a/public/index.html b/public/index.html
@@ -11,9 +11,9 @@
 
     <link rel="icon" type="image/png" href="/favicon.png" />
     <link rel="stylesheet" href="/global.css" />
-    <link rel="stylesheet" href="/build/bundle-1636053757763.css" />
+    <link rel="stylesheet" href="/build/bundle-1636658474276.css" />
 
-    <script defer src="/build/bundle-1636053757763.js"></script>
+    <script defer src="/build/bundle-1636658474276.js"></script>
   </head>
   <body></body>
 </html>
diff --git a/src/components/ProductView/ProductView.svelte b/src/components/ProductView/ProductView.svelte
@@ -76,8 +76,9 @@
 <style>
   .products-container {
     display: grid;
-    grid-template-rows: 25% 25% 25% 25%;
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-auto-rows: 40em;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    align-items: center;
   }
 
   .detailed-products-container {

diff --git a/src/components/ProductView/ProductView.test.ts b/src/components/ProductView/ProductView.test.ts
@@ -39,7 +39,7 @@ describe('GIVEN ProductView', () => {
         expect(refreshProducts).toHaveBeenCalledTimes(1);
         expect(
           await screen.findByRole('heading', {
-            level: 1,
+            level: 2,
             name: /gold necklace/i,
           })
         ).toBeInTheDocument();
@@ -65,7 +65,7 @@ describe('GIVEN ProductView', () => {
         });
         expect(refreshProducts).toHaveBeenCalledTimes(0);
         expect(
-          await screen.findByRole('heading', { level: 1, name: /silver ring/i })
+          await screen.findByRole('heading', { level: 2, name: /silver ring/i })
         ).toBeInTheDocument();
       });
     });

diff --git a/src/components/SingleProduct/SingleProduct.svelte b/src/components/SingleProduct/SingleProduct.svelte
@@ -11,8 +11,8 @@
 
 {#if product}
   <div class="container">
+    <h2>{`${product.Name}`}</h2>
     {#if showDetailedView}
-      <h1>{`${product.Name}`}</h1>
       {#if product.ProductImages}
         <figure class="img-thumbnail-container">
           <figure class="selected-image">
@@ -45,7 +45,6 @@
         }`}
       </h3>
     {:else}
-      <h1>{`${product.Name}`}</h1>
       <figure
         on:click={$goto(`/shop/product/${product.Id}`)}
         class="img-container"
@@ -73,6 +72,10 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
+    border-radius: 0.25em;
+    margin: 4%;
+    height: 90%;
   }
 
   .img-container {
@@ -87,11 +90,11 @@
     grid-template-columns: 8fr 2fr;
   }
 
-  .img-container,
+  .img-container img,
   .img-thumbnail-container img {
     display: block;
     max-width: 100%;
-    max-height: 100%;
+    max-height: 90%;
     width: auto;
     height: auto;
     margin: auto;
@@ -123,6 +126,12 @@
     ); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
   }
 
+  h1,
+  h2,
+  h3 {
+    text-align: center;
+  }
+
   @media (max-width: 700px) {
     .thumbnails img {
       height: 60px;

diff --git a/src/components/SingleProduct/SingleProduct.test.ts b/src/components/SingleProduct/SingleProduct.test.ts
@@ -46,7 +46,7 @@ describe('Given SingleProduct', () => {
       const multiImages = screen.getAllByRole('img', { name: /456/i });
 
       expect(
-        screen.getByRole('heading', { level: 1, name: /blue jacket/i })
+        screen.getByRole('heading', { level: 2, name: /blue jacket/i })
       ).toHaveTextContent('Blue jacket');
       expect(
         screen.getByRole('heading', { level: 3, name: /very/i })
@@ -84,7 +84,7 @@ describe('Given SingleProduct', () => {
         },
       });
       expect(
-        screen.getByRole('heading', { level: 1, name: /green jacket/i })
+        screen.getByRole('heading', { level: 2, name: /green jacket/i })
       ).toHaveTextContent('Green jacket');
       expect(
         screen.getByRole('heading', { level: 3, name: /greeny/i })