From 0dbdcc5dbd49f85df64590af079ea525ed54831a Mon Sep 17 00:00:00 2001
From: Mohammed Ali Chherawalla <mohammed.ali.chherawalla@gmail.com>
Date: Tue, 20 May 2025 13:19:18 +0530
Subject: [PATCH 1/2] fix: display zero star repos and correct translations

---
 app/components/RepoCard/index.js                     |  2 +-
 .../RepoCard/tests/__snapshots__/index.test.js.snap  |  6 +++---
 app/components/RepoCard/tests/index.test.js          | 12 +++++++++++-
 app/containers/HomeContainer/index.js                |  3 +--
 app/translations/en.js                               |  2 +-
 app/translations/en.json                             |  4 ++--
 6 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/app/components/RepoCard/index.js b/app/components/RepoCard/index.js
index 81787dd8..847bf3ff 100644
--- a/app/components/RepoCard/index.js
+++ b/app/components/RepoCard/index.js
@@ -43,7 +43,7 @@ export function RepoCard({ name, fullName, stargazersCount }) {
       >
         <T data-testid="fullName" id="repository_full_name" values={{ fullName }} />
       </If>
-      <If condition={stargazersCount} otherwise={<T data-testid="stargazers-unavaiable" id="repo_stars_unavailable" />}>
+      <If condition={stargazersCount || stargazersCount === 0} otherwise={<T data-testid="stargazers-unavailable" id="repo_stars_unavailable" />}>
         <T data-testid="stargazers" id="repository_stars" values={{ stars: stargazersCount }} />
       </If>
     </CustomCard>
diff --git a/app/components/RepoCard/tests/__snapshots__/index.test.js.snap b/app/components/RepoCard/tests/__snapshots__/index.test.js.snap
index f574ecce..b86c14d8 100644
--- a/app/components/RepoCard/tests/__snapshots__/index.test.js.snap
+++ b/app/components/RepoCard/tests/__snapshots__/index.test.js.snap
@@ -17,13 +17,13 @@ exports[`<RepoCard /> should render and match the snapshot 1`] = `
         class="css-lh9t18 egtqi0h0"
         data-testid="fullName-unavailable"
       >
-        Repository full name unavaiable
+        Repository full name unavailable
       </p>
       <p
         class="css-lh9t18 egtqi0h0"
-        data-testid="stargazers-unavaiable"
+        data-testid="stargazers-unavailable"
       >
-        Repository stars are unavaiable
+        Repository stars are unavailable
       </p>
     </div>
   </div>
diff --git a/app/components/RepoCard/tests/index.test.js b/app/components/RepoCard/tests/index.test.js
index b9e53226..b69ccb6a 100644
--- a/app/components/RepoCard/tests/index.test.js
+++ b/app/components/RepoCard/tests/index.test.js
@@ -32,6 +32,16 @@ describe('<RepoCard />', () => {
     expect(getByTestId('stargazers')).toHaveTextContent(stargazersCount);
   });
 
+  it('should show the star count even when it is 0', () => {
+    const repoName = 'react-template';
+    const fullName = 'wednesday-solutions/react-template';
+    const stargazersCount = 0;
+    const { getByTestId } = renderWithIntl(
+      <RepoCard name={repoName} fullName={fullName} stargazersCount={stargazersCount} />
+    );
+    expect(getByTestId('stargazers')).toHaveTextContent(stargazersCount.toString());
+  });
+
   it('should render the repository unavailable messages in case any props are unavailable or have falsy values', () => {
     const repoUnavailable = translate('repo_name_unavailable');
     const fullNameUnavailable = translate('repo_full_name_unavailable');
@@ -39,6 +49,6 @@ describe('<RepoCard />', () => {
     const { getByTestId } = renderWithIntl(<RepoCard />);
     expect(getByTestId('name-unavailable')).toHaveTextContent(repoUnavailable);
     expect(getByTestId('fullName-unavailable')).toHaveTextContent(fullNameUnavailable);
-    expect(getByTestId('stargazers-unavaiable')).toHaveTextContent(stargazersUnavailable);
+    expect(getByTestId('stargazers-unavailable')).toHaveTextContent(stargazersUnavailable);
   });
 });
diff --git a/app/containers/HomeContainer/index.js b/app/containers/HomeContainer/index.js
index 5be72f2c..387537fa 100644
--- a/app/containers/HomeContainer/index.js
+++ b/app/containers/HomeContainer/index.js
@@ -25,8 +25,7 @@ const CustomCard = styled(Card)`
   && {
     margin: 1.25rem 0;
     padding: 1rem;
-    max-width: ${(props) => props.maxwidth};
-    color: ${(props) => props.color};
+    max-width: ${(props) => props.maxwidth}px;
     ${(props) => props.color && `color: ${props.color}`};
   }
 `;
diff --git a/app/translations/en.js b/app/translations/en.js
index a8933dc1..899b4692 100644
--- a/app/translations/en.js
+++ b/app/translations/en.js
@@ -1 +1 @@
-/*eslint-disable*/module.exports={messages:JSON.parse("{\"get_repo_details\":\"Get details of repositories\",\"matching_repos\":[\"Total number of matching repos: \",[\"totalCount\"]],\"not_found_page_container\":\"This is the NotFoundPage container!\",\"repo_full_name_unavailable\":\"Repository full name unavaiable\",\"repo_list\":\"Repository List\",\"repo_name_unavailable\":\"Repository name is unavailable\",\"repo_search\":\"Repository Search\",\"repo_search_default\":\"Search for a repository by entering it's name in the search box\",\"repo_stars_unavailable\":\"Repository stars are unavaiable\",\"repository_full_name\":[\"Repository full name: \",[\"fullName\"]],\"repository_name\":[\"Repository Name: \",[\"name\"]],\"repository_stars\":[\"Repository stars: \",[\"stars\"]],\"search_query\":[\"Search query: \",[\"repoName\"]],\"something_went_wrong\":\"Sorry. Something went wrong! Please try again in sometime.\",\"stories\":\"Go to Storybook\",\"wednesday_solutions\":\"Wednesday Solutions\"}")};
\ No newline at end of file
+/*eslint-disable*/module.exports={messages:JSON.parse("{\"get_repo_details\":\"Get details of repositories\",\"matching_repos\":[\"Total number of matching repos: \",[\"totalCount\"]],\"not_found_page_container\":\"This is the NotFoundPage container!\",\"repo_full_name_unavailable\":\"Repository full name unavailable\",\"repo_list\":\"Repository List\",\"repo_name_unavailable\":\"Repository name is unavailable\",\"repo_search\":\"Repository Search\",\"repo_search_default\":\"Search for a repository by entering it's name in the search box\",\"repo_stars_unavailable\":\"Repository stars are unavailable\",\"repository_full_name\":[\"Repository full name: \",[\"fullName\"]],\"repository_name\":[\"Repository Name: \",[\"name\"]],\"repository_stars\":[\"Repository stars: \",[\"stars\"]],\"search_query\":[\"Search query: \",[\"repoName\"]],\"something_went_wrong\":\"Sorry. Something went wrong! Please try again in sometime.\",\"stories\":\"Go to Storybook\",\"wednesday_solutions\":\"Wednesday Solutions\"}")};
diff --git a/app/translations/en.json b/app/translations/en.json
index 8769e471..27512059 100644
--- a/app/translations/en.json
+++ b/app/translations/en.json
@@ -2,12 +2,12 @@
   "get_repo_details": "Get details of repositories",
   "matching_repos": "Total number of matching repos: {totalCount}",
   "not_found_page_container": "This is the NotFoundPage container!",
-  "repo_full_name_unavailable": "Repository full name unavaiable",
+  "repo_full_name_unavailable": "Repository full name unavailable",
   "repo_list": "Repository List",
   "repo_name_unavailable": "Repository name is unavailable",
   "repo_search": "Repository Search",
   "repo_search_default": "Search for a repository by entering it's name in the search box",
-  "repo_stars_unavailable": "Repository stars are unavaiable",
+  "repo_stars_unavailable": "Repository stars are unavailable",
   "repository_full_name": "Repository full name: {fullName}",
   "repository_name": "Repository Name: {name}",
   "repository_stars": "Repository stars: {stars}",

From 068951178a7faed36762e42555d8324f90a55533 Mon Sep 17 00:00:00 2001
From: Mac <mohammed.ali.chherawalla@gmail.com>
Date: Tue, 20 May 2025 13:23:15 +0530
Subject: [PATCH 2/2] fix: snapshot tests

---
 .../ProtectedRoute/tests/__snapshots__/index.test.js.snap     | 4 ++--
 .../HomeContainer/tests/__snapshots__/index.test.js.snap      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/ProtectedRoute/tests/__snapshots__/index.test.js.snap b/app/components/ProtectedRoute/tests/__snapshots__/index.test.js.snap
index fd62e39a..25210dee 100644
--- a/app/components/ProtectedRoute/tests/__snapshots__/index.test.js.snap
+++ b/app/components/ProtectedRoute/tests/__snapshots__/index.test.js.snap
@@ -17,7 +17,7 @@ exports[`<ProtectedRoute /> should render and match the snapshot 1`] = `
         </p>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root e666d1v5 css-19cof65-MuiPaper-root-MuiCard-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root e666d1v5 css-12lr87k-MuiPaper-root-MuiCard-root"
         maxwidth="500"
       >
         <div
@@ -95,7 +95,7 @@ exports[`<ProtectedRoute /> should render and match the snapshot 1`] = `
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root e666d1v5 css-18bnhwu-MuiPaper-root-MuiCard-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root e666d1v5 css-1veibbr-MuiPaper-root-MuiCard-root"
         color="grey"
       >
         <div
diff --git a/app/containers/HomeContainer/tests/__snapshots__/index.test.js.snap b/app/containers/HomeContainer/tests/__snapshots__/index.test.js.snap
index e122fbfb..9bc9beef 100644
--- a/app/containers/HomeContainer/tests/__snapshots__/index.test.js.snap
+++ b/app/containers/HomeContainer/tests/__snapshots__/index.test.js.snap
@@ -17,7 +17,7 @@ exports[`<HomeContainer /> tests should render and match the snapshot 1`] = `
         </p>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root e666d1v5 css-19cof65-MuiPaper-root-MuiCard-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root e666d1v5 css-12lr87k-MuiPaper-root-MuiCard-root"
         maxwidth="500"
       >
         <div
@@ -95,7 +95,7 @@ exports[`<HomeContainer /> tests should render and match the snapshot 1`] = `
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root e666d1v5 css-18bnhwu-MuiPaper-root-MuiCard-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root e666d1v5 css-1veibbr-MuiPaper-root-MuiCard-root"
         color="grey"
       >
         <div