Skip to content

Commit

Permalink
Fix/remove outdated fields (#914)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@sunilk429
sunilk429 authored Dec 4, 2024
1 parent 2f2d354 commit cf01917
Show file tree
Hide file tree
Showing 4 changed files with 259 additions and 125 deletions.
210 changes: 146 additions & 64 deletions __tests__/tasks/task-dependency.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,79 +16,161 @@ describe('Input box', () => {
args: ['--incognito', '--disable-web-security'],
devtools: false,
});
page = await browser.newPage();

await page.setRequestInterception(true);

page.on('request', (interceptedRequest) => {
const url = interceptedRequest.url();
if (url === `${STAGING_API_URL}/levels`) {
interceptedRequest.respond({
status: 200,
contentType: 'application/json',
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
},
body: JSON.stringify(levels),
});
} else if (url === `${STAGING_API_URL}/users`) {
interceptedRequest.respond({
status: 200,
contentType: 'application/json',
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
},
body: JSON.stringify(users),
});
} else if (url === `${STAGING_API_URL}/tags`) {
interceptedRequest.respond({
status: 200,
contentType: 'application/json',
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
},
body: JSON.stringify(tags),
});
} else {
interceptedRequest.continue();
}
});
// Mock API response setup
const interceptAPI = async (page) => {
await page.setRequestInterception(true);
page.on('request', (interceptedRequest) => {
const url = interceptedRequest.url();

const mockResponses = {
[`${STAGING_API_URL}/levels`]: levels,
[`${STAGING_API_URL}/users`]: users,
[`${STAGING_API_URL}/tags`]: tags,
};

if (mockResponses[url]) {
interceptedRequest.respond({
status: 200,
contentType: 'application/json',
headers: {
'Access-Control-Allow-Origin': '*',
},
body: JSON.stringify(mockResponses[url]),
});
} else {
interceptedRequest.continue();
}
});
};

// Open a shared page instance and intercept API for all tests
page = await browser.newPage();
await interceptAPI(page);
await page.goto('http://localhost:8000/task');
await page.waitForNetworkIdle();
});

afterAll(async () => {
await browser.close();
});
it('DependsOn input box should exist', async () => {
const inputBox = await page.evaluate(() =>
document.querySelector('.inputBox'),
);
const linksDisplay = await page.evaluate(() =>
document.querySelector('#linksDisplay'),
);

// Form Presence Tests
describe('Form Field Presence', () => {
it('should display the title field', async () => {
const titleField = await page.$('[data-testid="title"]');
expect(titleField).toBeTruthy();
});

it('should display the status field', async () => {
const statusField = await page.$('[data-testid="status"]');
expect(statusField).toBeTruthy();
});

it('should display the priority field', async () => {
const priorityField = await page.$('[data-testid="priority"]');
expect(priorityField).toBeTruthy();
});

it('should display the isNoteworthy checkbox', async () => {
const noteworthyField = await page.$('[data-testid="isNoteworthy"]');
expect(noteworthyField).toBeTruthy();
});

it('should display the purpose field', async () => {
const purposeField = await page.$('[data-testid="purpose"]');
expect(purposeField).toBeTruthy();
});

it('should display the dependsOn field', async () => {
const dependsOnField = await page.$('[data-testid="dependsOn"]');
expect(dependsOnField).toBeTruthy();
});
});

it('DependsOn input should have correct attributes', async () => {
const input = await page.$('#dependsOn');
const type = await input.evaluate((el) => el.getAttribute('type'));
const name = await input.evaluate((el) => el.getAttribute('name'));
const id = await input.evaluate((el) => el.getAttribute('id'));
const placeholder = await input.evaluate((el) =>
el.getAttribute('placeholder'),
);
const classList = await input.evaluate((el) => Array.from(el.classList));

expect(type).toBe('text');
expect(name).toBe('dependsOn');
expect(id).toBe('dependsOn');
expect(placeholder).toBe('Task ID separated with comma ');
expect(classList.includes('notEditing')).toBeTruthy();
// Status Field Behavior Tests
describe('Status Field Behavior', () => {
beforeEach(async () => {
await page.goto('http://localhost:8000/task');
await page.waitForNetworkIdle();
});

it('should have default status as "available"', async () => {
const defaultStatus = await page.$eval(
'[data-testid="status"] select',
(el) => el.value,
);
expect(defaultStatus).toBe('AVAILABLE');
});

it('should show/hide fields based on "status" selection', async () => {
// Change status to "assigned"
await page.select('[data-testid="status"] select', 'ASSIGNED');

const assigneeVisible = await page.$eval(
'[data-testid="assignee"]',
(el) => window.getComputedStyle(el).display !== 'none',
);
const endsOnVisible = await page.$eval(
'[data-testid="endsOn"]',
(el) => window.getComputedStyle(el).display !== 'none',
);
expect(assigneeVisible).toBeTruthy();
expect(endsOnVisible).toBeTruthy();

// Change status back to "available"
await page.select('[data-testid="status"] select', 'available');

const assigneeHidden = await page.$eval(
'[data-testid="assignee"]',
(el) => window.getComputedStyle(el).display === 'none',
);
const endsOnHidden = await page.$eval(
'[data-testid="endsOn"]',
(el) => window.getComputedStyle(el).display === 'none',
);
expect(assigneeHidden).toBeTruthy();
expect(endsOnHidden).toBeTruthy();
});
});

// Dev Mode Tests
describe('Dev Mode Behavior', () => {
beforeAll(async () => {
await page.goto('http://localhost:8000/task?dev=true');
await page.waitForNetworkIdle();
});

it('should hide feature URL field in dev mode', async () => {
const featureUrlField = await page.$('[data-testid="featureUrl"]');
const display = await page.$eval(
'[data-testid="featureUrl"]',
(el) => window.getComputedStyle(el).display,
);
expect(display).toBe('none');
});

it('should hide task level field in dev mode', async () => {
const taskLevelField = await page.$('[data-testid="taskLevel"]');
const display = await page.$eval(
'[data-testid="taskLevel"]',
(el) => window.getComputedStyle(el).display,
);
expect(display).toBe('none');
});

it('should hide feature/group radio buttons in dev mode', async () => {
const radioButtons = await page.$('[data-testid="radioButtons"]');
const display = await page.$eval(
'[data-testid="radioButtons"]',
(el) => window.getComputedStyle(el).display,
);
expect(display).toBe('none');
});

it('should display the dependsOn field in dev mode', async () => {
const dependsOnField = await page.$('[data-testid="dependsOn"]');
expect(dependsOnField).toBeTruthy();
});
});
});
4 changes: 4 additions & 0 deletions task/constants.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
const StatusType = {
AVAILABLE: 'AVAILABLE',
ASSIGNED: 'ASSIGNED',
};
Loading

0 comments on commit cf01917

Please sign in to comment.