fix: separate string to view code/project (#47890)

* fix: separate string to view code/project

Signed-off-by: Prince Mendiratta <prince.mendi@gmail.com>

* feat: add test for certification rendering

Signed-off-by: Prince Mendiratta <prince.mendi@gmail.com>

* chore(lint): trailing newline at EOF

Signed-off-by: Prince Mendiratta <prince.mendi@gmail.com>

Signed-off-by: Prince Mendiratta <prince.mendi@gmail.com>

client/i18n/locales/english/translations.json

@@ -9,6 +9,8 @@
     "frontend": "Front End",
     "backend": "Back End",
     "view": "View",
+    "view-code": "View Code",
+    "view-project": "View Project",
     "show-cert": "Show Certification",
     "claim-cert": "Claim Certification",
     "save-progress": "Save Progress",

client/src/components/settings/certification.test.tsx

@@ -86,12 +86,19 @@ describe('<certification />', () => {
   });
 
   it('rendering the correct button when files is present', () => {
-    renderWithRedux(<CertificationSettings {...propsForOnlySolution} />);
+    renderWithRedux(<CertificationSettings {...propsForMultifileProject} />);
 
-    const viewButtons = screen.getAllByRole('button', { name: 'buttons.view' });
-    viewButtons.forEach(button => {
-      expect(button).toBeInTheDocument();
-    });
+    expect(
+      screen.getByRole('menuitem', {
+        name: 'buttons.view-code'
+      })
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByRole('menuitem', {
+        name: 'buttons.view-project'
+      })
+    ).toBeInTheDocument();
   });
 });
 
@@ -275,3 +282,22 @@ const propsForOnlySolution = {
     }
   ]
 };
+
+const propsForMultifileProject = {
+  ...defaultTestProps,
+  completedChallenges: [
+    {
+      id: '587d78af367417b2b2512b03',
+      challengeFiles: [
+        {
+          contents,
+          ext,
+          fileKey,
+          name,
+          path
+        }
+      ],
+      challengeType: 14
+    }
+  ]
+};

client/src/components/solution-display-widget/index.tsx

@@ -26,6 +26,8 @@ export function SolutionDisplayWidget({
   const { id, solution, githubLink } = completedChallenge;
   const { t } = useTranslation();
   const viewText = t('buttons.view');
+  const viewCode = t('buttons.view-code');
+  const viewProject = t('buttons.view-project');
 
   const ShowFilesSolutionForCertification = (
     <button
@@ -82,10 +84,10 @@ export function SolutionDisplayWidget({
         title={t('buttons.view')}
       >
         <MenuItem bsStyle='primary' onClick={showUserCode}>
-          {viewText}
+          {viewCode}
         </MenuItem>
         <MenuItem bsStyle='primary' onClick={showProjectPreview}>
-          {viewText}
+          {viewProject}
         </MenuItem>
       </DropdownButton>
     </div>