-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Component Tests for Onboarding and Sandbox Layouts
- Loading branch information
1 parent
83638d3
commit 0bf2b1d
Showing
10 changed files
with
934 additions
and
7 deletions.
There are no files selected for viewing
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
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
58 changes: 58 additions & 0 deletions
58
web/beacon-app/src/components/layout/__tests__/OnboardingLayout.spec.tsx
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,58 @@ | ||
| import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import React from 'react'; | ||
| import { describe, expect, it, vi } from 'vitest'; | ||
|
|
||
| import OnboardingLayout from '../OnboardingLayout'; | ||
|
|
||
| const queryClient = new QueryClient(); | ||
|
|
||
| const renderOnboardingLayout = () => { | ||
| return render( | ||
| <QueryClientProvider client={queryClient}> | ||
| <OnboardingLayout /> | ||
| </QueryClientProvider> | ||
| ); | ||
| }; | ||
|
|
||
| // Mock t and Trans tags from lingui. | ||
| vi.mock('invariant'); | ||
| vi.mock('@lingui/macro', () => ({ | ||
| t: (str) => str, | ||
| Trans: ({ children }) => children, | ||
| })); | ||
|
|
||
| // Mock react router hooks. | ||
| vi.mock('react-router-dom', () => ({ | ||
| useNavigate: () => vi.fn(), | ||
| Link: ({ children }) => children, | ||
| useLocation: () => ({ | ||
| pathname: '/test', | ||
| }), | ||
| NavLink: ({ children }) => children, | ||
| })); | ||
|
|
||
| describe('Onboarding layout', () => { | ||
| it('should render', () => { | ||
| const { container } = renderOnboardingLayout(); | ||
| expect(container).toMatchSnapshot(); | ||
| expect(screen.getByTestId('onboarding-layout')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should display the onboarding sidebar', () => { | ||
| renderOnboardingLayout(); | ||
| expect(screen.getByTestId('onboarding-sidebar')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should not display the sandbox layout or sandbox sidebar', () => { | ||
| renderOnboardingLayout(); | ||
| expect(screen.queryByTestId('sandbox-layout')).not.toBeInTheDocument(); | ||
| expect(screen.queryByTestId('sandbox-sidebar')).not.toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should not display the dash layout or sidebar', () => { | ||
| renderOnboardingLayout(); | ||
| expect(screen.queryByTestId('dash-layout')).not.toBeInTheDocument(); | ||
| expect(screen.queryByTestId('sidebar')).not.toBeInTheDocument(); | ||
| }); | ||
| }); |
58 changes: 58 additions & 0 deletions
58
web/beacon-app/src/components/layout/__tests__/SandboxLayout.spec.tsx
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,58 @@ | ||
| import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import React from 'react'; | ||
| import { describe, expect, it, vi } from 'vitest'; | ||
|
|
||
| import SandboxLayout from '../SandboxLayout'; | ||
|
|
||
| const queryClient = new QueryClient(); | ||
|
|
||
| const renderSandboxLayout = () => { | ||
| return render( | ||
| <QueryClientProvider client={queryClient}> | ||
| <SandboxLayout /> | ||
| </QueryClientProvider> | ||
| ); | ||
| }; | ||
|
|
||
| // Mock t and Trans tags from lingui. | ||
| vi.mock('invariant'); | ||
| vi.mock('@lingui/macro', () => ({ | ||
| t: (str) => str, | ||
| Trans: ({ children }) => children, | ||
| })); | ||
|
|
||
| // Mock react router hooks. | ||
| vi.mock('react-router-dom', () => ({ | ||
| useNavigate: () => vi.fn(), | ||
| Link: ({ children }) => children, | ||
| useLocation: () => ({ | ||
| pathname: '/test', | ||
| }), | ||
| NavLink: ({ children }) => children, | ||
| })); | ||
|
|
||
| describe('Sandbox layout', () => { | ||
| it('should render', () => { | ||
| const { container } = renderSandboxLayout(); | ||
| expect(container).toMatchSnapshot(); | ||
| expect(screen.getByTestId('sandbox-layout')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should display the sandbox sidebar', () => { | ||
| renderSandboxLayout(); | ||
| expect(screen.getByTestId('sandbox-sidebar')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should not display the onboarding layout or onboarding sidebar', () => { | ||
| renderSandboxLayout(); | ||
| expect(screen.queryByTestId('onboarding-layout')).not.toBeInTheDocument(); | ||
| expect(screen.queryByTestId('onboarding-sidebar')).not.toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should not display the dash layout or sidebar', () => { | ||
| renderSandboxLayout(); | ||
| expect(screen.queryByTestId('dash-layout')).not.toBeInTheDocument(); | ||
| expect(screen.queryByTestId('sidebar')).not.toBeInTheDocument(); | ||
| }); | ||
| }); |
224 changes: 224 additions & 0 deletions
224
web/beacon-app/src/components/layout/__tests__/__snapshots__/OnboardingLayout.spec.tsx.snap
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,224 @@ | ||
| // Vitest Snapshot v1 | ||
|
|
||
| exports[`Onboarding layout > should render 1`] = ` | ||
| <div> | ||
| <div | ||
| class="flex flex-col md:pl-[250px]" | ||
| data-testid="onboarding-layout" | ||
| > | ||
| <aside | ||
| class="fixed left-0 top-0 flex h-screen flex-col bg-[#1D65A6] pb-10 pt-5 text-white md:w-[250px] hidden md:block" | ||
| > | ||
| <div | ||
| class="flex h-full flex-col" | ||
| data-cy="onboarding-sidebar" | ||
| data-testid="onboarding-sidebar" | ||
| > | ||
| <div> | ||
| <h1 | ||
| class="ml-8 space-y-3 text-lg font-bold" | ||
| > | ||
| Ensign | ||
| </h1> | ||
| </div> | ||
| <div | ||
| class="ml-8 mt-[90px] space-y-3" | ||
| > | ||
| <ol | ||
| class="stepper-items relative border-l border-gray-200 text-white" | ||
| > | ||
| <li | ||
| class="mb-10 ml-6" | ||
| > | ||
| <span | ||
| class="stepper-item absolute -left-[4px] mt-1 flex h-2 w-2 items-center justify-center rounded-full bg-gray-100 ring-4 ring-white" | ||
| /> | ||
| <h3 | ||
| class="font-medium leading-tight" | ||
| > | ||
| Step 1 of 4 | ||
| </h3> | ||
| <p | ||
| class="text-sm " | ||
| > | ||
| Your Team Name | ||
| </p> | ||
| </li> | ||
| <li | ||
| class="mb-10 ml-6" | ||
| > | ||
| <span | ||
| class="stepper-item absolute -left-[4px] mt-1 flex h-2 w-2 items-center justify-center rounded-full bg-gray-100 ring-4 ring-white" | ||
| /> | ||
| <h3 | ||
| class="font-medium leading-tight" | ||
| > | ||
| Step 2 of 4 | ||
| </h3> | ||
| <p | ||
| class="text-sm " | ||
| > | ||
| Your Workspace URL | ||
| </p> | ||
| </li> | ||
| <li | ||
| class="mb-10 ml-6" | ||
| > | ||
| <span | ||
| class="stepper-item absolute -left-[4px] mt-1 flex h-2 w-2 items-center justify-center rounded-full bg-gray-100 ring-4 ring-white" | ||
| /> | ||
| <h3 | ||
| class="font-medium leading-tight" | ||
| > | ||
| Step 3 of 4 | ||
| </h3> | ||
| <p | ||
| class="text-sm " | ||
| > | ||
| Your Name | ||
| </p> | ||
| </li> | ||
| <li | ||
| class="mb-10 ml-6" | ||
| > | ||
| <span | ||
| class="stepper-item absolute -left-[4px] mt-1 flex h-2 w-2 items-center justify-center rounded-full bg-gray-100 ring-4 ring-white" | ||
| /> | ||
| <h3 | ||
| class="font-medium leading-tight" | ||
| > | ||
| Step 4 of 4 | ||
| </h3> | ||
| <p | ||
| class="text-sm " | ||
| > | ||
| Your Goals | ||
| </p> | ||
| </li> | ||
| </ol> | ||
| </div> | ||
| <div | ||
| class="grow" | ||
| /> | ||
| <div | ||
| class="ml-8 space-y-3" | ||
| > | ||
| <ul | ||
| class="space-y-1 text-xs text-white" | ||
| > | ||
| <li> | ||
| About | ||
| <svg | ||
| class="ml-1 h-3 w-3 text-white" | ||
| fill="none" | ||
| stroke="currentColor" | ||
| stroke-width="1.5" | ||
| viewBox="0 0 24 24" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| /> | ||
| </svg> | ||
| </li> | ||
| <li> | ||
| Contact Us | ||
| <svg | ||
| class="ml-1 h-3 w-3 text-white" | ||
| fill="none" | ||
| stroke="currentColor" | ||
| stroke-width="1.5" | ||
| viewBox="0 0 24 24" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| /> | ||
| </svg> | ||
| </li> | ||
| <li> | ||
| Server Status | ||
| <svg | ||
| class="ml-1 h-3 w-3 text-white" | ||
| fill="none" | ||
| stroke="currentColor" | ||
| stroke-width="1.5" | ||
| viewBox="0 0 24 24" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| /> | ||
| </svg> | ||
| </li> | ||
| <li> | ||
| © Rotational Labs, Inc. | ||
| <svg | ||
| class="ml-1 h-3 w-3 text-white" | ||
| fill="none" | ||
| stroke="currentColor" | ||
| stroke-width="1.5" | ||
| viewBox="0 0 24 24" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| /> | ||
| </svg> | ||
| </li> | ||
| </ul> | ||
| <p | ||
| class="w-full text-xs text-white" | ||
| > | ||
| <span> | ||
| App Version | ||
| 0.0.0 | ||
| </span> | ||
| <span> | ||
| & Git Revision | ||
| 0.0.0 | ||
| </span> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </aside> | ||
| <main | ||
| class="sc-bcXHqe cfhwRd" | ||
| /> | ||
| <footer | ||
| class="fixed bottom-0 left-0 w-screen bg-[#1D65A6] py-1 md:hidden md:pl-[250px]" | ||
| > | ||
| <ul | ||
| class="flex items-center justify-around space-y-1 text-xs text-white" | ||
| > | ||
| <li> | ||
| About | ||
| </li> | ||
| <li> | ||
| Contact Us | ||
| </li> | ||
| <li> | ||
| Server Status | ||
| </li> | ||
| <li> | ||
| © Rotational Labs, Inc. | ||
| </li> | ||
| </ul> | ||
| </footer> | ||
| </div> | ||
| </div> | ||
| `; |
Oops, something went wrong.