From c5de58a8ee771130c29009b25dd1c911ae70c873 Mon Sep 17 00:00:00 2001
From: pranavgoel29 <pranavgoel29@gmail.com>
Date: Mon, 11 Nov 2024 16:15:54 +0530
Subject: [PATCH 01/17] Fixed the type check logic for the getInputComponent
 function

---
 src/pages/Stream/Views/Manage/Alerts.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Stream/Views/Manage/Alerts.tsx b/src/pages/Stream/Views/Manage/Alerts.tsx
index 54d33106..d65173b7 100644
--- a/src/pages/Stream/Views/Manage/Alerts.tsx
+++ b/src/pages/Stream/Views/Manage/Alerts.tsx
@@ -172,7 +172,7 @@ type ColumnRuleProps = {
 };
 
 const getInputComponent = (type: 'text' | 'number' | 'timestamp') => {
-	return type === 'text' || 'timestamp' ? TextInput : NumberInput;
+	return type === 'text' || type === 'timestamp' ? TextInput : NumberInput;
 };
 
 const ColumnRule = (props: ColumnRuleProps) => {

From d1895dcafcb73c3cac7650cc0d2710789010b5dd Mon Sep 17 00:00:00 2001
From: pranavgoel29 <pranavgoel29@gmail.com>
Date: Mon, 11 Nov 2024 16:45:43 +0530
Subject: [PATCH 02/17] Removed the duplicate code of HumanizeNumber i.e.,
 convertToReadableScale function and file

---
 src/utils/convertToReadableScale.ts | 17 -----------------
 src/utils/formatBytes.ts            | 16 ++++++++--------
 2 files changed, 8 insertions(+), 25 deletions(-)
 delete mode 100644 src/utils/convertToReadableScale.ts

diff --git a/src/utils/convertToReadableScale.ts b/src/utils/convertToReadableScale.ts
deleted file mode 100644
index 9c2ca32e..00000000
--- a/src/utils/convertToReadableScale.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export const convertToReadableScale = (val: number) => {
-	// Thousands, millions, billions etc..
-	let s = ['', ' K', ' M', ' B', ' T'];
-
-	// Dividing the value by 3.
-	let sNum = Math.floor(('' + val).length / 3);
-
-	// Calculating the precised value.
-	let sVal = parseFloat((sNum != 0 ? val / Math.pow(1000, sNum) : val).toPrecision(4));
-
-	if (sVal % 1 != 0) {
-		return sVal.toFixed(1) + s[sNum];
-	}
-
-	// Appending the letter to precised val.
-	return sVal + s[sNum];
-};
diff --git a/src/utils/formatBytes.ts b/src/utils/formatBytes.ts
index 636acb0b..9feb033d 100644
--- a/src/utils/formatBytes.ts
+++ b/src/utils/formatBytes.ts
@@ -2,9 +2,8 @@ export const formatBytes = (a: number, b: number = 1) => {
 	if (!+a) return '0 Bytes';
 	const c = b < 0 ? 0 : b,
 		d = Math.floor(Math.log(a) / Math.log(1024));
-	return `${parseFloat((a / Math.pow(1024, d)).toFixed(c))} ${
-		['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'][d]
-	}`;
+	return `${parseFloat((a / Math.pow(1024, d)).toFixed(c))} ${['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'][d]
+		}`;
 };
 
 export const convertGibToBytes = (value: number) => {
@@ -13,15 +12,15 @@ export const convertGibToBytes = (value: number) => {
 	return value * Math.pow(1024, 3);
 };
 
-export function HumanizeNumber(val: number) {
+export const HumanizeNumber = (val: number) => {
 	// Thousands, millions, billions etc..
-	let s = ['', ' K', ' M', ' B', ' T'];
+	const s = ['', ' K', ' M', ' B', ' T'];
 
 	// Dividing the value by 3.
-	let sNum = Math.floor(('' + val).length / 3);
+	const sNum = Math.floor(('' + val).length / 3);
 
 	// Calculating the precised value.
-	let sVal = parseFloat((sNum != 0 ? val / Math.pow(1000, sNum) : val).toPrecision(4));
+	const sVal = parseFloat((sNum != 0 ? val / Math.pow(1000, sNum) : val).toPrecision(4));
 
 	if (sVal % 1 != 0) {
 		return sVal.toFixed(1) + s[sNum];
@@ -29,7 +28,8 @@ export function HumanizeNumber(val: number) {
 
 	// Appending the letter to precised val.
 	return sVal + s[sNum];
-}
+};
+
 
 export const sanitizeEventsCount = (val: any) => {
 	return typeof val === 'number' ? HumanizeNumber(val) : '0';

From cf5973524e7d749519f026e5e659cf2918255626 Mon Sep 17 00:00:00 2001
From: pranavgoel29 <pranavgoel29@gmail.com>
Date: Wed, 13 Nov 2024 18:20:53 +0530
Subject: [PATCH 03/17] Fix the semantic tag for roles header and modal header
 font-weight for OIDC modal

---
 src/pages/AccessManagement/Roles.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/AccessManagement/Roles.tsx b/src/pages/AccessManagement/Roles.tsx
index edc88d2b..814750ed 100644
--- a/src/pages/AccessManagement/Roles.tsx
+++ b/src/pages/AccessManagement/Roles.tsx
@@ -167,7 +167,9 @@ const Roles: FC = () => {
 	return (
 		<Box className={classes.container}>
 			<Stack className={classes.header} gap={0}>
-				<Text style={{ fontWeight: 600 }}>Roles</Text>
+				<Text component="h2" style={{ fontWeight: 600 }}>
+					Roles
+				</Text>
 				<Stack style={{ flexDirection: 'row' }} gap={0}>
 					<Button
 						className={classes.createUserBtn}
@@ -207,6 +209,7 @@ const Roles: FC = () => {
 				onClose={handleDefaultRoleModalClose}
 				title="Set default oidc role"
 				centered
+				styles={{ title: { fontWeight: 500 } }}
 				className={classes.modalStyle}>
 				<Stack>
 					<Select

From cc88541faf1ff208a50e459ea8a7fdbfa7cbccfc Mon Sep 17 00:00:00 2001
From: pranavgoel29 <pranavgoel29@gmail.com>
Date: Wed, 13 Nov 2024 18:21:50 +0530
Subject: [PATCH 04/17] Improved teh code to use correct TS literals

---
 src/hooks/useGetStreamMetadata.ts               |  4 ++--
 src/pages/Dashboards/CreateTileForm.tsx         |  6 +++---
 src/pages/Dashboards/assets/templates.tsx       | 12 ++++++------
 .../Stream/Views/Explore/StaticLogTable.tsx     |  2 +-
 src/pages/Stream/Views/Manage/Alerts.tsx        |  4 ++--
 src/pages/Stream/providers/LogsProvider.tsx     | 17 ++++++++---------
 src/pages/Stream/providers/StreamProvider.tsx   |  2 +-
 src/pages/Systems/ServerList.tsx                |  4 ++--
 8 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/src/hooks/useGetStreamMetadata.ts b/src/hooks/useGetStreamMetadata.ts
index bb2c3da7..7619b89f 100644
--- a/src/hooks/useGetStreamMetadata.ts
+++ b/src/hooks/useGetStreamMetadata.ts
@@ -15,8 +15,8 @@ export type MetaData = {
 
 // until dedicated endpoint been provided - fetch one by one
 export const useGetStreamMetadata = () => {
-	const [isLoading, setLoading] = useState<Boolean>(true);
-	const [error, setError] = useState<Boolean>(false);
+	const [isLoading, setLoading] = useState<boolean>(true);
+	const [error, setError] = useState<boolean>(false);
 	const [metaData, setMetadata] = useState<MetaData | null>(null);
 	const [userRoles] = useAppStore((store) => store.userRoles);
 
diff --git a/src/pages/Dashboards/CreateTileForm.tsx b/src/pages/Dashboards/CreateTileForm.tsx
index 5100633d..37bca145 100644
--- a/src/pages/Dashboards/CreateTileForm.tsx
+++ b/src/pages/Dashboards/CreateTileForm.tsx
@@ -527,14 +527,14 @@ const sanitizeFormValues = (form: TileFormType, type: 'create' | 'update'): Edit
 };
 
 const defaultVizOpts = {
-	visualization_type: 'donut-chart' as 'donut-chart',
+	visualization_type: 'donut-chart' as const,
 	size: 'sm',
 	color_config: [],
 	tick_config: [],
 	circular_chart_config: {},
 	graph_config: { x_key: '', y_keys: [] },
-	orientation: 'horizontal' as 'horizontal',
-	graph_type: 'default' as 'default',
+	orientation: 'horizontal' as const,
+	graph_type: 'default' as const,
 };
 
 const defaultFormOpts = {
diff --git a/src/pages/Dashboards/assets/templates.tsx b/src/pages/Dashboards/assets/templates.tsx
index 1d9c30b1..ba1d28e9 100644
--- a/src/pages/Dashboards/assets/templates.tsx
+++ b/src/pages/Dashboards/assets/templates.tsx
@@ -12,7 +12,7 @@ const pmetaConfig = {
 			query: 'select MAX(parseable_events_ingested), address from pmeta GROUP BY address LIMIT 100',
 			order: 1,
 			visualization: {
-				visualization_type: 'donut-chart' as 'donut-chart',
+				visualization_type: 'donut-chart' as const,
 				circular_chart_config: {
 					name_key: 'address',
 					value_key: 'MAX(pmeta.parseable_events_ingested)',
@@ -30,7 +30,7 @@ const pmetaConfig = {
 				"select a.time,SUM(a.current_events) as current_events, SUM(a.lifetime_events) as lifetime_events, SUM(a.deleted_events) as deleted_events from (select MAX(parseable_events_ingested) as current_events, MAX(parseable_lifetime_events_ingested) as lifetime_events, MAX(parseable_deleted_events_ingested) as deleted_events, DATE_BIN('10 minutes', p_timestamp, NOW()) AS time from pmeta where address='http://parseable-ing-8yvv-0.parseable-ingestor-headless.demo.svc.cluster.local:8000/' group by time order by time) a GROUP BY a.time ORDER BY a.time LIMIT 100",
 			order: 2,
 			visualization: {
-				visualization_type: 'bar-chart' as 'bar-chart',
+				visualization_type: 'bar-chart' as const,
 				circular_chart_config: null,
 				graph_config: {
 					x_key: 'time',
@@ -67,7 +67,7 @@ const pmetaConfig = {
 			query: 'SELECT MAX(process_resident_memory_bytes) as memory_usage, address FROM pmeta GROUP BY address LIMIT 100',
 			order: 3,
 			visualization: {
-				visualization_type: 'pie-chart' as 'pie-chart',
+				visualization_type: 'pie-chart' as const,
 				circular_chart_config: {
 					name_key: 'address',
 					value_key: 'memory_usage',
@@ -85,7 +85,7 @@ const pmetaConfig = {
 				"select a.time, SUM(a.current_events_size) as current_events_size, SUM(a.lifetime_events_size) as lifetime_events_size, SUM(a.deleted_events_size) as deleted_events_size from (select MAX(parseable_events_ingested_size) as current_events_size, MAX(parseable_lifetime_events_ingested_size) as lifetime_events_size, MAX(parseable_deleted_events_ingested_size) as deleted_events_size, DATE_BIN('10 minutes', p_timestamp, NOW()) AS time from pmeta where address='http://parseable-ing-8yvv-0.parseable-ingestor-headless.demo.svc.cluster.local:8000/' group by time order by time) a GROUP BY a.time ORDER BY a.time LIMIT 100",
 			order: 4,
 			visualization: {
-				visualization_type: 'bar-chart' as 'bar-chart',
+				visualization_type: 'bar-chart' as const,
 				circular_chart_config: null,
 				graph_config: {
 					x_key: 'time',
@@ -135,7 +135,7 @@ const pmetaConfig = {
 				"SELECT MAX(parseable_events_ingested_size) as current_events_size, MAX(parseable_storage_size_data) as current_data_size FROM pmeta where address='http://ec2-3-15-172-147.us-east-2.compute.amazonaws.com:443/' LIMIT 100",
 			order: 5,
 			visualization: {
-				visualization_type: 'table' as 'table',
+				visualization_type: 'table' as const,
 				circular_chart_config: null,
 				graph_config: null,
 				size: 'sm',
@@ -159,7 +159,7 @@ const pmetaConfig = {
 				"select DATE_BIN('10 minutes', p_timestamp, NOW()) AS time, MAX(process_resident_memory_bytes) as process_resident_memory_bytes from pmeta where address='http://parseable-ing-8yvv-0.parseable-ingestor-headless.demo.svc.cluster.local:8000/' group by time order by time LIMIT 100",
 			order: 6,
 			visualization: {
-				visualization_type: 'bar-chart' as 'bar-chart',
+				visualization_type: 'bar-chart' as const,
 				circular_chart_config: null,
 				graph_config: {
 					x_key: 'time',
diff --git a/src/pages/Stream/Views/Explore/StaticLogTable.tsx b/src/pages/Stream/Views/Explore/StaticLogTable.tsx
index b3964013..e9b638da 100644
--- a/src/pages/Stream/Views/Explore/StaticLogTable.tsx
+++ b/src/pages/Stream/Views/Explore/StaticLogTable.tsx
@@ -120,7 +120,7 @@ const Table = (props: { primaryHeaderHeight: number }) => {
 					overflow: 'hidden',
 					textOverflow: 'ellipsis',
 					display: 'table-cell',
-					...(!_.includes(wrapDisabledColumns, columnName) ? { whiteSpace: 'nowrap' as 'nowrap' } : {}),
+					...(!_.includes(wrapDisabledColumns, columnName) ? { whiteSpace: 'nowrap' as const } : {}),
 				},
 			};
 		},
diff --git a/src/pages/Stream/Views/Manage/Alerts.tsx b/src/pages/Stream/Views/Manage/Alerts.tsx
index d65173b7..503ea51d 100644
--- a/src/pages/Stream/Views/Manage/Alerts.tsx
+++ b/src/pages/Stream/Views/Manage/Alerts.tsx
@@ -22,7 +22,7 @@ import ErrorView from './ErrorView';
 import RestrictedView from '@/components/Misc/RestrictedView';
 
 const defaultColumnTypeConfig = { column: '', operator: '=', value: '', repeats: 1, ignoreCase: false };
-const defaultColumnTypeRule = { type: 'column' as 'column', config: defaultColumnTypeConfig };
+const defaultColumnTypeRule = { type: 'column' as const, config: defaultColumnTypeConfig };
 const { transformAlerts } = streamStoreReducers;
 
 const stringOperators = [
@@ -574,7 +574,7 @@ const AlertsModal = (props: {
 	);
 };
 
-const Header = (props: { selectAlert: selectAlert; isLoading: boolean, showCreateBtn: boolean }) => {
+const Header = (props: { selectAlert: selectAlert; isLoading: boolean; showCreateBtn: boolean }) => {
 	return (
 		<Stack className={classes.headerContainer} style={{ minHeight: '3rem', maxHeight: '3rem' }}>
 			<Text className={classes.title}>Alerts</Text>
diff --git a/src/pages/Stream/providers/LogsProvider.tsx b/src/pages/Stream/providers/LogsProvider.tsx
index 684e8d42..ddad7682 100644
--- a/src/pages/Stream/providers/LogsProvider.tsx
+++ b/src/pages/Stream/providers/LogsProvider.tsx
@@ -135,7 +135,7 @@ const getDefaultTimeRange = (duration: FixedDuration = DEFAULT_FIXED_DURATIONS)
 	return {
 		startTime: startTime.toDate(),
 		endTime: now.toDate(),
-		type: 'fixed' as 'fixed',
+		type: 'fixed' as const,
 		label,
 		interval: milliseconds,
 		shiftInterval: 1,
@@ -152,7 +152,7 @@ const defaultQuickFilters = {
 };
 
 const defaultLiveTailConfig = {
-	liveTailStatus: '' as '',
+	liveTailStatus: '' as const,
 	liveTailSchemaData: [],
 	liveTailSearchValue: '',
 	liveTailSearchField: '',
@@ -298,7 +298,7 @@ type LogsStoreReducers = {
 };
 
 const defaultSortKey = 'p_timestamp';
-const defaultSortOrder = 'desc' as 'desc';
+const defaultSortOrder = 'desc' as const;
 
 const initialState: LogsStore = {
 	timeRange: getDefaultTimeRange(),
@@ -464,7 +464,7 @@ const setCustQuerySearchState = (store: LogsStore, query: string, viewMode: stri
 			isQuerySearchActive: true,
 			custSearchQuery: query,
 			viewMode,
-			activeMode: viewMode === 'filters' ? ('filters' as 'filters') : ('sql' as 'sql'),
+			activeMode: viewMode === 'filters' ? ('filters' as const) : ('sql' as const),
 		},
 		...getCleanStoreForRefetch(store),
 		timeRange,
@@ -757,7 +757,7 @@ const applyCustomQuery = (
 					endTime: endTime.toDate(),
 					label,
 					interval,
-					type: 'custom' as 'custom', // always
+					type: 'custom' as const, // always
 				},
 			};
 		}
@@ -810,7 +810,7 @@ const setAndSortData = (store: LogsStore, sortKey: string, sortOrder: 'asc' | 'd
 	};
 };
 
-const setAndFilterData = (store: LogsStore, filterKey: string, filterValues: string[], remove: boolean = false) => {
+const setAndFilterData = (store: LogsStore, filterKey: string, filterValues: string[], remove = false) => {
 	const { data, tableOpts } = store;
 	const { sortKey, sortOrder, filters } = tableOpts;
 	const updatedFilters = remove ? _.omit(filters, filterKey) : { ...filters, [filterKey]: filterValues };
@@ -903,7 +903,7 @@ const setRetention = (_store: LogsStore, retention: { duration?: string; descrip
 		retention: {
 			duration: durationInNumber,
 			description: retention.description || '',
-			action: 'delete' as 'delete',
+			action: 'delete' as const,
 		},
 	};
 };
@@ -941,8 +941,7 @@ const onToggleView = (store: LogsStore, viewMode: 'json' | 'table') => {
 };
 
 const toggleConfigViewType = (store: LogsStore) => {
-	const configViewType =
-		store.tableOpts.configViewType === 'schema' ? ('columns' as 'columns') : ('schema' as 'schema');
+	const configViewType: 'columns' | 'schema' = store.tableOpts.configViewType === 'schema' ? 'columns' : 'schema';
 
 	return {
 		tableOpts: {
diff --git a/src/pages/Stream/providers/StreamProvider.tsx b/src/pages/Stream/providers/StreamProvider.tsx
index daf5637d..4be24140 100644
--- a/src/pages/Stream/providers/StreamProvider.tsx
+++ b/src/pages/Stream/providers/StreamProvider.tsx
@@ -208,7 +208,7 @@ const setRetention = (_store: StreamStore, retention: { duration?: string; descr
 		retention: {
 			duration: durationInNumber,
 			description: retention.description || '',
-			action: 'delete' as 'delete',
+			action: 'delete' as const,
 		},
 	};
 };
diff --git a/src/pages/Systems/ServerList.tsx b/src/pages/Systems/ServerList.tsx
index e292639d..27149d04 100644
--- a/src/pages/Systems/ServerList.tsx
+++ b/src/pages/Systems/ServerList.tsx
@@ -56,8 +56,8 @@ const List = () => {
 	const { getClusterInfoSuccess, getClusterInfoRefetch } = useClusterInfo();
 	const [clusterStore] = useClusterStore((store) => store);
 	const { ingestorMachines: ingestorsInStore, querierMachine } = clusterStore;
-	const querier = { ...querierMachine, type: 'querier' as 'querier' };
-	const ingestors = _.map(ingestorsInStore, (ingestors) => ({ ...ingestors, type: 'ingestor' as 'ingestor' }));
+	const querier = { ...querierMachine, type: 'querier' as const };
+	const ingestors = _.map(ingestorsInStore, (ingestors) => ({ ...ingestors, type: 'ingestor' as const }));
 
 	useEffect(() => {
 		getClusterInfoRefetch();

From 2f8efb1695afe3b1deca8f2e004169266988d3de Mon Sep 17 00:00:00 2001
From: pranavgoel29 <pranavgoel29@gmail.com>
Date: Wed, 13 Nov 2024 19:18:37 +0530
Subject: [PATCH 05/17] Added the base tests for /users roles section

---
 package.json                         |  4 +-
 playwright.config.ts                 | 29 +++++++--
 src/components/Button/IconButton.tsx |  3 +
 src/pages/AccessManagement/Roles.tsx |  2 +-
 tests/users.spec.ts                  | 88 ++++++++++++++++++++++++++++
 5 files changed, 119 insertions(+), 7 deletions(-)
 create mode 100644 tests/users.spec.ts

diff --git a/package.json b/package.json
index 161efca0..17a973a6 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,9 @@
 		"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
 		"start": "vite preview --host --port 3002",
 		"tsCheck": "tsc --noEmit",
-		"pq": "pretty-quick"
+		"pq": "pretty-quick",
+		"test": "playwright test",
+		"test-ui": "playwright test --ui"
 	},
 	"dependencies": {
 		"@apache-arrow/ts": "^14.0.2",
diff --git a/playwright.config.ts b/playwright.config.ts
index c607f68f..98d35edb 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -24,18 +24,37 @@ export default defineConfig({
 	/* Configure projects for major browsers */
 	projects: [
 		{
-			name: 'chromium',
+			name: 'login - Chromium',
+			testMatch: '**/login.spec.ts', // Ensure login runs first
 			use: { ...devices['Desktop Chrome'] },
 		},
-
 		{
-			name: 'firefox',
+			name: 'users - Chromium',
+			testMatch: '**/users.spec.ts', // Ensure users runs second
+			use: { ...devices['Desktop Chrome'] },
+			dependencies: ['login - Chromium'],
+		},
+		{
+			name: 'login - Firefox',
+			testMatch: '**/login.spec.ts', // Ensure login runs first on Firefox
 			use: { ...devices['Desktop Firefox'] },
 		},
-
 		{
-			name: 'webkit',
+			name: 'users - Firefox',
+			testMatch: '**/users.spec.ts', // Ensure users runs second on Firefox
+			use: { ...devices['Desktop Firefox'] },
+			dependencies: ['login - Firefox'],
+		},
+		{
+			name: 'login - Safari',
+			testMatch: '**/login.spec.ts', // Ensure login runs first on Safari
+			use: { ...devices['Desktop Safari'] },
+		},
+		{
+			name: 'users - Safari',
+			testMatch: '**/users.spec.ts', // Ensure users runs second on Safari
 			use: { ...devices['Desktop Safari'] },
+			dependencies: ['login - Safari'],
 		},
 	],
 
diff --git a/src/components/Button/IconButton.tsx b/src/components/Button/IconButton.tsx
index ef64bdb3..e630037c 100644
--- a/src/components/Button/IconButton.tsx
+++ b/src/components/Button/IconButton.tsx
@@ -5,6 +5,7 @@ import classes from './Button.module.css';
 type IconButtonProps = {
 	onClick?: () => void;
 	renderIcon: () => ReactNode;
+	data_id?: string;
 	icon?: ReactNode;
 	active?: boolean;
 	tooltipLabel?: string;
@@ -17,6 +18,7 @@ const IconButton: FC<IconButtonProps> = (props) => {
 		return (
 			<Tooltip label={tooltipLabel}>
 				<ActionIcon
+					itemID={props.data_id}
 					size={props.size ? props.size : 'xl'}
 					className={`${classes.iconBtn} ${props.active && classes.iconBtnActive}`}
 					onClick={props.onClick && props.onClick}>
@@ -27,6 +29,7 @@ const IconButton: FC<IconButtonProps> = (props) => {
 	} else {
 		return (
 			<ActionIcon
+				itemID={props.data_id}
 				size={props.size ? props.size : 'xl'}
 				className={`${classes.iconBtn} ${props.active && classes.iconBtnActive}`}
 				onClick={props.onClick && props.onClick}>
diff --git a/src/pages/AccessManagement/Roles.tsx b/src/pages/AccessManagement/Roles.tsx
index 814750ed..deae7d95 100644
--- a/src/pages/AccessManagement/Roles.tsx
+++ b/src/pages/AccessManagement/Roles.tsx
@@ -189,7 +189,7 @@ const Roles: FC = () => {
 							Set Default OIDC Role{' '}
 						</Button>
 					)}
-					<IconButton renderIcon={renderDocsIcon} onClick={navigateToDocs} tooltipLabel="Docs" />
+					<IconButton renderIcon={renderDocsIcon} onClick={navigateToDocs} tooltipLabel="Docs" data_id="roles-docs" />
 				</Stack>
 			</Stack>
 			<ScrollArea className={classes.tableContainer} type="always">
diff --git a/tests/users.spec.ts b/tests/users.spec.ts
new file mode 100644
index 00000000..4f4babe5
--- /dev/null
+++ b/tests/users.spec.ts
@@ -0,0 +1,88 @@
+import { test, expect, BrowserContext, Page } from '@playwright/test';
+
+const TEST_URL = 'http://localhost:3001/users';
+
+test.describe('Users Page', () => {
+    let context: BrowserContext;
+    let page: Page;
+
+    test.beforeEach(async ({ browser }) => {
+        context = await browser.newContext();
+        page = await context.newPage();
+    });
+
+    test.afterEach(async () => {
+        await context.close();
+    });
+
+    // Check if the page title is correct i.e. Parseable | Users
+    test('has title', async ({ page }) => {
+        await page.goto(TEST_URL);
+        await expect(page).toHaveTitle(/Parseable | Users/);
+    });
+
+    test("should have a table with Roles", async ({ page }) => {
+        await page.goto(TEST_URL);
+
+        // Check if the Roles heading is visible
+        await expect(page.getByRole('heading', { name: 'Roles' })).toBeVisible();
+
+        // Check if the table with the correct headers is visible
+        const rolesTable = page.locator('table').filter({
+            // Check if the table has thead with Role and Access columns
+            has: page.locator('thead tr').filter({
+                has: page.locator('th').nth(0).filter({ hasText: 'Role' })
+            }).filter({
+                has: page.locator('th').nth(1).filter({ hasText: 'Access' })
+            })
+        });
+
+        await expect(rolesTable).toBeVisible();
+
+        // Check if the table has rows (excluding the header row)
+        const rows = rolesTable.locator('tbody tr');
+        const rowCount = await rows.count(); // Get the number of rows in the table
+        expect(rowCount).toBeGreaterThan(0);
+    });
+
+    test("should have a button to create a new Role", async ({ page }) => {
+        await page.goto(TEST_URL);
+
+        // Check if the Create Role button is visible
+        const createRoleButton = page.getByRole('button', { name: 'Create Role' });
+        await expect(createRoleButton).toBeVisible();
+    });
+
+    test("should have a button to set the default OIDC Role", async ({ page }) => {
+        await page.goto(TEST_URL);
+
+        // Check if the Set Default OIDC Role button is visible
+        const setDefaultRoleButton = page.getByRole('button', { name: 'Set Default OIDC Role' });
+        await expect(setDefaultRoleButton).toBeVisible();
+    });
+
+    test("should have a button to navigate to the Docs", async ({ page }) => {
+        await page.goto(TEST_URL);
+
+        // Check if the Docs button is visible
+        const docsButton = page.locator('[itemid="roles-docs"]');
+        await expect(docsButton).toBeVisible();
+    });
+
+    test("Should navigate to the Docs page when the Docs button is clicked", async ({ page }) => {
+        await page.goto(TEST_URL);
+
+        // Click on the Docs button and wait for a new page to open
+        const [newPage] = await Promise.all([
+            page.waitForEvent('popup'), // Wait for a new tab (popup) to open
+            page.locator('[itemid="roles-docs"]').click()
+        ]);
+
+        // Verify that the new page's URL matches the expected URL
+        await newPage.waitForLoadState();
+        // Wait for the page to load and check if the heading is present
+        const heading = newPage.locator('h1', { hasText: 'Role Based Access Control' });
+        await expect(heading).toBeVisible();
+    });
+
+});
\ No newline at end of file

From 29d595fc2426b69b89621249a74f42148e7455ca Mon Sep 17 00:00:00 2001
From: pranavgoel29 <pranavgoel29@gmail.com>
Date: Wed, 13 Nov 2024 19:53:08 +0530
Subject: [PATCH 06/17] Reset the playwright config file

---
 playwright.config.ts | 29 +++++------------------------
 1 file changed, 5 insertions(+), 24 deletions(-)

diff --git a/playwright.config.ts b/playwright.config.ts
index 98d35edb..c607f68f 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -24,37 +24,18 @@ export default defineConfig({
 	/* Configure projects for major browsers */
 	projects: [
 		{
-			name: 'login - Chromium',
-			testMatch: '**/login.spec.ts', // Ensure login runs first
+			name: 'chromium',
 			use: { ...devices['Desktop Chrome'] },
 		},
+
 		{
-			name: 'users - Chromium',
-			testMatch: '**/users.spec.ts', // Ensure users runs second
-			use: { ...devices['Desktop Chrome'] },
-			dependencies: ['login - Chromium'],
-		},
-		{
-			name: 'login - Firefox',
-			testMatch: '**/login.spec.ts', // Ensure login runs first on Firefox
-			use: { ...devices['Desktop Firefox'] },
-		},
-		{
-			name: 'users - Firefox',
-			testMatch: '**/users.spec.ts', // Ensure users runs second on Firefox
+			name: 'firefox',
 			use: { ...devices['Desktop Firefox'] },
-			dependencies: ['login - Firefox'],
-		},
-		{
-			name: 'login - Safari',
-			testMatch: '**/login.spec.ts', // Ensure login runs first on Safari
-			use: { ...devices['Desktop Safari'] },
 		},
+
 		{
-			name: 'users - Safari',
-			testMatch: '**/users.spec.ts', // Ensure users runs second on Safari
+			name: 'webkit',
 			use: { ...devices['Desktop Safari'] },
-			dependencies: ['login - Safari'],
 		},
 	],
 

From 6552ff7f3e8ddead9f38b77ed778f1d18b8c6add Mon Sep 17 00:00:00 2001
From: pranavgoel29 <pranavgoel29@gmail.com>
Date: Wed, 13 Nov 2024 19:53:43 +0530
Subject: [PATCH 07/17] Added tests for create role modal

---
 tests/users.spec.ts | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/tests/users.spec.ts b/tests/users.spec.ts
index 4f4babe5..686d572e 100644
--- a/tests/users.spec.ts
+++ b/tests/users.spec.ts
@@ -53,6 +53,45 @@ test.describe('Users Page', () => {
         await expect(createRoleButton).toBeVisible();
     });
 
+    test("should open the Create Role Modal when the Create Role button is clicked", async ({ page }) => {
+        await page.goto(TEST_URL);
+
+        // Click on the Create Role button
+        const createRoleButton = page.getByRole('button', { name: 'Create Role' });
+        await createRoleButton.click();
+
+        // Check if the Create Role Modal is visible
+        await expect(page.locator('text=Enter the name of the Role')).toBeVisible();
+    });
+
+    test.describe('Create Role Modal', () => {
+        test.beforeEach(async ({ page }) => {
+            await page.goto(TEST_URL);
+
+            // Click on the Create Role button
+            const createRoleButton = page.getByRole('button', { name: 'Create Role' });
+            await createRoleButton.click();
+        });
+
+        test("should have a text input to enter the name of the Role", async ({ page }) => {
+            // Check if the text input is visible
+            const roleNameInput = page.locator('input[placeholder="Type the name of the Role to create"]');
+            await expect(roleNameInput).toBeVisible();
+        });
+
+        test("should have a button to create the Role", async ({ page }) => {
+            // Check if the Create button is visible
+            const createButton = page.getByRole('button', { name: 'Create' });
+            await expect(createButton).toBeVisible();
+        });
+
+        test("should have a button to cancel creating the Role", async ({ page }) => {
+            // Check if the Cancel button is visible
+            const cancelButton = page.getByRole('button', { name: 'Cancel' });
+            await expect(cancelButton).toBeVisible();
+        });
+    });
+
     test("should have a button to set the default OIDC Role", async ({ page }) => {
         await page.goto(TEST_URL);
 

From b3959eb1a785432afbb48caa54679c38bb54335d Mon Sep 17 00:00:00 2001
From: pranavgoel29 <pranavgoel29@gmail.com>
Date: Thu, 14 Nov 2024 15:43:21 +0530
Subject: [PATCH 08/17] Added an identifier for the create role button

---
 src/pages/AccessManagement/Roles.tsx | 1 +
 tests/users.spec.ts                  | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/AccessManagement/Roles.tsx b/src/pages/AccessManagement/Roles.tsx
index deae7d95..42f2b806 100644
--- a/src/pages/AccessManagement/Roles.tsx
+++ b/src/pages/AccessManagement/Roles.tsx
@@ -173,6 +173,7 @@ const Roles: FC = () => {
 				<Stack style={{ flexDirection: 'row' }} gap={0}>
 					<Button
 						className={classes.createUserBtn}
+						itemID="create-role-button"
 						rightSection={<IconUserPlus size={px('1rem')} stroke={1.5} />}
 						onClick={() => {
 							setModalOpen(true);
diff --git a/tests/users.spec.ts b/tests/users.spec.ts
index 686d572e..2daba45e 100644
--- a/tests/users.spec.ts
+++ b/tests/users.spec.ts
@@ -81,7 +81,7 @@ test.describe('Users Page', () => {
 
         test("should have a button to create the Role", async ({ page }) => {
             // Check if the Create button is visible
-            const createButton = page.getByRole('button', { name: 'Create' });
+            const createButton = page.locator('[itemid="create-role-button"]');
             await expect(createButton).toBeVisible();
         });
 

From 5f91d4d869297418bf3770646583ba312b94f2ea Mon Sep 17 00:00:00 2001
From: pranavgoel29 <pranavgoel29@gmail.com>
Date: Thu, 14 Nov 2024 15:57:58 +0530
Subject: [PATCH 09/17] Added more button idetifiers to modal and cleaned the
 test file

---
 src/pages/AccessManagement/Roles.tsx |  8 +++++++-
 tests/users.spec.ts                  | 18 ++++++++++--------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/pages/AccessManagement/Roles.tsx b/src/pages/AccessManagement/Roles.tsx
index 42f2b806..99428296 100644
--- a/src/pages/AccessManagement/Roles.tsx
+++ b/src/pages/AccessManagement/Roles.tsx
@@ -314,12 +314,18 @@ const Roles: FC = () => {
 					<Button
 						variant="filled"
 						color="gray"
+						itemID="create-role-modal-button"
 						className={classes.modalActionBtn}
 						disabled={createVaildtion()}
 						onClick={handleCreateRole}>
 						Create
 					</Button>
-					<Button onClick={handleClose} variant="outline" color="gray" className={classes.modalCancelBtn}>
+					<Button
+						onClick={handleClose}
+						variant="outline"
+						color="gray"
+						itemID="cancel-role-modal-button"
+						className={classes.modalCancelBtn}>
 						Cancel
 					</Button>
 				</Group>
diff --git a/tests/users.spec.ts b/tests/users.spec.ts
index 2daba45e..1ac1d864 100644
--- a/tests/users.spec.ts
+++ b/tests/users.spec.ts
@@ -75,19 +75,21 @@ test.describe('Users Page', () => {
 
         test("should have a text input to enter the name of the Role", async ({ page }) => {
             // Check if the text input is visible
-            const roleNameInput = page.locator('input[placeholder="Type the name of the Role to create"]');
-            await expect(roleNameInput).toBeVisible();
-        });
+            await expect(page.locator('input[placeholder="Type the name of the Role to create"]')).toBeVisible();
+
+            // Check if the dropdown is visible
+            const accessLevelDropdown = page.locator('input[placeholder="Select privilege"]');
+            await expect(accessLevelDropdown).toBeVisible();
 
-        test("should have a button to create the Role", async ({ page }) => {
             // Check if the Create button is visible
-            const createButton = page.locator('[itemid="create-role-button"]');
+            const createButton = page.locator('[itemid="create-role-modal-button"]');
             await expect(createButton).toBeVisible();
-        });
 
-        test("should have a button to cancel creating the Role", async ({ page }) => {
+            // Check if the Create button is disabled by default
+            await expect(createButton).toBeDisabled();
+
             // Check if the Cancel button is visible
-            const cancelButton = page.getByRole('button', { name: 'Cancel' });
+            const cancelButton = page.locator('[itemid="cancel-role-modal-button"]');
             await expect(cancelButton).toBeVisible();
         });
     });

From 11ddc864b76863d94bb9d104a79598945ea60477 Mon Sep 17 00:00:00 2001
From: pranavgoel29 <pranavgoel29@gmail.com>
Date: Thu, 14 Nov 2024 18:10:45 +0530
Subject: [PATCH 10/17] Switched to playwright test-id structure

---
 src/components/Button/IconButton.tsx |  4 ++--
 src/pages/AccessManagement/Roles.tsx |  6 +++---
 tests/users.spec.ts                  | 14 +++++++-------
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/Button/IconButton.tsx b/src/components/Button/IconButton.tsx
index e630037c..26d5292d 100644
--- a/src/components/Button/IconButton.tsx
+++ b/src/components/Button/IconButton.tsx
@@ -18,7 +18,7 @@ const IconButton: FC<IconButtonProps> = (props) => {
 		return (
 			<Tooltip label={tooltipLabel}>
 				<ActionIcon
-					itemID={props.data_id}
+					data-testId={props.data_id}
 					size={props.size ? props.size : 'xl'}
 					className={`${classes.iconBtn} ${props.active && classes.iconBtnActive}`}
 					onClick={props.onClick && props.onClick}>
@@ -29,7 +29,7 @@ const IconButton: FC<IconButtonProps> = (props) => {
 	} else {
 		return (
 			<ActionIcon
-				itemID={props.data_id}
+				data-testId={props.data_id}
 				size={props.size ? props.size : 'xl'}
 				className={`${classes.iconBtn} ${props.active && classes.iconBtnActive}`}
 				onClick={props.onClick && props.onClick}>
diff --git a/src/pages/AccessManagement/Roles.tsx b/src/pages/AccessManagement/Roles.tsx
index 99428296..02bf09b8 100644
--- a/src/pages/AccessManagement/Roles.tsx
+++ b/src/pages/AccessManagement/Roles.tsx
@@ -173,7 +173,7 @@ const Roles: FC = () => {
 				<Stack style={{ flexDirection: 'row' }} gap={0}>
 					<Button
 						className={classes.createUserBtn}
-						itemID="create-role-button"
+						data-testId="create-role-button"
 						rightSection={<IconUserPlus size={px('1rem')} stroke={1.5} />}
 						onClick={() => {
 							setModalOpen(true);
@@ -314,7 +314,7 @@ const Roles: FC = () => {
 					<Button
 						variant="filled"
 						color="gray"
-						itemID="create-role-modal-button"
+						data-testId="create-role-modal-button"
 						className={classes.modalActionBtn}
 						disabled={createVaildtion()}
 						onClick={handleCreateRole}>
@@ -324,7 +324,7 @@ const Roles: FC = () => {
 						onClick={handleClose}
 						variant="outline"
 						color="gray"
-						itemID="cancel-role-modal-button"
+						data-testId="cancel-role-modal-button"
 						className={classes.modalCancelBtn}>
 						Cancel
 					</Button>
diff --git a/tests/users.spec.ts b/tests/users.spec.ts
index 1ac1d864..ff2757f0 100644
--- a/tests/users.spec.ts
+++ b/tests/users.spec.ts
@@ -73,23 +73,23 @@ test.describe('Users Page', () => {
             await createRoleButton.click();
         });
 
-        test("should have a text input to enter the name of the Role", async ({ page }) => {
+        test("create role modal should have the required elements", async ({ page }) => {
             // Check if the text input is visible
-            await expect(page.locator('input[placeholder="Type the name of the Role to create"]')).toBeVisible();
+            await expect(page.getByPlaceholder("Type the name of the Role to create")).toBeVisible();
 
             // Check if the dropdown is visible
-            const accessLevelDropdown = page.locator('input[placeholder="Select privilege"]');
+            const accessLevelDropdown = page.getByPlaceholder("Select privilege");
             await expect(accessLevelDropdown).toBeVisible();
 
             // Check if the Create button is visible
-            const createButton = page.locator('[itemid="create-role-modal-button"]');
+            const createButton = page.getByTestId('create-role-modal-button');
             await expect(createButton).toBeVisible();
 
             // Check if the Create button is disabled by default
             await expect(createButton).toBeDisabled();
 
             // Check if the Cancel button is visible
-            const cancelButton = page.locator('[itemid="cancel-role-modal-button"]');
+            const cancelButton = page.getByTestId("cancel-role-modal-button");
             await expect(cancelButton).toBeVisible();
         });
     });
@@ -106,7 +106,7 @@ test.describe('Users Page', () => {
         await page.goto(TEST_URL);
 
         // Check if the Docs button is visible
-        const docsButton = page.locator('[itemid="roles-docs"]');
+        const docsButton = page.getByTestId("roles-docs");
         await expect(docsButton).toBeVisible();
     });
 
@@ -116,7 +116,7 @@ test.describe('Users Page', () => {
         // Click on the Docs button and wait for a new page to open
         const [newPage] = await Promise.all([
             page.waitForEvent('popup'), // Wait for a new tab (popup) to open
-            page.locator('[itemid="roles-docs"]').click()
+            page.getByTestId("roles-docs").click()
         ]);
 
         // Verify that the new page's URL matches the expected URL

From 635a4b2543ff860ebcebd9ab6e0a52f91ae1100b Mon Sep 17 00:00:00 2001
From: pranavgoel29 <pranavgoel29@gmail.com>
Date: Fri, 15 Nov 2024 01:52:25 +0530
Subject: [PATCH 11/17] Added create and delete role tests

---
 src/pages/AccessManagement/PrivilegeTR.tsx |   2 +-
 tests/users.spec.ts                        | 137 +++++++++++++++++++--
 2 files changed, 125 insertions(+), 14 deletions(-)

diff --git a/src/pages/AccessManagement/PrivilegeTR.tsx b/src/pages/AccessManagement/PrivilegeTR.tsx
index d20b77c1..e91d75c4 100644
--- a/src/pages/AccessManagement/PrivilegeTR.tsx
+++ b/src/pages/AccessManagement/PrivilegeTR.tsx
@@ -274,7 +274,7 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 							<Button
 								variant="default"
 								className={classes.actionBtn}
-								aria-label="Delete user"
+								aria-label="Delete Role"
 								onClick={() => {
 									openDeleteRole();
 								}}>
diff --git a/tests/users.spec.ts b/tests/users.spec.ts
index ff2757f0..7a140ff5 100644
--- a/tests/users.spec.ts
+++ b/tests/users.spec.ts
@@ -1,6 +1,7 @@
 import { test, expect, BrowserContext, Page } from '@playwright/test';
 
 const TEST_URL = 'http://localhost:3001/users';
+const ROLE_NAME = 'playwright-test-role';
 
 test.describe('Users Page', () => {
     let context: BrowserContext;
@@ -68,32 +69,142 @@ test.describe('Users Page', () => {
         test.beforeEach(async ({ page }) => {
             await page.goto(TEST_URL);
 
-            // Click on the Create Role button
-            const createRoleButton = page.getByRole('button', { name: 'Create Role' });
-            await createRoleButton.click();
+            // const createRoleButton = page.getByRole('button', { name: 'Create Role' });
+            // await createRoleButton.click();
         });
 
         test("create role modal should have the required elements", async ({ page }) => {
-            // Check if the text input is visible
             await expect(page.getByPlaceholder("Type the name of the Role to create")).toBeVisible();
+            await expect(page.getByPlaceholder("Select privilege")).toBeVisible();
+            await expect(page.getByTestId('create-role-modal-button')).toBeDisabled();
+            await expect(page.getByTestId("cancel-role-modal-button")).toBeVisible();
+            // close the modal
+            await page.getByTestId("cancel-role-modal-button").click();
+            await expect(page.locator('text=Enter the name of the Role')).not.toBeVisible();
+        });
+
+        test('create a new Role', async ({ page }) => {
+            console.log("Starting 'create a new Role' test");
+
+            // Wait for one second
+            await page.waitForTimeout(1000);
+
+            // check if loading text is not visible on the roles section
+            await expect(page.locator('table').filter({ hasText: 'RoleAccessDeleteloading' }).locator('td')).not.toBeVisible();
+
+
+            // Inline the helper function here to check if it runs
+            const rolesTable = page.locator('table').filter({
+                has: page.locator('thead tr').filter({
+                    has: page.locator('th').nth(0).filter({ hasText: 'Role' })
+                }).filter({
+                    has: page.locator('th').nth(1).filter({ hasText: 'Access' })
+                })
+            });
+
+            const roleRow = rolesTable.locator('tbody tr').filter({ hasText: ROLE_NAME });
+            const roleRowCount = await roleRow.count();
+
+            console.log(`Found ${roleRowCount} rows with the role name "${ROLE_NAME}".`);
+            if (roleRowCount === 0) {
+                console.log(`Role "${ROLE_NAME}" does not exist. Skipping deletion.`);
+
+            } else {
+
+                console.log(`Role "${ROLE_NAME}" exists. Attempting to delete.`);
+                const deleteButton = roleRow.getByRole('button', { name: 'Delete Role' });
+                await deleteButton.click();
+
+                await page.waitForSelector('text=Are you sure you want to delete this role?');
+                const roleNameInput = page.getByPlaceholder('Please enter the Role');
+                await roleNameInput.fill(ROLE_NAME);
+
+                const confirmDeleteButton = page.getByRole('button', { name: 'Delete' });
+                await expect(confirmDeleteButton).toBeEnabled();
+                await confirmDeleteButton.click();
+
+                await expect(roleRow).not.toBeVisible();
+                console.log(`Successfully deleted role "${ROLE_NAME}".`);
+            }
+
+            console.log("Finished checking if role exists; now creating role.");
+
+            const createRoleButton = page.getByRole('button', { name: 'Create Role' });
+            await createRoleButton.click();
+            const roleNameInputCreate = page.getByPlaceholder("Type the name of the Role to create");
+            await roleNameInputCreate.fill(ROLE_NAME);
 
-            // Check if the dropdown is visible
             const accessLevelDropdown = page.getByPlaceholder("Select privilege");
-            await expect(accessLevelDropdown).toBeVisible();
+            await accessLevelDropdown.click();
+            await page.locator('.mantine-Select-option').filter({ hasText: /^admin$/ }).click();
 
-            // Check if the Create button is visible
+            // Wait for one second
+            await page.waitForTimeout(1000);
+            // Check if the Create button is enabled
             const createButton = page.getByTestId('create-role-modal-button');
-            await expect(createButton).toBeVisible();
+            await expect(createButton).toBeEnabled();
+            await createButton.click();
+
+            // wait for the modal to close, and the new Role to be added to the table
+            await page.waitForSelector('text=Enter the name of the Role', { state: 'detached' });
+            const newRoleRow = page.locator('tbody tr').filter({ hasText: ROLE_NAME });
+            await expect(newRoleRow).toBeVisible();
+            const newRoleAccess = newRoleRow.locator('td').nth(1);
+            // check if new role has admin access
+            await expect(newRoleAccess).toHaveText('admin');
+        });
+
+        test('delete the newly created Role', async ({ page }) => {
+            // Wait for one second
+            await page.waitForTimeout(1000);
+
+            // check if loading text is not visible on the roles section
+            await expect(page.locator('table').filter({ hasText: 'RoleAccessDeleteloading' }).locator('td')).not.toBeVisible();
+
+            // Inline the helper function here to check if it runs
+            const rolesTable = page.locator('table').filter({
+                has: page.locator('thead tr').filter({
+                    has: page.locator('th').nth(0).filter({ hasText: 'Role' })
+                }).filter({
+                    has: page.locator('th').nth(1).filter({ hasText: 'Access' })
+                })
+            });
+
+            const roleRow = rolesTable.locator('tbody tr').filter({ hasText: ROLE_NAME });
+            const roleRowCount = await roleRow.count();
 
-            // Check if the Create button is disabled by default
-            await expect(createButton).toBeDisabled();
+            console.log(`Found ${roleRowCount} rows with the role name "${ROLE_NAME}".`);
+            if (roleRowCount === 0) {
+                console.log(`Role "${ROLE_NAME}" does not exist. Skipping deletion.`);
+                return;
+            }
 
-            // Check if the Cancel button is visible
-            const cancelButton = page.getByTestId("cancel-role-modal-button");
-            await expect(cancelButton).toBeVisible();
+            console.log(`Role "${ROLE_NAME}" exists. Attempting to delete.`);
+            const deleteButton = roleRow.getByRole('button', { name: 'Delete Role' });
+            await deleteButton.click();
+
+            await page.waitForSelector('text=Are you sure you want to delete this role?');
+            const roleNameInput = page.getByPlaceholder('Please enter the Role');
+            await roleNameInput.fill(ROLE_NAME);
+
+            const confirmDeleteButton = page.getByRole('button', { name: 'Delete' });
+            await expect(confirmDeleteButton).toBeEnabled();
+            await confirmDeleteButton.click();
+
+            // check if loading text is not visible on the roles section
+            await expect(page.locator('table').filter({ hasText: 'RoleAccessDeleteloading' }).locator('td')).not.toBeVisible();
+
+            await expect(roleRow).not.toBeVisible();
+            console.log(`Successfully deleted role "${ROLE_NAME}".`);
+
+            await expect(rolesTable).toBeVisible();
+
+            const deletedRoleRow = rolesTable.locator('tbody tr').filter({ hasText: ROLE_NAME });
+            await expect(deletedRoleRow).not.toBeVisible();
         });
     });
 
+
     test("should have a button to set the default OIDC Role", async ({ page }) => {
         await page.goto(TEST_URL);
 

From cff1041d2fd0bd17f8f54c8ea6f47aa23c18a809 Mon Sep 17 00:00:00 2001
From: pranavgoel29 <pranavgoel29@gmail.com>
Date: Fri, 15 Nov 2024 01:53:16 +0530
Subject: [PATCH 12/17] Cleaned the create and delete role tests and added
 helper functions

---
 tests/helpers/users_roles.ts |  60 +++++++++
 tests/users.spec.ts          | 240 -----------------------------------
 tests/users_roles.spec.ts    | 187 +++++++++++++++++++++++++++
 3 files changed, 247 insertions(+), 240 deletions(-)
 create mode 100644 tests/helpers/users_roles.ts
 delete mode 100644 tests/users.spec.ts
 create mode 100644 tests/users_roles.spec.ts

diff --git a/tests/helpers/users_roles.ts b/tests/helpers/users_roles.ts
new file mode 100644
index 00000000..f9d6196d
--- /dev/null
+++ b/tests/helpers/users_roles.ts
@@ -0,0 +1,60 @@
+import { Page, expect } from '@playwright/test';
+
+const createNewRole = async (page: Page, ROLE_NAME: string, ACCESS: string) => {
+	const createRoleButton = page.getByRole('button', { name: 'Create Role' });
+	await createRoleButton.click();
+	const roleNameInputCreate = page.getByPlaceholder('Type the name of the Role to create');
+	await roleNameInputCreate.fill(ROLE_NAME);
+
+	const accessLevelDropdown = page.getByPlaceholder('Select privilege');
+	await accessLevelDropdown.click();
+	await page
+		.locator('.mantine-Select-option')
+		.filter({ hasText: `${ACCESS}` })
+		.click();
+
+	// Wait for one second
+	await page.waitForTimeout(1000);
+	// Check if the Create button is enabled
+	const createButton = page.getByTestId('create-role-modal-button');
+	await expect(createButton).toBeEnabled();
+	await createButton.click();
+};
+
+const deleteIfRoleExists = async (page: Page, ROLE_NAME: string) => {
+	const rolesTable = page.locator('table').filter({
+		has: page
+			.locator('thead tr')
+			.filter({
+				has: page.locator('th').nth(0).filter({ hasText: 'Role' }),
+			})
+			.filter({
+				has: page.locator('th').nth(1).filter({ hasText: 'Access' }),
+			}),
+	});
+
+	const roleRow = rolesTable.locator('tbody tr').filter({ hasText: ROLE_NAME });
+	const roleRowCount = await roleRow.count();
+
+	console.log(`Found ${roleRowCount} rows with the role name "${ROLE_NAME}".`);
+	if (roleRowCount === 0) {
+		console.log(`Role "${ROLE_NAME}" does not exist. Skipping deletion.`);
+	} else {
+		console.log(`Role "${ROLE_NAME}" exists. Attempting to delete.`);
+		const deleteButton = roleRow.getByRole('button', { name: 'Delete Role' });
+		await deleteButton.click();
+
+		await page.waitForSelector('text=Are you sure you want to delete this role?');
+		const roleNameInput = page.getByPlaceholder('Please enter the Role');
+		await roleNameInput.fill(ROLE_NAME);
+
+		const confirmDeleteButton = page.getByRole('button', { name: 'Delete' });
+		await expect(confirmDeleteButton).toBeEnabled();
+		await confirmDeleteButton.click();
+
+		await expect(roleRow).not.toBeVisible();
+		console.log(`Successfully deleted role "${ROLE_NAME}".`);
+	}
+};
+
+export { createNewRole, deleteIfRoleExists };
diff --git a/tests/users.spec.ts b/tests/users.spec.ts
deleted file mode 100644
index 7a140ff5..00000000
--- a/tests/users.spec.ts
+++ /dev/null
@@ -1,240 +0,0 @@
-import { test, expect, BrowserContext, Page } from '@playwright/test';
-
-const TEST_URL = 'http://localhost:3001/users';
-const ROLE_NAME = 'playwright-test-role';
-
-test.describe('Users Page', () => {
-    let context: BrowserContext;
-    let page: Page;
-
-    test.beforeEach(async ({ browser }) => {
-        context = await browser.newContext();
-        page = await context.newPage();
-    });
-
-    test.afterEach(async () => {
-        await context.close();
-    });
-
-    // Check if the page title is correct i.e. Parseable | Users
-    test('has title', async ({ page }) => {
-        await page.goto(TEST_URL);
-        await expect(page).toHaveTitle(/Parseable | Users/);
-    });
-
-    test("should have a table with Roles", async ({ page }) => {
-        await page.goto(TEST_URL);
-
-        // Check if the Roles heading is visible
-        await expect(page.getByRole('heading', { name: 'Roles' })).toBeVisible();
-
-        // Check if the table with the correct headers is visible
-        const rolesTable = page.locator('table').filter({
-            // Check if the table has thead with Role and Access columns
-            has: page.locator('thead tr').filter({
-                has: page.locator('th').nth(0).filter({ hasText: 'Role' })
-            }).filter({
-                has: page.locator('th').nth(1).filter({ hasText: 'Access' })
-            })
-        });
-
-        await expect(rolesTable).toBeVisible();
-
-        // Check if the table has rows (excluding the header row)
-        const rows = rolesTable.locator('tbody tr');
-        const rowCount = await rows.count(); // Get the number of rows in the table
-        expect(rowCount).toBeGreaterThan(0);
-    });
-
-    test("should have a button to create a new Role", async ({ page }) => {
-        await page.goto(TEST_URL);
-
-        // Check if the Create Role button is visible
-        const createRoleButton = page.getByRole('button', { name: 'Create Role' });
-        await expect(createRoleButton).toBeVisible();
-    });
-
-    test("should open the Create Role Modal when the Create Role button is clicked", async ({ page }) => {
-        await page.goto(TEST_URL);
-
-        // Click on the Create Role button
-        const createRoleButton = page.getByRole('button', { name: 'Create Role' });
-        await createRoleButton.click();
-
-        // Check if the Create Role Modal is visible
-        await expect(page.locator('text=Enter the name of the Role')).toBeVisible();
-    });
-
-    test.describe('Create Role Modal', () => {
-        test.beforeEach(async ({ page }) => {
-            await page.goto(TEST_URL);
-
-            // const createRoleButton = page.getByRole('button', { name: 'Create Role' });
-            // await createRoleButton.click();
-        });
-
-        test("create role modal should have the required elements", async ({ page }) => {
-            await expect(page.getByPlaceholder("Type the name of the Role to create")).toBeVisible();
-            await expect(page.getByPlaceholder("Select privilege")).toBeVisible();
-            await expect(page.getByTestId('create-role-modal-button')).toBeDisabled();
-            await expect(page.getByTestId("cancel-role-modal-button")).toBeVisible();
-            // close the modal
-            await page.getByTestId("cancel-role-modal-button").click();
-            await expect(page.locator('text=Enter the name of the Role')).not.toBeVisible();
-        });
-
-        test('create a new Role', async ({ page }) => {
-            console.log("Starting 'create a new Role' test");
-
-            // Wait for one second
-            await page.waitForTimeout(1000);
-
-            // check if loading text is not visible on the roles section
-            await expect(page.locator('table').filter({ hasText: 'RoleAccessDeleteloading' }).locator('td')).not.toBeVisible();
-
-
-            // Inline the helper function here to check if it runs
-            const rolesTable = page.locator('table').filter({
-                has: page.locator('thead tr').filter({
-                    has: page.locator('th').nth(0).filter({ hasText: 'Role' })
-                }).filter({
-                    has: page.locator('th').nth(1).filter({ hasText: 'Access' })
-                })
-            });
-
-            const roleRow = rolesTable.locator('tbody tr').filter({ hasText: ROLE_NAME });
-            const roleRowCount = await roleRow.count();
-
-            console.log(`Found ${roleRowCount} rows with the role name "${ROLE_NAME}".`);
-            if (roleRowCount === 0) {
-                console.log(`Role "${ROLE_NAME}" does not exist. Skipping deletion.`);
-
-            } else {
-
-                console.log(`Role "${ROLE_NAME}" exists. Attempting to delete.`);
-                const deleteButton = roleRow.getByRole('button', { name: 'Delete Role' });
-                await deleteButton.click();
-
-                await page.waitForSelector('text=Are you sure you want to delete this role?');
-                const roleNameInput = page.getByPlaceholder('Please enter the Role');
-                await roleNameInput.fill(ROLE_NAME);
-
-                const confirmDeleteButton = page.getByRole('button', { name: 'Delete' });
-                await expect(confirmDeleteButton).toBeEnabled();
-                await confirmDeleteButton.click();
-
-                await expect(roleRow).not.toBeVisible();
-                console.log(`Successfully deleted role "${ROLE_NAME}".`);
-            }
-
-            console.log("Finished checking if role exists; now creating role.");
-
-            const createRoleButton = page.getByRole('button', { name: 'Create Role' });
-            await createRoleButton.click();
-            const roleNameInputCreate = page.getByPlaceholder("Type the name of the Role to create");
-            await roleNameInputCreate.fill(ROLE_NAME);
-
-            const accessLevelDropdown = page.getByPlaceholder("Select privilege");
-            await accessLevelDropdown.click();
-            await page.locator('.mantine-Select-option').filter({ hasText: /^admin$/ }).click();
-
-            // Wait for one second
-            await page.waitForTimeout(1000);
-            // Check if the Create button is enabled
-            const createButton = page.getByTestId('create-role-modal-button');
-            await expect(createButton).toBeEnabled();
-            await createButton.click();
-
-            // wait for the modal to close, and the new Role to be added to the table
-            await page.waitForSelector('text=Enter the name of the Role', { state: 'detached' });
-            const newRoleRow = page.locator('tbody tr').filter({ hasText: ROLE_NAME });
-            await expect(newRoleRow).toBeVisible();
-            const newRoleAccess = newRoleRow.locator('td').nth(1);
-            // check if new role has admin access
-            await expect(newRoleAccess).toHaveText('admin');
-        });
-
-        test('delete the newly created Role', async ({ page }) => {
-            // Wait for one second
-            await page.waitForTimeout(1000);
-
-            // check if loading text is not visible on the roles section
-            await expect(page.locator('table').filter({ hasText: 'RoleAccessDeleteloading' }).locator('td')).not.toBeVisible();
-
-            // Inline the helper function here to check if it runs
-            const rolesTable = page.locator('table').filter({
-                has: page.locator('thead tr').filter({
-                    has: page.locator('th').nth(0).filter({ hasText: 'Role' })
-                }).filter({
-                    has: page.locator('th').nth(1).filter({ hasText: 'Access' })
-                })
-            });
-
-            const roleRow = rolesTable.locator('tbody tr').filter({ hasText: ROLE_NAME });
-            const roleRowCount = await roleRow.count();
-
-            console.log(`Found ${roleRowCount} rows with the role name "${ROLE_NAME}".`);
-            if (roleRowCount === 0) {
-                console.log(`Role "${ROLE_NAME}" does not exist. Skipping deletion.`);
-                return;
-            }
-
-            console.log(`Role "${ROLE_NAME}" exists. Attempting to delete.`);
-            const deleteButton = roleRow.getByRole('button', { name: 'Delete Role' });
-            await deleteButton.click();
-
-            await page.waitForSelector('text=Are you sure you want to delete this role?');
-            const roleNameInput = page.getByPlaceholder('Please enter the Role');
-            await roleNameInput.fill(ROLE_NAME);
-
-            const confirmDeleteButton = page.getByRole('button', { name: 'Delete' });
-            await expect(confirmDeleteButton).toBeEnabled();
-            await confirmDeleteButton.click();
-
-            // check if loading text is not visible on the roles section
-            await expect(page.locator('table').filter({ hasText: 'RoleAccessDeleteloading' }).locator('td')).not.toBeVisible();
-
-            await expect(roleRow).not.toBeVisible();
-            console.log(`Successfully deleted role "${ROLE_NAME}".`);
-
-            await expect(rolesTable).toBeVisible();
-
-            const deletedRoleRow = rolesTable.locator('tbody tr').filter({ hasText: ROLE_NAME });
-            await expect(deletedRoleRow).not.toBeVisible();
-        });
-    });
-
-
-    test("should have a button to set the default OIDC Role", async ({ page }) => {
-        await page.goto(TEST_URL);
-
-        // Check if the Set Default OIDC Role button is visible
-        const setDefaultRoleButton = page.getByRole('button', { name: 'Set Default OIDC Role' });
-        await expect(setDefaultRoleButton).toBeVisible();
-    });
-
-    test("should have a button to navigate to the Docs", async ({ page }) => {
-        await page.goto(TEST_URL);
-
-        // Check if the Docs button is visible
-        const docsButton = page.getByTestId("roles-docs");
-        await expect(docsButton).toBeVisible();
-    });
-
-    test("Should navigate to the Docs page when the Docs button is clicked", async ({ page }) => {
-        await page.goto(TEST_URL);
-
-        // Click on the Docs button and wait for a new page to open
-        const [newPage] = await Promise.all([
-            page.waitForEvent('popup'), // Wait for a new tab (popup) to open
-            page.getByTestId("roles-docs").click()
-        ]);
-
-        // Verify that the new page's URL matches the expected URL
-        await newPage.waitForLoadState();
-        // Wait for the page to load and check if the heading is present
-        const heading = newPage.locator('h1', { hasText: 'Role Based Access Control' });
-        await expect(heading).toBeVisible();
-    });
-
-});
\ No newline at end of file
diff --git a/tests/users_roles.spec.ts b/tests/users_roles.spec.ts
new file mode 100644
index 00000000..f722666d
--- /dev/null
+++ b/tests/users_roles.spec.ts
@@ -0,0 +1,187 @@
+import { test, expect, BrowserContext, Page } from '@playwright/test';
+import { createNewRole, deleteIfRoleExists } from './helpers/users_roles';
+
+const TEST_URL = 'http://localhost:3001/users';
+const ROLE_NAME = 'playwright-test-role';
+
+test.describe('users_roles section', () => {
+	let context: BrowserContext;
+	let page: Page;
+
+	test.beforeEach(async ({ browser }) => {
+		context = await browser.newContext();
+		page = await context.newPage();
+	});
+
+	test.afterEach(async () => {
+		await context.close();
+	});
+
+	// Check if the page title is correct i.e. Parseable | Users
+	test('has title', async ({ page }) => {
+		await page.goto(TEST_URL);
+		await expect(page).toHaveTitle(/Parseable | Users/);
+	});
+
+	test('should have a table with Roles', async ({ page }) => {
+		await page.goto(TEST_URL);
+
+		// Check if the Roles heading is visible
+		await expect(page.getByRole('heading', { name: 'Roles' })).toBeVisible();
+
+		// Check if the table with the correct headers is visible
+		const rolesTable = page.locator('table').filter({
+			// Check if the table has thead with Role and Access columns
+			has: page
+				.locator('thead tr')
+				.filter({
+					has: page.locator('th').nth(0).filter({ hasText: 'Role' }),
+				})
+				.filter({
+					has: page.locator('th').nth(1).filter({ hasText: 'Access' }),
+				}),
+		});
+
+		await expect(rolesTable).toBeVisible();
+
+		// Check if the table has rows (excluding the header row)
+		const rows = rolesTable.locator('tbody tr');
+		const rowCount = await rows.count(); // Get the number of rows in the table
+		expect(rowCount).toBeGreaterThan(0);
+	});
+
+	test('should have a button to create a new Role', async ({ page }) => {
+		await page.goto(TEST_URL);
+
+		// Check if the Create Role button is visible
+		const createRoleButton = page.getByRole('button', { name: 'Create Role' });
+		await expect(createRoleButton).toBeVisible();
+	});
+
+	test('should open the Create Role Modal when the Create Role button is clicked', async ({ page }) => {
+		await page.goto(TEST_URL);
+
+		// Click on the Create Role button
+		const createRoleButton = page.getByRole('button', { name: 'Create Role' });
+		await createRoleButton.click();
+
+		// Check if the Create Role Modal is visible
+		await expect(page.locator('text=Enter the name of the Role')).toBeVisible();
+	});
+
+	test.describe('Create Role Modal', () => {
+		test.beforeEach(async ({ page }) => {
+			await page.goto(TEST_URL);
+
+			// const createRoleButton = page.getByRole('button', { name: 'Create Role' });
+			// await createRoleButton.click();
+		});
+
+		test('create role modal should have the required elements', async ({ page }) => {
+			const createRoleButton = page.getByRole('button', { name: 'Create Role' });
+			await createRoleButton.click();
+
+			await expect(page.getByPlaceholder('Type the name of the Role to create')).toBeVisible();
+			await expect(page.getByPlaceholder('Select privilege')).toBeVisible();
+			await expect(page.getByTestId('create-role-modal-button')).toBeDisabled();
+			await expect(page.getByTestId('cancel-role-modal-button')).toBeVisible();
+			// close the modal
+			await page.getByTestId('cancel-role-modal-button').click();
+			await expect(page.locator('text=Enter the name of the Role')).not.toBeVisible();
+		});
+
+		test('create a new Role', async ({ page }) => {
+			// Wait for one second
+			await page.waitForTimeout(1000);
+
+			// check if loading text is not visible on the roles section
+			await expect(
+				page.locator('table').filter({ hasText: 'RoleAccessDeleteloading' }).locator('td'),
+			).not.toBeVisible();
+
+			// Delete the 'playwright-test-role' if it already exists
+			await deleteIfRoleExists(page, ROLE_NAME);
+
+			// Create a new Role
+			await createNewRole(page, ROLE_NAME, 'admin');
+
+			// wait for the modal to close, and the new Role to be added to the table
+			await page.waitForSelector('text=Enter the name of the Role', { state: 'detached' });
+			const newRoleRow = page.locator('tbody tr').filter({ hasText: ROLE_NAME });
+			await expect(newRoleRow).toBeVisible();
+			const newRoleAccess = newRoleRow.locator('td').nth(1);
+			// check if new role has admin access
+			await expect(newRoleAccess).toHaveText('admin');
+		});
+
+		test('delete the newly created Role', async ({ page }) => {
+			// Wait for one second
+			await page.waitForTimeout(1000);
+
+			// check if loading text is not visible on the roles section
+			await expect(
+				page.locator('table').filter({ hasText: 'RoleAccessDeleteloading' }).locator('td'),
+			).not.toBeVisible();
+
+			const rolesTable = page.locator('table').filter({
+				has: page
+					.locator('thead tr')
+					.filter({
+						has: page.locator('th').nth(0).filter({ hasText: 'Role' }),
+					})
+					.filter({
+						has: page.locator('th').nth(1).filter({ hasText: 'Access' }),
+					}),
+			});
+
+			const roleRow = rolesTable.locator('tbody tr').filter({ hasText: ROLE_NAME });
+			const roleRowCount = await roleRow.count();
+
+			if (roleRowCount === 0) {
+				// Create a new Role
+				await createNewRole(page, ROLE_NAME, 'admin');
+			} else {
+				// Delete the newly created Role
+				await deleteIfRoleExists(page, ROLE_NAME);
+			}
+
+			await page.waitForSelector('text=Are you sure you want to delete this role', { state: 'detached' });
+			await expect(rolesTable).toBeVisible();
+
+			const deletedRoleRow = rolesTable.locator('tbody tr').filter({ hasText: ROLE_NAME });
+			await expect(deletedRoleRow).not.toBeVisible();
+		});
+	});
+
+	test('should have a button to set the default OIDC Role', async ({ page }) => {
+		await page.goto(TEST_URL);
+
+		// Check if the Set Default OIDC Role button is visible
+		const setDefaultRoleButton = page.getByRole('button', { name: 'Set Default OIDC Role' });
+		await expect(setDefaultRoleButton).toBeVisible();
+	});
+
+	test('should have a button to navigate to the Docs', async ({ page }) => {
+		await page.goto(TEST_URL);
+
+		// Check if the Docs button is visible
+		const docsButton = page.getByTestId('roles-docs');
+		await expect(docsButton).toBeVisible();
+	});
+
+	test('Should navigate to the Docs page when the Docs button is clicked', async ({ page }) => {
+		await page.goto(TEST_URL);
+
+		// Click on the Docs button and wait for a new page to open
+		const [newPage] = await Promise.all([
+			page.waitForEvent('popup'), // Wait for a new tab (popup) to open
+			page.getByTestId('roles-docs').click(),
+		]);
+
+		// Verify that the new page's URL matches the expected URL
+		await newPage.waitForLoadState();
+		// Wait for the page to load and check if the heading is present
+		const heading = newPage.locator('h1', { hasText: 'Role Based Access Control' });
+		await expect(heading).toBeVisible();
+	});
+});

From 6559354fd334bbd96a80ec7c4330a99c7c84ec66 Mon Sep 17 00:00:00 2001
From: pranavgoel29 <pranavgoel29@gmail.com>
Date: Fri, 15 Nov 2024 01:54:08 +0530
Subject: [PATCH 13/17] Added test folder in 'tsconfig' for linting

---
 tsconfig.json | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/tsconfig.json b/tsconfig.json
index ce947166..add17ee2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,14 +1,19 @@
 {
 	"compilerOptions": {
 		"target": "ESNext",
-		"lib": ["DOM", "DOM.Iterable", "ESNext"],
+		"lib": [
+			"DOM",
+			"DOM.Iterable",
+			"ESNext"
+		],
 		"module": "ESNext",
 		"skipLibCheck": true,
 		"baseUrl": ".",
 		"paths": {
-			"@/*": ["src/*"]
+			"@/*": [
+				"src/*"
+			]
 		},
-
 		/* Bundler mode */
 		"moduleResolution": "bundler",
 		"allowImportingTsExtensions": true,
@@ -16,13 +21,19 @@
 		"isolatedModules": true,
 		"noEmit": true,
 		"jsx": "react-jsx",
-
 		/* Linting */
 		"strict": true,
 		"noUnusedLocals": true,
 		"noUnusedParameters": true,
 		"noFallthroughCasesInSwitch": true
 	},
-	"include": ["src"],
-	"references": [{ "path": "./tsconfig.node.json" }]
-}
+	"include": [
+		"src/**/*",
+		"tests/**/*"
+	],
+	"references": [
+		{
+			"path": "./tsconfig.node.json"
+		}
+	]
+}
\ No newline at end of file

From 4477fb15f92405608c32e3d06dfdb3e7bfea69f3 Mon Sep 17 00:00:00 2001
From: pranavgoel29 <pranavgoel29@gmail.com>
Date: Fri, 15 Nov 2024 02:07:39 +0530
Subject: [PATCH 14/17] Removed the unwanted console logs

---
 tests/helpers/users_roles.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/tests/helpers/users_roles.ts b/tests/helpers/users_roles.ts
index f9d6196d..4cdaaae0 100644
--- a/tests/helpers/users_roles.ts
+++ b/tests/helpers/users_roles.ts
@@ -36,11 +36,7 @@ const deleteIfRoleExists = async (page: Page, ROLE_NAME: string) => {
 	const roleRow = rolesTable.locator('tbody tr').filter({ hasText: ROLE_NAME });
 	const roleRowCount = await roleRow.count();
 
-	console.log(`Found ${roleRowCount} rows with the role name "${ROLE_NAME}".`);
-	if (roleRowCount === 0) {
-		console.log(`Role "${ROLE_NAME}" does not exist. Skipping deletion.`);
-	} else {
-		console.log(`Role "${ROLE_NAME}" exists. Attempting to delete.`);
+	if (roleRowCount !== 0) {
 		const deleteButton = roleRow.getByRole('button', { name: 'Delete Role' });
 		await deleteButton.click();
 
@@ -53,7 +49,6 @@ const deleteIfRoleExists = async (page: Page, ROLE_NAME: string) => {
 		await confirmDeleteButton.click();
 
 		await expect(roleRow).not.toBeVisible();
-		console.log(`Successfully deleted role "${ROLE_NAME}".`);
 	}
 };
 

From 88ba89c02286bb842ed4d2ef8f25169cd201c203 Mon Sep 17 00:00:00 2001
From: pranavgoel29 <pranavgoel29@gmail.com>
Date: Fri, 15 Nov 2024 02:09:56 +0530
Subject: [PATCH 15/17] Added jsdoc for user->roles helper functions

---
 tests/helpers/users_roles.ts | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/tests/helpers/users_roles.ts b/tests/helpers/users_roles.ts
index 4cdaaae0..0ecbe84b 100644
--- a/tests/helpers/users_roles.ts
+++ b/tests/helpers/users_roles.ts
@@ -1,5 +1,14 @@
 import { Page, expect } from '@playwright/test';
 
+/**
+ * Creates a new role in the application.
+ *
+ * @param page - The Playwright Page object representing the browser page.
+ * @param ROLE_NAME - The name of the role to be created.
+ * @param ACCESS - The access level to be assigned to the role.
+ *
+ * @returns A promise that resolves when the role creation process is complete.
+ */
 const createNewRole = async (page: Page, ROLE_NAME: string, ACCESS: string) => {
 	const createRoleButton = page.getByRole('button', { name: 'Create Role' });
 	await createRoleButton.click();
@@ -21,6 +30,17 @@ const createNewRole = async (page: Page, ROLE_NAME: string, ACCESS: string) => {
 	await createButton.click();
 };
 
+/**
+ * Deletes a role if it exists in the roles table on the given page.
+ *
+ * @param page - The Playwright Page object representing the browser page.
+ * @param ROLE_NAME - The name of the role to be deleted.
+ *
+ * @remarks
+ * This function locates the roles table on the page, checks if the specified role exists,
+ * and if it does, clicks the delete button, confirms the deletion, and verifies that the role
+ * is no longer visible in the table.
+ */
 const deleteIfRoleExists = async (page: Page, ROLE_NAME: string) => {
 	const rolesTable = page.locator('table').filter({
 		has: page

From 193542627709f598a70388669c1f99db5953f360 Mon Sep 17 00:00:00 2001
From: pranavgoel29 <pranavgoel29@gmail.com>
Date: Fri, 15 Nov 2024 19:39:09 +0530
Subject: [PATCH 16/17] Removed unused page variable

---
 tests/users_roles.spec.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/tests/users_roles.spec.ts b/tests/users_roles.spec.ts
index f722666d..1342b18a 100644
--- a/tests/users_roles.spec.ts
+++ b/tests/users_roles.spec.ts
@@ -6,11 +6,9 @@ const ROLE_NAME = 'playwright-test-role';
 
 test.describe('users_roles section', () => {
 	let context: BrowserContext;
-	let page: Page;
-
 	test.beforeEach(async ({ browser }) => {
 		context = await browser.newContext();
-		page = await context.newPage();
+		await context.newPage();
 	});
 
 	test.afterEach(async () => {

From 5f2a8f699895fa04f18c19c1df9a5ac3b7c5f6f7 Mon Sep 17 00:00:00 2001
From: pranavgoel29 <pranavgoel29@gmail.com>
Date: Fri, 15 Nov 2024 19:44:38 +0530
Subject: [PATCH 17/17] Updated imports in users_roles.spec.ts

---
 tests/users_roles.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/users_roles.spec.ts b/tests/users_roles.spec.ts
index 1342b18a..33a47c4d 100644
--- a/tests/users_roles.spec.ts
+++ b/tests/users_roles.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect, BrowserContext, Page } from '@playwright/test';
+import { test, expect, BrowserContext } from '@playwright/test';
 import { createNewRole, deleteIfRoleExists } from './helpers/users_roles';
 
 const TEST_URL = 'http://localhost:3001/users';