free-bird-operation-project · chessurisme · Jul 31, 2024 · Jul 31, 2024 · Jul 31, 2024 · Jul 31, 2024
diff --git a/src/app.js b/src/app.js
@@ -1,5 +1,5 @@
 import { MainPage } from '@pages/main-page'
-import { sanitizeElements } from '@utilities/sanitize-elements'
+import { sanitizeValue } from '@utilities/sanitize-value'
 
 /**
  * Class representing an App.
@@ -47,7 +47,7 @@ class App {
 			}
 
 			this.elements.forEach((element) => {
-				temporaryElements.push(sanitizeElements(element, 'HTMLElement'))
+				temporaryElements.push(sanitizeValue(element, 'HTMLElement'))
 			})
 
 			return temporaryElements

diff --git a/src/pages/main-page.js b/src/pages/main-page.js
@@ -0,0 +1,12 @@
+'use strict'
+
+class MainPage {
+	constructor() {
+		this.element = document.createElement('div')
+	}
+	create() {
+		return this.element
+	}
+}
+
+export { MainPage }
diff --git a/src/styles/root.css b/src/styles/root.css
@@ -0,0 +1,41 @@
+:root {
+	/*? Default */
+	--background-color: #0a0a0a;
+	--text-color: #eaeaea;
+
+	/* Colors */
+	--black-0: #0a0a0a;
+	--black-1: #161616;
+	--black-2: #1d1c1c;
+	--black-3: #232323;
+	--black-4: #2c2c2c;
+	--black-5: #363636;
+	--black-6: #454444;
+
+	--white-0: #eaeaea;
+	--white-1: #acacac;
+
+	/* Typography Sizes */
+	--text-xsmall: 8pt;
+	--text-small: 10pt;
+	--text-regular: 12pt;
+	--text-large: 14pt;
+	--text-xlarge: 18pt;
+	--text-xxlarge: 20pt;
+
+	/* Button Sizes */
+	--button-small: 32px;
+	--button-regular: 48px;
+
+	/* Margin and Padding Sizes */
+	--mp-xxsmall: 4px;
+	--mp-small: 8px;
+	--mp-regular: 16px;
+	--mp-large: 32px;
+	--mp-xlarge: 64px;
+
+	/* Cautionary */
+	--warning-color: #e10617;
+	--caution-color: #fdaa15;
+	--info-color: #007588;
+}
diff --git a/src/utilities/__tests__/sanitize-elements.test.js b/src/utilities/__tests__/sanitize-elements.test.js
diff --git a/src/utilities/__tests__/sanitize-value.test.js b/src/utilities/__tests__/sanitize-value.test.js
@@ -0,0 +1,61 @@
+import { JSDOM } from 'jsdom'
+import { sanitizeValue } from '@utilities/sanitize-value'
+
+const dom = new JSDOM('<!DOCTYPE html>')
+global.window = dom.window
+global.document = window.document
+global.HTMLElement = window.HTMLElement
+global.MouseEvent = window.MouseEvent
+global.DocumentFragment = window.DocumentFragment
+
+describe('sanitizeValue', () => {
+	beforeEach(() => {
+		jest.spyOn(console, 'error').mockImplementation(() => {})
+	})
+
+	afterEach(() => {
+		console.error.mockRestore()
+	})
+
+	it('should return null and log an error when value is undefined or null', () => {
+		expect(sanitizeValue(undefined, 'string')).toBeNull()
+		expect(console.error).toHaveBeenCalledWith('Invalid input: value is required.')
+
+		expect(sanitizeValue(null, 'string')).toBeNull()
+		expect(console.error).toHaveBeenCalledWith('Invalid input: value is required.')
+	})
+
+	it('should return null and log an error when type is missing', () => {
+		expect(sanitizeValue('test')).toBeNull()
+		expect(console.error).toHaveBeenCalledWith('Invalid input: type is required.')
+	})
+
+	it('should return null and log an error when value is of an invalid type', () => {
+		expect(sanitizeValue(new Date(), 'string')).toBeNull()
+		expect(console.error).toHaveBeenCalledWith(
+			'Notice: The value and type are not equal. value is of type object, while type is string.'
+		)
+	})
+
+	it('should return null and log an error when type is not a string', () => {
+		expect(sanitizeValue('test', 123)).toBeNull()
+		expect(console.error).toHaveBeenCalledWith('Invalid input: type must be a string.')
+	})
+
+	it('should return null and log an error when value does not match the specified type', () => {
+		expect(sanitizeValue('test', 'number')).toBeNull()
+		expect(console.error).toHaveBeenCalledWith(
+			'Notice: The value and type are not equal. value is of type string, while type is number.'
+		)
+	})
+
+	it('should return the value if all validations pass', () => {
+		expect(sanitizeValue('test', 'string')).toBe('test')
+		expect(sanitizeValue(123, 'number')).toBe(123)
+		expect(sanitizeValue([], 'array')).toEqual([])
+		expect(sanitizeValue({}, 'object')).toEqual({})
+		expect(sanitizeValue(false, 'boolean')).toBe(false)
+		expect(sanitizeValue(document.createElement('div'), 'HTMLElement')).toBeInstanceOf(HTMLElement)
+		expect(sanitizeValue(null, 'null')).toBeNull()
+	})
+})
diff --git a/src/utilities/sanitize-elements.js b/src/utilities/sanitize-elements.js
diff --git a/src/utilities/sanitize-value.js b/src/utilities/sanitize-value.js
@@ -0,0 +1,75 @@
+/**
+ * Sanitizes the input `value` based on the specified `type`.
+ * Validates that the `value` is of the correct type and that `type` is a valid string.
+ * If any validation fails, logs an error message and returns `null`.
+ *
+ * @param {*} value - The value to be validated. Can be of various types including boolean, string, array, object, number, HTMLElement, bigint, symbol, or function.
+ * @param {string} type - The expected type of the `value`. Should be a string representing the type (e.g., "boolean", "string", "array", "object", "number", "HTMLElement", "bigint", "symbol", "function", or "null").
+ *
+ * @returns {*} The original `value` if all validations pass; otherwise, `null`.
+ *
+ * @example
+ * sanitizeValue('test', 'string') // returns 'test'
+ * sanitizeValue(123, 'number') // returns 123
+ * sanitizeValue([], 'array') // returns []
+ * sanitizeValue({}, 'object') // returns {}
+ * sanitizeValue(false, 'boolean') // returns false
+ * sanitizeValue(document.createElement('div'), 'HTMLElement') // returns <div></div>
+ * sanitizeValue(null, 'string') // returns null
+ */
+function sanitizeValue(value, type) {
+	let flag = false
+	const conditionList = [
+		{
+			condition: value === undefined || value === null,
+			message: 'Invalid input: value is required.'
+		},
+		{
+			condition: typeof type !== 'string',
+			message: 'Invalid input: type must be a string.'
+		},
+		{
+			condition: !type,
+			message: 'Invalid input: type is required.'
+		},
+		{
+			condition:
+				!['boolean', 'string', 'object', 'number', 'bigint', 'symbol', 'function'].includes(
+					typeof value
+				) &&
+				!Array.isArray(value) &&
+				!(value instanceof HTMLElement),
+			message:
+				'Invalid input: value must be of a valid type (boolean, string, array, object, number, HTMLElement, bigint, symbol, or function).'
+		},
+		{
+			condition: !(
+				(type === 'array' && Array.isArray(value)) ||
+				(type === 'object' &&
+					value !== null &&
+					typeof value === 'object' &&
+					!Array.isArray(value) &&
+					!(value instanceof HTMLElement)) ||
+				(type === 'HTMLElement' && value instanceof HTMLElement) ||
+				(type === 'null' && value === null) ||
+				type === typeof value
+			),
+			message: `Notice: The value and type are not equal. Value is of type ${typeof value}, while type is ${type}.`
+		}
+	]
+
+	conditionList.forEach((condition) => {
+		if (condition.condition) {
+			console.error(condition.message)
+			flag = true
+		}
+	})
+
+	if (flag) {
+		return null
+	}
+
+	return value
+}
+
+export { sanitizeValue }
diff --git a/webpack.config.dev.js b/webpack.config.dev.js
@@ -13,8 +13,8 @@ module.exports = merge(commonConfig, {
 	module: {
 		rules: [
 			{
-				test: /\.css$/,
-				use: ['style-loader', 'css-loader']
+				test: /\.s[ac]ss$/i,
+				use: ['style-loader', 'css-loader', 'sass-loader']
 			}
 		]
 	}

diff --git a/webpack.config.prod.js b/webpack.config.prod.js
@@ -33,7 +33,9 @@ module.exports = merge(commonConfig, {
 			}),
 			new TerserPlugin({
 				terserOptions: {
-					compress: {}
+					compress: {
+						drop_console: true
+					}
 				}
 			})
 		]