tests

frontend/src/lib/pages/Portfolio.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import Card from "$lib/components/portfolio/Card.svelte";
+  import LoginCard from "$lib/components/portfolio/LoginCard.svelte";
   import { authSignedInStore } from "$lib/derived/auth.derived";
 </script>
 
-<main>
-  <div class="top">
+<main data-tid="portfolio-page-component">
+  <div class="top" class:single-card={$authSignedInStore}>
     <Card>Card1</Card>
-    {#if $authSignedInStore}
-      <Card>Card2</Card>
+    {#if !$authSignedInStore}
+      <LoginCard />
     {/if}
   </div>
   <div class="content">
@@ -27,37 +28,23 @@
 
     @include media.min-width(large) {
       display: grid;
-      grid-template-rows: 150px 1fr;
+      grid-template-rows: auto 1fr;
       gap: var(--padding-3x);
       padding: var(--padding-3x);
     }
 
     .top {
       display: flex;
-      flex-direction: column;
+      flex-direction: column-reverse;
       gap: var(--padding-2x);
 
-      :global(:nth-child(1)) {
-        order: 1;
-      }
-
       @include media.min-width(large) {
         display: grid;
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: 1fr 2fr;
 
-        :global(:nth-child(1)) {
-          order: 0;
-        }
-
-        &:has(:first-child:nth-last-child(1)) {
-          /* If only one card */
+        &.single-card {
           grid-template-columns: 1fr;
         }
-
-        &:has(:first-child:nth-last-child(2)) {
-          /* If two cards */
-          grid-template-columns: 1fr 2fr;
-        }
       }
     }
 

frontend/src/tests/lib/pages/Portfolio.spec.ts

@@ -0,0 +1,28 @@
+import Portfolio from "$lib/pages/Portfolio.svelte";
+import { resetIdentity, setNoIdentity } from "$tests/mocks/auth.store.mock";
+import { PortfolioPagePo } from "$tests/page-objects/PortfolioPage.page-object";
+import { JestPageObjectElement } from "$tests/page-objects/jest.page-object";
+import { render } from "@testing-library/svelte";
+
+describe("Portfolio page", () => {
+  const renderPage = () => {
+    const { container } = render(Portfolio);
+
+    return PortfolioPagePo.under(new JestPageObjectElement(container));
+  };
+
+  beforeEach(() => {
+    resetIdentity();
+  });
+
+  it("should display the login card when the user is not logged in", async () => {
+    setNoIdentity();
+    const po = renderPage();
+    expect(await po.getLoginCard().isPresent()).toBe(true);
+  });
+
+  it("should not display the login card when the user is logged in", async () => {
+    const page = renderPage();
+    expect(await page.getLoginCard().isPresent()).toBe(false);
+  });
+});

frontend/src/tests/page-objects/PortfolioPage.page-object.ts

@@ -0,0 +1,14 @@
+import type { PageObjectElement } from "$tests/types/page-object.types";
+import { BasePageObject } from "./base.page-object";
+
+export class PortfolioPagePo extends BasePageObject {
+  private static readonly TID = "portfolio-page-component";
+
+  static under(element: PageObjectElement): PortfolioPagePo {
+    return new PortfolioPagePo(element.byTestId(PortfolioPagePo.TID));
+  }
+
+  getLoginCard() {
+    return this.getElement("portfolio-login-card");
+  }
+}