Skip to content
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.

Sign up for GitHub

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

Jump to bottom

feat: Ensure GH action onboarding is clear #3467

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
+277 −170
Open

feat: Ensure GH action onboarding is clear #3467

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
03e9de1
feat: Ensure GH action onboarding is clear
calvin-codecov Nov 6, 2024
2a5caf6
fix: Review comment fixes and cleanup
calvin-codecov Nov 7, 2024
8d5f924
fix: Add period to copy
calvin-codecov Nov 8, 2024
5728b0e
Merge branch 'main' into cy/gh_actions_yaml_onboarding
calvin-codecov Nov 8, 2024
2a47b9f
Merge branch 'main' into cy/gh_actions_yaml_onboarding
calvin-codecov Nov 18, 2024
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
246 changes: 136 additions & 110 deletions src/pages/RepoPage/CoverageOnboarding/GitHubActions/GitHubActions.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,17 +116,17 @@ describe('GitHubActions', () => {
setup({})
render(<GitHubActions />, { wrapper })

const header = await screen.findByRole('heading', { name: /Step 2/ })
const header = await screen.findByRole('heading', {
name: /Step 1: Output a Coverage report file/,
})
expect(header).toBeInTheDocument()
})

it('renders framework blurb', async () => {
setup({})
render(<GitHubActions />, { wrapper })

const blurb = await screen.findByText(
/Select your testing framework below/
)
const blurb = await screen.findByText(/Select your language below/)
expect(blurb).toBeInTheDocument()
})

Expand Down Expand Up @@ -251,114 +251,19 @@ describe('GitHubActions', () => {

await user.click(go)

const trigger = await screen.findByText((content) =>
content.startsWith('Your final GitHub Actions workflow')
)
expect(trigger).toBeInTheDocument()

await user.click(trigger)

const yaml = await screen.findByText(/go mod download/)
expect(yaml).toBeInTheDocument()
})
})
})

describe('example collapsible', () => {
it('renders', async () => {
setup({})
render(<GitHubActions />, { wrapper })

const trigger = await screen.findByText((content) =>
content.startsWith('Your final GitHub Actions workflow')
)
expect(trigger).toBeInTheDocument()
})

describe('when the collapsible is open', () => {
it('renders example GHA yaml', async () => {
const { user } = setup({})
render(<GitHubActions />, { wrapper })

const trigger = await screen.findByText((content) =>
content.startsWith('Your final GitHub Actions workflow')
)
expect(trigger).toBeInTheDocument()

let example = screen.queryByText(
/name: Run tests and upload coverage/
)
expect(example).not.toBeInTheDocument()

await user.click(trigger)

example = await screen.findByText(
/name: Run tests and upload coverage/
)
expect(example).toBeInTheDocument()
})

describe('if using repo token', () => {
it('does not show repo slug in yaml', async () => {
const { user } = setup({})
render(<GitHubActions />, { wrapper })

const trigger = await screen.findByText((content) =>
content.startsWith('Your final GitHub Actions workflow')
)
expect(trigger).toBeInTheDocument()

await user.click(trigger)

const slug = screen.queryByText(/slug: codecov\/cool-repo/)
expect(slug).not.toBeInTheDocument()
})
})

describe('if using org token', () => {
it('shows repo slug in yaml', async () => {
const { user } = setup({ hasOrgUploadToken: true })
render(<GitHubActions />, { wrapper })

const trigger = await screen.findByText((content) =>
content.startsWith('Your final GitHub Actions workflow')
)
expect(trigger).toBeInTheDocument()

await user.click(trigger)

const slug = await screen.findByText(/slug: codecov\/cool-repo/)
expect(slug).toBeInTheDocument()
})
})

it('renders learn more blurb', async () => {
const { user } = setup({})
render(<GitHubActions />, { wrapper })

const trigger = await screen.findByText((content) =>
content.startsWith('Your final GitHub Actions workflow')
)
expect(trigger).toBeInTheDocument()

let blurb = screen.queryByText(/about generating coverage reports/)
expect(blurb).not.toBeInTheDocument()

await user.click(trigger)

blurb = await screen.findByText(/about generating coverage reports/)
expect(blurb).toBeInTheDocument()
})
})
})
})

describe('step two', () => {
it('renders header', async () => {
setup({})
render(<GitHubActions />, { wrapper })

const header = await screen.findByRole('heading', { name: /Step 1/ })
const header = await screen.findByRole('heading', { name: /Step 2: add/ })
expect(header).toBeInTheDocument()

const repositorySecretLink = await screen.findByRole('link', {
Expand Down Expand Up @@ -427,6 +332,135 @@ describe('GitHubActions', () => {
})

describe('step three', () => {
it('renders header', async () => {
setup({})
render(<GitHubActions />, { wrapper })

const header = await screen.findByRole('heading', {
name: /Step 3: Add Codecov to your GitHub Actions workflow yaml file/,
})
expect(header).toBeInTheDocument()
})

it('renders body', async () => {
setup({})
render(<GitHubActions />, { wrapper })

const body = await screen.findByText(
/After tests run, this will upload your coverage report to Codecov:/
)
expect(body).toBeInTheDocument()
})

it('renders upload config box', async () => {
setup({})
render(<GitHubActions />, { wrapper })

const config = await screen.findByText(
/- name: Upload coverage reports to Codecov/
)
expect(config).toBeInTheDocument()
})

describe('when org upload token exists', () => {
it('renders slug copy', async () => {
setup({ hasOrgUploadToken: true })
render(<GitHubActions />, { wrapper })

const slug = await screen.findAllByText(/slug: codecov\/cool-repo/)
expect(slug).toHaveLength(2)
})
})

describe('example collapsible', () => {
describe('when the collapsible is open', () => {
it('renders example GHA yaml by default', async () => {
setup({})
render(<GitHubActions />, { wrapper })

const example = await screen.findByText(
/name: Run tests and upload coverage/
)
expect(example).toBeInTheDocument()
})

describe('if using repo token', () => {
it('does not show repo slug in yaml', async () => {
const { user } = setup({})
render(<GitHubActions />, { wrapper })

const trigger = await screen.findByText((content) =>
content.startsWith('Your final GitHub Actions workflow')
)
expect(trigger).toBeInTheDocument()

await user.click(trigger)

const slug = screen.queryByText(/slug: codecov\/cool-repo/)
expect(slug).not.toBeInTheDocument()
})
})

describe('if using org token', () => {
it('shows repo slug in yaml', async () => {
const { user } = setup({ hasOrgUploadToken: true })
render(<GitHubActions />, { wrapper })

const trigger = await screen.findByText((content) =>
content.startsWith('Your final GitHub Actions workflow')
)
expect(trigger).toBeInTheDocument()

await user.click(trigger)

const slug = await screen.findByText(/slug: codecov\/cool-repo/)
expect(slug).toBeInTheDocument()
})
})

it('renders learn more blurb', async () => {
const { user } = setup({})
render(<GitHubActions />, { wrapper })

const trigger = await screen.findByText((content) =>
content.startsWith('Your final GitHub Actions workflow')
)
expect(trigger).toBeInTheDocument()

let blurb = await screen.findByText(
/about generating coverage reports/
)
expect(blurb).toBeInTheDocument()

await user.click(trigger)

const hiddenBlurb = screen.queryByText(
/about generating coverage reports/
)
expect(hiddenBlurb).not.toBeInTheDocument()
})

it('can be collapsed', async () => {
const { user } = setup({})
render(<GitHubActions />, { wrapper })
// Collapse the yaml example dropdown to make that snippet invisible
const trigger = await screen.findByText((content) =>
content.startsWith('Your final GitHub Actions workflow')
)
expect(trigger).toBeInTheDocument()

await user.click(trigger)

let example = screen.queryByText(
/name: Run tests and upload coverage/
)
expect(example).not.toBeInTheDocument()
})
})
})
})

describe('step four', () => {
beforeEach(() => setup({}))
it('renders body', async () => {
render(<GitHubActions />, { wrapper })
Expand Down Expand Up @@ -477,25 +511,17 @@ describe('GitHubActions', () => {
const user = userEvent.setup()
render(<GitHubActions />, { wrapper })

// Expand the yaml example dropdown to make that snippet visible
const trigger = await screen.findByText((content) =>
content.startsWith('Your final GitHub Actions workflow')
)
expect(trigger).toBeInTheDocument()

await user.click(trigger)

const copyCommands = await screen.findAllByTestId(
'clipboard-code-snippet'
)
expect(copyCommands.length).toEqual(5)
expect(copyCommands.length).toEqual(6)

const promises: Promise<void>[] = []
copyCommands.forEach((copy) => promises.push(user.click(copy)))
await Promise.all(promises)

// One of the code-snippets does not have a metric associated with it
expect(mockMetricMutationVariables).toHaveBeenCalledTimes(4)
expect(mockMetricMutationVariables).toHaveBeenCalledTimes(5)
})
})
})
Loading
Loading