232 lines
7.9 KiB
TypeScript
232 lines
7.9 KiB
TypeScript
|
import { test, expect } from '@playwright/test'
|
||
|
|
|
||
|
|
import { getUtils, setup, tearDown } from './test-utils'
|
||
|
|
import { SaveSettingsPayload } from 'lib/settings/settingsTypes'
|
||
|
|
import { TEST_SETTINGS_KEY, TEST_SETTINGS_CORRUPTED } from './storageStates'
|
||
|
|
import * as TOML from '@iarna/toml'
|
||
|
|
|
||
|
|
test.beforeEach(async ({ context, page }) => {
|
||
|
|
await setup(context, page)
|
||
|
|
})
|
||
|
|
|
||
|
|
test.afterEach(async ({ page }, testInfo) => {
|
||
|
|
await tearDown(page, testInfo)
|
||
|
|
})
|
||
|
|
|
||
|
|
test.describe('Testing settings', () => {
|
||
|
|
test('Stored settings are validated and fall back to defaults', async ({
|
||
|
|
page,
|
||
|
|
}) => {
|
||
|
|
const u = await getUtils(page)
|
||
|
|
|
||
|
|
// Override beforeEach test setup
|
||
|
|
// with corrupted settings
|
||
|
|
await page.addInitScript(
|
||
|
|
async ({ settingsKey, settings }) => {
|
||
|
|
localStorage.setItem(settingsKey, settings)
|
||
|
|
},
|
||
|
|
{
|
||
|
|
settingsKey: TEST_SETTINGS_KEY,
|
||
|
|
settings: TOML.stringify({ settings: TEST_SETTINGS_CORRUPTED }),
|
||
|
|
}
|
||
|
|
)
|
||
|
|
|
||
|
|
await page.setViewportSize({ width: 1200, height: 500 })
|
||
|
|
|
||
|
|
await u.waitForAuthSkipAppStart()
|
||
|
|
|
||
|
|
// Check the settings were reset
|
||
|
|
const storedSettings = TOML.parse(
|
||
|
|
await page.evaluate(
|
||
|
|
({ settingsKey }) => localStorage.getItem(settingsKey) || '',
|
||
|
|
{ settingsKey: TEST_SETTINGS_KEY }
|
||
|
|
)
|
||
|
|
) as { settings: SaveSettingsPayload }
|
||
|
|
|
||
|
|
expect(storedSettings.settings?.app?.theme).toBe(undefined)
|
||
|
|
|
||
|
|
// Check that the invalid settings were removed
|
||
|
|
expect(storedSettings.settings?.modeling?.defaultUnit).toBe(undefined)
|
||
|
|
expect(storedSettings.settings?.modeling?.mouseControls).toBe(undefined)
|
||
|
|
expect(storedSettings.settings?.app?.projectDirectory).toBe(undefined)
|
||
|
|
expect(storedSettings.settings?.projects?.defaultProjectName).toBe(
|
||
|
|
undefined
|
||
|
|
)
|
||
|
|
})
|
||
|
|
|
||
|
|
test('Project settings can be set and override user settings', async ({
|
||
|
|
page,
|
||
|
|
}) => {
|
||
|
|
const u = await getUtils(page)
|
||
|
|
await page.setViewportSize({ width: 1200, height: 500 })
|
||
|
|
await u.waitForAuthSkipAppStart()
|
||
|
|
await page
|
||
|
|
.getByRole('button', { name: 'Start Sketch' })
|
||
|
|
.waitFor({ state: 'visible' })
|
||
|
|
|
||
|
|
// Open the settings modal with the browser keyboard shortcut
|
||
|
|
await page.keyboard.press('Meta+Shift+,')
|
||
|
|
|
||
|
|
await expect(
|
||
|
|
page.getByRole('heading', { name: 'Settings', exact: true })
|
||
|
|
).toBeVisible()
|
||
|
|
await page
|
||
|
|
.locator('select[name="app-theme"]')
|
||
|
|
.selectOption({ value: 'light' })
|
||
|
|
|
||
|
|
// Verify the toast appeared
|
||
|
|
await expect(
|
||
|
|
page.getByText(`Set theme to "light" for this project`)
|
||
|
|
).toBeVisible()
|
||
|
|
// Check that the theme changed
|
||
|
|
await expect(page.locator('body')).not.toHaveClass(`body-bg dark`)
|
||
|
|
|
||
|
|
// Check that the user setting was not changed
|
||
|
|
await page.getByRole('radio', { name: 'User' }).click()
|
||
|
|
await expect(page.locator('select[name="app-theme"]')).toHaveValue('dark')
|
||
|
|
|
||
|
|
// Roll back to default "system" theme
|
||
|
|
await page
|
||
|
|
.getByText(
|
||
|
|
'themeRoll back themeRoll back to match defaultThe overall appearance of the appl'
|
||
|
|
)
|
||
|
|
.hover()
|
||
|
|
await page
|
||
|
|
.getByRole('button', {
|
||
|
|
name: 'Roll back theme',
|
||
|
|
})
|
||
|
|
.click()
|
||
|
|
await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
|
||
|
|
|
||
|
|
// Check that the project setting did not change
|
||
|
|
await page.getByRole('radio', { name: 'Project' }).click()
|
||
|
|
await expect(page.locator('select[name="app-theme"]')).toHaveValue('light')
|
||
|
|
})
|
||
|
|
|
||
|
|
test('Project settings can be opened with keybinding from the editor', async ({
|
||
|
|
page,
|
||
|
|
}) => {
|
||
|
|
const u = await getUtils(page)
|
||
|
|
await page.setViewportSize({ width: 1200, height: 500 })
|
||
|
|
await u.waitForAuthSkipAppStart()
|
||
|
|
await page
|
||
|
|
.getByRole('button', { name: 'Start Sketch' })
|
||
|
|
.waitFor({ state: 'visible' })
|
||
|
|
|
||
|
|
// Put the cursor in the editor
|
||
|
|
await page.locator('.cm-content').click()
|
||
|
|
|
||
|
|
// Open the settings modal with the browser keyboard shortcut
|
||
|
|
await page.keyboard.press('Meta+Shift+,')
|
||
|
|
|
||
|
|
await expect(
|
||
|
|
page.getByRole('heading', { name: 'Settings', exact: true })
|
||
|
|
).toBeVisible()
|
||
|
|
await page
|
||
|
|
.locator('select[name="app-theme"]')
|
||
|
|
.selectOption({ value: 'light' })
|
||
|
|
|
||
|
|
// Verify the toast appeared
|
||
|
|
await expect(
|
||
|
|
page.getByText(`Set theme to "light" for this project`)
|
||
|
|
).toBeVisible()
|
||
|
|
// Check that the theme changed
|
||
|
|
await expect(page.locator('body')).not.toHaveClass(`body-bg dark`)
|
||
|
|
|
||
|
|
// Check that the user setting was not changed
|
||
|
|
await page.getByRole('radio', { name: 'User' }).click()
|
||
|
|
await expect(page.locator('select[name="app-theme"]')).toHaveValue('dark')
|
||
|
|
|
||
|
|
// Roll back to default "system" theme
|
||
|
|
await page
|
||
|
|
.getByText(
|
||
|
|
'themeRoll back themeRoll back to match defaultThe overall appearance of the appl'
|
||
|
|
)
|
||
|
|
.hover()
|
||
|
|
await page
|
||
|
|
.getByRole('button', {
|
||
|
|
name: 'Roll back theme',
|
||
|
|
})
|
||
|
|
.click()
|
||
|
|
await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
|
||
|
|
|
||
|
|
// Check that the project setting did not change
|
||
|
|
await page.getByRole('radio', { name: 'Project' }).click()
|
||
|
|
await expect(page.locator('select[name="app-theme"]')).toHaveValue('light')
|
||
|
|
})
|
||
|
|
|
||
|
|
test('Project and user settings can be reset', async ({ page }) => {
|
||
|
|
const u = await getUtils(page)
|
||
|
|
await page.setViewportSize({ width: 1200, height: 500 })
|
||
|
|
await u.waitForAuthSkipAppStart()
|
||
|
|
await page
|
||
|
|
.getByRole('button', { name: 'Start Sketch' })
|
||
|
|
.waitFor({ state: 'visible' })
|
||
|
|
|
||
|
|
// Put the cursor in the editor
|
||
|
|
await page.locator('.cm-content').click()
|
||
|
|
|
||
|
|
// Open the settings modal with the browser keyboard shortcut
|
||
|
|
await page.keyboard.press('Meta+Shift+,')
|
||
|
|
|
||
|
|
await expect(
|
||
|
|
page.getByRole('heading', { name: 'Settings', exact: true })
|
||
|
|
).toBeVisible()
|
||
|
|
|
||
|
|
// Click the reset settings button.
|
||
|
|
await page.getByRole('button', { name: 'Restore default settings' }).click()
|
||
|
|
|
||
|
|
await page
|
||
|
|
.locator('select[name="app-theme"]')
|
||
|
|
.selectOption({ value: 'light' })
|
||
|
|
|
||
|
|
// Verify the toast appeared
|
||
|
|
await expect(
|
||
|
|
page.getByText(`Set theme to "light" for this project`)
|
||
|
|
).toBeVisible()
|
||
|
|
// Check that the theme changed
|
||
|
|
await expect(page.locator('body')).not.toHaveClass(`body-bg dark`)
|
||
|
|
await expect(page.locator('select[name="app-theme"]')).toHaveValue('light')
|
||
|
|
|
||
|
|
// Check that the user setting was not changed
|
||
|
|
await page.getByRole('radio', { name: 'User' }).click()
|
||
|
|
await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
|
||
|
|
|
||
|
|
// Click the reset settings button.
|
||
|
|
await page.getByRole('button', { name: 'Restore default settings' }).click()
|
||
|
|
|
||
|
|
// Verify it is now set to the default value
|
||
|
|
await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
|
||
|
|
|
||
|
|
// Set the user theme to light.
|
||
|
|
await page
|
||
|
|
.locator('select[name="app-theme"]')
|
||
|
|
.selectOption({ value: 'light' })
|
||
|
|
|
||
|
|
// Verify the toast appeared
|
||
|
|
await expect(
|
||
|
|
page.getByText(`Set theme to "light" as a user default`)
|
||
|
|
).toBeVisible()
|
||
|
|
// Check that the theme changed
|
||
|
|
await expect(page.locator('body')).not.toHaveClass(`body-bg dark`)
|
||
|
|
await expect(page.locator('select[name="app-theme"]')).toHaveValue('light')
|
||
|
|
|
||
|
|
await page.getByRole('radio', { name: 'Project' }).click()
|
||
|
|
await expect(page.locator('select[name="app-theme"]')).toHaveValue('light')
|
||
|
|
|
||
|
|
// Click the reset settings button.
|
||
|
|
await page.getByRole('button', { name: 'Restore default settings' }).click()
|
||
|
|
// Verify it is now set to the default value
|
||
|
|
await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
|
||
|
|
|
||
|
|
await page.getByRole('radio', { name: 'User' }).click()
|
||
|
|
await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
|
||
|
|
|
||
|
|
// Click the reset settings button.
|
||
|
|
await page.getByRole('button', { name: 'Restore default settings' }).click()
|
||
|
|
|
||
|
|
// Verify it is now set to the default value
|
||
|
|
await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
|
||
|
|
})
|
||
|
|
})
|