feat: include sonarcloud analysis (#155)

Author: anyulled

.github/workflows/sonarcloud.yml

@@ -0,0 +1,48 @@
+name: sonar analysis
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  sonarcloud:
+    name: SonarCloud
+    runs-on: ubuntu-latest
+
+    steps:
+      # Checkout
+      - name: checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0  # Shallow clones should be disabled for a better relevancy of analysis
+      # Load cache modules
+      - name: Cache node modules
+        id: cache-npm
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-     
+      
+      
+
+      # Run tests with coverage
+      - name: run tests
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+        run: |
+          npm ci
+          npm run test -- --coverage . --watchAll=false
+
+     # Send report to sonar
+      - name: SonarCloud Scan
+        uses: SonarSource/sonarcloud-github-action@master
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}  # Needed to get PR information, if any
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

package.json

@@ -40,7 +40,8 @@
   "jest": {
     "transformIgnorePatterns": [
       "/node_modules/(?!axios)/"
-    ]
+    ],
+    "coveragePathIgnorePatterns": ["reportWebVitals.ts","/\\.(Style|Type|types)\\.tsx?$/\n","colors.ts"]
   },
   "eslintConfig": {
     "extends": [

sonar-project.properties

@@ -0,0 +1,13 @@
+sonar.projectKey=devbcn.github.io
+sonar.organization=devbcn
+
+# This is the name and version displayed in the SonarCloud UI.
+sonar.projectName=Devbcn website
+sonar.projectVersion=1.5.0
+sonar.typescript.lcov.reportPaths=coverage/lcov.info
+sonar.test.inclusions=*.test.tsx,*.test.ts
+# Path is relative to the sonar-project.properties file. Replace "\" by "/" on Windows.
+#sonar.sources=.
+
+# Encoding of the source code. Default is default system encoding
+#sonar.sourceEncoding=UTF-8

src/views/Cfp/CfpSection.tsx

@@ -27,34 +27,40 @@ const CfpTrackComponent: FC<CfpTrackProps> = ({ track }) => (
         style={{
           paddingTop: "1.5rem",
           paddingBottom: "1rem",
-          fontSize: "2rem",
+          fontSize: "1.8rem",
+          color: Color.DARK_BLUE,
         }}
       >
         {track.name}
       </h2>
     </section>
     <div style={{ display: "flex", margin: "1rem" }}>
-      {track.members.map((member) => (
-        <>
-          {member.photo !== "" && (
-            <div key={member.name}>
-              <StyledAboutImage src={member.photo} alt={member.name} />
-              <h5 style={{ color: Color.DARK_BLUE }}>{member.name}</h5>
-              <StyledSocialIconsWrapper>
-                {member.twitter !== "" && (
-                  <TwitterIcon color={Color.BLUE} twitterUrl={member.twitter} />
-                )}
-                {member.linkedIn !== "" && (
-                  <LinkedinIcon
-                    color={Color.BLUE}
-                    linkedinUrl={member.linkedIn}
-                  />
-                )}
-              </StyledSocialIconsWrapper>
-            </div>
-          )}
-        </>
-      ))}
+      {track.members.map((member) => {
+        return (
+          <div key={member.name}>
+            {member.photo !== "" && (
+              <div>
+                <StyledAboutImage src={member.photo} alt={member.name} />
+                <h5 style={{ color: Color.DARK_BLUE }}>{member.name}</h5>
+                <StyledSocialIconsWrapper>
+                  {member.twitter !== "" && (
+                    <TwitterIcon
+                      color={Color.BLUE}
+                      twitterUrl={member.twitter}
+                    />
+                  )}
+                  {member.linkedIn !== "" && (
+                    <LinkedinIcon
+                      color={Color.BLUE}
+                      linkedinUrl={member.linkedIn}
+                    />
+                  )}
+                </StyledSocialIconsWrapper>
+              </div>
+            )}
+          </div>
+        );
+      })}
     </div>
   </>
 );