Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

refactor(project): improve typescript next/branch #62

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions package-lock.json
View file Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 10 additions & 2 deletions package.json
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
"husky": "^4.3.8",
"npm-run-all": "^4.1.5",
"prettier": "^2.2.1",
"react-scripts": "^4.0.1"
"react-scripts": "^4.0.1",
"typescript": "^4.1.3"
},
"scripts": {
"start": "react-scripts start",
Expand All @@ -53,7 +54,14 @@
]
},
"eslintConfig": {
"extends": "react-app"
"extends": [
"react-app",
"react-app/jest",
"plugin:jsx-a11y/recommended"
],
"plugins": [
"jsx-a11y"
]
},
"babel": {
"presets": [
Expand Down
27 changes: 18 additions & 9 deletions src/__tests__/01.js → src/__tests__/01.tsx
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,16 @@ import userEvent from '@testing-library/user-event'
import * as userClient from '../user-client'
import {AuthProvider} from '../auth-context'
import App from '../final/01'
import type {User} from '../types'
// import App from '../exercise/01'

jest.mock('../user-client', () => {
return {updateUser: jest.fn(() => Promise.resolve())}
})

const mockUser = {username: 'jakiechan', tagline: '', bio: ''}
const mockUserClient = userClient as jest.Mocked<typeof userClient>;

const mockUser: User = {username: 'jakiechan', tagline: '', bio: ''}

function renderApp() {
const utils = render(
Expand All @@ -24,14 +27,20 @@ function renderApp() {
...utils,
submitButton: screen.getByText(/✔/),
resetButton: screen.getByText(/reset/i),
taglineInput: screen.getByLabelText(/tagline/i),
bioInput: screen.getByLabelText(/bio/i),
taglineInput: screen.getByLabelText(/tagline/i) as HTMLInputElement,
bioInput: screen.getByLabelText(/bio/i) as HTMLInputElement,
waitForLoading: () =>
waitForElementToBeRemoved(() => screen.getByText(/\.\.\./i)),
userDisplayPre,
getDisplayData: () => JSON.parse(userDisplayPre.textContent),
getDisplayData: () => {
if (userDisplayPre && userDisplayPre.textContent) {
return JSON.parse(userDisplayPre.textContent)
}
throw new Error('userDisplayPre node is null')
},
}
}
// type T0 = HTMLElement

test('happy path works', async () => {
const {
Expand All @@ -57,7 +66,7 @@ test('happy path works', async () => {
expect(resetButton).not.toHaveAttribute('disabled')

const updatedUser = {...mockUser, ...testData}
userClient.updateUser.mockImplementationOnce(() =>
mockUserClient.updateUser.mockImplementationOnce(() =>
Promise.resolve(updatedUser),
)

Expand All @@ -70,7 +79,7 @@ test('happy path works', async () => {
// submitting the form invokes userClient.updateUser
expect(userClient.updateUser).toHaveBeenCalledTimes(1)
expect(userClient.updateUser).toHaveBeenCalledWith(mockUser, testData)
userClient.updateUser.mockClear()
mockUserClient.updateUser.mockClear()

// once the submit button changes from ... then we know the request is over
await waitForLoading()
Expand Down Expand Up @@ -109,7 +118,7 @@ test('failure works', async () => {
const testData = {...mockUser, bio: 'test bio'}
userEvent.type(bioInput, testData.bio)
const testErrorMessage = 'test error message'
userClient.updateUser.mockImplementationOnce(() =>
mockUserClient.updateUser.mockImplementationOnce(() =>
Promise.reject({message: testErrorMessage}),
)

Expand All @@ -123,9 +132,9 @@ test('failure works', async () => {
screen.getByText(testErrorMessage)
expect(getDisplayData()).toEqual(mockUser)

userClient.updateUser.mockClear()
mockUserClient.updateUser.mockClear()

userClient.updateUser.mockImplementationOnce(() =>
mockUserClient.updateUser.mockImplementationOnce(() =>
Promise.resolve(updatedUser),
)
userEvent.click(submitButton)
Expand Down
1 change: 1 addition & 0 deletions src/__tests__/02.js → src/__tests__/02.tsx
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import * as React from 'react'
import {renderToggle} from '../../test/utils'
import App from '../final/02'
// import App from '../final-ts/02'
// import App from '../exercise/02'

test('renders a toggle component', () => {
Expand Down
1 change: 1 addition & 0 deletions src/__tests__/03.js → src/__tests__/03.tsx
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import * as React from 'react'
import {renderToggle} from '../../test/utils'
import App from '../final/03'
// import App from '../final-ts/03'
// import App from '../exercise/03'

test('renders a toggle component', () => {
Expand Down
1 change: 1 addition & 0 deletions src/__tests__/04.js → src/__tests__/04.tsx
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import * as React from 'react'
import {renderToggle, screen, userEvent} from '../../test/utils'
import App from '../final/04'
// import App from '../final-ts/04'
// import App from '../exercise/04'

test('renders a toggle component', () => {
Expand Down
5 changes: 5 additions & 0 deletions src/__tests__/05.js → src/__tests__/05.tsx
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import * as React from 'react'
import {renderToggle, screen, userEvent} from '../../test/utils'
import App from '../final/05'
// import App from '../final-ts/05'
// import App from '../final-ts/05.extra-1'
// import App from '../final-ts/05.extra-2'

// import App from '../exercise/05'
// import App from '../exercise-ts/05'

test('renders a toggle component', () => {
const {toggleButton, toggle} = renderToggle(<App />)
Expand Down
2 changes: 2 additions & 0 deletions src/__tests__/06.extra-4.js → src/__tests__/06.extra-4.tsx
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@ import {alfredTip} from '@kentcdodds/react-workshop-app/test-utils'
import {render, screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import {Toggle} from '../final/06.extra-4'
// import {Toggle} from '../final-ts/06.extra-4'
// import {Toggle} from '../exercise/06'
// import {Toggle} from '../exercise-ts/06'

beforeEach(() => {
jest.spyOn(console, 'error').mockImplementation(() => {})
Expand Down
4 changes: 3 additions & 1 deletion src/__tests__/06.js → src/__tests__/06.tsx
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import * as React from 'react'
import {renderToggle, screen, userEvent} from '../../test/utils'
import App, {Toggle} from '../final/06'
// import App, {Toggle} from '../final/06'
import App, {Toggle} from '../final-ts/06'
// import App, {Toggle} from '../exercise/06'
// import App, {Toggle} from '../exercise-ts/06'

test('toggling either toggle toggles both', () => {
renderToggle(<App />)
Expand Down
12 changes: 9 additions & 3 deletions src/auth-context.js → src/auth-context.tsx
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,23 @@
import * as React from 'react'
import type {User} from './types'

// normally this is going to implement a similar pattern
// learn more here: https://kcd.im/auth

const AuthContext = React.createContext({
interface IAuthContext {
user: User
}

const AuthContext = React.createContext<IAuthContext>({
user: {username: 'jakiechan', tagline: '', bio: ''},
})
AuthContext.displayName = 'AuthContext'
const AuthProvider = ({user, ...props}) => (

const AuthProvider: React.FC<{user: IAuthContext}> = ({user, ...props}) => (
<AuthContext.Provider value={user} {...props} />
)

function useAuth() {
function useAuth(): IAuthContext {
return React.useContext(AuthContext)
}

Expand Down
Loading

AltStyle によって変換されたページ (->オリジナル) /