/** * Job profile page test — /job/:jobId rendered into jsdom against a mocked * GET /jobs/profile/fetch. * * node job-profile.test.mjs * * Pins the design contract: employment type in the hero line, Suggested and * Top Match stats from the one profile request, Optional Skills highlighted * below Required Skills, and suggested-candidate cards ranked best → worst with * matched optional skills highlighted on each card. */ import { mkdtempSync, rmSync } from 'node:fs' import { tmpdir } from 'node:os' import { join } from 'node:path' import { pathToFileURL } from 'node:url' import esbuild from 'esbuild' import { JSDOM } from 'jsdom' // ---------------------------------------------------------------- environment const dom = new JSDOM('

', { url: 'http://localhost:5173/', pretendToBeVisual: true, }) globalThis.window = dom.window globalThis.document = dom.window.document Object.defineProperty(globalThis, 'navigator', { value: dom.window.navigator, configurable: true }) globalThis.HTMLElement = dom.window.HTMLElement globalThis.Element = dom.window.Element globalThis.Node = dom.window.Node globalThis.getComputedStyle = dom.window.getComputedStyle globalThis.localStorage = dom.window.localStorage globalThis.requestAnimationFrame = (cb) => setTimeout(() => cb(Date.now()), 0) globalThis.cancelAnimationFrame = clearTimeout globalThis.IS_REACT_ACT_ENVIRONMENT = true class RO { observe() {} unobserve() {} disconnect() {} } class MO { observe() {} disconnect() {} takeRecords() { return [] } } globalThis.ResizeObserver = RO globalThis.MutationObserver = MO dom.window.ResizeObserver = RO dom.window.MutationObserver = MO dom.window.matchMedia = () => ({ matches: false, addEventListener() {}, removeEventListener() {}, addListener() {}, removeListener() {}, }) dom.window.HTMLCanvasElement.prototype.getContext = () => new Proxy({}, { get: (_, k) => (k === 'canvas' ? {} : () => {}) }) const MODULES = ['dashboard', 'inbox', 'jobs', 'candidates', 'pipeline', 'interviews', 'assessments', 'offers', 'reports', 'analytics', 'job_board', 'settings', 'rbac_users', 'tasks', 'talent', 'requisitions'] const ACTIONS = ['view', 'create', 'edit', 'delete', 'approve', 'export', 'manage', 'configure'] const permissions = MODULES.flatMap((m) => ACTIONS.map((a) => `${m}.${a}`)) dom.window.localStorage.setItem('tf-auth', JSON.stringify({ access_token: 'test', refresh_token: 'test', expires_in: 1800, expires_at: Date.now() + 1800_000, data: { id: 1, name: 'Test User', email: 't@example.com', role_name: 'system_administrator', permissions }, })) // ---------------------------------------------------------------- fixtures const JOB_ID = '11111111-2222-3333-4444-555555555555' function jobRow(overrides = {}) { return { id: JOB_ID, title: 'Regional Sales Executive', department: 'GEO', location: 'Multi-region', employment_type: 'Permanent', vacancies: 3, platform: 'linkedin', requisition_status: 'open', status: 'draft', experience_min: 3, experience_max: 5, requirements: ['B2B Sales', 'Distributor Management'], optional_skills: ['Arabic', 'FMCG Background', 'Regional Travel'], description: 'Own the sales pipeline across the GEO region.', current_recruiter_ids: [], recruiter_names: ['Nida Khan'], hiring_manager_name: 'Amara Osei', applicant_count: 42, created_by_name: 'Nida Khan', created_at: '2026-08-12T09:00:00Z', ...overrides, } } function candidate(overrides) { return { id: overrides.id, user_id: null, candidate_id: null, form_data_id: null, inbox_id: null, email: null, current_title: null, current_company: null, years_experience: null, matched_keywords: [], missing_keywords: [], optional_matched: [], summary: null, source: 'upload', scored_candidate_id: null, created_at: '2026-09-01T10:00:00Z', ...overrides, } } const CANDIDATES = [ candidate({ id: 'a1', name: 'Sana Iqbal', match_score: 91, band: 'Strong Match', source: 'inbox', current_title: 'Regional Sales Manager', current_company: 'Unilever', years_experience: 6, matched_keywords: ['B2B Sales', 'Distributor Management'], optional_matched: ['Arabic'], summary: 'Six years leading distributor relationships across GCC.', created_at: '2026-09-01T10:00:00Z', }), candidate({ id: 'a2', name: 'Ayesha Noor', match_score: 78, band: 'Potential Match', matched_keywords: ['B2B Sales'], missing_keywords: ['Distributor Management'], created_at: '2026-09-05T10:00:00Z', }), candidate({ id: 'a3', name: 'Bilal Ahmed', match_score: 40, band: 'Weak Match', source: 'form', created_at: '2026-09-03T10:00:00Z', }), ] let profilePayload = null const REQUESTS = [] globalThis.fetch = async (input) => { const url = String(input?.url ?? input) REQUESTS.push(url) const body = url.includes('/jobs/profile/fetch') ? { data: profilePayload, total: 1, status_code: 200 } : { data: [], status_code: 200 } return { ok: true, status: 200, statusText: 'OK', text: async () => JSON.stringify(body) } } // ---------------------------------------------------------------- bundle const outDir = mkdtempSync(join(tmpdir(), 'tf-jobprofile-')) const outFile = join(outDir, 'entry.mjs') await esbuild.build({ entryPoints: ['src/__smoke__/entry.jsx'], outfile: outFile, bundle: true, format: 'esm', platform: 'node', target: 'node20', jsx: 'automatic', loader: { '.js': 'jsx', '.jsx': 'jsx' }, logLevel: 'error', define: { 'process.env.NODE_ENV': '"development"', 'import.meta.env': JSON.stringify({ DEV: true, PROD: false, MODE: 'development', VITE_API_BASE: '' }), }, }) // ---------------------------------------------------------------- run const errors = [] const origError = console.error console.error = (...args) => { const msg = args.map((a) => (a instanceof Error ? a.stack : String(a))).join(' ') if (msg.includes('React Router Future Flag')) return errors.push(msg) } let failed = 0 function check(name, ok, detail = '') { if (ok) console.log(`ok ${name}`) else { failed++ console.log(`FAIL ${name}${detail ? `\n ${detail}` : ''}`) } } try { const mod = await import(pathToFileURL(outFile).href) mod.boot() // ------------------------------------------------ full profile profilePayload = { job: jobRow(), suggested: 3, top_match: 1, top_score: 91, bands: { 'Strong Match': 1, 'Potential Match': 1, 'Weak Match': 1 }, candidates: CANDIDATES, } let container = dom.window.document.createElement('div') dom.window.document.body.appendChild(container) let m = await mod.mountRoute(`/job/${JOB_ID}`, container) await m.settle(60) const profileCalls = REQUESTS.filter((u) => u.includes('/jobs/profile/fetch')) check('one profile request feeds the page', profileCalls.length === 1, `calls=${profileCalls.length}`) check('profile request carries the job id', profileCalls[0]?.includes(`job_post_id=${JOB_ID}`), profileCalls[0]) const role = m.find('.job-hero .ph-role')?.textContent || '' check('hero line shows department, location and employment type', role === 'GEO · Multi-region · Permanent', `role="${role}"`) const stats = [...container.querySelectorAll('.hero-stat')].map((el) => ({ v: el.querySelector('.v')?.textContent, l: el.querySelector('.l')?.textContent, })) check('Suggested stat reads 3', stats.some((s) => s.l === 'Suggested' && s.v === '3'), JSON.stringify(stats)) check('Top Match stat counts the Strong Match band', stats.some((s) => s.l === 'Top Match' && s.v === '1'), JSON.stringify(stats)) check('hero tags show vacancies and applicants', m.text().includes('3 Vacancies') && m.text().includes('42 Applicants')) const html = m.html() const reqAt = html.indexOf('Required Skills') const optAt = html.indexOf('Optional Skills') check('Optional Skills section sits below Required Skills', reqAt > -1 && optAt > reqAt, `req=${reqAt} opt=${optAt}`) const optionalTags = [...container.querySelectorAll('.tag.tag-optional')].map((el) => el.textContent.trim()) check('every optional skill is a highlighted tag', optionalTags.join('|') === 'Arabic|FMCG Background|Regional Travel', optionalTags.join('|')) check('created line joins date and author', m.text().includes('by Nida Khan')) // ------------------------------------------------ suggested tab await m.click(m.findByText('[role="tab"]', 'Suggested Candidates')) let cards = [...container.querySelectorAll('.cand-card')] check('one card per suggested candidate', cards.length === 3, `cards=${cards.length}`) const names = () => [...container.querySelectorAll('.cand-card .cand-name')].map((el) => el.textContent.trim()) check('default sort is best → worst', names().join('|') === 'Sana Iqbal|Ayesha Noor|Bilal Ahmed', names().join('|')) const ranks = [...container.querySelectorAll('.cand-rank')].map((el) => el.textContent) check('cards are ranked 1..n', ranks.join(',') === '1,2,3', ranks.join(',')) check('sub line counts and marks the sort', m.text().includes('3 candidates suggested') && m.text().includes('Sorted: Best → Worst')) const first = container.querySelector('.cand-card') const optChips = [...first.querySelectorAll('.cand-chip.opt')].map((el) => el.textContent.trim()) check('matched optional skill is highlighted on its card', optChips.join('|') === 'Arabic', optChips.join('|')) check('matched and missing chips render', first.querySelectorAll('.cand-chip.ok').length === 2 && container.querySelectorAll('.cand-card')[1].querySelectorAll('.cand-chip.miss').length === 1) check('source label maps inbox → Email', first.textContent.includes('Email')) check('foot shows years and company', first.textContent.includes('6 yrs · Unilever')) const sortSelect = container.querySelector('#suggested-sort') await m.selectOption(sortSelect, 'name') check('A → Z sort orders by name and drops ranks', names().join('|') === 'Ayesha Noor|Bilal Ahmed|Sana Iqbal' && !container.querySelector('.cand-rank'), names().join('|')) await m.selectOption(sortSelect, 'recent') check('Most Recent sort orders by score time', names().join('|') === 'Ayesha Noor|Bilal Ahmed|Sana Iqbal', names().join('|')) await m.selectOption(container.querySelector('select[aria-label="Match band"]'), 'Weak Match') check('band filter narrows to that band', names().join('|') === 'Bilal Ahmed', names().join('|')) await m.unmount() container.remove() // ------------------------------------------------ sparse job // A different id: the query client is shared across mounts, so the first // job's profile is still cached under its own key. const SPARSE_ID = '99999999-2222-3333-4444-555555555555' profilePayload = { job: jobRow({ id: SPARSE_ID, employment_type: null, optional_skills: [] }), suggested: 0, top_match: 0, top_score: null, bands: { 'Strong Match': 0, 'Potential Match': 0, 'Weak Match': 0 }, candidates: [], } container = dom.window.document.createElement('div') dom.window.document.body.appendChild(container) m = await mod.mountRoute(`/job/${SPARSE_ID}?tab=suggested`, container) await m.settle(60) const sparseRole = m.find('.job-hero .ph-role')?.textContent || '' check('no employment type → hero line omits it', sparseRole === 'GEO · Multi-region', `role="${sparseRole}"`) check('?tab=suggested opens that tab, with an empty state', m.text().includes('No suggested candidates yet')) await m.click(m.findByText('[role="tab"]', 'Details')) check('no optional skills → no Optional Skills section', !m.text().includes('Optional Skills')) await m.unmount() container.remove() check('no console errors', errors.length === 0, errors[0]?.split('\n').slice(0, 3).join(' | ')) } finally { console.error = origError rmSync(outDir, { recursive: true, force: true }) } console.log(failed ? `\n${failed} job profile check(s) FAILED` : '\nAll job profile checks passed') process.exit(failed ? 1 : 0)