Merge pull request #88 from codebtech/chore/add-component-tests

Add new unit tests and refactor async expectations

Author: m0hanraj

.github/workflows/js.yml

@@ -1,34 +1,42 @@
 name: JS lint & test
 on:
-    push:
-        branches-ignore:
-            - 'main-built'
+  push:
+    branches-ignore:
+      - 'main-built'
 
 jobs:
-    js-lint-test:
-        runs-on: ubuntu-latest
-        steps:
-            - uses: actions/checkout@v4
+  js-lint-test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
 
-            - name: Setup Node
-              uses: actions/setup-node@v4
-              with:
-                  node-version: 20.11
-                  cache: 'yarn'
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.11
+          cache: 'yarn'
 
-            - name: Install packages
-              run: yarn install --immutable
+      - name: Install packages
+        run: yarn install --immutable
 
-            - name: JS lint
-              run: yarn lint:js
+      - name: JS lint
+        run: yarn lint:js
 
-            - name: JS test
-              run: yarn test:js
+      - name: JS test
+        run: yarn test:js
 
-            - name: Upload artifacts
-              uses: actions/upload-artifact@v4
-              if: always()
-              with:
-                  name: js-report
-                  path: js-report/
-                  retention-days: 30
+      - name: JS unit test coverage report
+        uses: codecov/codecov-action@v4
+        with:
+          flags: jstests
+          name: codecov-jsunit
+          verbose: true
+          token: ${{ secrets.CODECOV_TOKEN }}
+
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: js-report
+          path: js-report/
+          retention-days: 30

.gitignore

@@ -18,3 +18,4 @@ build-script.sh
 integration-coverage.xml
 unit-coverage.xml
 .idea/
+/coverage/

jest.config.js

@@ -6,4 +6,6 @@ module.exports = {
 	modulePathIgnorePatterns: ['<rootDir>/vendor/'],
 	testEnvironment: 'jsdom',
 	testPathIgnorePatterns: ['<rootDir>/tests/e2e/'],
+	collectCoverage: true,
+	coverageReporters: ['text', 'cobertura'],
 };

package.json

@@ -27,12 +27,12 @@
 	"dependencies": {
 		"@testing-library/user-event": "^14.5.2",
 		"@wordpress/api-fetch": "^6.48.0",
-		"@wordpress/components": "^27.0.0",
-		"@wordpress/data": "^9.22.0",
-		"@wordpress/dom-ready": "^3.52.0",
-		"@wordpress/hooks": "^3.52.0",
-		"@wordpress/i18n": "^4.52.0",
-		"@wordpress/notices": "^4.20.0",
+		"@wordpress/components": "^27.1.0",
+		"@wordpress/data": "^9.23.0",
+		"@wordpress/dom-ready": "^3.53.0",
+		"@wordpress/hooks": "^3.53.0",
+		"@wordpress/i18n": "^4.53.0",
+		"@wordpress/notices": "^4.21.0",
 		"dotenv": "^16.4.5",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
@@ -46,11 +46,11 @@
 		"@testing-library/jest-dom": "^6.4.2",
 		"@testing-library/react": "14.2.1",
 		"@types/jest": "^29.5.12",
-		"@types/node": "^20.11.24",
+		"@types/node": "^20.11.25",
 		"@types/react-syntax-highlighter": "^15.5.11",
 		"@types/wordpress__components": "^23.0.11",
 		"@wordpress/e2e-test-utils-playwright": "^0.21.0",
-		"@wordpress/env": "^9.4.0",
+		"@wordpress/env": "^9.5.0",
 		"@wordpress/eslint-plugin": "^17.10.0",
 		"@wordpress/scripts": "^27.4.0",
 		"eslint": "^8.57.0",

src/components/common/__tests__/Clipboard.test.js

@@ -0,0 +1,13 @@
+import Clipboard from '../Clipboard';
+import { render } from '@testing-library/react';
+
+describe('Clipboard', () => {
+	test('Clipboard function', async () => {
+		const text = 'test clipboard';
+
+		const { getByLabelText } = render(<Clipboard text={text} />);
+		const clipboardButton = getByLabelText('Copy to clipboard');
+
+		expect(clipboardButton).toBeInTheDocument();
+	});
+});

src/components/modals/__tests__/SdkModal.test.js

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import SdkModal from '../SdkModal';
+
+describe('SdkModal component', () => {
+	test('should render modal correctly', async () => {
+		const item = { name: 'Test Flag' };
+		const closeSdkModal = jest.fn();
+		render(<SdkModal item={item} closeSdkModal={closeSdkModal} />);
+
+		expect(
+			screen.getByText(`SDK for feature flag: ${item.name}`)
+		).toBeInTheDocument();
+
+		await userEvent.click(screen.getByLabelText('Close'));
+
+		expect(closeSdkModal).toHaveBeenCalled();
+	});
+});

src/components/snippets/__tests__/Snippet.test.js

@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/react';
+import Snippet from '../Snippet';
+
+describe('Snippet component', () => {
+	it('renders without crashing', () => {
+		const data = "console.log('Hello, World!')";
+		const language = 'javascript';
+
+		render(<Snippet data={data} language={language} />);
+
+		expect(screen.getByText(/'Hello, World!'/)).toBeInTheDocument();
+	});
+});

src/utils/checkIfFlagExists.test.js

@@ -0,0 +1,40 @@
+import { checkIfFlagExists } from './index';
+
+describe('Function: checkIfFlagExists', () => {
+	let flags;
+	let flagName;
+
+	beforeEach(() => {
+		flags = [
+			{ id: 1, name: 'flag1', enabled: true },
+			{ id: 2, name: 'flag2', enabled: false },
+			{ id: 3, name: 'flag3', enabled: true },
+		];
+
+		flagName = 'flag1';
+	});
+
+	test('should return true if flag exists', async () => {
+		const result = checkIfFlagExists(flags, flagName);
+		expect(result).toBe(true);
+	});
+
+	test('should return false if flag does not exist', async () => {
+		flagName = 'nonExistentFlag';
+
+		const result = checkIfFlagExists(flags, flagName);
+		expect(result).toBe(false);
+	});
+
+	test('should return false when flags array is empty', async () => {
+		flags = [];
+		const result = checkIfFlagExists(flags, flagName);
+		expect(result).toBe(false);
+	});
+
+	test('should return false when flagName is empty', async () => {
+		flagName = '';
+		const result = checkIfFlagExists(flags, flagName);
+		expect(result).toBe(false);
+	});
+});

tests/e2e/feature-flags.spec.ts

@@ -48,7 +48,7 @@ test.describe('Feature flags', () => {
 		expect(
 			await page.getByLabel('Dismiss this notice').innerText()
 		).toMatch(/Saved successfully!/);
-		expect(
+		await expect(
 			page
 				.locator('id=mr-feature-flag-item')
 				.last()
@@ -66,13 +66,13 @@ test.describe('Feature flags', () => {
 
 		//Create another flag with same name should show error
 		await AddNewFlagAndFill(page, 'testDuplicate');
-		expect(page.getByText(ERROR_FLAG_EXISTS)).toBeVisible();
-		expect(page.getByRole('button', { name: 'Save' })).toBeDisabled();
+		await expect(page.getByText(ERROR_FLAG_EXISTS)).toBeVisible();
+		await expect(page.getByRole('button', { name: 'Save' })).toBeDisabled();
 
 		//update flag name to be unique but still invalid
 		await AddNewFlag(page, 'test duplicate');
-		expect(page.getByText(ERROR_FLAG_INVALID)).toBeVisible();
-		expect(page.getByRole('button', { name: 'Save' })).toBeDisabled();
+		await expect(page.getByText(ERROR_FLAG_INVALID)).toBeVisible();
+		await expect(page.getByRole('button', { name: 'Save' })).toBeDisabled();
 
 		expect(
 			await page.getByLabel('Dismiss this notice').innerText()
@@ -90,7 +90,7 @@ test.describe('Feature flags', () => {
 
 		await OpenSdkModal(page);
 
-		expect(
+		await expect(
 			page.getByRole('heading', {
 				name: `SDK for feature flag: ${flagName}`,
 			})