Fix onboarding example code loading (#2723)

* Add Playwright test to verify that example code loads

* Just let the loaded code be null if it's null
This commit is contained in:
Frank Noirot
2024-06-20 12:07:21 -04:00
committed by GitHub
parent 674d49e2ae
commit e7af064518
2 changed files with 94 additions and 68 deletions

View File

@ -1287,87 +1287,113 @@ test('Keyboard shortcuts can be viewed through the help menu', async ({
).toBeAttached() ).toBeAttached()
}) })
test('Click through each onboarding step', async ({ page }) => { test.describe('Onboarding tests', () => {
const u = await getUtils(page) test('Onboarding code is shown in the editor', async ({ page }) => {
const u = await getUtils(page)
// Override beforeEach test setup // Override beforeEach test setup
await page.addInitScript( await page.addInitScript(
async ({ settingsKey, settings }) => { async ({ settingsKey }) => {
// Give no initial code, so that the onboarding start is shown immediately // Give no initial code, so that the onboarding start is shown immediately
localStorage.setItem('persistCode', '') localStorage.removeItem('persistCode')
localStorage.setItem(settingsKey, settings) localStorage.removeItem(settingsKey)
}, },
{ { settingsKey: TEST_SETTINGS_KEY }
settingsKey: TEST_SETTINGS_KEY, )
settings: TOML.stringify({ settings: TEST_SETTINGS_ONBOARDING_START }),
await page.setViewportSize({ width: 1200, height: 500 })
await page.goto('/')
await u.waitForAuthSkipAppStart()
// Test that the onboarding pane loaded
await expect(page.getByText('Welcome to Modeling App! This')).toBeVisible()
// *and* that the code is shown in the editor
await expect(page.locator('.cm-content')).toContainText('// Shelf Bracket')
})
test('Click through each onboarding step', async ({ page }) => {
const u = await getUtils(page)
// Override beforeEach test setup
await page.addInitScript(
async ({ settingsKey, settings }) => {
// Give no initial code, so that the onboarding start is shown immediately
localStorage.setItem('persistCode', '')
localStorage.setItem(settingsKey, settings)
},
{
settingsKey: TEST_SETTINGS_KEY,
settings: TOML.stringify({ settings: TEST_SETTINGS_ONBOARDING_START }),
}
)
await page.setViewportSize({ width: 1200, height: 1080 })
await page.goto('/')
await u.waitForAuthSkipAppStart()
// Test that the onboarding pane loaded
await expect(page.getByText('Welcome to Modeling App! This')).toBeVisible()
const nextButton = page.getByTestId('onboarding-next')
while ((await nextButton.innerText()) !== 'Finish') {
await expect(nextButton).toBeVisible()
await nextButton.click()
} }
)
await page.setViewportSize({ width: 1200, height: 1080 }) // Finish the onboarding
await page.goto('/')
await u.waitForAuthSkipAppStart()
// Test that the onboarding pane loaded
await expect(page.getByText('Welcome to Modeling App! This')).toBeVisible()
const nextButton = page.getByTestId('onboarding-next')
while ((await nextButton.innerText()) !== 'Finish') {
await expect(nextButton).toBeVisible() await expect(nextButton).toBeVisible()
await nextButton.click() await nextButton.click()
}
// Finish the onboarding // Test that the onboarding pane is gone
await expect(nextButton).toBeVisible() await expect(page.getByTestId('onboarding-content')).not.toBeVisible()
await nextButton.click() await expect(page.url()).not.toContain('onboarding')
})
// Test that the onboarding pane is gone test('Onboarding redirects and code updating', async ({ page }) => {
await expect(page.getByTestId('onboarding-content')).not.toBeVisible() const u = await getUtils(page)
await expect(page.url()).not.toContain('onboarding')
})
test('Onboarding redirects and code updating', async ({ page }) => { // Override beforeEach test setup
const u = await getUtils(page) await page.addInitScript(
async ({ settingsKey, settings }) => {
// Give some initial code, so we can test that it's cleared
localStorage.setItem('persistCode', 'const sigmaAllow = 15000')
localStorage.setItem(settingsKey, settings)
},
{
settingsKey: TEST_SETTINGS_KEY,
settings: TOML.stringify({ settings: TEST_SETTINGS_ONBOARDING_EXPORT }),
}
)
// Override beforeEach test setup await page.setViewportSize({ width: 1200, height: 500 })
await page.addInitScript( await page.goto('/')
async ({ settingsKey, settings }) => { await u.waitForAuthSkipAppStart()
// Give some initial code, so we can test that it's cleared
localStorage.setItem('persistCode', 'const sigmaAllow = 15000')
localStorage.setItem(settingsKey, settings)
},
{
settingsKey: TEST_SETTINGS_KEY,
settings: TOML.stringify({ settings: TEST_SETTINGS_ONBOARDING_EXPORT }),
}
)
await page.setViewportSize({ width: 1200, height: 500 }) // Test that the redirect happened
await page.goto('/') await expect(page.url().split(':3000').slice(-1)[0]).toBe(
await u.waitForAuthSkipAppStart() `/file/%2Fbrowser%2Fmain.kcl/onboarding/export`
)
// Test that the redirect happened // Test that you come back to this page when you refresh
await expect(page.url().split(':3000').slice(-1)[0]).toBe( await page.reload()
`/file/%2Fbrowser%2Fmain.kcl/onboarding/export` await expect(page.url().split(':3000').slice(-1)[0]).toBe(
) `/file/%2Fbrowser%2Fmain.kcl/onboarding/export`
)
// Test that you come back to this page when you refresh // Test that the onboarding pane loaded
await page.reload() const title = page.locator('[data-testid="onboarding-content"]')
await expect(page.url().split(':3000').slice(-1)[0]).toBe( await expect(title).toBeAttached()
`/file/%2Fbrowser%2Fmain.kcl/onboarding/export`
)
// Test that the onboarding pane loaded // Test that the code changes when you advance to the next step
const title = page.locator('[data-testid="onboarding-content"]') await page.locator('[data-testid="onboarding-next"]').click()
await expect(title).toBeAttached() await expect(page.locator('.cm-content')).toHaveText('')
// Test that the code changes when you advance to the next step // Test that the code is not empty when you click on the next step
await page.locator('[data-testid="onboarding-next"]').click() await page.locator('[data-testid="onboarding-next"]').click()
await expect(page.locator('.cm-content')).toHaveText('') await expect(page.locator('.cm-content')).toHaveText(/.+/)
})
// Test that the code is not empty when you click on the next step
await page.locator('[data-testid="onboarding-next"]').click()
await expect(page.locator('.cm-content')).toHaveText(/.+/)
}) })
test.describe('Testing selections', () => { test.describe('Testing selections', () => {

View File

@ -22,7 +22,7 @@ export default class CodeManager {
return return
} }
const storedCode = safeLSGetItem(PERSIST_CODE_TOKEN) || '' const storedCode = safeLSGetItem(PERSIST_CODE_TOKEN)
// TODO #819 remove zustand persistence logic in a few months // TODO #819 remove zustand persistence logic in a few months
// short term migration, shouldn't make a difference for tauri app users // short term migration, shouldn't make a difference for tauri app users
// anyway since that's filesystem based. // anyway since that's filesystem based.