Skip to content

Commit

Permalink
Use RadioTileGroup for navigation on the repo onboarding page
Browse files Browse the repository at this point in the history
  • Loading branch information
@spalmurray-codecov
spalmurray-codecov committed May 3, 2024
1 parent d701376 commit ed9d5af
Show file tree
Hide file tree
Showing 2 changed files with 254 additions and 149 deletions.
260 changes: 158 additions & 102 deletions src/pages/RepoPage/CoverageOnboarding/NewRepoTab.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import NewRepoTab from './NewRepoTab'
jest.mock('shared/useRedirect')
const mockedUseRedirect = useRedirect as jest.Mock
jest.mock('./GitHubActions', () => () => 'GitHubActions')
jest.mock('./CircleCI', () => () => 'CircleCI')
jest.mock('./OtherCI', () => () => 'OtherCI')
jest.mock('./ActivationBanner', () => () => 'ActivationBanner')

Expand Down Expand Up @@ -68,12 +69,12 @@ const wrapper: (initialEntries?: string) => React.FC<PropsWithChildren> =
<Route
path={[
'/:provider/:owner/:repo/new',
'/:provider/:owner/:repo/new/circle-ci',
'/:provider/:owner/:repo/new/other-ci',
]}
>
<Suspense fallback={null}>{children}</Suspense>
</Route>

<Route
path="*"
render={({ location }) => {
Expand Down Expand Up @@ -130,86 +131,190 @@ describe('NewRepoTab', () => {
return { hardRedirect, user }
}

describe('intro blurb', () => {
it('renders intro blurb', async () => {
setup({})
render(<NewRepoTab />, { wrapper: wrapper() })

const intro = await screen.findByTestId('intro-blurb')
expect(intro).toBeInTheDocument()
})

it('renders ActivationBanner', async () => {
setup({})
render(<NewRepoTab />, { wrapper: wrapper() })

const banner = await screen.findByText(/ActivationBanner/)
expect(banner).toBeInTheDocument()
})

describe('CISelector', () => {
it('renders', async () => {
setup({})
render(<NewRepoTab />, { wrapper: wrapper() })

const intro = await screen.findByTestId('intro-blurb')
expect(intro).toBeInTheDocument()
const selectorHeader = await screen.findByText('Select your CI')
expect(selectorHeader).toBeInTheDocument()

const githubActions = await screen.findByText('Using GitHub Actions')
const circleCI = await screen.findByText('Using Circle CI')
const otherCI = await screen.findByText('Other')
expect(githubActions).toBeInTheDocument()
expect(circleCI).toBeInTheDocument()
expect(otherCI).toBeInTheDocument()
})
})

describe('rendering component', () => {
beforeEach(() => setup({}))
describe('initial selection', () => {
describe('when on GH provider and /new path', () => {
it('selects GitHub Actions as default', async () => {
setup({})
render(<NewRepoTab />, { wrapper: wrapper() })

it('renders header', async () => {
render(<NewRepoTab />, { wrapper: wrapper() })
const githubActions = await screen.findByTestId(
'github-actions-radio'
)
expect(githubActions).toBeInTheDocument()
expect(githubActions.hasAttribute('data-state')).toBeTruthy()
expect(githubActions.getAttribute('data-state')).toBe('checked')
})
})

describe('when on non GH provider and /new path', () => {
it('selects Other CI as default', async () => {
setup({})
render(<NewRepoTab />, {
wrapper: wrapper('/gl/codecov/cool-repo/new'),
})

const header = await screen.findByRole('heading', {
name: /Let's get your repo covered/,
const otherCI = await screen.findByTestId('other-ci-radio')
expect(otherCI).toBeInTheDocument()
expect(otherCI.hasAttribute('data-state')).toBeTruthy()
expect(otherCI.getAttribute('data-state')).toBe('checked')
})
})
expect(header).toBeInTheDocument()
})

it('renders ActivationBanner', async () => {
render(<NewRepoTab />, { wrapper: wrapper() })
describe('when on /new/circle-ci', () => {
it('selects Circle CI as default', async () => {
setup({})
render(<NewRepoTab />, {
wrapper: wrapper('/gl/codecov/cool-repo/new/circle-ci'),
})

const circleCI = await screen.findByTestId('circle-ci-radio')
expect(circleCI).toBeInTheDocument()
expect(circleCI.hasAttribute('data-state')).toBeTruthy()
expect(circleCI.getAttribute('data-state')).toBe('checked')
})
})

const banner = await screen.findByText('ActivationBanner')
expect(banner).toBeInTheDocument()
describe('when on /new/other-ci', () => {
it('selects Other CI as default', async () => {
setup({})
render(<NewRepoTab />, {
wrapper: wrapper('/gl/codecov/cool-repo/new/other-ci'),
})

const otherCI = await screen.findByTestId('other-ci-radio')
expect(otherCI).toBeInTheDocument()
expect(otherCI.hasAttribute('data-state')).toBeTruthy()
expect(otherCI.getAttribute('data-state')).toBe('checked')
})
})
})

describe('users provider is github', () => {
it('renders github actions tab', async () => {
render(<NewRepoTab />, { wrapper: wrapper() })
describe('navigation', () => {
describe('when GitHub Actions is selected', () => {
it('should navigate to /new', async () => {
const { user } = setup({})
render(<NewRepoTab />, {
wrapper: wrapper('/gh/codecov/cool-repo/new/other-ci'),
})

const content = await screen.findByText('GitHubActions')
expect(content).toBeInTheDocument()
const githubActions = await screen.findByTestId(
'github-actions-radio'
)
expect(githubActions).toBeInTheDocument()
expect(githubActions.hasAttribute('data-state')).toBeTruthy()
expect(githubActions.getAttribute('data-state')).toBe('unchecked')

const tab = await screen.findByRole('link', { name: 'GitHub Actions' })
expect(tab).toBeInTheDocument()
expect(tab).toHaveAttribute('href', '/gh/codecov/cool-repo/new')
await user.click(githubActions)

expect(githubActions).toBeInTheDocument()
expect(githubActions.hasAttribute('data-state')).toBeTruthy()
expect(githubActions.getAttribute('data-state')).toBe('checked')

expect(testLocation.pathname).toBe('/gh/codecov/cool-repo/new')
})
})

it('renders other ci tab', async () => {
render(<NewRepoTab />, { wrapper: wrapper() })
describe('when Circle CI is selected', () => {
it('should navigate to /new/circle-ci', async () => {
const { user } = setup({})
render(<NewRepoTab />, { wrapper: wrapper() })

const content = await screen.findByText('GitHubActions')
expect(content).toBeInTheDocument()
const circleCI = await screen.findByTestId('circle-ci-radio')
expect(circleCI).toBeInTheDocument()
expect(circleCI.hasAttribute('data-state')).toBeTruthy()
expect(circleCI.getAttribute('data-state')).toBe('unchecked')

const tab = await screen.findByRole('link', { name: 'Other CI' })
expect(tab).toBeInTheDocument()
expect(tab).toHaveAttribute(
'href',
'/gh/codecov/cool-repo/new/other-ci'
)
})
})
await user.click(circleCI)

expect(circleCI).toBeInTheDocument()
expect(circleCI.hasAttribute('data-state')).toBeTruthy()
expect(circleCI.getAttribute('data-state')).toBe('checked')

describe('users provider is not github', () => {
it('does not render github actions tab', async () => {
render(<NewRepoTab />, {
wrapper: wrapper('/gl/codecov/cool-repo/new'),
expect(testLocation.pathname).toBe(
'/gh/codecov/cool-repo/new/circle-ci'
)
})
})

const content = await screen.findByText('OtherCI')
expect(content).toBeInTheDocument()
describe('when Other CI is selected', () => {
it('should navigate to /new/other-ci', async () => {
const { user } = setup({})
render(<NewRepoTab />, { wrapper: wrapper() })

const tab = screen.queryByRole('link', { name: 'GitHub Actions' })
expect(tab).not.toBeInTheDocument()
})
const otherCI = await screen.findByTestId('other-ci-radio')
expect(otherCI).toBeInTheDocument()
expect(otherCI.hasAttribute('data-state')).toBeTruthy()
expect(otherCI.getAttribute('data-state')).toBe('unchecked')

await user.click(otherCI)

expect(otherCI).toBeInTheDocument()
expect(otherCI.hasAttribute('data-state')).toBeTruthy()
expect(otherCI.getAttribute('data-state')).toBe('checked')

it('does not render other ci tab', async () => {
render(<NewRepoTab />, {
wrapper: wrapper('/gl/codecov/cool-repo/new'),
expect(testLocation.pathname).toBe(
'/gh/codecov/cool-repo/new/other-ci'
)
})
})
})
})

const content = await screen.findByText('OtherCI')
expect(content).toBeInTheDocument()
describe('rendering component', () => {
beforeEach(() => setup({}))

it('renders github actions', async () => {
render(<NewRepoTab />, { wrapper: wrapper() })
const content = await screen.findByText(/GitHubActions/)
expect(content).toBeInTheDocument()
})

it('renders circle ci', async () => {
render(<NewRepoTab />, {
wrapper: wrapper('/gh/codecov/cool-repo/new/circle-ci'),
})
const content = await screen.findByText(/CircleCI/)
expect(content).toBeInTheDocument()
})

const tab = screen.queryByRole('link', { name: 'Other CI' })
expect(tab).not.toBeInTheDocument()
it('renders other ci', async () => {
render(<NewRepoTab />, {
wrapper: wrapper('/gh/codecov/cool-repo/new/other-ci'),
})
const content = await screen.findByText(/OtherCI/)
expect(content).toBeInTheDocument()
})
})

Expand All @@ -232,55 +337,6 @@ describe('NewRepoTab', () => {
})
})

describe('users provider is github', () => {
describe('testing tab navigation', () => {
describe('clicking on other ci', () => {
it('navigates to /other-ci', async () => {
const { user } = setup({})
render(<NewRepoTab />, { wrapper: wrapper() })

const tab = await screen.findByRole('link', { name: 'Other CI' })
expect(tab).toBeInTheDocument()
expect(tab).toHaveAttribute(
'href',
'/gh/codecov/cool-repo/new/other-ci'
)

await user.click(tab)

expect(testLocation.pathname).toBe(
'/gh/codecov/cool-repo/new/other-ci'
)

const content = await screen.findByText('OtherCI')
expect(content).toBeInTheDocument()
})
})

describe('clicking on github actions', () => {
it('navigates to /new', async () => {
const { user } = setup({})
render(<NewRepoTab />, {
wrapper: wrapper('/gh/codecov/cool-repo/new/other-ci'),
})

const tab = await screen.findByRole('link', {
name: 'GitHub Actions',
})
expect(tab).toBeInTheDocument()
expect(tab).toHaveAttribute('href', '/gh/codecov/cool-repo/new')

await user.click(tab)

expect(testLocation.pathname).toBe('/gh/codecov/cool-repo/new')

const content = await screen.findByText('GitHubActions')
expect(content).toBeInTheDocument()
})
})
})
})

describe('user is activated', () => {
it('does not render ActivationBanner', async () => {
setup({
Expand Down

0 comments on commit ed9d5af

Please sign in to comment.