|
| 1 | +import React from 'react'; |
| 2 | +import { screen } from '@testing-library/react'; |
| 3 | +import userEvent from '@testing-library/user-event'; |
| 4 | +import { CoderProviderWithMockAuth } from '../../testHelpers/setup'; |
| 5 | +import type { CoderAuth, CoderAuthStatus } from '../CoderProvider'; |
| 6 | +import { |
| 7 | + mockAppConfig, |
| 8 | + mockAuthStates, |
| 9 | + mockCoderAuthToken, |
| 10 | +} from '../../testHelpers/mockBackstageData'; |
| 11 | +import { CoderAuthWrapper } from './CoderAuthWrapper'; |
| 12 | +import { renderInTestApp } from '@backstage/test-utils'; |
| 13 | + |
| 14 | +type RenderInputs = Readonly<{ |
| 15 | + childButtonText: string; |
| 16 | + authStatus: CoderAuthStatus; |
| 17 | +}>; |
| 18 | + |
| 19 | +async function renderAuthWrapper({ |
| 20 | + authStatus, |
| 21 | + childButtonText, |
| 22 | +}: RenderInputs) { |
| 23 | + const ejectToken = jest.fn(); |
| 24 | + const registerNewToken = jest.fn(); |
| 25 | + |
| 26 | + const auth: CoderAuth = { |
| 27 | + ...mockAuthStates[authStatus], |
| 28 | + ejectToken, |
| 29 | + registerNewToken, |
| 30 | + }; |
| 31 | + |
| 32 | + /** |
| 33 | + * @todo RTL complains about the current environment not being configured to |
| 34 | + * support act. Luckily, it doesn't cause any of our main test cases to kick |
| 35 | + * up false positives. |
| 36 | + * |
| 37 | + * This may not be an issue with our code, and might be a bug from Backstage's |
| 38 | + * migration to React 18. Need to figure out where this issue is coming from, |
| 39 | + * and open an issue upstream if necessary |
| 40 | + */ |
| 41 | + const renderOutput = await renderInTestApp( |
| 42 | + <CoderProviderWithMockAuth appConfig={mockAppConfig} auth={auth}> |
| 43 | + <CoderAuthWrapper type="card"> |
| 44 | + <button>{childButtonText}</button> |
| 45 | + </CoderAuthWrapper> |
| 46 | + </CoderProviderWithMockAuth>, |
| 47 | + ); |
| 48 | + |
| 49 | + return { ...renderOutput, ejectToken, registerNewToken }; |
| 50 | +} |
| 51 | + |
| 52 | +describe(`${CoderAuthWrapper.name}`, () => { |
| 53 | + describe('Displaying main content', () => { |
| 54 | + it('Displays the main children when the user is authenticated', async () => { |
| 55 | + const buttonText = 'I have secret Coder content!'; |
| 56 | + renderAuthWrapper({ |
| 57 | + authStatus: 'authenticated', |
| 58 | + childButtonText: buttonText, |
| 59 | + }); |
| 60 | + |
| 61 | + const button = await screen.findByRole('button', { name: buttonText }); |
| 62 | + |
| 63 | + // This assertion isn't necessary because findByRole will throw an error |
| 64 | + // if the button can't be found within the expected period of time. Doing |
| 65 | + // this purely to make the Backstage linter happy |
| 66 | + expect(button).toBeInTheDocument(); |
| 67 | + }); |
| 68 | + }); |
| 69 | + |
| 70 | + describe('Loading UI', () => { |
| 71 | + it('Is displayed while the auth is initializing', async () => { |
| 72 | + const buttonText = "You shouldn't be able to see me!"; |
| 73 | + renderAuthWrapper({ |
| 74 | + authStatus: 'initializing', |
| 75 | + childButtonText: buttonText, |
| 76 | + }); |
| 77 | + |
| 78 | + await screen.findByText(/Loading/); |
| 79 | + const button = screen.queryByRole('button', { name: buttonText }); |
| 80 | + expect(button).not.toBeInTheDocument(); |
| 81 | + }); |
| 82 | + }); |
| 83 | + |
| 84 | + describe('Token distrusted form', () => { |
| 85 | + it("Is displayed when the user's auth status cannot be verified", async () => { |
| 86 | + const buttonText = 'Not sure if you should be able to see me'; |
| 87 | + const distrustedTextMatcher = /Unable to verify token authenticity/; |
| 88 | + const distrustedStatuses: readonly CoderAuthStatus[] = [ |
| 89 | + 'distrusted', |
| 90 | + 'noInternetConnection', |
| 91 | + 'deploymentUnavailable', |
| 92 | + ]; |
| 93 | + |
| 94 | + for (const status of distrustedStatuses) { |
| 95 | + const { unmount } = await renderAuthWrapper({ |
| 96 | + authStatus: status, |
| 97 | + childButtonText: buttonText, |
| 98 | + }); |
| 99 | + |
| 100 | + await screen.findByText(distrustedTextMatcher); |
| 101 | + const button = screen.queryByRole('button', { name: buttonText }); |
| 102 | + expect(button).not.toBeInTheDocument(); |
| 103 | + |
| 104 | + unmount(); |
| 105 | + } |
| 106 | + }); |
| 107 | + |
| 108 | + it('Lets the user eject the current token', async () => { |
| 109 | + const { ejectToken } = await renderAuthWrapper({ |
| 110 | + authStatus: 'distrusted', |
| 111 | + childButtonText: "I don't matter", |
| 112 | + }); |
| 113 | + |
| 114 | + const user = userEvent.setup(); |
| 115 | + const ejectButton = await screen.findByRole('button', { |
| 116 | + name: 'Eject token', |
| 117 | + }); |
| 118 | + |
| 119 | + await user.click(ejectButton); |
| 120 | + expect(ejectToken).toHaveBeenCalled(); |
| 121 | + }); |
| 122 | + |
| 123 | + it('Will appear if auth status changes during re-renders', async () => { |
| 124 | + const buttonText = "Now you see me, now you don't"; |
| 125 | + const { rerender } = await renderAuthWrapper({ |
| 126 | + authStatus: 'authenticated', |
| 127 | + childButtonText: buttonText, |
| 128 | + }); |
| 129 | + |
| 130 | + // Capture button after it first appears on the screen |
| 131 | + const button = await screen.findByRole('button', { name: buttonText }); |
| 132 | + |
| 133 | + rerender( |
| 134 | + <CoderProviderWithMockAuth |
| 135 | + appConfig={mockAppConfig} |
| 136 | + authStatus="distrusted" |
| 137 | + > |
| 138 | + <CoderAuthWrapper type="card"> |
| 139 | + <button>{buttonText}</button> |
| 140 | + </CoderAuthWrapper> |
| 141 | + </CoderProviderWithMockAuth>, |
| 142 | + ); |
| 143 | + |
| 144 | + // Assert that the button is now gone |
| 145 | + expect(button).not.toBeInTheDocument(); |
| 146 | + }); |
| 147 | + }); |
| 148 | + |
| 149 | + describe('Token submission form', () => { |
| 150 | + it("Is displayed when the token either doesn't exist or is definitely not valid", async () => { |
| 151 | + const buttonText = "You're not allowed to gaze upon my visage"; |
| 152 | + const tokenFormMatcher = /Please enter a new token/; |
| 153 | + const statusesForInvalidUser: readonly CoderAuthStatus[] = [ |
| 154 | + 'invalid', |
| 155 | + 'tokenMissing', |
| 156 | + ]; |
| 157 | + |
| 158 | + for (const status of statusesForInvalidUser) { |
| 159 | + const { unmount } = await renderAuthWrapper({ |
| 160 | + authStatus: status, |
| 161 | + childButtonText: buttonText, |
| 162 | + }); |
| 163 | + |
| 164 | + await screen.findByText(tokenFormMatcher); |
| 165 | + const button = screen.queryByRole('button', { name: buttonText }); |
| 166 | + expect(button).not.toBeInTheDocument(); |
| 167 | + |
| 168 | + unmount(); |
| 169 | + } |
| 170 | + |
| 171 | + expect.hasAssertions(); |
| 172 | + }); |
| 173 | + |
| 174 | + it('Lets the user submit a new token', async () => { |
| 175 | + const { registerNewToken } = await renderAuthWrapper({ |
| 176 | + authStatus: 'tokenMissing', |
| 177 | + childButtonText: "I don't matter", |
| 178 | + }); |
| 179 | + |
| 180 | + /** |
| 181 | + * Two concerns that make the selection for inputField a little hokey: |
| 182 | + * 1. The auth input is of type password, which does not have a role |
| 183 | + * compatible with Testing Library; can't use getByRole to select it |
| 184 | + * 2. MUI adds a star to its labels that are required, meaning that any |
| 185 | + * attempts at trying to match the string "Auth token" will fail |
| 186 | + */ |
| 187 | + const inputField = screen.getByLabelText(/Auth token/); |
| 188 | + const submitButton = screen.getByRole('button', { name: 'Authenticate' }); |
| 189 | + |
| 190 | + const user = userEvent.setup(); |
| 191 | + await user.click(inputField); |
| 192 | + await user.keyboard(mockCoderAuthToken); |
| 193 | + await user.click(submitButton); |
| 194 | + |
| 195 | + expect(registerNewToken).toHaveBeenCalledWith(mockCoderAuthToken); |
| 196 | + }); |
| 197 | + }); |
| 198 | +}); |
0 commit comments