Merge pull request #11 from saleem-hadad/feature/ui-unit-testing

✍️ Add UI unit tests #feature
hisabi-app · Apr 22, 2022 · 06b02cd · 06b02cd
2 parents ee052e8 + 61f9ada
commit 06b02cd
Show file tree

Hide file tree

Showing 60 changed files with 1,312 additions and 417 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,6 @@
 {
-    "presets": ["@babel/preset-env", "@babel/preset-react"]
+    "presets": ["@babel/preset-env", "@babel/preset-react"],
+    "plugins": [
+        ["@babel/transform-runtime"]
+    ]
 }
diff --git a/.gitignore b/.gitignore
@@ -13,3 +13,4 @@ npm-debug.log
 yarn-error.log
 /.idea
 /.vscode
+coverage
diff --git a/graphql/schema.graphql b/graphql/schema.graphql
@@ -37,7 +37,7 @@ type Query {
     transactions: [Transaction!]! @paginate(defaultCount: 25) @orderBy(column: id direction: DESC)
 
     allBrands: [Brand!]! @all
-    brands: [Brand!]! @paginate(defaultCount: 25) @orderBy(column: category_id direction: ASC)
+    brands: [Brand!]! @paginate(defaultCount: 25) @orderBy(column: id direction: DESC)
 
     allCategories: [Category!]! @all
     categories: [Category!]! @paginate(defaultCount: 25) @orderBy(column: id direction: DESC)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,9 +8,10 @@
         "hot": "mix watch --hot",
         "prod": "npm run production",
         "production": "mix --production",
-        "test": "jest --env=jsdom"
+        "test": "jest --env=jsdom --colors --coverage"
     },
     "devDependencies": {
+        "@babel/plugin-transform-runtime": "^7.17.0",
         "@babel/preset-env": "^7.16.11",
         "@babel/preset-react": "^7.16.7",
         "@headlessui/react": "^1.4.2",
@@ -23,9 +24,12 @@
         "autoprefixer": "^10.2.4",
         "axios": "^0.21",
         "babel-jest": "^27.5.1",
+        "intersection-observer": "^0.12.0",
+        "isomorphic-unfetch": "^3.1.0",
         "jest": "^27.5.1",
         "laravel-mix": "^6.0.6",
         "lodash": "^4.17.19",
+        "msw": "^0.39.2",
         "postcss": "^8.2.13",
         "postcss-import": "^14.0.1",
         "react": "^17.0.2",
@@ -34,10 +38,12 @@
         "tailwindcss": "^3.0.0"
     },
     "dependencies": {
+        "@babel/runtime": "^7.17.9",
         "@heroicons/react": "^1.0.5",
         "chart.js": "^3.7.0",
-        "graphql": "^16.2.0",
+        "graphql": "^16.3.0",
         "numbro": "^2.3.6",
-        "react-chartjs-2": "^4.0.0"
+        "react-chartjs-2": "^4.0.0",
+        "urql": "^2.2.0"
     }
 }
diff --git a/public/css/app.css b/public/css/app.css
diff --git a/public/js/app.js b/public/js/app.js
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,4 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=d80c6aa68ccfd74342c8",
-    "/css/app.css": "/css/app.css?id=9980ba94755724b3d676"
+    "/js/app.js": "/js/app.js?id=646cbe42f9883c5bee75",
+    "/css/app.css": "/css/app.css?id=302229d53296b2231e13"
 }
diff --git a/resources/js/Api.js b/resources/js/Api.js
diff --git a/resources/js/Api/brands.js b/resources/js/Api/brands.js
@@ -0,0 +1,74 @@
+import { gql } from '@urql/core';
+import client from './client.js';
+
+export const getAllBrands = () => {
+    return client
+            .query(gql`
+                query {
+                    allBrands { 
+                        id 
+                        name
+                        category {
+                            name
+                        }
+                    } 
+                }
+            `)
+            .toPromise();
+}
+
+export const getBrands = (page) => {
+    return client
+            .query(gql`
+                query {
+                    brands(page: ${page}) {
+                        data {
+                            id
+                            name
+                            category {
+                                id
+                                name
+                            }
+                        }
+                        paginatorInfo {
+                            hasMorePages
+                        }
+                    }
+                }
+            `)
+            .toPromise();
+}
+
+export const createBrand = ({name, categoryId}) => {
+    return client
+        .mutation(gql`
+            mutation {
+                createBrand(name: """${name}""" category_id: ${categoryId}) {
+                    id
+                    name
+                    category {
+                        id
+                        name
+                    }
+                }
+            }
+        `)
+        .toPromise();
+}
+
+export const updateBrand = ({id, name, category}) => {
+    return client
+        .mutation(gql`
+            mutation {
+                updateBrand(id: ${id} name: "${name}" category_id: ${category}) {
+                    id
+                    name
+                    category {
+                        id
+                        name
+                    }
+                }
+            }
+        `)
+        .toPromise();
+}