From 25c19796817030740521dcd36fcd6e7c0d3a9c36 Mon Sep 17 00:00:00 2001 From: Mark Date: Fri, 20 Sep 2024 19:38:58 -0400 Subject: [PATCH] fix(Placeholder): ensure form inputs for joke are required Fixes #304 --- .gitignore | 1 + cypress/e2e/room/room.feature | 18 +++++++++------ cypress/support/step_definitions/joke.ts | 14 ++++++++++++ cypress/tsconfig.json | 10 ++++----- src/components/Joke/Joke.tsx | 4 +++- src/components/Placeholder/Placeholder.tsx | 1 + src/data/jokes.json | 26 ++++++++++++++++++++++ 7 files changed, 61 insertions(+), 13 deletions(-) create mode 100644 cypress/support/step_definitions/joke.ts diff --git a/.gitignore b/.gitignore index b148c31e..80419fe3 100644 --- a/.gitignore +++ b/.gitignore @@ -7,6 +7,7 @@ # testing /coverage +/cypress/downloads # vite /dist diff --git a/cypress/e2e/room/room.feature b/cypress/e2e/room/room.feature index d9773fa8..138c411a 100644 --- a/cypress/e2e/room/room.feature +++ b/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" diff --git a/cypress/support/step_definitions/joke.ts b/cypress/support/step_definitions/joke.ts new file mode 100644 index 00000000..0a0d6855 --- /dev/null +++ b/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); diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json index c5fc88ba..687a7141 100644 --- a/cypress/tsconfig.json +++ b/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"] } diff --git a/src/components/Joke/Joke.tsx b/src/components/Joke/Joke.tsx index e1eb104a..8b535790 100644 --- a/src/components/Joke/Joke.tsx +++ b/src/components/Joke/Joke.tsx @@ -27,6 +27,9 @@ export default function Joke(props: Props) { const onSubmit = useCallback( (event: React.ChangeEvent) => { 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 ( diff --git a/src/components/Placeholder/Placeholder.tsx b/src/components/Placeholder/Placeholder.tsx index e6c3291c..f422a9b8 100644 --- a/src/components/Placeholder/Placeholder.tsx +++ b/src/components/Placeholder/Placeholder.tsx @@ -30,6 +30,7 @@ export default function Placeholder(props: Props) { {...params} label={props.category} onClick={playSound.select} + required /> ); }, diff --git a/src/data/jokes.json b/src/data/jokes.json index 3097b942..46fe9d74 100644 --- a/src/data/jokes.json +++ b/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,6 +36,7 @@ } }, { + "jokeId": 4, "template": "What's the best thing about {{noun}}?\n{{punchline}}", "placeholders": { "noun": "noun", @@ -39,6 +44,7 @@ } }, { + "jokeId": 5, "template": "{{noun1}} and {{noun2}} walk into a bar.\n{{punchline}}", "placeholders": { "noun1": "noun", @@ -47,6 +53,7 @@ } }, { + "jokeId": 6, "template": "Did you hear about the {{noun}}?\n{{punchline}}", "placeholders": { "noun": "noun", @@ -54,6 +61,7 @@ } }, { + "jokeId": 7, "template": "Did you hear about the {{noun}} who {{verb}}?\n{{punchline}}", "placeholders": { "noun": "noun", @@ -62,6 +70,7 @@ } }, { + "jokeId": 8, "template": "What do you call a {{noun}}?\n{{punchline}}", "placeholders": { "noun": "noun", @@ -69,6 +78,7 @@ } }, { + "jokeId": 9, "template": "What do you call a {{noun}} that {{verb}}?\n{{punchline}}", "placeholders": { "noun": "noun", @@ -77,6 +87,7 @@ } }, { + "jokeId": 10, "template": "Why did the {{animal}} cross the road?\n{{punchline}}", "placeholders": { "animal": "animal", @@ -84,6 +95,7 @@ } }, { + "jokeId": 11, "template": "Why did the {{noun}} {{verb}}?\n{{punchline}}", "placeholders": { "noun": "noun", @@ -92,6 +104,7 @@ } }, { + "jokeId": 12, "template": "I went to {{place}} and all I got was this lousy {{noun}}", "placeholders": { "place": "place", @@ -99,6 +112,7 @@ } }, { + "jokeId": 13, "template": "What did {{noun1}} say to {{noun2}}? {{punchline}}", "placeholders": { "noun1": "noun", @@ -107,6 +121,7 @@ } }, { + "jokeId": 14, "template": "A {{noun}} walks into a bar. The barman says: {{punchline}}", "placeholders": { "noun": "noun", @@ -114,6 +129,7 @@ } }, { + "jokeId": 15, "template": "I heard there is a {{noun}} that {{verb}}. {{punchline}}", "placeholders": { "noun": "noun", @@ -122,6 +138,7 @@ } }, { + "jokeId": 16, "template": "Have you heard the joke about {{noun}}? {{punchline}}", "placeholders": { "noun": "noun", @@ -129,6 +146,7 @@ } }, { + "jokeId": 17, "template": "What's the difference between {{noun1}} and {{noun2}}? {{punchline}}", "placeholders": { "noun1": "noun", @@ -137,6 +155,7 @@ } }, { + "jokeId": 18, "template": "Have you ever tried to {{verb}}? {{punchline}}", "placeholders": { "verb": "verb", @@ -144,6 +163,7 @@ } }, { + "jokeId": 19, "template": "Yesterday I accidentally {{verb}}. {{punchline}}", "placeholders": { "verb": "verb", @@ -151,6 +171,7 @@ } }, { + "jokeId": 20, "template": "I don't trust {{noun}} because {{punchline}}", "placeholders": { "noun": "noun", @@ -158,6 +179,7 @@ } }, { + "jokeId": 21, "template": "What's {{noun}}'s computer password? {{punchline}}", "placeholders": { "noun": "noun", @@ -165,6 +187,7 @@ } }, { + "jokeId": 22, "template": "What kind of {{noun1}} do {{noun2}} do? {{punchline}}", "placeholders": { "noun1": "noun", @@ -173,6 +196,7 @@ } }, { + "jokeId": 23, "template": "What's the advantage of {{noun}}? {{punchline}}", "placeholders": { "noun": "noun", @@ -180,6 +204,7 @@ } }, { + "jokeId": 24, "template": "What did the {{noun}} name his son? {{punchline}}", "placeholders": { "noun": "noun", @@ -187,6 +212,7 @@ } }, { + "jokeId": 25, "template": "What did the {{noun}} name her daughter? {{punchline}}", "placeholders": { "noun": "noun",