update query selector to element id

Real-Dev-Squad · Dec 5, 2024 · 29a0f7b · 29a0f7b
1 parent 3ff3a34
commit 29a0f7b
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 22 deletions.
diff --git a/__tests__/tasks/task-dependency.test.js b/__tests__/tasks/task-dependency.test.js
@@ -1,6 +1,6 @@
-const API_BASE_URL = 'https://staging-api.realdevsquad.com';
+const API_BASE_URL = 'https://api.realdevsquad.com';
 const SKILL_TREE_BACKEND_BASE_URL =
-  'https://services.realdevsquad.com/staging-skilltree/v1';
+  'https://services.realdevsquad.com/skilltree/v1';
 const puppeteer = require('puppeteer');
 const { tags } = require('../../mock-data/tags');
 const { levels } = require('../../mock-data/levels');
@@ -175,6 +175,7 @@ describe('Input box', () => {
       const dependsOnField = await page.$('[data-testid="dependsOn"]');
       expect(dependsOnField).toBeTruthy();
     });
+
     it('should show skills multi-select component', async () => {
       const skillsComponent = await page.$eval(
         '[data-testid="skills"] .multi-select-container',

diff --git a/task/index.html b/task/index.html
@@ -97,7 +97,7 @@
           />
           <span id="linksDisplay" class="display"></span>
         </div>
-        <div class="inputBox" data-testid="skills">
+        <div class="inputBox" id="skillsContainer" data-testid="skills">
           <label for="">Skills: </label>
           <div class="multi-select-container" data-testid="skills-multi-select">
             <button

diff --git a/task/script.js b/task/script.js
@@ -27,12 +27,27 @@ function hideElements(isDev, elementIds) {
 // hide fields if dev=true
 hideElements(isDev, containers);
 
-const skillComponentDiv = document
-  .querySelector('.multi-select-button')
-  ?.closest('.inputBox');
-if (!isDev && skillComponentDiv) {
-  skillComponentDiv.style.display = 'none';
+//Skills field under dev=true
+const skillsContainer = document.getElementById('skillsContainer');
+
+if (!isDev && skillsContainer) {
+  skillsContainer.style.display = 'none';
 }
+
+async function fetchSkills() {
+  if (!isDev) return [];
+
+  try {
+    const response = await fetch(SKILLS_API, {
+      credentials: 'include',
+    });
+    return await response.json();
+  } catch (error) {
+    alert(`Error fetching skills: ${error}`);
+    return [];
+  }
+}
+
 class MultiSelect {
   constructor(container) {
     this.container = container;
@@ -52,7 +67,7 @@ class MultiSelect {
 
   async initializeSkills() {
     try {
-      const skills = await this.fetchSkills();
+      const skills = await fetchSkills();
       this.options = skills.map((skill) => ({
         value: skill.id.toString(),
         label: skill.name,
@@ -63,18 +78,6 @@ class MultiSelect {
     }
   }
 
-  async fetchSkills() {
-    if (!isDev) return [];
-    try {
-      const response = await fetch(SKILLS_API, {
-        credentials: 'include',
-      });
-      return await response.json();
-    } catch (error) {
-      alert(`Error fetching skills: ${error}`);
-      return [];
-    }
-  }
   getSelectedSkills() {
     return Array.from(this.selectedValues)
       .map((value) => {
@@ -93,6 +96,7 @@ class MultiSelect {
     this.options.forEach((option) => {
       const optionElement = document.createElement('div');
       optionElement.className = 'option';
+      optionElement.dataset.testid = 'option';
       optionElement.dataset.value = option.value;
       optionElement.innerHTML = `
       <span class="option-label" data-testid="option-label">${option.label}</span>

diff --git a/task/style.css b/task/style.css
@@ -366,7 +366,7 @@ footer {
   color: #101828;
   display: flex;
   align-items: center;
-  justify-content: space-between; /* This moves checkbox to right */
+  justify-content: space-between;
   padding: 8px 12px;
   border-radius: 4px;
   margin: 2px 0;