-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading status checks…
add tests to 02
1 parent
9841c41
commit 99c1cb5
Showing
24 changed files
with
413 additions
and
76 deletions.
There are no files selected for viewing
5 changes: 3 additions & 2 deletions
5
exercises/01.managing-ui-state/05.solution.cb/search-params.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
exercises/02.side-effects/01.solution.effects/controlled-checkbox.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test' | ||
const { screen, fireEvent } = dtl | ||
|
||
import './index.tsx' | ||
|
||
const searchBox = await testStep( | ||
'The user can see the search box', | ||
async () => { | ||
const result = await screen.findByRole('searchbox', { name: /search/i }) | ||
expect(result).toHaveValue('') | ||
return result | ||
}, | ||
) | ||
|
||
const dogCheckbox = await testStep( | ||
'The user can see the dog checkbox', | ||
async () => { | ||
const result = await screen.findByRole('checkbox', { name: /dog/i }) | ||
expect(result).not.toBeChecked() | ||
return result | ||
}, | ||
) | ||
|
||
await testStep('The user can search for a checkbox value', async () => { | ||
fireEvent.change(searchBox, { target: { value: 'dog' } }) | ||
}) | ||
|
||
await testStep('checkbox is checked automatically', async () => { | ||
expect(dogCheckbox).toBeChecked() | ||
}) |
43 changes: 43 additions & 0 deletions
43
exercises/02.side-effects/01.solution.effects/controlled-search.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test' | ||
const { screen, fireEvent } = dtl | ||
|
||
import './index.tsx' | ||
|
||
const searchBox = await testStep( | ||
'The user can see the search box', | ||
async () => { | ||
const result = await screen.findByRole('searchbox', { name: /search/i }) | ||
expect(result).toHaveValue('') | ||
return result | ||
}, | ||
) | ||
|
||
const dogCheckbox = await testStep( | ||
'The user can see the dog checkbox', | ||
async () => { | ||
const result = await screen.findByRole('checkbox', { name: /dog/i }) | ||
expect(result).not.toBeChecked() | ||
return result | ||
}, | ||
) | ||
|
||
await testStep('The user can select the dog checkbox', async () => { | ||
fireEvent.click(dogCheckbox) | ||
expect(dogCheckbox).toBeChecked() | ||
}) | ||
|
||
await testStep( | ||
'Selecting the checkbox updates the search and results', | ||
async () => { | ||
// Check that the search box value has been updated | ||
expect(searchBox).toHaveValue('dog') | ||
|
||
// Check that the results have been filtered | ||
await dtl.waitFor(async () => { | ||
await screen.findByText(/the joy of owning a dog/i) | ||
|
||
const catResult = screen.queryByText(/caring for your feline friend/i) | ||
expect(catResult).not.toBeInTheDocument() | ||
}) | ||
}, | ||
) |
30 changes: 30 additions & 0 deletions
30
exercises/02.side-effects/01.solution.effects/filtering.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test' | ||
const { screen, fireEvent } = dtl | ||
|
||
import './index.tsx' | ||
|
||
const searchBox = await testStep( | ||
'The user can see the search box', | ||
async () => { | ||
const result = await screen.findByRole('searchbox', { name: /search/i }) | ||
expect(result).toHaveValue('') | ||
return result | ||
}, | ||
) | ||
|
||
const catResult = await testStep('The user can see the results', async () => { | ||
const result = screen.getByText(/caring for your feline friend/i) | ||
expect(result).toBeInTheDocument() | ||
return result | ||
}) | ||
|
||
await testStep('The user can search for a term', async () => { | ||
fireEvent.change(searchBox, { target: { value: 'dog' } }) | ||
}) | ||
|
||
await testStep('The results are filtered', async () => { | ||
await dtl.waitFor(() => { | ||
expect(catResult).not.toBeInTheDocument() | ||
}) | ||
await screen.findByText(/the joy of owning a dog/i) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
38 changes: 38 additions & 0 deletions
38
exercises/02.side-effects/01.solution.effects/popstate.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test' | ||
const { screen, fireEvent } = dtl | ||
|
||
const currentPath = window.location.pathname | ||
window.history.pushState({}, '', `${currentPath}?query=dog`) | ||
|
||
await import('./index.tsx') | ||
|
||
await testStep( | ||
'The search box is initialized with URL query parameter', | ||
async () => { | ||
const searchBox = await screen.findByRole('searchbox', { name: /search/i }) | ||
expect(searchBox).toHaveValue('dog') | ||
}, | ||
) | ||
|
||
// wait for the event handler to be set up | ||
// for some reason it takes a bit | ||
await new Promise(resolve => setTimeout(resolve, 100)) | ||
|
||
await testStep( | ||
'The search box updates when popstate event is triggered', | ||
async () => { | ||
// Simulate navigation to a new URL | ||
const currentPath = window.location.pathname | ||
window.history.pushState({}, '', `${currentPath}?query=cat`) | ||
|
||
// Trigger popstate event | ||
fireEvent.popState(window) | ||
|
||
// Check if the search box value is updated | ||
await dtl.waitFor(async () => | ||
expect( | ||
await screen.findByRole('searchbox', { name: /search/i }), | ||
).toHaveValue('cat'), | ||
) | ||
}, | ||
) |
14 changes: 14 additions & 0 deletions
14
exercises/02.side-effects/01.solution.effects/search-params.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test' | ||
const { screen, fireEvent } = dtl | ||
|
||
window.history.pushState({}, '', '?query=dog') | ||
|
||
await import('./index.tsx') | ||
|
||
await testStep( | ||
'The search box is initialized with URL query parameter', | ||
async () => { | ||
const searchBox = await screen.findByRole('searchbox', { name: /search/i }) | ||
expect(searchBox).toHaveValue('dog') | ||
}, | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
exercises/02.side-effects/02.solution.cleanup/controlled-checkbox.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test' | ||
const { screen, fireEvent } = dtl | ||
|
||
import './index.tsx' | ||
|
||
const searchBox = await testStep( | ||
'The user can see the search box', | ||
async () => { | ||
const result = await screen.findByRole('searchbox', { name: /search/i }) | ||
expect(result).toHaveValue('') | ||
return result | ||
}, | ||
) | ||
|
||
const dogCheckbox = await testStep( | ||
'The user can see the dog checkbox', | ||
async () => { | ||
const result = await screen.findByRole('checkbox', { name: /dog/i }) | ||
expect(result).not.toBeChecked() | ||
return result | ||
}, | ||
) | ||
|
||
await testStep('The user can search for a checkbox value', async () => { | ||
fireEvent.change(searchBox, { target: { value: 'dog' } }) | ||
}) | ||
|
||
await testStep('checkbox is checked automatically', async () => { | ||
expect(dogCheckbox).toBeChecked() | ||
}) |
43 changes: 43 additions & 0 deletions
43
exercises/02.side-effects/02.solution.cleanup/controlled-search.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test' | ||
const { screen, fireEvent } = dtl | ||
|
||
import './index.tsx' | ||
|
||
const searchBox = await testStep( | ||
'The user can see the search box', | ||
async () => { | ||
const result = await screen.findByRole('searchbox', { name: /search/i }) | ||
expect(result).toHaveValue('') | ||
return result | ||
}, | ||
) | ||
|
||
const dogCheckbox = await testStep( | ||
'The user can see the dog checkbox', | ||
async () => { | ||
const result = await screen.findByRole('checkbox', { name: /dog/i }) | ||
expect(result).not.toBeChecked() | ||
return result | ||
}, | ||
) | ||
|
||
await testStep('The user can select the dog checkbox', async () => { | ||
fireEvent.click(dogCheckbox) | ||
expect(dogCheckbox).toBeChecked() | ||
}) | ||
|
||
await testStep( | ||
'Selecting the checkbox updates the search and results', | ||
async () => { | ||
// Check that the search box value has been updated | ||
expect(searchBox).toHaveValue('dog') | ||
|
||
// Check that the results have been filtered | ||
await dtl.waitFor(async () => { | ||
await screen.findByText(/the joy of owning a dog/i) | ||
|
||
const catResult = screen.queryByText(/caring for your feline friend/i) | ||
expect(catResult).not.toBeInTheDocument() | ||
}) | ||
}, | ||
) |
30 changes: 30 additions & 0 deletions
30
exercises/02.side-effects/02.solution.cleanup/filtering.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import { expect, testStep, dtl } from '@epic-web/workshop-utils/test' | ||
const { screen, fireEvent } = dtl | ||
|
||
import './index.tsx' | ||
|
||
const searchBox = await testStep( | ||
'The user can see the search box', | ||
async () => { | ||
const result = await screen.findByRole('searchbox', { name: /search/i }) | ||
expect(result).toHaveValue('') | ||
return result | ||
}, | ||
) | ||
|
||
const catResult = await testStep('The user can see the results', async () => { | ||
const result = screen.getByText(/caring for your feline friend/i) | ||
expect(result).toBeInTheDocument() | ||
return result | ||
}) | ||
|
||
await testStep('The user can search for a term', async () => { | ||
fireEvent.change(searchBox, { target: { value: 'dog' } }) | ||
}) | ||
|
||
await testStep('The results are filtered', async () => { | ||
await dtl.waitFor(() => { | ||
expect(catResult).not.toBeInTheDocument() | ||
}) | ||
await screen.findByText(/the joy of owning a dog/i) | ||
}) |
Oops, something went wrong.