Skip to content

Commit 019046b

Browse files
iamitprakashsunilk429
iamitprakash
and
sunilk429
authored
Dev to Main Sync (#929)
Feature: add skills field (#918) * featureUrl removed * removed feature/group * change class inputBox instead radioButton * task level section removed * unncessary object destruction under featureflag removed * status=available typo fixed * tests added for updated changes * Tests fixed * Added data-testid for testing,also added new tests * Test api updated to staging * refactored for readability * created a constants file * API_BASE_URL changed to stating for testing * Added data-testid for testing,also added new tests * Test api updated to staging * refactored for readability * added skills field * Tests for skills field added * restore accidently deleted css * fixed checkbox styling * fixed (Select aAll) typo and removed repeated code * Added new tests * update query selector to element id * mock skills added for testing * SKILL_TREE_BACKEND_BASE_URL imported from constants Co-authored-by: sunilk429 <[email protected]>
2 parents 94cfff5 + 61dc459 commit 019046b

File tree

6 files changed

+554
-6
lines changed

6 files changed

+554
-6
lines changed

‎__tests__/tasks/task-dependency.test.js‎

Lines changed: 95 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,13 @@ const puppeteer = require('puppeteer');
22
const { tags } = require('../../mock-data/tags');
33
const { levels } = require('../../mock-data/levels');
44
const { users } = require('../../mock-data/users');
5-
const { STAGING_API_URL } = require('../../mock-data/constants');
5+
const {
6+
STAGING_API_URL,
7+
SKILL_TREE_BACKEND_BASE_URL,
8+
} = require('../../mock-data/constants');
9+
const { skills } = require('../../mock-data/skills');
610

7-
describe('Input box', () => {
11+
describe('Task Form', () => {
812
let browser;
913
let page;
1014
jest.setTimeout(60000);
@@ -27,6 +31,7 @@ describe('Input box', () => {
2731
[`${STAGING_API_URL}/levels`]: levels,
2832
[`${STAGING_API_URL}/users`]: users,
2933
[`${STAGING_API_URL}/tags`]: tags,
34+
[`${SKILL_TREE_BACKEND_BASE_URL}/skills`]: skills,
3035
};
3136

3237
if (mockResponses[url]) {
@@ -136,7 +141,7 @@ describe('Input box', () => {
136141

137142
// Dev Mode Tests
138143
describe('Dev Mode Behavior', () => {
139-
beforeAll(async () => {
144+
beforeEach(async () => {
140145
await page.goto('http://localhost:8000/task?dev=true');
141146
await page.waitForNetworkIdle();
142147
});
@@ -172,5 +177,92 @@ describe('Input box', () => {
172177
const dependsOnField = await page.$('[data-testid="dependsOn"]');
173178
expect(dependsOnField).toBeTruthy();
174179
});
180+
181+
it('should show skills multi-select component', async () => {
182+
const skillsComponent = await page.$eval(
183+
'[data-testid="skills"] .multi-select-container',
184+
(el) =>
185+
window.getComputedStyle(el.closest('[data-testid="skills"]')).display,
186+
);
187+
expect(skillsComponent).not.toBe('none');
188+
});
189+
190+
it('should initialize skills multi-select with options', async () => {
191+
await page.waitForSelector('[data-testid="skills-multi-select"]');
192+
193+
// Click to open dropdown
194+
await page.click('[data-testid="skills-select-button"]');
195+
196+
// Check if options are loaded
197+
const options = await page.$$eval(
198+
'[data-testid="option-label"]',
199+
(elements) => elements.map((el) => el.textContent.trim()),
200+
);
201+
202+
expect(options).toContain('(Select All)');
203+
expect(options).toContain('JavaScript');
204+
expect(options).toContain('React');
205+
expect(options).toContain('Node.js');
206+
});
207+
208+
it('should allow selecting and deselecting skills', async () => {
209+
await page.waitForSelector('[data-testid="skills-multi-select"]');
210+
211+
// Open dropdown
212+
await page.click('[data-testid="skills-select-button"]');
213+
214+
// Select JavaScript skill
215+
await page.click('[data-value="1"]');
216+
217+
// Check if badge is created
218+
const badge = await page.$eval(
219+
'[data-testid="selected-items"] .badge .text',
220+
(el) => el.textContent,
221+
);
222+
expect(badge).toBe('JavaScript');
223+
224+
// Remove skill
225+
await page.click('.badge .remove');
226+
227+
// Check if badge is removed
228+
const badges = await page.$$('.badge');
229+
expect(badges.length).toBe(0);
230+
});
231+
232+
it('should allow selecting all skills with (Select All)', async () => {
233+
await page.waitForSelector('[data-testid="skills-multi-select"]');
234+
235+
// Open dropdown
236+
await page.click('[data-testid="skills-select-button"]');
237+
238+
// Click (Select All)
239+
await page.click('[data-testid="option"][data-value="select-all"]');
240+
241+
// Check if all skills are selected as badges
242+
const badges = await page.$$eval(
243+
'[data-testid="selected-items"] .badge .text',
244+
(elements) => elements.map((el) => el.textContent.trim()),
245+
);
246+
expect(badges).toEqual(['JavaScript', 'React', 'Node.js']);
247+
});
248+
249+
it('should allow navigating and selecting options using the keyboard', async () => {
250+
await page.waitForSelector('[data-testid="skills-multi-select"]');
251+
252+
// Open dropdown
253+
await page.click('[data-testid="skills-select-button"]');
254+
255+
// Navigate and select an option
256+
await page.keyboard.press('ArrowDown');
257+
await page.keyboard.press('ArrowDown');
258+
await page.keyboard.press('Enter');
259+
260+
// Verify badge is created
261+
const badges = await page.$$eval(
262+
'[data-testid="selected-items"] .badge .text',
263+
(elements) => elements.map((el) => el.textContent.trim()),
264+
);
265+
expect(badges).toContain('JavaScript');
266+
});
175267
});
176268
});

‎mock-data/constants.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
const STAGING_API_URL = 'https://staging-api.realdevsquad.com';
22
const LOCAL_TEST_PAGE_URL = 'http://localhost:8000';
3+
const SKILL_TREE_BACKEND_BASE_URL =
4+
'https://services.realdevsquad.com/skilltree/v1';
35

46
module.exports = {
57
STAGING_API_URL,
68
LOCAL_TEST_PAGE_URL,
9+
SKILL_TREE_BACKEND_BASE_URL,
710
};

‎mock-data/skills/index.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const skills = [
2+
{ id: 1, name: 'JavaScript' },
3+
{ id: 2, name: 'React' },
4+
{ id: 3, name: 'Node.js' },
5+
];
6+
7+
module.exports = { skills };

‎task/index.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,53 @@
101101
/>
102102
<span id="linksDisplay" class="display"></span>
103103
</div>
104+
<div class="inputBox" id="skillsContainer" data-testid="skills">
105+
<label for="">Skills: </label>
106+
<div class="multi-select-container" data-testid="skills-multi-select">
107+
<button
108+
type="button"
109+
class="multi-select-button"
110+
data-testid="skills-select-button"
111+
>
112+
<span class="placeholder">Select skills</span>
113+
<div class="selected-items" data-testid="selected-items"></div>
114+
<svg
115+
xmlns="http://www.w3.org/2000/svg"
116+
width="24"
117+
height="24"
118+
viewBox="0 0 24 24"
119+
fill="none"
120+
stroke="currentColor"
121+
stroke-width="2"
122+
stroke-linecap="round"
123+
stroke-linejoin="round"
124+
class="dropdown-icon"
125+
>
126+
<path d="m6 9 6 6 6-6"></path>
127+
</svg>
128+
</button>
129+
<div class="popover">
130+
<input
131+
type="text"
132+
class="search-input"
133+
placeholder="Search..."
134+
data-testid="search-input"
135+
/>
136+
<div class="options-list" data-testid="options-list">
137+
<div
138+
class="option"
139+
data-value="select-all"
140+
data-testid="option"
141+
>
142+
<span class="option-label" data-testid="option-label"
143+
>(Select All)</span
144+
>
145+
<span class="checkbox" data-testid="option-checkbox"></span>
146+
</div>
147+
</div>
148+
</div>
149+
</div>
150+
</div>
104151
<div class="inputBox" data-testid="status">
105152
<label for="status" class="editable">
106153
Status:<span class="required">*</span>

0 commit comments

Comments
 (0)