fix(Placeholder): ensure form inputs for joke are required

Fixes #304

.gitignore

@@ -7,6 +7,7 @@
 
 # testing
 /coverage
+/cypress/downloads
 
 # vite
 /dist

cypress/e2e/room/room.feature

@@ -17,14 +17,18 @@ Feature: Room
       And I type "{enter}"
       And I click on text "1"
       And I click on button "Start"
-    Then I see heading "Create a Joke:"
-      And I see text "Preview: "
-    When I find input by display value ""
-      And I type "test joke"
-    Then I see text "test joke"
+    Then I see heading "Create a Joke"
+    When I wait 1 second
+      And I load joke id "21"
+      And I click on button "Save"
+      And I find input by display value ""
+      And I type "foo"
+      And I find input by display value ""
+      And I type "bar"
+    Then I see text "Preview: What's foo's computer password? bar"
     When I click on button "Create Joke"
-      Then I see button "test joke"
-    When I click on button "test joke"
+      Then I see button "What's foo's computer password? bar"
+    When I click on button "What's foo's computer password? bar"
     Then I see text "1"
     When I click on button "Next Round"
     Then I see heading "Room"

cypress/support/step_definitions/joke.ts

@@ -0,0 +1,14 @@
+import { When } from '@badeball/cypress-cucumber-preprocessor';
+import { When_I_visit_URL } from 'cypress-cucumber-steps';
+
+function When_I_load_joke_id(jokeId: string) {
+  cy.url().then((url) => {
+    When_I_visit_URL(`${url}&joke_id=${jokeId}`);
+
+    cy.on('window:confirm', (text) => {
+      expect(text).to.contains('Reload site?');
+    });
+  });
+}
+
+When('I load joke id {string}', When_I_load_joke_id);

cypress/tsconfig.json

@@ -1,9 +1,9 @@
 {
+  "extends": "../tsconfig.json",
   "compilerOptions": {
-    "target": "esnext",
-    "lib": ["dom", "esnext"],
-    "moduleResolution": "nodenext",
-    "strict": true,
-    "skipLibCheck": true,
+    "target": "es2021",
+    "types": ["cypress", "node", "cypress-real-events"]
   },
+  "include": ["../node_modules/cypress", "./**/*.ts"],
+  "exclude": ["node_modules"]
 }

src/components/Joke/Joke.tsx

@@ -27,6 +27,9 @@ export default function Joke(props: Props) {
   const onSubmit = useCallback(
     (event: React.ChangeEvent<HTMLFormElement>) => {
       event.preventDefault();
+
+      playSound.crowdLaugh();
+
       setJoke({
         creatorId: playerId,
         joke: Mustache.render(props.template, placeholders),
@@ -71,7 +74,6 @@ export default function Joke(props: Props) {
 
   const createJoke = useCallback(() => {
     playSound.confirmation();
-    playSound.crowdLaugh();
   }, []);
 
   return (

src/components/Placeholder/Placeholder.tsx

@@ -30,6 +30,7 @@ export default function Placeholder(props: Props) {
           {...params}
           label={props.category}
           onClick={playSound.select}
+          required
         />
       );
     },

src/data/jokes.json

@@ -1,5 +1,6 @@
 [
   {
+    "jokeId": 0,
     "template": "Knock, knock.\nWho's there?\n{{noun1}}.\n{{noun2}} who?\n{{punchline}}",
     "placeholders": {
       "noun1": "noun",
@@ -8,6 +9,7 @@
     }
   },
   {
+    "jokeId": 1,
     "template": "What did the {{noun1}} say to the {{noun2}}?\n{{punchline}}",
     "placeholders": {
       "noun1": "noun",
@@ -16,6 +18,7 @@
     }
   },
   {
+    "jokeId": 2,
     "template": "What is something you can say in both a {{place1}} and in a {{place2}}?\n{{punchline}}",
     "placeholders": {
       "place1": "place",
@@ -24,6 +27,7 @@
     }
   },
   {
+    "jokeId": 3,
     "template": "What has {{noun1}} and {{noun2}}?\n{{punchline}}",
     "placeholders": {
       "noun1": "noun",
@@ -32,13 +36,15 @@
     }
   },
   {
+    "jokeId": 4,
     "template": "What's the best thing about {{noun}}?\n{{punchline}}",
     "placeholders": {
       "noun": "noun",
       "punchline": "punchline"
     }
   },
   {
+    "jokeId": 5,
     "template": "{{noun1}} and {{noun2}} walk into a bar.\n{{punchline}}",
     "placeholders": {
       "noun1": "noun",
@@ -47,13 +53,15 @@
     }
   },
   {
+    "jokeId": 6,
     "template": "Did you hear about the {{noun}}?\n{{punchline}}",
     "placeholders": {
       "noun": "noun",
       "punchline": "punchline"
     }
   },
   {
+    "jokeId": 7,
     "template": "Did you hear about the {{noun}} who {{verb}}?\n{{punchline}}",
     "placeholders": {
       "noun": "noun",
@@ -62,13 +70,15 @@
     }
   },
   {
+    "jokeId": 8,
     "template": "What do you call a {{noun}}?\n{{punchline}}",
     "placeholders": {
       "noun": "noun",
       "punchline": "punchline"
     }
   },
   {
+    "jokeId": 9,
     "template": "What do you call a {{noun}} that {{verb}}?\n{{punchline}}",
     "placeholders": {
       "noun": "noun",
@@ -77,13 +87,15 @@
     }
   },
   {
+    "jokeId": 10,
     "template": "Why did the {{animal}} cross the road?\n{{punchline}}",
     "placeholders": {
       "animal": "animal",
       "punchline": "punchline"
     }
   },
   {
+    "jokeId": 11,
     "template": "Why did the {{noun}} {{verb}}?\n{{punchline}}",
     "placeholders": {
       "noun": "noun",
@@ -92,13 +104,15 @@
     }
   },
   {
+    "jokeId": 12,
     "template": "I went to {{place}} and all I got was this lousy {{noun}}",
     "placeholders": {
       "place": "place",
       "noun": "noun"
     }
   },
   {
+    "jokeId": 13,
     "template": "What did {{noun1}} say to {{noun2}}? {{punchline}}",
     "placeholders": {
       "noun1": "noun",
@@ -107,13 +121,15 @@
     }
   },
   {
+    "jokeId": 14,
     "template": "A {{noun}} walks into a bar. The barman says: {{punchline}}",
     "placeholders": {
       "noun": "noun",
       "punchline": "punchline"
     }
   },
   {
+    "jokeId": 15,
     "template": "I heard there is a {{noun}} that {{verb}}. {{punchline}}",
     "placeholders": {
       "noun": "noun",
@@ -122,13 +138,15 @@
     }
   },
   {
+    "jokeId": 16,
     "template": "Have you heard the joke about {{noun}}? {{punchline}}",
     "placeholders": {
       "noun": "noun",
       "punchline": "punchline"
     }
   },
   {
+    "jokeId": 17,
     "template": "What's the difference between {{noun1}} and {{noun2}}? {{punchline}}",
     "placeholders": {
       "noun1": "noun",
@@ -137,34 +155,39 @@
     }
   },
   {
+    "jokeId": 18,
     "template": "Have you ever tried to {{verb}}? {{punchline}}",
     "placeholders": {
       "verb": "verb",
       "punchline": "punchline"
     }
   },
   {
+    "jokeId": 19,
     "template": "Yesterday I accidentally {{verb}}. {{punchline}}",
     "placeholders": {
       "verb": "verb",
       "punchline": "punchline"
     }
   },
   {
+    "jokeId": 20,
     "template": "I don't trust {{noun}} because {{punchline}}",
     "placeholders": {
       "noun": "noun",
       "punchline": "punchline"
     }
   },
   {
+    "jokeId": 21,
     "template": "What's {{noun}}'s computer password? {{punchline}}",
     "placeholders": {
       "noun": "noun",
       "punchline": "punchline"
     }
   },
   {
+    "jokeId": 22,
     "template": "What kind of {{noun1}} do {{noun2}} do? {{punchline}}",
     "placeholders": {
       "noun1": "noun",
@@ -173,20 +196,23 @@
     }
   },
   {
+    "jokeId": 23,
     "template": "What's the advantage of {{noun}}? {{punchline}}",
     "placeholders": {
       "noun": "noun",
       "punchline": "punchline"
     }
   },
   {
+    "jokeId": 24,
     "template": "What did the {{noun}} name his son? {{punchline}}",
     "placeholders": {
       "noun": "noun",
       "punchline": "punchline"
     }
   },
   {
+    "jokeId": 25,
     "template": "What did the {{noun}} name her daughter? {{punchline}}",
     "placeholders": {
       "noun": "noun",