Tests for responseSize component (#4750)

---------

Co-authored-by: lohit <lohit@usebruno.com>

packages/bruno-app/babel.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    ['@babel/preset-react', {
+      runtime: 'automatic'
+    }]
+  ],
+  plugins: ['babel-plugin-styled-components']
+};

packages/bruno-app/jest.config.js

@@ -12,5 +12,14 @@ module.exports = {
   },
   clearMocks: true,
   moduleDirectories: ['node_modules', 'src'],
-  testEnvironment: 'node'
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.[jt]sx?$': 'babel-jest'
+  },
+  transformIgnorePatterns: [
+    '/node_modules/(?!(nanoid|xml-formatter)/)'
+  ],
+  testMatch: [
+    '<rootDir>/src/**/*.spec.[jt]s?(x)'
+  ]
 };

packages/bruno-app/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@usebruno/app",
   "version": "2.0.0",
+  "license": "MIT",
   "private": true,
   "scripts": {
     "dev": "rsbuild dev",
@@ -11,7 +12,6 @@
     "prettier": "prettier --write \"./src/**/*.{js,jsx,json,ts,tsx}\""
   },
   "dependencies": {
-    "@babel/preset-env": "^7.26.0",
     "@fontsource/inter": "^5.0.15",
     "@prantlf/jsonlint": "^16.0.0",
     "@reduxjs/toolkit": "^1.8.0",
@@ -82,19 +82,28 @@
     "yup": "^0.32.11"
   },
   "devDependencies": {
+    "@babel/core": "^7.27.1",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
     "@rsbuild/core": "^1.1.2",
     "@rsbuild/plugin-babel": "^1.0.3",
     "@rsbuild/plugin-node-polyfill": "^1.2.0",
     "@rsbuild/plugin-react": "^1.0.7",
     "@rsbuild/plugin-sass": "^1.1.0",
     "@rsbuild/plugin-styled-components": "1.1.0",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
     "autoprefixer": "10.4.20",
+    "babel-jest": "^29.7.0",
     "babel-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
+    "babel-plugin-styled-components": "^2.1.4",
     "cross-env": "^7.0.3",
     "css-loader": "7.1.2",
     "file-loader": "^6.2.0",
     "html-loader": "^3.0.1",
     "html-webpack-plugin": "^5.5.0",
+    "jest-environment-jsdom": "^29.7.0",
     "mini-css-extract-plugin": "^2.4.5",
     "postcss": "8.4.47",
     "style-loader": "^3.3.1",
@@ -102,4 +111,4 @@
     "webpack": "^5.64.4",
     "webpack-cli": "^4.9.1"
   }
-}
+}

packages/bruno-app/src/components/ResponsePane/ResponseSize/ResponseSize.spec.js

@@ -0,0 +1,110 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from 'styled-components';
+import ResponseSize from './index';
+
+// Create minimal theme with only the properties needed for the component
+const theme = {
+  requestTabPanel: {
+    responseStatus: '#666'
+  }
+};
+
+// Wrap component with theme provider for styled-components
+const renderWithTheme = (component) => {
+  return render(
+    <ThemeProvider theme={theme}>
+      {component}
+    </ThemeProvider>
+  );
+};
+
+describe('ResponseSize', () => {
+  describe('Invalid or excluded size values', () => {
+    it('should not render when size is undefined', () => {
+      const { container } = renderWithTheme(<ResponseSize size={undefined} />);
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    it('should not render when size is null', () => {
+      const { container } = renderWithTheme(<ResponseSize size={null} />);
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    it('should not render when size is NaN', () => {
+      const { container } = renderWithTheme(<ResponseSize size={NaN} />);
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    it('should not render when size is Infinity', () => {
+      const { container } = renderWithTheme(<ResponseSize size={Infinity} />);
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    it('should not render when size is -Infinity', () => {
+      const { container } = renderWithTheme(<ResponseSize size={-Infinity} />);
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    it('should not render when size is a string', () => {
+      const { container } = renderWithTheme(<ResponseSize size="1024" />);
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    it('should not render when size is an object', () => {
+      const { container } = renderWithTheme(<ResponseSize size={{value: 1024}} />);
+      expect(container).toBeEmptyDOMElement();
+    });
+  });
+
+  describe('Valid size values', () => {
+    it('should handle zero bytes', () => {
+      renderWithTheme(<ResponseSize size={0} />);
+      const element = screen.getByText(/0B/);
+      expect(element).toBeInTheDocument();
+      expect(element.textContent).toMatch(/^0B$/);
+      expect(element).toHaveAttribute('title', '0B');
+    });
+
+    it('should render bytes when size is less than 1024', () => {
+      renderWithTheme(<ResponseSize size={500} />);
+      const element = screen.getByText(/500B/);
+      expect(element).toBeInTheDocument();
+      expect(element.textContent).toMatch(/^500B$/);
+      expect(element).toHaveAttribute('title', '500B');
+    });
+
+    it('should handle exactly 1024 bytes as size', () => {
+      renderWithTheme(<ResponseSize size={1024} />);
+      const element = screen.getByText(/1024B/);
+      expect(element).toBeInTheDocument();
+      expect(element.textContent).toMatch(/^1024B$/);
+      expect(element).toHaveAttribute('title', '1,024B');
+    });
+
+    it('should render kilobytes when size is greater than 1024', () => {
+      renderWithTheme(<ResponseSize size={1500} />);
+      const element = screen.getByText(/1\.46KB/);
+      expect(element).toBeInTheDocument();
+      expect(element.textContent).toMatch(/^\d+\.\d+KB$/);
+      expect(element).toHaveAttribute('title', '1,500B');
+    });
+
+    it('should handle large size numbers', () => {
+      renderWithTheme(<ResponseSize size={10240} />);
+      const element = screen.getByText(/10\.0KB/);
+      expect(element).toBeInTheDocument();
+      expect(element.textContent).toMatch(/^\d+\.\d+KB$/);
+      expect(element).toHaveAttribute('title', '10,240B');
+    });
+
+    it('should handle decimal size numbers', () => {
+      renderWithTheme(<ResponseSize size={1126.5} />);
+      const element = screen.getByText(/1\.10KB/);
+      expect(element).toBeInTheDocument();
+      expect(element.textContent).toMatch(/^\d+\.\d+KB$/);
+      expect(element).toHaveAttribute('title', '1,126.5B');
+    });
+  });
+});