@hortonstudio/main 1.2.11 → 1.2.13

package/attributes-master/packages/attributes/tests/codehighlight.spec.ts

@@ -1,23 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-import { waitAttributeLoaded } from './utils';
-
-test.beforeEach(async ({ page }) => {
-  await page.goto('http://fs-attributes.webflow.io/codehighlight');
-});
-
-test.describe('codehighlight', () => {
-  test('Highlights code with hljs', async ({ page }) => {
-    await waitAttributeLoaded(page, 'codehighlight');
-
-    const code = page.getByTestId('code-1');
-    await expect(code).toHaveClass(/hljs/);
-  });
-
-  test('Highlights richtext component code with hljs', async ({ page }) => {
-    await waitAttributeLoaded(page, 'codehighlight');
-
-    const codeComponent = page.locator('[fs-richtext-element] [data-testid="code-2"]');
-    await expect(codeComponent).toHaveClass(/hljs/);
-  });
-});

package/attributes-master/packages/attributes/tests/combobox.spec.ts

@@ -1,321 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-import { waitAttributeLoaded } from './utils';
-
-test.beforeEach(async ({ page }) => {
-  await page.goto('http://fs-attributes.webflow.io/combobox');
-  await waitAttributeLoaded(page, 'combobox');
-
-  // eslint-disable-next-line no-console
-  page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
-});
-
-test.describe('combobox', () => {
-  test('Combobox initializes properly', async ({ page }) => {
-    const comboboxDropdown = page.locator('[fs-combobox-element="dropdown"]');
-    const comboboxClearDropdown = page.locator('[fs-combobox-element="clear"]');
-    const comboboxLabels = page.locator('[fs-combobox-element="label"]');
-    const comboboxInput = comboboxDropdown.locator('input');
-    const comboboSelect = comboboxDropdown.locator('select');
-    const comboboSelectOptions = comboboSelect.locator('option');
-
-    const comboboxLabelsCount = await comboboxLabels.count();
-    const comboboSelectOptionsCount = await comboboSelectOptions.count();
-
-    for (let optionIndex = 0; optionIndex < comboboSelectOptionsCount; optionIndex++) {
-      const option = comboboSelect.nth(optionIndex);
-      await expect(option).not.toBe(null);
-    }
-
-    await expect(comboboxLabelsCount).toBeGreaterThan(0);
-
-    await expect(comboboxDropdown).toBeVisible();
-    await expect(comboboxClearDropdown).toHaveCSS('display', 'none');
-    await expect(comboboxInput).toBeVisible();
-    await expect(comboboxInput).toBeEditable();
-  });
-
-  test('Combobox on input if preventclear is true input value is maintained', async ({ page }) => {
-    const comboboxDropdown = page.locator('[fs-combobox-element="dropdown"]');
-    const preventClearSetting = page.locator('[fs-combobox-preventclear="true"]');
-
-    const preventClearSettingExists = await preventClearSetting.isVisible();
-
-    if (!preventClearSettingExists) {
-      return;
-    }
-
-    const comboboxInput = comboboxDropdown.locator('input');
-
-    const comboboxNav = comboboxDropdown.locator('nav');
-
-    await comboboxInput.focus();
-    await comboboxInput.fill('notexistingvalue');
-
-    await expect(comboboxNav).toHaveClass(/w--open/);
-
-    await comboboxNav.press('Escape');
-
-    await expect(comboboxNav).not.toHaveClass(/w--open/);
-
-    const inputValue = await comboboxInput.inputValue();
-
-    await expect(inputValue).toEqual('notexistingvalue');
-  });
-
-  test('Combobox opens and closes by clicking on input.', async ({ page }) => {
-    const comboboxDropdown = page.locator('[fs-combobox-element="dropdown"]');
-    const comboboxInput = comboboxDropdown.locator('input');
-
-    const comboboxNav = comboboxDropdown.locator('nav');
-
-    // open dropdown
-    await comboboxInput.click();
-    // expect nav class to include w--open
-    await expect(comboboxNav).toHaveClass(/w--open/);
-
-    // second click should not close dropdown
-    await comboboxInput.click();
-    await expect(comboboxNav).toHaveClass(/w--open/);
-  });
-
-  test('Combobox input arrow down key opens dropdown', async ({ page }) => {
-    const comboboxDropdown = page.locator('[fs-combobox-element="dropdown"]');
-    const comboboxInput = comboboxDropdown.locator('input');
-    const comboboxNav = comboboxDropdown.locator('nav');
-
-    await comboboxInput.focus();
-
-    await comboboxInput.press('ArrowDown');
-
-    await expect(comboboxNav).toHaveClass(/w--open/);
-  });
-
-  test('Combobox input on escape key if nothing has been selected, it should clear input field and close dropdown', async ({
-    page,
-  }) => {
-    const comboboxDropdown = page.locator('[fs-combobox-element="dropdown"]');
-    const comboboxInput = comboboxDropdown.locator('input');
-    const comboboxClearDropdown = page.locator('[fs-combobox-element="clear"]');
-    const select = comboboxDropdown.locator('select');
-    const preventClearSetting = page.locator('[fs-combobox-preventclear="true"]');
-
-    const preventClearSettingExists = await preventClearSetting.isVisible();
-
-    const comboboxNav = comboboxDropdown.locator('nav');
-
-    await comboboxInput.focus();
-    await comboboxInput.fill('test');
-
-    await expect(comboboxNav).toHaveClass(/w--open/);
-
-    await comboboxNav.press('Escape');
-
-    await expect(comboboxNav).not.toHaveClass(/w--open/);
-
-    // if prevent clear is true, input value should not be cleared
-    if (preventClearSettingExists) {
-      await expect(await comboboxInput.inputValue()).toEqual('test');
-
-      return;
-    }
-
-    const selectedValue = await select.getAttribute('value');
-    if (!selectedValue) {
-      const inputValue = await comboboxInput.inputValue();
-      await expect(inputValue).toEqual('');
-
-      await expect(comboboxClearDropdown).toHaveCSS('display', 'none');
-    }
-  });
-
-  test('Combobox should show clear icon only when selected option value matches input value', async ({ page }) => {
-    const comboboxDropdown = page.locator('[fs-combobox-element="dropdown"]');
-    const comboboxInput = comboboxDropdown.locator('input');
-    const comboboxNav = comboboxDropdown.locator('nav');
-    const comboboxOptions = comboboxNav.locator('a');
-    const select = comboboxDropdown.locator('select');
-    const comboboxClearDropdown = page.locator('[fs-combobox-element="clear"]');
-
-    const getAttributeIfExists = async (selector: string, attributeName: string): Promise<boolean> => {
-      const element = page.locator(selector);
-
-      if ((await element.count()) === 0) return false;
-
-      const attributeValue = await element.getAttribute(attributeName);
-
-      return attributeValue === 'true';
-    };
-
-    const preventClearSettingExists = await getAttributeIfExists(
-      '[fs-combobox-preventclear]',
-      'fs-combobox-preventclear'
-    );
-
-    await comboboxInput.click();
-
-    const activeElement = await page.evaluate(() => document.activeElement?.tagName);
-    await expect(activeElement).toEqual('INPUT');
-
-    await expect(await comboboxNav).toHaveClass(/w--open/);
-
-    const randomOptionIndex = Math.floor(Math.random() * (await comboboxOptions.count()));
-    const randomOption = comboboxOptions.nth(randomOptionIndex);
-    await randomOption.click();
-
-    await expect(comboboxNav).not.toHaveClass(/w--open/);
-
-    const inputValue = await comboboxInput.inputValue();
-
-    if (!preventClearSettingExists && inputValue.length === 0)
-      await expect(comboboxClearDropdown).toHaveCSS('display', 'none');
-    else if (inputValue.length > 0 && preventClearSettingExists)
-      await expect(comboboxClearDropdown).toHaveCSS('display', 'block');
-    else if (inputValue.length > 0 && !preventClearSettingExists)
-      await expect(comboboxClearDropdown).toHaveCSS('display', 'block');
-
-    // empty input
-    await comboboxInput.fill('');
-
-    // press escape
-    await comboboxInput.press('Escape');
-
-    await expect(comboboxClearDropdown).toHaveCSS('display', 'none');
-
-    await expect(comboboxNav).not.toHaveAttribute('aria-expanded', 'true');
-
-    const selectedValue = await select.getAttribute('value');
-
-    if (selectedValue) {
-      await expect(comboboxClearDropdown).toHaveCSS('display', 'flex');
-    }
-  });
-
-  test('Combobox whenever it is opened and if selected option does not exist, it should focus on first option', async ({
-    page,
-  }) => {
-    const comboboxDropdown = page.locator('[fs-combobox-element="dropdown"]');
-    const comboboxInput = comboboxDropdown.locator('input');
-    const comboboxNav = comboboxDropdown.locator('nav');
-    const comboboxOptions = comboboxNav.locator('a');
-
-    await comboboxInput.focus();
-
-    await comboboxInput.press('ArrowDown');
-    await expect(comboboxNav).toHaveClass(/w--open/);
-
-    await page.waitForTimeout(1000);
-    const firstOption = await comboboxOptions.nth(0);
-
-    const activeElement = await page.evaluate(() => document.activeElement?.getAttribute('id'));
-    const firstOptionId = await firstOption.getAttribute('id');
-
-    await expect(activeElement).toEqual(firstOptionId);
-  });
-
-  test('Combobox whenever it is opened and something is typed, arrow up should close dropdown and arrow down should focus on first element on the list if no selected option is found', async ({
-    page,
-  }) => {
-    const comboboxDropdown = page.locator('[fs-combobox-element="dropdown"]');
-    const comboboxInput = comboboxDropdown.locator('input');
-    const comboboxNav = comboboxDropdown.locator('nav');
-    const comboboxOptions = comboboxNav.locator('a');
-
-    await comboboxInput.fill('a');
-
-    await expect(comboboxNav).toHaveClass(/w--open/);
-
-    await comboboxInput.press('ArrowUp');
-
-    await expect(comboboxNav).not.toHaveClass(/w--open/);
-
-    await comboboxInput.press('ArrowDown');
-
-    await expect(comboboxNav).toHaveClass(/w--open/);
-
-    await page.waitForTimeout(1000);
-    const firstOption = comboboxOptions.nth(0);
-
-    const activeElement = await page.evaluate(() => document.activeElement?.getAttribute('id'));
-    const firstOptionId = await firstOption.getAttribute('id');
-
-    await expect(activeElement).toEqual(firstOptionId);
-  });
-
-  test('Combobox input field enter key should submit form', async ({ page }) => {
-    const comboboxDropdown = page.locator('[fs-combobox-element="dropdown"]');
-    const comboboxInput = comboboxDropdown.locator('input');
-    const comboboxNav = comboboxDropdown.locator('nav');
-
-    await comboboxInput.focus();
-
-    await comboboxInput.type('test');
-
-    await comboboxInput.press('Enter');
-
-    await expect(comboboxNav).not.toBeVisible();
-    await expect(comboboxInput).not.toBeVisible();
-  });
-
-  test('Combobox clear icon enter key should not submit form', async ({ page }) => {
-    const comboboxDropdown = page.locator('[fs-combobox-element="dropdown"]');
-    const comboboxInput = comboboxDropdown.locator('input');
-    const comboboxNav = comboboxDropdown.locator('nav');
-    const comboboxClearDropdown = page.locator('[fs-combobox-element="clear"]');
-
-    // toggle dropdown by clicking on input
-    await comboboxInput.click();
-
-    // dropdown should be open
-    await expect(comboboxNav).toHaveClass(/w--open/);
-
-    // click on first item in the list
-    const randomOption = comboboxNav.locator('a').nth(1);
-    await randomOption.click();
-
-    // get randomOption text content
-    const randomOptionTextVal = await randomOption.textContent();
-    // trim
-    const randomOptionText = randomOptionTextVal?.trim();
-
-    await expect(randomOptionText).not.toEqual('');
-
-    // dropdown should be closed
-
-    await expect(comboboxNav).not.toHaveClass(/w--open/);
-
-    // get input value
-    const inputValue = await comboboxInput.inputValue();
-
-    await expect(inputValue).toEqual(randomOptionText);
-
-    // expect clear icon to be visible
-    await expect(comboboxClearDropdown).toBeVisible();
-
-    // focus on clear icon
-    await comboboxClearDropdown.focus();
-
-    // press enter key
-
-    await comboboxClearDropdown.press('Enter');
-
-    // dropdown should be closed
-    await expect(comboboxNav).not.toHaveClass(/w--open/);
-
-    // updated input value
-    const updatedInputValue = await comboboxInput.inputValue();
-
-    // input value should be empty
-    await expect(updatedInputValue).toEqual('');
-
-    // clear icon should not be visible
-    await expect(comboboxClearDropdown).not.toBeVisible();
-
-    // input should be focused
-    const activeElement = await page.evaluate(() => document.activeElement?.tagName);
-    await expect(activeElement).toEqual('INPUT');
-
-    // input field should be visible meaning enter key on clear icon did not submit form
-    await expect(comboboxInput).toBeVisible();
-  });
-});

package/attributes-master/packages/attributes/tests/copyclip.spec.ts

@@ -1,19 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-import { waitAttributeLoaded } from './utils';
-
-test.beforeEach(async ({ page }) => {
-  await page.goto('http://fs-attributes.webflow.io/copyclip');
-});
-
-test.describe('copyclip', () => {
-  test('Displays copied message and adds .fs-copyclip_active class', async ({ page }) => {
-    await waitAttributeLoaded(page, 'copyclip');
-
-    const button = page.getByTestId('button-1');
-    await button.click();
-
-    await expect(button).toHaveText('Copied!');
-    await expect(button).toHaveClass(/fs-copyclip_active/);
-  });
-});

package/attributes-master/packages/attributes/tests/displayvalues.spec.ts

@@ -1,48 +0,0 @@
-import { expect, type Page, test } from '@playwright/test';
-
-import { waitAttributeLoaded } from './utils';
-
-test.beforeEach(async ({ page }) => {
-  await page.goto('http://fs-attributes.webflow.io/displayvalues');
-});
-
-const getSourceLocators = (page: Page) =>
-  [1, 2, 3, 4, 5, 6].map((id) =>
-    page.locator(`[fs-displayvalues-element="source"][fs-displayvalues-instance="${id}"]`)
-  );
-
-const getTargetLocators = (page: Page) =>
-  [1, 2, 3, 4, 5, 6].map((id) =>
-    page.locator(`[fs-displayvalues-element="target"][fs-displayvalues-instance="${id}"]`)
-  );
-
-test.describe('displayvalues', () => {
-  test("Displays each element's value", async ({ page }) => {
-    await waitAttributeLoaded(page, 'displayvalues');
-
-    const [source1, source2, source3, source4, source5, source6] = getSourceLocators(page);
-    const [target1, target2, target3, target4, target5, target6] = getTargetLocators(page);
-
-    await source1.type('source 1');
-    await expect(target1).toHaveText('source 1');
-
-    await source2.type('source 2');
-    await expect(target2).toHaveText('source 2');
-
-    await source3.selectOption('First');
-    await expect(target3).toHaveText('First');
-
-    await source4.check({ force: true });
-    await expect(target4).toHaveText('true');
-
-    await source5.first().check({ force: true });
-    await expect(target5).toHaveText('Radio');
-
-    await source6.evaluate<void, HTMLInputElement>((input) => {
-      input.value = '70';
-      input.dispatchEvent(new Event('input', { bubbles: true }));
-    });
-
-    await expect(target6).toHaveText('70');
-  });
-});

package/attributes-master/packages/attributes/tests/favcustom.spec.ts

@@ -1,23 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-import { waitAttributeLoaded } from './utils';
-
-test.beforeEach(async ({ page }) => {
-  await page.goto('http://fs-attributes.webflow.io/favcustom');
-});
-
-test.describe('favcustom', () => {
-  test('Favicon is updated', async ({ page }) => {
-    await waitAttributeLoaded(page, 'favcustom');
-
-    const sourceElement = page.getByTestId('src');
-    const sourceElementSrc = await sourceElement.getAttribute('src');
-
-    const pageFavicon = await page.evaluate(() => {
-      const linkElement = document.querySelector<HTMLLinkElement>('link[type="image/x-icon"]');
-      return linkElement?.href;
-    });
-
-    expect(pageFavicon).toBe(sourceElementSrc);
-  });
-});

package/attributes-master/packages/attributes/tests/inject.spec.ts

@@ -1,40 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-import { waitAttributeLoaded } from './utils';
-
-test.beforeEach(async ({ page }) => {
-  await page.goto('http://fs-attributes.webflow.io/inject');
-});
-
-test.describe('inject', () => {
-  test('Loads same-project components', async ({ page }) => {
-    await waitAttributeLoaded(page, 'inject');
-
-    const target1 = page.getByTestId('target-1');
-    const target2 = page.getByTestId('target-2');
-
-    await expect(target1).not.toBeEmpty();
-    await expect(target2).not.toBeEmpty();
-  });
-
-  test('Loads external-project components', async ({ page }) => {
-    await waitAttributeLoaded(page, 'inject');
-
-    const target3 = page.getByTestId('target-3');
-    const target4 = page.getByTestId('target-4');
-
-    // Components are rendered
-    const target3Component = target3.locator('[fs-inject-element="component"]');
-    const target4Component = target4.locator('[fs-inject-element="component"]');
-
-    await expect(target3Component).toBeVisible();
-    await expect(target4Component).toBeVisible();
-
-    // External CSS is loaded when css is true
-    const target3CSS = target3.locator('link[type="text/css"]');
-    const target4CSS = target4.locator('link[type="text/css"]');
-
-    await expect(target3CSS).toHaveCount(1);
-    await expect(target4CSS).toHaveCount(0);
-  });
-});

package/attributes-master/packages/attributes/tests/inputactive.spec.ts

@@ -1,77 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-import { waitAttributeLoaded } from './utils';
-
-test.beforeEach(async ({ page }) => {
-  await page.goto('http://fs-attributes.webflow.io/inputactive');
-});
-
-test.describe('inputactive', () => {
-  test('Adds CSS classes correctly', async ({ page }) => {
-    await waitAttributeLoaded(page, 'inputactive');
-
-    const checkbox1 = page.getByTestId('checkbox-1-1');
-    const checkbox2 = page.getByTestId('checkbox-2-1');
-    const checkbox31 = page.getByTestId('checkbox-3-1');
-    const checkbox32 = page.getByTestId('checkbox-3-2');
-    const radio11 = page.getByTestId('radio-1-1');
-    const radio12 = page.getByTestId('radio-1-2');
-    const radio21 = page.getByTestId('radio-2-1');
-    const radio22 = page.getByTestId('radio-2-2');
-    const radio31 = page.getByTestId('radio-3-1');
-    const radio32 = page.getByTestId('radio-3-2');
-    const radio33 = page.getByTestId('radio-3-3');
-
-    // Checkboxes (default)
-    await expect(checkbox1).not.toHaveClass(/is-active-inputactive/);
-    await checkbox1.click();
-    await expect(checkbox1).toHaveClass(/is-active-inputactive/);
-
-    await page.waitForTimeout(10000);
-
-    // Checkboxes (inherit)
-    await checkbox2.click();
-    await expect(checkbox2).toHaveClass(/is-cool/);
-
-    await checkbox31.click();
-    await expect(checkbox31).toHaveClass(/is-cool/);
-
-    // Checkboxes (individual)
-    await checkbox32.click();
-    await expect(checkbox32).toHaveClass(/is-cooler/);
-
-    // Radios (default)
-    await expect(radio11).not.toHaveClass(/is-active-inputactive/);
-    await radio11.click();
-    await expect(radio11).toHaveClass(/is-active-inputactive/);
-
-    await radio12.click();
-    await expect(radio11).not.toHaveClass(/is-active-inputactive/);
-    await expect(radio12).toHaveClass(/is-active-inputactive/);
-
-    // Radios (inherit)
-    await expect(radio21).not.toHaveClass(/is-cool/);
-    await radio21.click();
-    await expect(radio21).toHaveClass(/is-cool/);
-
-    await radio22.click();
-    await expect(radio21).not.toHaveClass(/is-cool/);
-    await expect(radio22).toHaveClass(/is-cool/);
-
-    // Radios (individual)
-    await radio31.click();
-    await expect(radio31).toHaveClass(/is-cool/);
-    await expect(radio32).not.toHaveClass(/is-cooler/);
-    await expect(radio33).not.toHaveClass(/is-the-coolest/);
-
-    await radio32.click();
-    await expect(radio31).not.toHaveClass(/is-cool/);
-    await expect(radio32).toHaveClass(/is-cooler/);
-    await expect(radio33).not.toHaveClass(/is-the-coolest/);
-
-    await radio33.click();
-    await expect(radio31).not.toHaveClass(/is-cool/);
-    await expect(radio32).not.toHaveClass(/is-cooler/);
-    await expect(radio33).toHaveClass(/is-the-coolest/);
-  });
-});

package/attributes-master/packages/attributes/tests/inputcounter.spec.ts

@@ -1,83 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-import { waitAttributeLoaded } from './utils';
-
-test.beforeEach(async ({ page }) => {
-  await page.goto('http://fs-attributes.webflow.io/inputcounter');
-});
-
-test.describe('inputcounter', () => {
-  test('Initial + step, min, max + increment, decrement, reset', async ({ page }) => {
-    await waitAttributeLoaded(page, 'inputcounter');
-
-    const input = page.getByTestId('input');
-    const incrementButton = page.getByTestId('increment');
-    const decrementButton = page.getByTestId('decrement');
-    const resetBtn = page.getByTestId('reset');
-    const clearBtn = page.getByTestId('clear');
-
-    let resetButton;
-
-    if (await resetBtn.isVisible()) {
-      resetButton = resetBtn;
-    }
-
-    if (await clearBtn.isVisible()) {
-      resetButton = clearBtn;
-    }
-
-    // Initial
-    await expect(input).toHaveValue('0.5');
-
-    // Min
-    await input.fill('-1');
-    await input.dispatchEvent('change');
-    await expect(input).toHaveValue('0');
-
-    // Max
-    await input.fill('11');
-    await input.dispatchEvent('change');
-    await expect(input).toHaveValue('10');
-
-    // Step
-    await input.fill('0.65');
-    await input.dispatchEvent('change');
-    await expect(input).toHaveValue('0.5');
-
-    await input.fill('0.95');
-    await input.dispatchEvent('change');
-    await expect(input).toHaveValue('1');
-
-    // Increment
-    await incrementButton.click();
-    await expect(input).toHaveValue('1.5');
-
-    // Decrement
-    await decrementButton.click();
-    await expect(input).toHaveValue('1');
-
-    // Reset
-    if (resetButton) {
-      // Reset to initial
-      await resetButton?.click();
-      await expect(input).toHaveValue('0.5');
-    } else {
-      // If no reset button is found, fail the test
-      expect(false).toBe(true);
-    }
-  });
-
-  test('Change reset button attribute value from reset to clear is backward compatible', async ({ page }) => {
-    await waitAttributeLoaded(page, 'inputcounter');
-
-    const clearButtons = page.locator('[fs-inputcounter-element^="clear"]');
-    const resetButtons = page.locator('[fs-inputcounter-element^="reset"]');
-
-    const countClearButtons = await clearButtons.count();
-    const countResetButtons = await resetButtons.count();
-
-    const eitherIsGreaterThanZero = countClearButtons > 0 || countResetButtons > 0;
-
-    expect(eitherIsGreaterThanZero).toBe(true);
-  });
-});