From 6cde6a94fc627b6f0e75aa6391c12b73a6950e49 Mon Sep 17 00:00:00 2001
From: Taylor Bell <taylorbell@gmail.com>
Date: Wed, 6 Jul 2022 16:25:37 -0600
Subject: [PATCH] update starting points

---
 App.js                                        |  6 +--
 components/__tests__/icon-button.test.js      | 11 ++---
 components/header.js                          |  4 +-
 components/page-home.js                       |  2 +-
 .../payment-form/presets-custom-amounts.js    |  9 +---
 .../answer/meganav.t.js                       | 49 +++++++++++++++++++
 6 files changed, 59 insertions(+), 22 deletions(-)
 create mode 100644 exercise2-cypress-components/answer/meganav.t.js

diff --git a/App.js b/App.js
index e67e304..031b98e 100644
--- a/App.js
+++ b/App.js
@@ -28,7 +28,7 @@ export function App() {
 
 	return <AppContext.Provider value={context}>
 		<Header inert={inertMarkupValue ? 'inert' : null} />
-		<main id="main" inert={inertMarkupValue ? 'inert' : null}>
+		<div id="main" inert={inertMarkupValue ? 'inert' : null}>
 			<Router>
 				<HomePage path="/" />
 				<AboutPage path="/about" />
@@ -41,14 +41,14 @@ export function App() {
 				<HikesPage path="/adventures-hikes" />
 				<TripIdeasPage path="/trip-ideas" />
 			</Router>
-		</main>
+		</div>
 		<footer id="footer" inert={inertMarkupValue ? 'inert' : null}>
 			<div className="layout">
 				<div id="footer-logo">
 					<img src={imgFooterLogo} alt="logo" />
 				</div>
 			</div>
-		</footer>
+		</div>
 	</AppContext.Provider>
 }
 
diff --git a/components/__tests__/icon-button.test.js b/components/__tests__/icon-button.test.js
index 7e63342..a0b9630 100644
--- a/components/__tests__/icon-button.test.js
+++ b/components/__tests__/icon-button.test.js
@@ -11,13 +11,8 @@
  
  const user = userEvent.setup()
  
- xdescribe('IconButton', () =>{
-     xit('labels the button', () => {
-         const textFixture = "Send it!"
-         const { getByLabelText } = render(<IconButton name={textFixture} />)
- 
-         const buttonText = getByLabelText(textFixture)
- 
-         expect(buttonText).toBeInTheDocument()
+describe('IconButton', () =>{
+     it('labels the button', () => {
+
      })
  })
\ No newline at end of file
diff --git a/components/header.js b/components/header.js
index a28c201..d41e223 100644
--- a/components/header.js
+++ b/components/header.js
@@ -6,7 +6,7 @@ import MegaNav from "./meganav/"
 
 const Header = ({inert}) => {
     return (
-        <header id="header" inert={inert}>
+        <div id="header" inert={inert}>
             <div id="header-nav">
                 <div id="header-logo">
                     <a href="/" className="header-main-item">
@@ -21,7 +21,7 @@ const Header = ({inert}) => {
                     <a href="#">Login</a>
                 </div>
             </div>
-        </header>
+        </div>
     )
 }
 
diff --git a/components/page-home.js b/components/page-home.js
index e75a1c2..e11e0e8 100644
--- a/components/page-home.js
+++ b/components/page-home.js
@@ -20,7 +20,7 @@ const HomePage = () => {
                 <SearchForm />
                 <div className="wide-layout two-part-overlap">
                     <div className="content-block-wrap">
-                        <img src={imgTents} alt="tents"/>
+                        <img src={imgTents} />
                         <div className="content-block">
                             <h3>Rest and relaxation is a part of life</h3>
                             <div>We know you need a break. Get out of town, or stay and play. Taking rest and time away from the daily grind of life is essential for maintaining balance and positive well-being.</div>
diff --git a/components/payment-form/presets-custom-amounts.js b/components/payment-form/presets-custom-amounts.js
index 03775e0..613843d 100644
--- a/components/payment-form/presets-custom-amounts.js
+++ b/components/payment-form/presets-custom-amounts.js
@@ -1,17 +1,12 @@
 import React, {useRef, useState} from "react"
 
 const PresetsCustomAmounts = ({amounts}) => {
-    const [selectedOption, setSelectedOption] = useState(false)
     const customAmtRadio = useRef(null)
     
     const focusInCustomInput = () => {
         customAmtRadio.current.checked = true
     }
-    const handleChange = (event) => {
-        if (event.target.checked) {
-            setSelectedOption(event.target.value)
-        }
-    }
+
     return (
         <>
             {amounts.map((amount, index)=> {
@@ -29,10 +24,8 @@ const PresetsCustomAmounts = ({amounts}) => {
             })}
             <label className="custom-radio-group">
                 <input
-                    checked={selectedOption === 'Custom'}
                     id="amt_custom"
                     name="amounts"
-                    onChange={(event) => handleChange(event)}
                     ref={customAmtRadio}
                     type="radio"
                     value="Custom"
diff --git a/exercise2-cypress-components/answer/meganav.t.js b/exercise2-cypress-components/answer/meganav.t.js
new file mode 100644
index 0000000..263e999
--- /dev/null
+++ b/exercise2-cypress-components/answer/meganav.t.js
@@ -0,0 +1,49 @@
+import * as React from 'react'
+import { mount } from '@cypress/react'
+
+import MegaNav from './meganav/index'
+
+xdescribe('MegaNav', () => {
+  beforeEach(() => {
+    mount(<MegaNav />)
+    cy.injectAxe()
+  })
+
+  it('should operate with the keyboard via toggle buttons', () => {
+    cy.get('button[data-testid="megamenu-section1"]').focus().click()
+
+    cy.focused().should('have.attr', 'aria-expanded', 'true')
+
+    cy.focused().type('{esc}').should('have.attr', 'aria-expanded', 'false')
+  })
+
+  it('submenus should not be reachable when closed', () => {
+    cy.get('button[data-testid="megamenu-section1"]').focus().realPress('Tab')
+
+    cy.focused().should('not.have.attr', '[data-testid="link-0"]')
+    cy.focused().then(($el) => {
+      expect($el).to.have.attr('data-testid', 'megamenu-section2')
+    })
+  })
+
+  it('should reach open submenu items with the keyboard', () => {
+    cy.get('button[data-testid="megamenu-section2"]').focus().click()
+
+    cy.focused().realPress('Tab')
+
+    cy.focused().then(($el) => {
+      expect($el).to.have.attr('data-testid', 'link-0')
+    })
+  })
+
+  it('should have no accessibility issues when open', () => {
+      cy.get('button[data-testid="megamenu-section1"]').click()
+
+      cy.checkA11y(null, {
+          runOnly: {
+              type: 'rule',
+              values: ['color-contrast']
+          }
+      })
+  })
+})