WIP - Admin can see a specific contractor

cypress/fixtures/contractor_show.json

@@ -0,0 +1,13 @@
+{
+  "contractors": [
+    {
+      "id": 1,
+      "name": "Jacks AB",
+      "contact_person": "Sam Peters",
+      "address": "Frejgatan 16113 49 Stockholm",
+      "telephone": "0767856789",
+      "email": "peter@mail.com",
+      "company_number": "556785-7932"
+    }
+  ]
+}

cypress/fixtures/contractors_index.json

@@ -3,20 +3,14 @@
       {
         "id": 1,
         "name": "Jacks AB",
-        "contact_person": "Sam Peters",
-        "address": "Frejgatan 16113 49 Stockholm",
         "telephone": "0767856789",
-        "email": "peter@mail.com",
-        "company_number": "556785-7932"
+        "email": "peter@mail.com"
       },
       {
         "id": 2,
         "name": "Active AB",
-        "contact_person": "Simon Eriksson",
-        "address": "Frejgatan 16113 45 Stockholm",
         "telephone": "0767856666",
-        "email": "gary@mail.com",
-        "company_number": "556785-6556"
+        "email": "gary@mail.com"
       }
     ]
   }

cypress/integration/adminCanSeeSpecificContractor.feature.js

@@ -0,0 +1,47 @@
+describe("Admin can see specific contractor", () => {
+  beforeEach(() => {
+    cy.server();
+    cy.route({
+      method: "GET",
+      url: "http://localhost:3000/api/v1/admin/contractors",
+      response: "fixture:contractors_index.json",
+    });
+    cy.route({
+      method: "GET",
+      url: "http://localhost:3000/api/v1/contractors/1",
+      response: "fixture:contractor_show.json",
+    });
+    cy.route({
+      method: "POST",
+      url: "http://localhost:3000/api/v1/auth/sign_in",
+      response: "fixture:registration_response.json",
+    });
+    cy.route({
+      method: "GET",
+      url: "http://localhost:3000/api/v1/auth/**",
+      response: "fixture:registration_response.json",
+    });
+
+    cy.visit("/");
+    cy.get("[data-cy=button]").contains("Admin").click({ force: true });
+    cy.get("[data-cy=login-form]").within(() => {
+      cy.get("[data-cy=email]").type("admin@mail.com");
+      cy.get("[data-cy=password]").type("password");
+      cy.get("[data-cy=button]").contains("Login").click();
+    });
+    cy.get("#view-contractors").click();
+  });
+
+  it("Admin can see content of contractor one", () => {
+    cy.get("[data-cy=contractor-1]").within(() => {
+      cy.get("[data-cy=button]").click();
+      cy.get("[data-cy=name]").should("contain", "Jacks AB");
+      cy.get("[data-cy=contactPerson]").should("contain", "Sam Peters");
+      cy.get("[data-cy=address]").should("contain", "Frejgatan 16113 49 Stockholm");
+      cy.get("[data-cy=telephone]").should("contain", "0767856789");
+      cy.get("[data-cy=email]").should("contain", "peter@mail.com");
+      cy.get("[data-cy=companyNumber]").should("contain", "556785-7932");
+    });
+    cy.get("[data-cy=contractor-2]").should("not.exist");
+  });
+});

src/components/ViewContractors.jsx

@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from "react";
 import axios from "axios";
-import { Card } from "semantic-ui-react";
+import { Card, Button } from "semantic-ui-react";
 
-const ContractorPage = () => {
+const ContractorPage = (props) => {
   const [contractors, setContractors] = useState([]);
+  const [viewSingleContractor, setViewSingleContractor] = useState(false);
 
   useEffect(() => {
     getContractors();
@@ -20,12 +21,24 @@ const ContractorPage = () => {
   let content = contractors.map((contractor) => (
     <div data-cy={`contractor-${contractor.id}`} data-id={contractor.id}>
       <div>
+        <Button primary id="view-single-contractor" onClick={setViewSingleContractor}>
+          Show more
+        </Button>
         <Card>
           <Card.Content>
             <Card.Header data-cy="name">{contractor.name}</Card.Header>
             <Card.Meta data-cy="telephone">{contractor.telephone}</Card.Meta>
             <Card.Meta data-cy="email">{contractor.email}</Card.Meta>
           </Card.Content>
+          <Card.Content>
+            {viewSingleContractor &&
+              <>
+                <Card.Header data-cy="contact-person">{contractor.contact_person}</Card.Header>
+                <Card.Meta data-cy="address">{contractor.address}</Card.Meta>
+                <Card.Meta data-cy="company_number">{contractor.company_number}</Card.Meta>
+              </>
+            }
+          </Card.Content>
         </Card>
         <br />
       </div>