Merge pull request #33 from kartAI/feat/22-3d-tiltaksvisning-page

feat/22 3d tiltaksvisning page

frontend/cypress/e2e/pages/test_embedded_frame.cy.ts

@@ -0,0 +1,42 @@
+const external_component_url = "https://byggesak3d.norkart.no/view/bf204afe-e50e-4ac6-8839-ebd9406167ac";
+const BASE_URL = "http://localhost:3000/";
+const PAGE_URL = BASE_URL + "tiltaksvisning";
+
+
+describe('Iframe Tests', () => {
+  beforeEach(() => {
+    // Intercept the GET request for the iframe's src URL and alias it as 'iframeLoad'
+    cy.intercept('GET', `${external_component_url}*`).as('iframeLoad');
+
+    // Visit the target page after setting up the intercept
+    cy.visit(PAGE_URL);
+  });
+
+  it('should load the iframe without errors', () => {
+    let timeout = 10_000;
+    cy.get('[data-cy="tiltaksvisning"]', { timeout: timeout })
+      .should('exist')
+      .and('have.attr', 'src', external_component_url)
+      .and('be.visible')
+      .as('embedding');
+
+    // Wait for the iframe's network request to complete and assert the response status
+    cy.wait('@iframeLoad', { timeout: timeout })
+      .its('response.statusCode')
+      .should('eq', 200);
+
+    cy.get('@embedding').should('be.visible');
+  });
+});
+
+
+describe("The page must ", () => {
+  it("should load the title", () => {
+    cy.visit(PAGE_URL)
+    cy.get('[data-cy="title"]')
+    .should("exist")
+    .and("contain.text", "3D tiltaksvisning")
+    .and('be.visible')
+  }
+  )
+})

frontend/src/app/_components/EmbeddedFrame.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+interface IframeProps {
+  src: string;
+  title?: string;
+  width?: string | number;
+  height?: string | number;
+  frameBorder?: number;
+  allowFullScreen?: boolean;
+}
+
+const EmbeddedFrame: React.FC<IframeProps> = ({
+  src,
+  title = 'Embedded Frame',
+  width = '90%',
+  height = '600vh',
+  allowFullScreen = false,
+  ...props
+}) => {
+  return (
+    <iframe
+      src={src}
+      title={title}
+      width={width}
+      height={height}
+      allowFullScreen={allowFullScreen}
+
+      {...props}
+    ></iframe>
+  );
+};
+
+export default EmbeddedFrame;

frontend/src/app/tiltaksvisning/page.tsx

@@ -0,0 +1,12 @@
+import EmbeddedFrame from "../_components/EmbeddedFrame";
+
+
+export default async function Home() {
+  return (
+    <div>
+        <h1 data-cy="title">3D tiltaksvisning</h1>
+        <EmbeddedFrame data-cy="tiltaksvisning"  src="https://byggesak3d.norkart.no/view/bf204afe-e50e-4ac6-8839-ebd9406167ac" title="3D tiltaksvisning" />
+    </div>
+  );
+}
+

scripts/pre-commit.sh

@@ -1,6 +1,7 @@
 #!/bin/sh
 # Run linter on staged JavaScript, TypeScript files
-npx next lint --fix
+cd frontend
+npm run lint --fix
 
 if [ $? -ne 0 ]; then
   echo "Linting failed. Please fix the issues before committing."