From fdef9ea2d11c9c7c39776b06cc6cbdfbf1f8c346 Mon Sep 17 00:00:00 2001 From: Joe Chirchirillo Date: Wed, 11 Dec 2024 12:06:04 -0700 Subject: [PATCH 01/11] Chore: include router in menubar, set up dropdown --- package-lock.json | 21 ++++++++++++++++++++- src/components/layout/MenuBar.tsx | 22 ++++++++++++++++++---- 2 files changed, 38 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index b33e583..0b68612 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3729,6 +3729,26 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/@testing-library/dom": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", + "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.3.0", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/@testing-library/jest-dom": { "version": "5.17.0", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz", @@ -17701,7 +17721,6 @@ "version": "4.9.5", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", - "dev": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" diff --git a/src/components/layout/MenuBar.tsx b/src/components/layout/MenuBar.tsx index 18baf8f..ff4e6ef 100644 --- a/src/components/layout/MenuBar.tsx +++ b/src/components/layout/MenuBar.tsx @@ -4,9 +4,15 @@ import person from '../../components/icons/person-icon.png'; import building from '../../components/icons/building-1062.png'; import plus from '../../components/icons/plus-small_4338829.png'; import papers from '../../components/icons/documents-symbol_35920.png'; +import { useState } from 'react'; +import { Link } from 'react-router-dom'; function MenuBar() { + const [isDropDownOpen, setIsDropDownOpen] = useState(false) + const toggleDropDown = () => { + setIsDropDownOpen((previousState) => !previousState) + } return ( @@ -32,15 +38,23 @@ function MenuBar() { - - + + - + {/* - + */} + +
+ + {/* // is dropdown open && (code here) */} +
+ From ec2cc6779ba344429f3985f9e95edd2517ed92ee Mon Sep 17 00:00:00 2001 From: Joe Chirchirillo Date: Thu, 12 Dec 2024 14:44:24 -0700 Subject: [PATCH 02/11] Feat: style dropdown and add routes --- src/components/layout/MenuBar.tsx | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/src/components/layout/MenuBar.tsx b/src/components/layout/MenuBar.tsx index ff4e6ef..1149d4b 100644 --- a/src/components/layout/MenuBar.tsx +++ b/src/components/layout/MenuBar.tsx @@ -42,17 +42,24 @@ function MenuBar() { - {/* - - - - */} -
- - {/* // is dropdown open && (code here) */} + + {isDropDownOpen && ( + + )}
From 679a74ebbe4345378ff9a75a9ccf16d80e18f1b5 Mon Sep 17 00:00:00 2001 From: Joe Chirchirillo Date: Thu, 12 Dec 2024 15:41:15 -0700 Subject: [PATCH 03/11] Test: cypress testing for dropdown menu --- cypress/e2e/landingSpec.cy.js | 32 +++++++++++++++++++++++++++----- 1 file changed, 27 insertions(+), 5 deletions(-) diff --git a/cypress/e2e/landingSpec.cy.js b/cypress/e2e/landingSpec.cy.js index af9e140..1a5c3dd 100644 --- a/cypress/e2e/landingSpec.cy.js +++ b/cypress/e2e/landingSpec.cy.js @@ -22,13 +22,13 @@ describe('Landing page after logging in spec', () => { cy.get('[href="https://www.google.com/search?q=papers"] >.m-auto').should('have.attr', 'src').should('include', 'VORK5CYII') - cy.get('[href="https://www.google.com/search?q=plus"] > .m-auto').should('have.attr', 'src').should('include', 'SuQmCC') + cy.get('button.m-auto > .m-auto').should('have.attr', 'src').should('include', 'SuQmCC') cy.get('[href="https://www.google.com/search?q=account"] > .m-auto').should('have.attr', 'src').should('include', '/static/media/person-icon.7a1fafe972143cff67a1.png') }) - it('Should have clickable links for each icon;', () => { + xit('Should have clickable links for each icon;', () => { cy.get('[href="https://www.google.com/search?q=Turing.edu"] > .m-auto'); cy.url('match', 'https://www.google.com/search?q=Turing.edu'); cy.visit('http://localhost:3000/') @@ -49,9 +49,9 @@ describe('Landing page after logging in spec', () => { cy.url('match', 'https://www.google.com/search?q=papers'); cy.visit('http://localhost:3000/') - cy.get('[href="https://www.google.com/search?q=plus"]').click() - cy.url('match', 'https://www.google.com/search?q=plus'); - cy.visit('http://localhost:3000/') + // cy.get('[href="https://www.google.com/search?q=plus"]').click() + // cy.url('match', 'https://www.google.com/search?q=plus'); + // cy.visit('http://localhost:3000/') cy.get('[href="https://www.google.com/search?q=account"]').click() cy.url('match', 'https://www.google.com/search?q=account'); @@ -59,5 +59,27 @@ describe('Landing page after logging in spec', () => { }) + it('should render dropdown menu with link to create new contact', () => { + cy.visit('http://localhost:3000/') + cy.get('button.m-auto > .m-auto').click() + cy.contains('Create New Contact').should('exist'); + cy.get('.bg-cyan-600 > :nth-child(1) > a').click() + cy.url('match', 'http://localhost:3000/contacts/new'); + }) + + it('should render dropdown menu with link to create new company', () => { + cy.visit('http://localhost:3000/') + cy.get('button.m-auto > .m-auto').click() + cy.contains('Create New Company').should('exist'); + cy.get('.bg-cyan-600 > :nth-child(2) > a').click() + cy.url('match', 'http://localhost:3000/companies/new'); + }) + it('should render dropdown menu with link to create new contact', () => { + cy.visit('http://localhost:3000/') + cy.get('button.m-auto > .m-auto').click() + cy.contains('Create New Job Application').should('exist'); + cy.get('.bg-cyan-600 > :nth-child(3) > a').click() + cy.url('match', 'http://localhost:3000/jobapplications/new'); + }) }) \ No newline at end of file From df2c4c18d8be7cfe39f1f1177ac6ea2c1bb47452 Mon Sep 17 00:00:00 2001 From: Joe Chirchirillo Date: Thu, 12 Dec 2024 15:48:06 -0700 Subject: [PATCH 04/11] Fix: update prior cypress tests to work with dropdown --- cypress/e2e/landingSpec.cy.js | 55 ++++++++++++++++++----------------- 1 file changed, 28 insertions(+), 27 deletions(-) diff --git a/cypress/e2e/landingSpec.cy.js b/cypress/e2e/landingSpec.cy.js index 1a5c3dd..68613aa 100644 --- a/cypress/e2e/landingSpec.cy.js +++ b/cypress/e2e/landingSpec.cy.js @@ -28,7 +28,7 @@ describe('Landing page after logging in spec', () => { }) - xit('Should have clickable links for each icon;', () => { + it('Should have clickable links for each icon;', () => { cy.get('[href="https://www.google.com/search?q=Turing.edu"] > .m-auto'); cy.url('match', 'https://www.google.com/search?q=Turing.edu'); cy.visit('http://localhost:3000/') @@ -49,37 +49,38 @@ describe('Landing page after logging in spec', () => { cy.url('match', 'https://www.google.com/search?q=papers'); cy.visit('http://localhost:3000/') - // cy.get('[href="https://www.google.com/search?q=plus"]').click() - // cy.url('match', 'https://www.google.com/search?q=plus'); - // cy.visit('http://localhost:3000/') - cy.get('[href="https://www.google.com/search?q=account"]').click() cy.url('match', 'https://www.google.com/search?q=account'); cy.visit('http://localhost:3000/') }) - it('should render dropdown menu with link to create new contact', () => { - cy.visit('http://localhost:3000/') - cy.get('button.m-auto > .m-auto').click() - cy.contains('Create New Contact').should('exist'); - cy.get('.bg-cyan-600 > :nth-child(1) > a').click() - cy.url('match', 'http://localhost:3000/contacts/new'); - }) - - it('should render dropdown menu with link to create new company', () => { - cy.visit('http://localhost:3000/') - cy.get('button.m-auto > .m-auto').click() - cy.contains('Create New Company').should('exist'); - cy.get('.bg-cyan-600 > :nth-child(2) > a').click() - cy.url('match', 'http://localhost:3000/companies/new'); - }) - - it('should render dropdown menu with link to create new contact', () => { - cy.visit('http://localhost:3000/') - cy.get('button.m-auto > .m-auto').click() - cy.contains('Create New Job Application').should('exist'); - cy.get('.bg-cyan-600 > :nth-child(3) > a').click() - cy.url('match', 'http://localhost:3000/jobapplications/new'); + describe('DropDown Menu', () => { + it('has container for dropdown elements', () => { + cy.visit('http://localhost:3000/') + cy.get('button.m-auto > .m-auto').click() + cy.get('.dropDownPlus').should('exist'); + }) + it('should render dropdown menu with link to create new contact', () => { + cy.visit('http://localhost:3000/') + cy.get('button.m-auto > .m-auto').click() + cy.contains('Create New Contact').should('exist'); + cy.get('.bg-cyan-600 > :nth-child(1) > a').click() + cy.url('match', 'http://localhost:3000/contacts/new'); + }) + it('should render dropdown menu with link to create new company', () => { + cy.visit('http://localhost:3000/') + cy.get('button.m-auto > .m-auto').click() + cy.contains('Create New Company').should('exist'); + cy.get('.bg-cyan-600 > :nth-child(2) > a').click() + cy.url('match', 'http://localhost:3000/companies/new'); + }) + it('should render dropdown menu with link to create new contact', () => { + cy.visit('http://localhost:3000/') + cy.get('button.m-auto > .m-auto').click() + cy.contains('Create New Job Application').should('exist'); + cy.get('.bg-cyan-600 > :nth-child(3) > a').click() + cy.url('match', 'http://localhost:3000/jobapplications/new'); + }) }) }) \ No newline at end of file From c9578a4d3283c5625158aa776bddfd2d8b082f7f Mon Sep 17 00:00:00 2001 From: Joe Chirchirillo Date: Thu, 12 Dec 2024 19:10:03 -0700 Subject: [PATCH 05/11] Feat: plus changes color when open --- src/components/icons/plus-open.png | Bin 0 -> 7582 bytes src/components/layout/MenuBar.tsx | 11 ++++++++--- 2 files changed, 8 insertions(+), 3 deletions(-) create mode 100644 src/components/icons/plus-open.png diff --git a/src/components/icons/plus-open.png b/src/components/icons/plus-open.png new file mode 100644 index 0000000000000000000000000000000000000000..4ef45a22b0709e61bea5baa5429c7c977a90d126 GIT binary patch literal 7582 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
- + {isDropDownOpen && (
);