complete value metric tests

package.json

@@ -8,7 +8,7 @@
         "hot": "mix watch --hot",
         "prod": "npm run production",
         "production": "mix --production",
-        "test": "jest --env=jsdom --colors"
+        "test": "jest --env=jsdom --colors --coverage"
     },
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.17.0",
@@ -21,6 +21,7 @@
         "@tailwindcss/forms": "^0.4.0",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^12.1.2",
+        "@testing-library/user-event": "^14.1.1",
         "autoprefixer": "^10.2.4",
         "axios": "^0.21",
         "babel-jest": "^27.5.1",
@@ -47,6 +48,8 @@
         "urql": "^2.2.0"
     },
     "jest": {
-        "setupFilesAfterEnv": ["./jest.setup.js"]
+        "setupFilesAfterEnv": [
+            "./jest.setup.js"
+        ]
     }
 }

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=d18fe761aa688c651536",
+    "/js/app.js": "/js/app.js?id=9f1561cb00efdc560d9b",
     "/css/app.css": "/css/app.css?id=bd9462ef1c7aca6afb62"
 }

resources/js/Api/common.js

@@ -31,6 +31,6 @@ export const query = (query, range = null, queryName = null) => {
                 query ${queryCustomName} {
                     ${query}(range: """${range}""") 
                 }
-            `)
+            `, {range})
             .toPromise();
 }

resources/js/Components/Domain/__tests__/ValueMetric.test.js

@@ -1,26 +1,71 @@
 import * as React from 'react'
-import { screen, render, fireEvent, waitFor, act, waitForElementToBeRemoved } from '@testing-library/react';
+import { screen, render, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 
 import ValueMetric from '../ValueMetric';
 
-it('it shows loading by default', async () => {
+it('it fetches data once loaded and stop loader once data is fetched', async () => {
     render(<ValueMetric name="Some Metric" graphql_query="valueMetricSampleQuery" />);
 
     expect(screen.getByTestId('loading-view')).toBeVisible()
 
     await waitForElementToBeRemoved(() => screen.queryByTestId('loading-view'))
+    await waitFor(() => expect(screen.getByText(/some metric/i)).toBeVisible())
 });
 
-// it('it fetches data once loaded and stop loader once data is fetched', () => {
-//     render(<ValueMetric name="Some Metric" graphql_query="valueMetricSampleQuery" />);
 
-// });
+it('ranges provided and select first by default', async () => {
+    const ranges = [
+        {name: "Current Month", key: "current-month", start: "2022-04-01", end: "2022-04-30"}, 
+        {name: "Last Month", key: "last-month", start: "2022-03-01", end: "2022-03-31"}
+    ];
 
-// it('it allows to select range if provided', () => {
-//     render(<ValueMetric name="Some Metric" graphql_query="valueMetricSampleQuery" />);
-// });
+    render(<ValueMetric name="Some Metric" graphql_query="valueMetricSampleQuery" ranges={ranges} />);
 
-// it('it fetches data if a range is selected', () => {
-//     render(<ValueMetric name="Some Metric" graphql_query="valueMetricSampleQuery" />);
-// })
+    await waitFor(() => {
+        expect(screen.getByRole('option', {name: 'Current Month'}).selected).toBe(true)
+        expect(screen.getByRole('option', {name: 'Last Month'}).selected).toBe(false)
+    })
+});
+
+it('it allows to select a range if ranges provides', async () => {
+    const ranges = [
+        {name: "Current Month", key: "current-month", start: "2022-04-01", end: "2022-04-30"}, 
+        {name: "Last Month", key: "last-month", start: "2022-03-01", end: "2022-03-31"}
+    ];
+
+    render(<ValueMetric name="Some Metric" graphql_query="valueMetricSampleQuery" ranges={ranges} />);
+
+    await waitFor(async () => {
+        await userEvent.selectOptions(
+            screen.getByRole('combobox'),
+            screen.getByRole('option', {name: 'Last Month'}),
+        )
+    })
+
+    await waitFor(() => {
+        expect(screen.getByRole('option', {name: 'Current Month'}).selected).toBe(false)
+        expect(screen.getByRole('option', {name: 'Last Month'}).selected).toBe(true)
+    })
+});
+
+it('it fetches data if a range is selected', async () => {
+    const ranges = [
+        {name: "Current Month", key: "current-month", start: "2022-04-01", end: "2022-04-30"}, 
+        {name: "Last Month", key: "last-month", start: "2022-03-01", end: "2022-03-31"}
+    ];
+
+    render(<ValueMetric name="Some Metric" graphql_query="valueMetricSampleQuery" ranges={ranges} />);
+
+    await waitFor(() => expect(screen.getByText(/3k/i)).toBeVisible())
+
+    await waitFor(async () => {
+        await userEvent.selectOptions(
+            screen.getByRole('combobox'),
+            screen.getByRole('option', {name: 'Last Month'}),
+        )
+    })
+
+    await waitFor(() => expect(screen.getByText(/2k/i)).toBeVisible())
+})

resources/js/Utils/__tests__/index.test.js

@@ -0,0 +1,13 @@
+import { formatNumber, cutString } from '../';
+
+it('formatNumber', () => {
+  expect(formatNumber(2000)).toBe('2k')
+  expect(formatNumber(-2000)).toBe('(2k)')
+  expect(formatNumber(-1530)).toBe('(1.53k)')
+  expect(formatNumber(-1530, '0[.]00a')).toBe('-1.53k')
+});
+
+it('cutString', () => {
+    expect(cutString('saleem', 2)).toBe('sa...')
+    expect(cutString('saleem', 6)).toBe('saleem')
+});

resources/js/mocks/handlers.js

@@ -8,7 +8,9 @@ export const handlers = [
     }),
     graphql.query('valueMetricSampleQuery', (req, res, ctx) => {
         return res(
-            ctx.data({'valueMetricSampleQuery': 2132}),
+            ctx.data({
+                'valueMetricSampleQuery': req.body.variables.range === 'current-month' ? 3000 : 2000
+            }),
         )
     }),
 ];