test: add test for non-alpha keys

Add test to check that all (ish) printable keyboard keys don't produce
output to the UI. Added tabindex to App to enable .type() to work where
there are no other valid elements to chain .type() from. Update ISSUES
and DEVNOTES.md files.

DEVNOTES.md

@@ -334,13 +334,7 @@ export default Shade;
   - index only incremented on a valid guess
   - execute the animation to flip the tiles when currentGuessIndex is updated
 
-### Next Commit
-
-### Todo
-
-- add cypress testing
-
-- explosion? when the game is over cause the tiles in the guesses to fly away in random directions and rotate on X and Y randomly
+### Scaling the UI/responsiveness - it's not mobile first
 
 - Using site on my old J3 Samsung, I think that not scaling the UI down after about 650px height is probably a bad idea.
 - we'll use a media query and just make everything scale down
@@ -354,6 +348,15 @@ export default Shade;
     - if device is in landscape mode and the width is less than 400px
       - show 'please rotate' when height is less than width
 
+### Explosion?
+
+- explosion? when the game is over cause the tiles in the guesses to fly away in random directions and rotate on X and Y randomly
+- we'll do this in a separate small project just to mess with framer-motion
+
+### Next Commit
+
+### Todo
+
 - add a mute button to disable sound/music for entire page
 
 ### Testing
@@ -381,5 +384,5 @@ export default Shade;
 
   - Each alphabetic key does what is expected - DONE
 
-- unhappy path
+- unhappy path - DONE
   - keys 0-9 and all keys that are not A-Z or backspace or enter don't do anything - since we aren't using an input to capture what we type, we can't use .type() to test this

ISSUES.md

@@ -37,7 +37,7 @@ const Guess: React.FC<GuessProps> = ({ guess }) => {...}
 - this package doesn't appear to set `box-sizing: border-box;` which is something I would use on all projects
 - I had to set my `nav` to `border-box` manually
 
-### 4 DOMException: play() request is async woes
+### 4 DOMException: play() request interrupted woes
 
 - When the user clicks a button and makes the Information.tsx element visible, music will start to play.
 - when the user closes the Information.tsx element, the music should be paused
@@ -156,3 +156,11 @@ playMedia(videoElement);
 
 - it's worth noting that the `signal` is never used
   - for me that says maybe this isn't a great solution but I'm not willing to go down that ChatGPT rabbithole
+
+### 5 Cypress .type() won't work if you're not typing into an input (or similar element)
+
+- the answer to this is not `cypress-real-events`
+- the potential answer (it may be hacky or bad practice) is just to add a `tabindex={0}` to your App.tsx
+- after this is done, .type() will work
+  - you don't have to get or focus the element that has the tabindex on it
+  - get an element (eg `#root`) and chain `type()` onto that and it works

cypress/e2e/wurdil.cy.ts

@@ -149,4 +149,14 @@ describe("Wordle clone app test", () => {
     cy.get('[data-testid="start-playing-prompt"]').should("exist");
     cy.get('[data-testid="game-over"]').should("not.exist");
   });
+  it.only("most keys produce no output to the UI or do not have an effect on the application", () => {
+    // first guess tile contains no input
+    cy.get('[data-testid="tile"]').should("exist").eq(0).should("contain", "");
+    // type non-alpha keys into app
+    cy.get("#root").type("1234567890!$%^&*()_+[]{}'#@~;:,.<>/?|\\\"");
+    cy.get('[data-testid="tile"]').eq(0).should("contain", "");
+    // test alpha
+    cy.get("#root").type("A");
+    cy.get('[data-testid="tile"]').eq(0).should("contain", "A");
+  });
 });

src/App.tsx

@@ -248,7 +248,7 @@ const App: React.FC = () => {
       <Reset />
       <ToastContainer />
 
-      <Wrapper data-testid="app-container">
+      <Wrapper tabIndex={0} data-testid="app-container">
         {isVisible && <Information isVisible={isVisible} close={close} />}
         <Navbar show={show} windowWidth={windowWidth} />
         <section>