Skip to content

Commit

Permalink
add missing tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@shakyShane
shakyShane committed Dec 16, 2024
1 parent 60cb5d0 commit 1a402db
Show file tree
Hide file tree
Showing 3 changed files with 419 additions and 3 deletions.
1 change: 0 additions & 1 deletion special-pages/pages/new-tab/app/customizer/components/BrowserThemeSection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { useComputed } from '@preact/signals';
* @param {(theme: import('../../../types/new-tab').ThemeData) => void} props.setTheme
*/
export function BrowserThemeSection(props) {
console.log(' RENDER:BrowserThemeSection?');
const current = useComputed(() => props.data.value.theme);
return (
<div class={styles.section}>
Expand Down
237 changes: 236 additions & 1 deletion special-pages/pages/new-tab/app/customizer/integration-tests/customizer.page.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { expect } from '@playwright/test';
import { test, expect } from '@playwright/test';
import { values } from '../values.js';

/**
* @typedef {import('../../../types/new-tab.js').NewTabMessages['subscriptions']['subscriptionEvent']} SubscriptionEventNames
Expand All @@ -12,6 +13,95 @@ export class CustomizerPage {
this.ntp = ntp;
}

async showsColorSelectionPanel() {
const { page } = this.ntp;
await page.locator('aside').getByLabel('Solid Colors').click();
}

async opensCustomizer() {
const { page } = this.ntp;
await page.getByRole('button', { name: 'Customize' }).click();
}

async hasDefaultBackgroundSelected() {
const { page } = this.ntp;
const selected = page.locator('aside').getByLabel('Default');
await expect(selected).toHaveAttribute('aria-checked', 'true');
}

/**
* @param {'light' | 'dark'} theme
*/
async mainContentHasTheme(theme) {
const { page } = this.ntp;
await test.step(`main content area theme should be: ${theme}`, async () => {
await expect(page.locator('main')).toHaveAttribute('data-theme', theme);
});
}

/**
* @param {'light' | 'dark'} theme
*/
async drawerHasTheme(theme) {
const { page } = this.ntp;
await test.step(`customizer drawer theme should be: ${theme}`, async () => {
await expect(page.locator('aside')).toHaveAttribute('data-theme', theme);
});
}

async hasColorSelected() {
const { page } = this.ntp;
const selected = page.locator('aside').getByLabel('Solid Colors');
await expect(selected).toHaveAttribute('aria-checked', 'true');
}

async hasGradientSelected() {
const { page } = this.ntp;
await page.pause();
const selected = page.locator('aside').getByLabel('Gradients');
await expect(selected).toHaveAttribute('aria-checked', 'true');
}

async hasImagesSelected() {
const { page } = this.ntp;
const selected = page.locator('aside').getByLabel('My Backgrounds');
await expect(selected).toHaveAttribute('aria-checked', 'true');
}

async uploadsFirstImage() {
const { page } = this.ntp;
await page.getByLabel('Add Background').click();
await this.ntp.mocks.waitForCallCount({ count: 1, method: 'customizer_upload' });
}
async setsDarkTheme() {
const { page } = this.ntp;
await page.getByRole('radio', { name: 'Select dark theme' }).click();
const calls = await this.ntp.mocks.waitForCallCount({ count: 1, method: 'customizer_setTheme' });
expect(calls[0].payload).toMatchObject({
method: 'customizer_setTheme',
params: { theme: 'dark' },
});
}

async lightThemeIsSelected() {
const { page } = this.ntp;
await expect(page.getByRole('radio', { name: 'Select light theme' })).toHaveAttribute('aria-checked', 'true');
}
async darkThemeIsSelected() {
const { page } = this.ntp;
await expect(page.getByRole('radio', { name: 'Select dark theme' })).toHaveAttribute('aria-checked', 'true');
}

async selectsDefault() {
const { page } = this.ntp;
await page.locator('aside').getByLabel('Default').click();
const calls = await this.ntp.mocks.waitForCallCount({ count: 1, method: 'customizer_setBackground' });
expect(calls[0].payload).toMatchObject({
method: 'customizer_setBackground',
params: { background: { kind: 'default' } },
});
}

async hasDefaultBackground() {
const { page } = this.ntp;
await expect(page.getByTestId('BackgroundConsumer')).toHaveCSS('background-color', 'rgb(255, 255, 255)');
Expand All @@ -21,4 +111,149 @@ export class CustomizerPage {
const { page } = this.ntp;
await expect(page.getByTestId('BackgroundConsumer')).toHaveCSS('background-color', 'rgb(51, 51, 51)');
}

/**
* @param {keyof typeof values.colors} color
*/
async hasColorBackground(color) {
const { page } = this.ntp;
const value = values.colors[color];
await expect(page.getByTestId('BackgroundConsumer')).toHaveAttribute('data-background-color', value.hex);
}

async selectsColor() {
const { page } = this.ntp;
await this.showsColorSelectionPanel();
await page.getByRole('radio', { name: 'Select color03' }).click();
const calls = await this.ntp.mocks.waitForCallCount({ count: 1, method: 'customizer_setBackground' });
expect(calls[0].payload).toMatchObject({
method: 'customizer_setBackground',
params: { background: { kind: 'color', value: 'color03' } },
});
return async () => await page.getByRole('button', { name: 'Solid Colors' }).click();
}

async selectsGradient() {
const { page } = this.ntp;
await page.locator('aside').getByLabel('Gradients').click();
await page.getByRole('radio', { name: 'Select gradient01' }).click();
const calls = await this.ntp.mocks.waitForCallCount({ count: 1, method: 'customizer_setBackground' });
expect(calls[0].payload).toMatchObject({
method: 'customizer_setBackground',
params: { background: { kind: 'gradient', value: 'gradient01' } },
});
return async () => await page.getByRole('button', { name: 'Gradients' }).click();
}

/**
* @param {import('../../../types/new-tab.js').BackgroundVariant} bg
*/
async acceptsBackgroundUpdate(bg) {
/** @type {import('../../../types/new-tab.js').BackgroundData} */
const payload = { background: bg };
/** @type {SubscriptionEventNames} */
const named = 'customizer_onBackgroundUpdate';
await this.ntp.mocks.simulateSubscriptionMessage(named, payload);
}

/**
* @param {'light' | 'dark'} theme
*/
async acceptsThemeUpdate(theme) {
/** @type {import('../../../types/new-tab.js').ThemeData} */
const payload = { theme };
/** @type {SubscriptionEventNames} */
const named = 'customizer_onThemeUpdate';
await this.ntp.mocks.simulateSubscriptionMessage(named, payload);
}

/**
* @param {string} color
*/
async acceptsColorUpdate(color) {
await test.step('subscription event: customizer_onColorUpdate', async () => {
/** @type {import('../../../types/new-tab.js').UserColorData} */
const payload = { userColor: { kind: 'hex', value: color } };
/** @type {SubscriptionEventNames} */
const named = 'customizer_onColorUpdate';
await this.ntp.mocks.simulateSubscriptionMessage(named, payload);
});
}

/**
*
*/
async acceptsImagesUpdate() {
const { page } = this.ntp;
await test.step('subscription event: customizer_onImagesUpdate', async () => {
// Listener for the thumb loading
const resPromise = page.waitForResponse((req) => {
return req.url().includes(values.userImages['01'].thumb);
});

/** @type {import('../../../types/new-tab.js').UserImageData} */
const payload = { userImages: [values.userImages['01']] };
/** @type {SubscriptionEventNames} */
const named = 'customizer_onImagesUpdate';
await this.ntp.mocks.simulateSubscriptionMessage(named, payload);

const response = await resPromise;
await page.pause();
expect(response.ok()).toBe(true);
});
}

/**
* @param {'light' | 'dark'} theme
*/
async hasContentTheme(theme) {
const { page } = this.ntp;
await expect(page.getByRole('main')).toHaveAttribute('data-theme', theme);
}

/**
* @param {string} color
*/
async selectsCustomColor(color) {
const { page } = this.ntp;
await page.locator('input[type="color"]').click();
await page.waitForTimeout(500);
await page.locator('input[type="color"]').fill(color);
await page.locator('body').click();
}

/**
* @param {string} color
*/
async selectsPreviousCustomColor(color) {
const { page } = this.ntp;
await this.showsColorSelectionPanel();
await expect(page.locator('input[type="color"]')).toHaveValue(color);
await page.locator('input[type="color"]').click();
await page.locator('body').click();
}

/**
* @param {string} color
*/
async hasCustomColorValue(color) {
const { page } = this.ntp;
await expect(page.locator('input[type="color"]'), { message: `input should have value ${color}` }).toHaveValue(color);
}

/**
* @param {string} color
*/
async savesTheCustomColor(color) {
const calls = await this.ntp.mocks.waitForCallCount({ count: 1, method: 'customizer_setBackground' });
expect(calls[0].payload).toMatchObject({
method: 'customizer_setBackground',
params: { background: { kind: 'hex', value: color } },
});
}

async hasEmptyImagesPanel() {
const { page } = this.ntp;
await page.getByLabel('Add Background').waitFor();
}
}
Loading

0 comments on commit 1a402db

Please sign in to comment.