Added test.yml file to run test and save coverage badge

Fixed ColorPicker styles for mobile devices

.github/workflows/test.yml

@@ -5,27 +5,33 @@ name: Test Coverage
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ['main']
   pull_request:
-    branches: [ "main" ]
+    branches: ['main']
 
 jobs:
   test:
-
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
         node-version: [20.10]
 
     steps:
-    - uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-    - run: npm ci
-    - run: npm run build --if-present
-    - run: npm run coverage
-    - run: npm run coverage-badge
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run build --if-present
+      - run: npm run coverage
+      - run: npm run coverage-badge
+      - name: Save Coverage Badge
+        uses: exuanbo/actions-deploy-gist@v1
+        with:
+          token: ${{ secrets.GIST_SECRET }}
+          gist_id: 3b32f9904f8a8e0ebe7dbf8f4417a1f9
+          file_path: coverage/coverage.svg
+          file_type: text

README.md

@@ -1,6 +1,6 @@
 # E-Store
 
-<img src="./coverage/coverage.svg" width="170" height="30" alt="Coverage" />
+<img src="https://gist.githubusercontent.com/mzohaibqc/3b32f9904f8a8e0ebe7dbf8f4417a1f9/raw/1618ae740e2f8ab4d1080c0eda3fbbcd42ad9bda/coverage.svg" width="170" height="30" alt="Coverage" />
 
 All components have complete code coverage and are fully unit tested. E2E tests are cypress based.
 
@@ -24,7 +24,7 @@ npm run cy:open
 
 ## Code Coverage
 
-![Code Coverage](public/code-coverage.png)
+![Code Coverage](public/coverage.png)
 
 ## Task
 

src/app/__snapshots__/page.test.tsx.snap

@@ -14,7 +14,7 @@ exports[`Page > HomePage should show all data 1`] = `
         Products
       </h1>
       <div
-        class="w-full max-w-xs css-b62m3t-container"
+        class="w-full sm:max-w-xs css-b62m3t-container"
         id="color-filter"
       >
         <span

src/components/Color/index.tsx

@@ -1,14 +1,8 @@
-type ColorProps = React.ComponentPropsWithoutRef<'div'> & {
+type Props = React.ComponentPropsWithoutRef<'div'> & {
   color: string;
 };
 
-export const colorMap: Record<string, string> = {
-  Black: '#000000',
-  Red: '#FF0000',
-  Stone: '#EFCFB6',
-};
-
-export default function Color({ color, ...rest }: ColorProps) {
+export default function Color({ color, ...rest }: Props) {
   return (
     <div
       {...rest}
@@ -19,3 +13,9 @@ export default function Color({ color, ...rest }: ColorProps) {
     </div>
   );
 }
+
+export const colorMap: Record<string, string> = {
+  Black: '#000000',
+  Red: '#FF0000',
+  Stone: '#EFCFB6',
+};

src/components/ProductList/index.tsx

@@ -1,6 +1,7 @@
 import ProductItem, { type Product } from '@/components/ProductItem';
 
 type Props = { products: Product[] };
+
 export default function ProductList({ products }: Props) {
   return (
     <div data-testid="products-list" className="grid grid-cols-1 gap-4 flex-1">

src/components/Products/__snapshots__/Products.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`Products > Products should get data form store and show all products 1`
       Products
     </h1>
     <div
-      class="w-full max-w-xs css-b62m3t-container"
+      class="w-full sm:max-w-xs css-b62m3t-container"
       id="color-filter"
     >
       <span

src/components/Products/index.tsx

@@ -15,7 +15,7 @@ export default function Products() {
           colorOptions={colorOptions}
           color={color}
           onChange={setColor}
-          className="w-full max-w-xs"
+          className="w-full sm:max-w-xs"
         />
       </div>
       <div className="flex flex-col lg:flex-row gap-4 pb-6">