Implement Container component (#13)

* feat: implement Container component Introduce the Container component to handle the creation and removal of container elements. This component ensures that the provided config is verified using the `isConfigVerified` utility. The `create` method sets the attributes for the container, while the `remove` method handles the removal of the container from the DOM. * test: add tests for Container component Adds tests for the Container component using JSDOM and Jest. Tests include container creation, text or element appending, and container removal. Ensures proper functionality of Container's create and remove methods.
free-bird-operation-project · Jul 1, 2024 · 351708d · 351708d
1 parent dd71c1a
commit 351708d
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 0 deletions.
diff --git a/src/components/__tests__/container.test.js b/src/components/__tests__/container.test.js
@@ -0,0 +1,65 @@
+'use strict'
+
+import { JSDOM } from 'jsdom'
+import { Container } from '@components/container'
+
+const dom = new JSDOM('<!DOCTYPE html>')
+global.window = dom.window
+global.document = window.document
+global.HTMLElement = window.HTMLElement
+
+describe('Container', () => {
+	beforeEach(() => {
+		document.body.innerHTML = ''
+	})
+
+	it('should create the container when initiated and call the create method', () => {
+		const config = {
+			id: 'test-container',
+			class_name: 'container-class'
+		}
+
+		const containerInstance = new Container(config)
+		const containerElement = containerInstance.create()
+
+		document.body.appendChild(containerElement)
+		const container = document.getElementById('test-container')
+
+		expect(document.body.innerHTML).not.toBeNull()
+		expect(containerElement).toBeDefined()
+		expect(container).not.toBeNull()
+		expect(container.id).toBe('test-container')
+		expect(container.className).toBe('container-class')
+	})
+
+	it('should append text or any external element to the container', () => {
+		const config = {
+			id: 'test-container',
+			class_name: 'container-class'
+		}
+
+		const containerInstance = new Container(config)
+		const containerElement = containerInstance.create()
+		document.body.appendChild(containerElement)
+
+		const textNode = document.createTextNode('Hello, world!')
+		containerElement.appendChild(textNode)
+
+		expect(containerElement.textContent).toBe('Hello, world!')
+	})
+
+	it('should remove the container when the remove method is called', () => {
+		const config = {
+			id: 'test-container',
+			class_name: 'container-class'
+		}
+
+		const containerInstance = new Container(config)
+		const containerElement = containerInstance.create()
+		document.body.appendChild(containerElement)
+
+		containerInstance.remove()
+
+		expect(document.getElementById('test-container')).toBeNull()
+	})
+})
diff --git a/src/components/container.js b/src/components/container.js
@@ -0,0 +1,36 @@
+'use strict'
+
+import { isConfigVerified } from '@utilities/config/config-verifier'
+import { setAttributes } from '@utilities/components/set-attributes'
+
+class Container {
+	#config
+
+	constructor(config) {
+		this.#config = isConfigVerified('container', config) ? config : {}
+	}
+
+	create() {
+		const { id, class_name } = this.#config
+		const CONTAINER = document.createElement('div')
+		setAttributes(CONTAINER, {
+			id: `${id}`,
+			class: `${class_name}`
+		})
+		return CONTAINER
+	}
+
+	remove() {
+		const { id } = this.#config
+		if (!id) return
+
+		let CONTAINER = document.getElementById(`${id}`)
+
+		if (!CONTAINER) return
+
+		CONTAINER.remove()
+		CONTAINER = null
+	}
+}
+
+export { Container }