Merge pull request #223 from w3bdesign/development

CV with tabs

Author: w3bdesign

__tests__/CV/CVContent.test.tsx

@@ -2,22 +2,54 @@
  * @jest-environment jsdom
  */
 
+import React from "react";
 import { render, screen } from "@testing-library/react";
-
 import CVContent from "../../src/components/CV/CVContent.component";
 
+const mockCVData = {
+  keyQualifications: ["Qualification 1", "Qualification 2"],
+  experience: [
+    {
+      period: "2020-2022",
+      company: "Example Company",
+      role: "Software Developer",
+      description: "Worked on various projects",
+    },
+  ],
+  education: [
+    {
+      period: "2016-2020",
+      institution: "University of Example",
+      degree: "Bachelor in Computer Science",
+      description: "Studied various aspects of computer science",
+    },
+  ],
+};
+
 describe("CVContent", () => {
-  it("CVContent laster inn og kan vises", () => {
-    render(<CVContent />);
-    const cvcontent = screen.getByRole("heading", { name: /cv/i });
-    expect(cvcontent).toBeInTheDocument();
-  });
+  it("CVContent renders correctly with mock data", () => {
+    render(<CVContent cvData={mockCVData} />);
+
+    // Check if the CV header is present
+    const cvHeader = screen.getByRole("heading", { name: /cv/i });
+    expect(cvHeader).toBeInTheDocument();
+
+    // Check if the "Last ned PDF" button is present
+    const pdfButton = screen.getByRole("link", { name: /last ned pdf/i });
+    expect(pdfButton).toBeInTheDocument();
+
+    // Check if tabs are present
+    const qualificationsTab = screen.getByRole("tab", {
+      name: /nøkkelkvalifikasjoner/i,
+    });
+    const experienceTab = screen.getByRole("tab", { name: /erfaring/i });
+    const educationTab = screen.getByRole("tab", { name: /utdanning/i });
+    expect(qualificationsTab).toBeInTheDocument();
+    expect(experienceTab).toBeInTheDocument();
+    expect(educationTab).toBeInTheDocument();
 
-  /*
-  it("PDF laster inn og kan vises", async () => {
-    render(<CVContent />);
-    const pdf = await screen.findByText(/nøkkelkvalifikasjoner/i);
-    expect(pdf).toBeInTheDocument();
+    // Check if mock data is rendered (you might need to click on tabs to see this content)
+    const qualification = screen.getByText(/qualification 1/i);
+    expect(qualification).toBeInTheDocument();
   });
-  */
 });

cypress/e2e/cv.cy.ts

@@ -11,8 +11,8 @@ describe("Test at CV vises og laster", () => {
 
   it("Se at CV vises", () => {
     cy.get("main#maincontent").should("be.visible");
-    cy.get('.container img[alt="CV"]')
-      .should("have.length", 2)
+    cy.get('#tab-qualifications')
+      .should("have.length", 1)
       .and("be.visible");
     cy.get('a[href="./cv.pdf"]').should("be.visible");
   });

pnpm-lock.yaml

@@ -1,18 +1,23 @@
 import Header from "@/components/Layout/Header.component";
 import CVContent from "@/components/CV/CVContent.component";
 
+import { client } from "@/lib/sanity/client";
+import { cvQuery } from "@/lib/sanity/queries";
+
 import { Metadata } from "next/types";
 
 export const metadata: Metadata = {
   title: "CV - Dfweb",
   description: "Daniel Fjeldstad | Frontend Web Utvikler | Portefølje",
 };
 
-export default async function PostIndex() {
+export default async function CVPage() {
+  const cvData = await client.fetch(cvQuery);
+
   return (
     <>
       <Header />
-      <CVContent />
+      <CVContent cvData={cvData} />
     </>
   );
 }

src/app/cv/page.tsx

@@ -1,7 +1,7 @@
-import { NextRequest, NextResponse } from 'next/server'
- 
+import { NextRequest, NextResponse } from "next/server";
+
 export function middleware(request: NextRequest) {
-  const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
+  const nonce = Buffer.from(crypto.randomUUID()).toString("base64");
   const cspHeader = `
     default-src 'self';
     script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
@@ -13,29 +13,29 @@ export function middleware(request: NextRequest) {
     form-action 'self';
     frame-ancestors 'none';
     upgrade-insecure-requests;
-`
+`;
   // Replace newline characters and spaces
   const contentSecurityPolicyHeaderValue = cspHeader
-    .replace(/\s{2,}/g, ' ')
-    .trim()
- 
-  const requestHeaders = new Headers(request.headers)
-  requestHeaders.set('x-nonce', nonce)
- 
+    .replace(/\s{2,}/g, " ")
+    .trim();
+
+  const requestHeaders = new Headers(request.headers);
+  requestHeaders.set("x-nonce", nonce);
+
   requestHeaders.set(
-    'Content-Security-Policy',
-    contentSecurityPolicyHeaderValue
-  )
- 
+    "Content-Security-Policy",
+    contentSecurityPolicyHeaderValue,
+  );
+
   const response = NextResponse.next({
     request: {
       headers: requestHeaders,
     },
-  })
+  });
   response.headers.set(
-    'Content-Security-Policy',
-    contentSecurityPolicyHeaderValue
-  )
- 
-  return response
-}
+    "Content-Security-Policy",
+    contentSecurityPolicyHeaderValue,
+  );
+
+  return response;
+}