manufacturer landing page #129

cypress/e2e/manufacturer/manufacturer.cy.ts

@@ -298,4 +298,49 @@ describe('Manufacturer', () => {
         cy.contains('Please enter a post code or zip code.');
       });
   });
+
+  it('navigates to landing page and navigates back to the table view', () => {
+    cy.findByText('Manufacturer A').click();
+    cy.findByText('Telephone number:').should('exist');
+
+    cy.findByRole('link', { name: 'Back to manufacturer table view' }).click();
+
+    cy.findByText('Manufacturer A').should('exist');
+    cy.findByText('Manufacturer B').should('exist');
+    cy.findByText('Manufacturer C').should('exist');
+  });
+
+  it('navigates to landing page, opens edit dialog and closes it', () => {
+    cy.findByText('Manufacturer A').click();
+    cy.findByText('Telephone number:').should('exist');
+
+    cy.findByRole('button', { name: 'Edit' }).click();
+    cy.findByLabelText('Name *').should('have.value', 'Manufacturer A');
+    cy.findByLabelText('URL').should('have.value', 'http://example.com');
+    cy.findByLabelText('Address Line *').should(
+      'have.value',
+      '1 Example Street'
+    );
+    cy.findByLabelText('Town').should('have.value', 'Oxford');
+    cy.findByLabelText('County').should('have.value', 'Oxfordshire');
+    cy.findByLabelText('Country *').should('have.value', 'United Kingdom');
+    cy.findByLabelText('Post/Zip code *').should('have.value', 'OX1 2AB');
+    cy.findByLabelText('Telephone number').should('have.value', '07334893348');
+
+    cy.findByRole('button', { name: 'Cancel' }).click();
+  });
+
+  it('displays expired landing page message and navigates back to manufacturer table view', () => {
+    cy.visit('/inventory-management-system/manufacturer/invalid');
+
+    cy.findByText(
+      `This manufacturer doesn't exist. Please click the Home button to navigate to the manufacturer table`
+    ).should('exist');
+
+    cy.findByRole('link', { name: 'Home' }).click();
+
+    cy.findByText('Manufacturer A').should('exist');
+    cy.findByText('Manufacturer B').should('exist');
+    cy.findByText('Manufacturer C').should('exist');
+  });
 });

src/manufacturer/manufacturer.component.tsx

@@ -9,7 +9,7 @@ import {
   IconButton,
   useTheme,
   Box,
-  Link,
+  Link as MuiLink,
   Button,
 } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -19,6 +19,7 @@ import { useManufacturers } from '../api/manufacturer';
 import DeleteManufacturerDialog from './deleteManufacturerDialog.component';
 import { Manufacturer, ManufacturerDetails } from '../app.types';
 import ManufacturerDialog from './manufacturerDialog.component';
+import { Link } from 'react-router-dom';
 
 function ManufacturerComponent() {
   const [manufacturerDetails, setManufacturerDetails] =
@@ -187,7 +188,13 @@ function ManufacturerComponent() {
                       borderRight: '1px solid #e0e0e0',
                     }}
                   >
-                    {item.name}
+                    <MuiLink
+                      underline="hover"
+                      component={Link}
+                      to={`/inventory-management-system/manufacturer/${item.id}`}
+                    >
+                      {item.name}
+                    </MuiLink>
                   </TableCell>
                   <TableCell
                     sx={{
@@ -198,9 +205,9 @@ function ManufacturerComponent() {
                     }}
                   >
                     {item.url && (
-                      <Link underline="hover" href={item.url}>
+                      <MuiLink underline="hover" href={item.url}>
                         {item.url}
-                      </Link>
+                      </MuiLink>
                     )}
                   </TableCell>
                   <TableCell
@@ -250,5 +257,4 @@ function ManufacturerComponent() {
     </Box>
   );
 }
-
 export default ManufacturerComponent;

src/manufacturer/manufacturerLandingPage.component.test.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { renderComponentWithMemoryRouter } from '../setupTests';
+import { screen, waitFor } from '@testing-library/react';
+import ManufacturerLandingPage from './manufacturerLandingPage.component';
+import userEvent from '@testing-library/user-event';
+
+describe('Manufacturer Landing page', () => {
+  let user;
+  const createView = (path: string) => {
+    return renderComponentWithMemoryRouter(<ManufacturerLandingPage />, path);
+  };
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
+  it('landing page renders data correctly', async () => {
+    createView('/inventory-management-system/manufacturer/1');
+
+    await waitFor(() => {
+      expect(screen.getByText('Manufacturer A')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole('link', { name: 'Back to manufacturer table view' })
+      ).toBeInTheDocument();
+    });
+    expect(screen.getByText('URL:')).toBeInTheDocument();
+    expect(screen.getByText('http://example.com')).toBeInTheDocument();
+    expect(screen.getByText('Telephone number:')).toBeInTheDocument();
+    expect(screen.getByText('07334893348')).toBeInTheDocument();
+    expect(screen.getByText('Address')).toBeInTheDocument();
+  });
+
+  it('shows no manufacturer page correctly', async () => {
+    createView('/inventory-management-system/manufacturer/invalid');
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(
+          `This manufacturer doesn't exist. Please click the Home button to navigate to the manufacturer table`
+        )
+      ).toBeInTheDocument();
+    });
+    const editButton = screen.getByRole('button', { name: 'Edit' });
+    expect(editButton).toBeDisabled();
+    const homeButton = screen.getByRole('link', { name: 'Home' });
+    expect(homeButton).toBeInTheDocument();
+  });
+
+  it('shows the loading indicator', async () => {
+    createView('/inventory-management-system/manufacturer/1');
+
+    await waitFor(() => {
+      expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    });
+  });
+
+  it('opens and closes the edit manufacturer dialog', async () => {
+    createView('/inventory-management-system/manufacturer/1');
+
+    await waitFor(() => {
+      expect(screen.getByText('Manufacturer A')).toBeInTheDocument();
+    });
+
+    const editButton = screen.getByRole('button', {
+      name: 'Edit',
+    });
+    await user.click(editButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+    });
+
+    const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+    await user.click(cancelButton);
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+  });
+});