From 0ae233209bd7002e837dc692d3cd407fd79f2d42 Mon Sep 17 00:00:00 2001 From: Manabu Matsumoto Date: Fri, 23 Feb 2024 18:04:42 +0900 Subject: [PATCH] fix(UI): put the Legacy label on the old JS curriculum title (re-open) (#53314) Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com> Co-authored-by: Sem Bauke --- client/config/cert-and-project-map.ts | 2 +- client/i18n/locales/english/intro.json | 2 +- client/i18n/locales/english/translations.json | 6 +++--- .../client-only-routes/show-project-links.tsx | 2 +- .../src/components/settings/certification.tsx | 2 +- .../index.md | 2 +- .../index.md | 2 +- client/src/redux/selectors.js | 17 +++++++++------- cypress/e2e/default/user/certifications.ts | 4 ++-- e2e/map.spec.ts | 20 +++++++------------ e2e/profile.spec.ts | 8 ++++++-- shared/config/certification-settings.ts | 3 ++- tools/scripts/seed/certified-user-data.js | 1 + 13 files changed, 37 insertions(+), 34 deletions(-) diff --git a/client/config/cert-and-project-map.ts b/client/config/cert-and-project-map.ts index 89a20f05786..c33e6967b3f 100644 --- a/client/config/cert-and-project-map.ts +++ b/client/config/cert-and-project-map.ts @@ -576,7 +576,7 @@ const allStandardCerts = [ }, { id: '561abd10cb81ac38a17513bc', - title: 'JavaScript Algorithms and Data Structures', + title: 'Legacy JavaScript Algorithms and Data Structures', certSlug: Certification.JsAlgoDataStruct, projects: [ { diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index 2620e7a4333..af4b5cefa60 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -217,7 +217,7 @@ } }, "javascript-algorithms-and-data-structures": { - "title": "JavaScript Algorithms and Data Structures", + "title": "Legacy JavaScript Algorithms and Data Structures", "intro": [ "While HTML and CSS control the content and styling of a page, JavaScript is used to make it interactive. In the JavaScript Algorithm and Data Structures Certification, you'll learn the fundamentals of JavaScript including variables, arrays, objects, loops, and functions.", "Once you have the fundamentals down, you'll apply that knowledge by creating algorithms to manipulate strings, factorialize numbers, and even calculate the orbit of the International Space Station.", diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json index 5ef409952fe..0d6686e8383 100644 --- a/client/i18n/locales/english/translations.json +++ b/client/i18n/locales/english/translations.json @@ -939,9 +939,9 @@ "title": { "Responsive Web Design": "Responsive Web Design", "responsive-web-design": "Responsive Web Design Certification", - "JavaScript Algorithms and Data Structures": "JavaScript Algorithms and Data Structures", - "javascript-algorithms-and-data-structures": "JavaScript Algorithms and Data Structures Certification", - "javascript-algorithms-and-data-structures-v8": "JavaScript Algorithms and Data Structures Certification", + "JavaScript Algorithms and Data Structures": "Legacy JavaScript Algorithms and Data Structures", + "javascript-algorithms-and-data-structures": "Legacy JavaScript Algorithms and Data Structures Certification", + "javascript-algorithms-and-data-structures-v8": "JavaScript Algorithms and Data Structures (Beta) Certification", "Front End Development Libraries": "Front End Development Libraries", "front-end-development-libraries": "Front End Development Libraries Certification", "Data Visualization": "Data Visualization", diff --git a/client/src/client-only-routes/show-project-links.tsx b/client/src/client-only-routes/show-project-links.tsx index 41ab6b95b08..bfeb96d950c 100644 --- a/client/src/client-only-routes/show-project-links.tsx +++ b/client/src/client-only-routes/show-project-links.tsx @@ -106,7 +106,7 @@ const ShowProjectLinks = (props: ShowProjectLinksProps): JSX.Element => { if (certName === 'Legacy Full Stack') { const certs = [ { title: 'Responsive Web Design' }, - { title: 'JavaScript Algorithms and Data Structures' }, + { title: 'Legacy JavaScript Algorithms and Data Structures' }, { title: 'Front End Development Libraries' }, { title: 'Data Visualization' }, { title: 'Back End Development and APIs' }, diff --git a/client/src/components/settings/certification.tsx b/client/src/components/settings/certification.tsx index 83d6e4a8667..8978db11fcc 100644 --- a/client/src/components/settings/certification.tsx +++ b/client/src/components/settings/certification.tsx @@ -115,7 +115,7 @@ const isCertMapSelector = createSelector( isJsAlgoDataStructCertV8 }) => ({ 'Responsive Web Design': isRespWebDesignCert, - 'JavaScript Algorithms and Data Structures': isJsAlgoDataStructCert, + 'Legacy JavaScript Algorithms and Data Structures': isJsAlgoDataStructCert, 'Front End Development Libraries': isFrontEndLibsCert, 'Data Visualization': is2018DataVisCert, 'Back End Development and APIs': isApisMicroservicesCert, diff --git a/client/src/pages/learn/javascript-algorithms-and-data-structures-v8/index.md b/client/src/pages/learn/javascript-algorithms-and-data-structures-v8/index.md index e467434c10d..7731b1d7d39 100644 --- a/client/src/pages/learn/javascript-algorithms-and-data-structures-v8/index.md +++ b/client/src/pages/learn/javascript-algorithms-and-data-structures-v8/index.md @@ -1,5 +1,5 @@ --- -title: JavaScript Algorithms and Data Structures +title: JavaScript Algorithms and Data Structures (Beta) superBlock: javascript-algorithms-and-data-structures-v8 certification: javascript-algorithms-and-data-structures --- diff --git a/client/src/pages/learn/javascript-algorithms-and-data-structures/index.md b/client/src/pages/learn/javascript-algorithms-and-data-structures/index.md index 1874f714377..4ad4c612df7 100644 --- a/client/src/pages/learn/javascript-algorithms-and-data-structures/index.md +++ b/client/src/pages/learn/javascript-algorithms-and-data-structures/index.md @@ -1,5 +1,5 @@ --- -title: JavaScript Algorithms and Data Structures +title: Legacy JavaScript Algorithms and Data Structures superBlock: javascript-algorithms-and-data-structures certification: javascript-algorithms-and-data-structures --- diff --git a/client/src/redux/selectors.js b/client/src/redux/selectors.js index fc63a852f8d..06b5c6757c8 100644 --- a/client/src/redux/selectors.js +++ b/client/src/redux/selectors.js @@ -133,7 +133,6 @@ export const certificatesByNameSelector = username => state => { isRespWebDesignCert || is2018DataVisCert || isFrontEndLibsCert || - isJsAlgoDataStructCert || isApisMicroservicesCert || isQaCertV7 || isInfosecCertV7 || @@ -146,7 +145,11 @@ export const certificatesByNameSelector = username => state => { isFoundationalCSharpCertV8 || isJsAlgoDataStructCertV8, hasLegacyCert: - isFrontEndCert || isBackEndCert || isDataVisCert || isInfosecQaCert, + isFrontEndCert || + isJsAlgoDataStructCert || + isBackEndCert || + isDataVisCert || + isInfosecQaCert, isFullStackCert, currentCerts: [ { @@ -159,11 +162,6 @@ export const certificatesByNameSelector = username => state => { title: 'JavaScript Algorithms and Data Structures (Beta) Certification', certSlug: Certification.JsAlgoDataStructNew }, - { - show: isJsAlgoDataStructCert, - title: 'JavaScript Algorithms and Data Structures Certification', - certSlug: Certification.JsAlgoDataStruct - }, { show: isFrontEndLibsCert, title: 'Front End Development Libraries Certification', @@ -226,6 +224,11 @@ export const certificatesByNameSelector = username => state => { title: 'Front End Certification', certSlug: Certification.LegacyFrontEnd }, + { + show: isJsAlgoDataStructCert, + title: 'Legacy JavaScript Algorithms and Data Structures Certification', + certSlug: Certification.JsAlgoDataStruct + }, { show: isBackEndCert, title: 'Back End Certification', diff --git a/cypress/e2e/default/user/certifications.ts b/cypress/e2e/default/user/certifications.ts index 303533fdf66..410240b2bb8 100644 --- a/cypress/e2e/default/user/certifications.ts +++ b/cypress/e2e/default/user/certifications.ts @@ -14,7 +14,7 @@ describe('Public profile certifications', () => { // The following line is only required if you want to test it in development //cy.contains('Preview custom 404 page').click(); - cy.get('[data-cy=claimed-certification]').should('have.length', 18); + cy.get('[data-cy=claimed-certification]').should('have.length', 19); }); it('Should show claimed certifications if the username includes uppercase characters', () => { @@ -32,7 +32,7 @@ describe('Public profile certifications', () => { // The following line is only required if you want to test it in development //cy.contains('Preview custom 404 page').click(); - cy.get('[data-cy=claimed-certification]').should('have.length', 18); + cy.get('[data-cy=claimed-certification]').should('have.length', 19); }); }); diff --git a/e2e/map.spec.ts b/e2e/map.spec.ts index 2bd483fa121..8ddad7fa6c7 100644 --- a/e2e/map.spec.ts +++ b/e2e/map.spec.ts @@ -22,13 +22,7 @@ const superBlocksWithLinks = [ ]; const superBlockTitleOverride: Record = { - 'Responsive Web Design': 'Legacy Responsive Web Design Challenges', - 'JavaScript Algorithms and Data Structures': - 'JavaScript Algorithms and Data Structures Certification' -}; - -const superBlockSlugOverride: Record = { - '2022/responsive-web-design': 'responsive-web-design' + 'Responsive Web Design': 'Responsive Web Design Certification' }; test.describe('Map Component', () => { @@ -44,6 +38,7 @@ test.describe('Map Component', () => { ).toBeVisible(); const curriculumBtns = page.getByTestId('curriculum-map-button'); await expect(curriculumBtns).toHaveCount(superBlocksWithLinks.length); + for (let i = 0; i < superBlocksWithLinks.length; i++) { const superblockLink = page.getByRole('link', { // This is a hacky bypass because `Responsive Web Design` hits both links. @@ -51,13 +46,12 @@ test.describe('Map Component', () => { superBlockTitleOverride[intro[superBlocksWithLinks[i]].title] ?? intro[superBlocksWithLinks[i]].title }); - expect(await superblockLink.getAttribute('href')).toBe( - `/learn/${ - superBlockSlugOverride[superBlocksWithLinks[i]] ?? - superBlocksWithLinks[i] - }/` + + await expect(superblockLink).toBeVisible(); + await expect(superblockLink).toHaveAttribute( + 'href', + `/learn/${superBlocksWithLinks[i]}/` ); - await superblockLink.click(); } }); }); diff --git a/e2e/profile.spec.ts b/e2e/profile.spec.ts index 66ed2b06c47..d2e76fb7e41 100644 --- a/e2e/profile.spec.ts +++ b/e2e/profile.spec.ts @@ -8,8 +8,8 @@ const certs = [ url: '/certification/certifieduser/responsive-web-design' }, { - name: 'JavaScript Algorithms and Data Structures', - url: '/certification/certifieduser/javascript-algorithms-and-data-structures' + name: 'JavaScript Algorithms and Data Structures (Beta)', + url: '/certification/certifieduser/javascript-algorithms-and-data-structures-v8' }, { name: 'Front End Development Libraries', @@ -59,6 +59,10 @@ const certs = [ const legacyCerts = [ { name: 'Front End', url: '/certification/certifieduser/legacy-front-end' }, + { + name: 'Legacy JavaScript Algorithms and Data Structures', + url: '/certification/certifieduser/javascript-algorithms-and-data-structures' + }, { name: 'Back End', url: '/certification/certifieduser/legacy-back-end' }, { name: 'Data Visualization', diff --git a/shared/config/certification-settings.ts b/shared/config/certification-settings.ts index 98ec0a43638..de01cc92b81 100644 --- a/shared/config/certification-settings.ts +++ b/shared/config/certification-settings.ts @@ -238,7 +238,8 @@ export const certTypeTitleMap = { [certTypes.fullStack]: 'Legacy Full Stack', [certTypes.respWebDesign]: 'Responsive Web Design', [certTypes.frontEndDevLibs]: 'Front End Development Libraries', - [certTypes.jsAlgoDataStruct]: 'JavaScript Algorithms and Data Structures', + [certTypes.jsAlgoDataStruct]: + 'Legacy JavaScript Algorithms and Data Structures', [certTypes.dataVis2018]: 'Data Visualization', [certTypes.apisMicroservices]: 'Back End Development and APIs', [certTypes.qaV7]: 'Quality Assurance', diff --git a/tools/scripts/seed/certified-user-data.js b/tools/scripts/seed/certified-user-data.js index b9d269583a2..4e9ef204e9a 100644 --- a/tools/scripts/seed/certified-user-data.js +++ b/tools/scripts/seed/certified-user-data.js @@ -25,6 +25,7 @@ module.exports = { is2018DataVisCert: true, isFrontEndLibsCert: true, isJsAlgoDataStructCert: true, + isJsAlgoDataStructCertV8: true, isApisMicroservicesCert: true, isInfosecQaCert: true, isQaCertV7: true,