Merge pull request #263 from AppQuality/develop

Fix leaderboard link and sidebar active state
AppQuality · Nov 24, 2023 · 7fd6fdd · 7fd6fdd
2 parents aa7e42b + 4953638
commit 7fd6fdd
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 32 deletions.
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -1,20 +1,30 @@
-name: "Run tests"
+name: Run Tests
 on:
+  push:
+    branches: [main, master]
   pull_request:
   workflow_dispatch:
 
 jobs:
-  install:
+  test:
+    timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - name: "Install Node"
-        uses: actions/setup-node@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
       - name: Install dependencies
         run: |
           echo //registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }} > .npmrc
-          yarn
-      - name: "Run Test"
-        run: yarn test:e2e
+          npm install -g yarn && yarn
+      - name: Install Playwright Browsers
+        run: yarn playwright install --with-deps
+      - name: Run Playwright tests
+        run: yarn playwright test
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
diff --git a/cypress/e2e/wallet/payment_requests.spec.cy.ts b/cypress/e2e/wallet/payment_requests.spec.cy.ts
@@ -198,7 +198,7 @@ describe("Payment request", () => {
             `${Cypress.env("REACT_APP_API_URL")}/users/me/payments`,
             {
               statusCode: 200,
-              fixture: "users/me/payments/_post/200",
+              fixture: "users/me/payments/_post/200_Example_1",
             }
           ).as("postUserMePayment");
 
@@ -244,7 +244,7 @@ describe("Payment request", () => {
               {
                 delayMs: 4000,
                 statusCode: 200,
-                fixture: "users/me/payments/_post/200",
+                fixture: "users/me/payments/_post/200_Example_1",
               }
             ).as("postUserMePayment");
           });
@@ -263,7 +263,7 @@ describe("Payment request", () => {
               `${Cypress.env("REACT_APP_API_URL")}/users/me/payments`,
               {
                 statusCode: 200,
-                fixture: "users/me/payments/_post/200",
+                fixture: "users/me/payments/_post/200_Example_1",
               }
             ).as("postUserMePayment");
           });
@@ -328,7 +328,7 @@ describe("Payment request", () => {
               `${Cypress.env("REACT_APP_API_URL")}/users/me/payments`,
               {
                 statusCode: 403,
-                fixture: "users/me/payments/_post/200",
+                fixture: "users/me/payments/_post/200_Example_1",
               }
             ).as("postUserMePayment");
           });
@@ -349,7 +349,7 @@ describe("Payment request", () => {
             `${Cypress.env("REACT_APP_API_URL")}/users/me/payments`,
             {
               statusCode: 200,
-              fixture: "users/me/payments/_post/200",
+              fixture: "users/me/payments/_post/200_Example_1",
             }
           ).as("postUserMePayment");
 
@@ -617,7 +617,7 @@ describe("Payment request", () => {
             `${Cypress.env("REACT_APP_API_URL")}/users/me/payments`,
             {
               statusCode: 200,
-              fixture: "users/me/payments/_post/200",
+              fixture: "users/me/payments/_post/200_Example_1",
             }
           ).as("postUserMePayment");
           cy.dataQa("request-payment-cta").click();
@@ -681,7 +681,7 @@ describe("Payment request", () => {
                 {
                   delayMs: 4000,
                   statusCode: 200,
-                  fixture: "users/me/payments/_post/200",
+                  fixture: "users/me/payments/_post/200_Example_1",
                 }
               ).as("postUserMePayment");
             });
@@ -700,7 +700,7 @@ describe("Payment request", () => {
                 `${Cypress.env("REACT_APP_API_URL")}/users/me/payments`,
                 {
                   statusCode: 200,
-                  fixture: "users/me/payments/_post/200",
+                  fixture: "users/me/payments/_post/200_Example_1",
                 }
               ).as("postUserMePayment");
             });
@@ -766,7 +766,7 @@ describe("Payment request", () => {
                 `${Cypress.env("REACT_APP_API_URL")}/users/me/payments`,
                 {
                   statusCode: 403,
-                  fixture: "users/me/payments/_post/200",
+                  fixture: "users/me/payments/_post/200_Example_1",
                 }
               ).as("postUserMePayment");
             });
@@ -830,7 +830,7 @@ describe("Payment request", () => {
                 {
                   delayMs: 4000,
                   statusCode: 200,
-                  fixture: "users/me/payments/_post/200",
+                  fixture: "users/me/payments/_post/200_Example_1",
                 }
               ).as("postUserMePayment");
             });
@@ -849,7 +849,7 @@ describe("Payment request", () => {
                 `${Cypress.env("REACT_APP_API_URL")}/users/me/payments`,
                 {
                   statusCode: 200,
-                  fixture: "users/me/payments/_post/200",
+                  fixture: "users/me/payments/_post/200_Example_1",
                 }
               ).as("postUserMePayment");
             });
@@ -915,7 +915,7 @@ describe("Payment request", () => {
                 `${Cypress.env("REACT_APP_API_URL")}/users/me/payments`,
                 {
                   statusCode: 403,
-                  fixture: "users/me/payments/_post/200",
+                  fixture: "users/me/payments/_post/200_Example_1",
                 }
               ).as("postUserMePayment");
             });

diff --git a/cypress/fixtures/users/me/_get/200_user_subscriber_onboarding_complete.json b/cypress/fixtures/users/me/_get/200_user_subscriber_onboarding_complete.json
@@ -0,0 +1,10 @@
+{
+  "id": 11110,
+  "name": "Name",
+  "surname": "Surname",
+  "email": "name.surname@mail.com",
+  "wp_user_id": 11111,
+  "onboarding_completed": true,
+  "image": "https://secure.gravatar.com/avatar/087ada6e86cf8ec31a49217dd05b7151?s=132&d=https%3A%2F%2Feu.ui-avatars.com%2Fapi%2Fi%2Bl%2F132&r=x",
+  "role": "subscriber"
+}
diff --git a/...fixtures/users/me/payments/_post/200.json → ...sers/me/payments/_post/200_Example_1.json b/...fixtures/users/me/payments/_post/200.json → ...sers/me/payments/_post/200_Example_1.json
diff --git a/cypress/fixtures/users/me/payments/_post/403_unauthorized.json b/cypress/fixtures/users/me/payments/_post/403_unauthorized.json
@@ -0,0 +1,3 @@
+{
+  "message": "Not Authorized."
+}
diff --git a/package.json b/package.json
@@ -57,7 +57,7 @@
     "translate": "i18next-scanner",
     "generate-schema": ". ./.env.development; npx openapi-typescript $REACT_APP_API_URL/reference/ --output src/utils/schema.ts ",
     "generate-api": ". ./.env.development; API_URL=$REACT_APP_API_URL/reference/ npx @rtk-query/codegen-openapi src/services/tryberApi/config.ts",
-    "generate-fixtures": ". ./.env.development; API_URL=$REACT_APP_API_URL/reference/; npx @appquality/fixture-generator -u $API_URL"
+    "generate-fixtures": ". ./.env.development; API_URL=$REACT_APP_API_URL/reference/; npx @appquality/fixture-generator -u $API_URL && npx prettier --write 'cypress/fixtures/**/*.json'"
   },
   "eslintConfig": {
     "extends": [

diff --git a/src/features/TesterSidebar/index.tsx b/src/features/TesterSidebar/index.tsx
@@ -109,7 +109,7 @@ const TesterSidebar = ({ route, children }: TesterSidebarProps) => {
         i18next.language === "en" ? "" : "/" + i18next.language
       }/personal-equipment/`,
       icon: <Laptop />,
-      active: route === "personal-equipments",
+      active: route === "personal-equipment",
       text: t("Devices"),
       last: true,
     },
@@ -118,7 +118,7 @@ const TesterSidebar = ({ route, children }: TesterSidebarProps) => {
         i18next.language === "en" ? "" : "/" + i18next.language
       }/payments/`,
       icon: <Wallet2 />,
-      active: route === "Payments",
+      active: route === "payments",
       text: t("Payments"),
     },
     {

diff --git a/src/pages/Ranking/RankingTables/MyRankingTable/index.tsx b/src/pages/Ranking/RankingTables/MyRankingTable/index.tsx
@@ -5,17 +5,19 @@ import {
 } from "@appquality/appquality-design-system";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { RankingColumns } from "../columns";
-import starIcon from "src/pages/Ranking/assets/star.svg";
 import { shallowEqual, useSelector } from "react-redux";
+import starIcon from "src/pages/Ranking/assets/star.svg";
+import { useGetUsersMeQuery } from "src/services/tryberApi";
 import getGravatarUrlWithColoredFallbackInitials from "../../../../utils/getGravatarUrlWithThemedFallbackInitials";
 import { rankingTheme } from "../../rankingTheme";
-import { TopTitle } from "../TopTitle";
+import { RankingColumns } from "../columns";
 import { StyledAvatar, StyledExp, StyledRanking } from "../style";
+import { TopTitle } from "../TopTitle";
 
 export const MyRankingTable = () => {
   const { t } = useTranslation();
-  const [columns, setcolumns] = useState<TableType.Column[]>(RankingColumns(t));
+  const { data: user } = useGetUsersMeQuery({});
+  const [columns] = useState<TableType.Column[]>(RankingColumns(t));
   const [rows, setRows] = useState<TableType.Row[]>([]);
 
   const peers = useSelector(
@@ -27,10 +29,7 @@ export const MyRankingTable = () => {
     shallowEqual
   );
 
-  const userId = useSelector(
-    (state: GeneralState) => state.user.user.id,
-    shallowEqual
-  );
+  const userId = user ? user.id : undefined;
 
   const level = useSelector(
     (state: GeneralState) => state.ranking.summary?.level,
@@ -80,7 +79,7 @@ export const MyRankingTable = () => {
         };
       })
     );
-  }, [peers]);
+  }, [peers, level?.id, userId]);
 
   return (
     <StyledRanking>