test: Add unit tests for createCustomElement

Real-Dev-Squad · Jul 16, 2023 · 3611358 · 3611358
1 parent 8d33633
commit 3611358
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 6 deletions.
diff --git a/__tests__/taskRequests/unit/createCustomElement.test.js b/__tests__/taskRequests/unit/createCustomElement.test.js
@@ -0,0 +1,76 @@
+const puppeteer = require('puppeteer');
+const { createCustomElement } = require('../../../taskRequests/util');
+
+describe('createCustomElement', () => {
+  let browser;
+  let page;
+
+  beforeAll(async () => {
+    browser = await puppeteer.launch({
+      headless: true,
+      ignoreHTTPSErrors: true,
+      args: ['--incognito', '--disable-web-security'],
+      devtools: false,
+    });
+    page = await browser.newPage();
+
+    await page.goto('http://localhost:8000/taskRequests');
+    await page.waitForNetworkIdle();
+  });
+
+  afterAll(async () => {
+    await browser.close();
+  });
+
+  describe('tagName', () => {
+    it('should create tag with provided tagName', async () => {
+      const tag = await page.evaluate(
+        () => createCustomElement({ tagName: 'p' }).tagName,
+      );
+      expect(tag).toMatch(/p/i);
+    });
+
+    it('should not add tagName attribute', async () => {
+      const tagNameAttr = await page.evaluate(() =>
+        createCustomElement({ tagName: 'p' }).getAttribute('tagName'),
+      );
+
+      expect(tagNameAttr).toBeNull();
+    });
+  });
+
+  describe('className', () => {
+    it('should add the class when class key is provided using string', async () => {
+      const classes = await page.evaluate(() => [
+        ...createCustomElement({ tagName: 'p', class: 'test-class' }).classList,
+      ]);
+
+      expect(classes).toHaveLength(1);
+      expect(classes).toContain('test-class');
+    });
+
+    it('should add multiple classes when class key has array as value', async () => {
+      const classes = await page.evaluate(() => [
+        ...createCustomElement({
+          tagName: 'p',
+          class: ['test-class-1', 'test-class-2'],
+        }).classList,
+      ]);
+
+      expect(classes).toHaveLength(2);
+      expect(classes).toStrictEqual(['test-class-1', 'test-class-2']);
+    });
+  });
+
+  describe('textContent', () => {
+    it('should add textContent key when specified', async () => {
+      const textContent = await page.evaluate(
+        () =>
+          createCustomElement({ tagName: 'p', textContent: 'test content' })
+            .textContent,
+      );
+
+      expect(textContent).toBe('test content');
+    });
+  });
+});
diff --git a/taskRequests/details/index.html b/taskRequests/details/index.html
@@ -11,12 +11,12 @@
       href="https://fonts.googleapis.com/css2?family=Inter:wght@100;400;700;800&display=swap"
       rel="stylesheet"
     />
-    <link rel="stylesheet" href="./style.css" />
+    <link rel="stylesheet" href="/taskRequests/details/style.css" />
 
     <title>Task Requests | Real Dev Squad</title>
     <script src="/helpers/loadENV.js"></script>
     <script src="/taskRequests/util.js"></script>
-    <script src="./script.js" defer></script>
+    <script src="/taskRequests/script.js" defer></script>
   </head>
   <body>
     <div class="header">

diff --git a/taskRequests/index.html b/taskRequests/index.html
@@ -13,11 +13,11 @@
     />
 
     <title>Task Requests | Real Dev Squad</title>
-    <link rel="stylesheet" href="./style.css" />
+    <link rel="stylesheet" href="/taskRequests/style.css" />
     <script src="/helpers/loadENV.js"></script>
-    <script src="./constants.js"></script>
-    <script src="./util.js"></script>
-    <script src="./script.js" defer></script>
+    <script src="/taskRequests/constants.js"></script>
+    <script src="/taskRequests/util.js"></script>
+    <script src="/taskRequests/script.js" defer></script>
   </head>
 
   <body>

diff --git a/taskRequests/util.js b/taskRequests/util.js
@@ -23,3 +23,7 @@ function createCustomElement(domObjectMap) {
   }
   return el;
 }
+
+module.exports = {
+  createCustomElement,
+};