mirror of
https://github.com/enso-org/enso.git
synced 2024-12-22 04:31:40 +03:00
37cc980082
#### Tl;dr Closes: enso-org/cloud-v2#1283 This PR significantly reimplements Offline mode <details><summary>Demo Presentation</summary> <p> https://github.com/enso-org/enso/assets/61194245/752d0423-9c0a-43ba-91e3-4a6688f77034 </p> </details> --- #### Context: Offline mode is one of the core features of the dashboard. Unfortunately, after adding new features and a few refactoring, we lost the ability to work offline. This PR should bring this functionality back, with a few key differences: 1. We require users to sign in before using the dashboard even in local mode. 2. Once a user is logged in, we allow him to work with local files 3. If a user closes the dashboard, and then open it, he can continue using it in offline mode #### This Change: What does this change do in the larger context? Specific details to highlight for review: 1. Reimplements `<AuthProvider />` functionality, now it implemented on top of `<Suspense />` and ReactQuery 2. Reimplements Backend module flow, now remote backend is always created, You no longer need to check if the RemoteBackend is present 3. Introduces new `<Suspense />` component, which is aware of offline status 4. Introduce new offline-related hooks 5. Add a banner to the form if it's unable to submit it offline 6. Refactor `InviteUserDialog` to the new `<Form />` component 7. Fixes redirect bug when the app doesn't redirect a user to the dashboard after logging in 8. Fixes strange behavior when `/users/me` could stuck into infinite refetch 9. Redesign the Cloud table for offline mode. 10. Adds blocking UI dialog when a user clicks "log out" button #### Test Plan: This PR requires thorough QA on the login flow across the browser and IDE. All redirect logic must stay unchanged. ---
98 lines
3.9 KiB
TypeScript
98 lines
3.9 KiB
TypeScript
/** @file Test the user settings tab. */
|
|
import * as test from '@playwright/test'
|
|
|
|
import * as actions from './actions'
|
|
|
|
test.test('user settings', async ({ page }) => {
|
|
const { api } = await actions.mockAllAndLogin({ page })
|
|
const localActions = actions.settings.userAccount
|
|
test.expect(api.currentUser()?.name).toBe(api.defaultName)
|
|
|
|
await localActions.go(page)
|
|
const nameInput = localActions.locateNameInput(page)
|
|
const newName = 'another user-name'
|
|
await nameInput.fill(newName)
|
|
await nameInput.press('Enter')
|
|
test.expect(api.currentUser()?.name).toBe(newName)
|
|
test.expect(api.currentOrganization()?.name).not.toBe(newName)
|
|
})
|
|
|
|
test.test('change password form', async ({ page }) => {
|
|
const { api } = await actions.mockAllAndLogin({ page })
|
|
const localActions = actions.settings.changePassword
|
|
|
|
await localActions.go(page)
|
|
test.expect(api.currentPassword()).toBe(actions.VALID_PASSWORD)
|
|
await localActions.locateCurrentPasswordInput(page).fill(actions.VALID_PASSWORD)
|
|
await localActions.locateNewPasswordInput(page).fill(actions.INVALID_PASSWORD)
|
|
await test
|
|
.expect(localActions.locateChangeButton(page), 'incomplete form should be rejected')
|
|
.toBeDisabled()
|
|
|
|
await test.test.step('Invalid new password', async () => {
|
|
await localActions.locateCurrentPasswordInput(page).fill(actions.VALID_PASSWORD)
|
|
await localActions.locateNewPasswordInput(page).fill(actions.INVALID_PASSWORD)
|
|
await localActions.locateConfirmNewPasswordInput(page).fill(actions.INVALID_PASSWORD)
|
|
test
|
|
.expect(
|
|
await localActions
|
|
.locateNewPasswordInput(page)
|
|
.evaluate((element: HTMLInputElement) => element.validity.valid),
|
|
'invalid new password should be rejected'
|
|
)
|
|
.toBe(false)
|
|
await test
|
|
.expect(localActions.locateChangeButton(page), 'invalid new password should be rejected')
|
|
.toBeDisabled()
|
|
})
|
|
|
|
await test.test.step('Invalid new password confirmation', async () => {
|
|
await localActions.locateCurrentPasswordInput(page).fill(actions.VALID_PASSWORD)
|
|
await localActions.locateNewPasswordInput(page).fill(actions.VALID_PASSWORD)
|
|
await localActions.locateConfirmNewPasswordInput(page).fill(actions.VALID_PASSWORD + 'a')
|
|
test
|
|
.expect(
|
|
await localActions
|
|
.locateConfirmNewPasswordInput(page)
|
|
.evaluate((element: HTMLInputElement) => element.validity.valid),
|
|
'invalid new password confirmation should be rejected'
|
|
)
|
|
.toBe(false)
|
|
await test
|
|
.expect(
|
|
localActions.locateChangeButton(page),
|
|
'invalid new password confirmation should be rejected'
|
|
)
|
|
.toBeDisabled()
|
|
})
|
|
|
|
await test.test.step('Successful password change', async () => {
|
|
const newPassword = '1234!' + actions.VALID_PASSWORD
|
|
await localActions.locateNewPasswordInput(page).fill(newPassword)
|
|
await localActions.locateConfirmNewPasswordInput(page).fill(newPassword)
|
|
await localActions.locateChangeButton(page).click()
|
|
await test.expect(localActions.locateCurrentPasswordInput(page)).toHaveText('')
|
|
await test.expect(localActions.locateNewPasswordInput(page)).toHaveText('')
|
|
await test.expect(localActions.locateConfirmNewPasswordInput(page)).toHaveText('')
|
|
test.expect(api.currentPassword()).toBe(newPassword)
|
|
})
|
|
})
|
|
|
|
test.test('upload profile picture', async ({ page }) => {
|
|
const { api } = await actions.mockAllAndLogin({ page })
|
|
const localActions = actions.settings.profilePicture
|
|
|
|
await localActions.go(page)
|
|
const fileChooserPromise = page.waitForEvent('filechooser')
|
|
await localActions.locateInput(page).click()
|
|
const fileChooser = await fileChooserPromise
|
|
const name = 'foo.png'
|
|
const content = 'a profile picture'
|
|
await fileChooser.setFiles([{ name, mimeType: 'image/png', buffer: Buffer.from(content) }])
|
|
await test
|
|
.expect(() => {
|
|
test.expect(api.currentProfilePicture()).toEqual(content)
|
|
})
|
|
.toPass()
|
|
})
|