fix: google fonts component and related issues, add E2E (#3531)

* fix: google styles were not applied

* fix: update array type form script error

* fix: computing descendants

* fix: e2e to work with component instances in builder tree

* fix: google fonts issues and add E2E tests

* fix: failing e2e

Author: vladyslav-polishchuk

apps/web-e2e/src/modules/builder/builder.fixture.ts

@@ -105,11 +105,7 @@ export class BuilderPage extends BasePage {
       await this.getModal().locator(submitButton).click()
 
       await expect(this.getModal()).toBeHidden()
-      await expect(
-        this.getTreeElement(name, atom).or(
-          this.getTreeElement(name, `instance of ${atom}`),
-        ),
-      ).toBeVisible()
+      await expect(this.getTreeElement(name, atom)).toBeVisible()
     }
   }
 
@@ -186,7 +182,9 @@ export class BuilderPage extends BasePage {
   }
 
   getTreeElement(name: string, type?: string) {
-    return this.page.getByTitle(`${name} (${type ?? name})`)
+    return this.page
+      .getByTitle(`${name} (${type ?? name})`)
+      .or(this.page.getByTitle(`${name} (instance of ${type ?? name})`))
   }
 
   getUpdateElementForm() {
@@ -242,7 +240,9 @@ export class BuilderPage extends BasePage {
 
     await treeElement.click()
 
-    await expect(selectedTreeElement).toHaveText(`${name}${atom}`)
+    await expect(selectedTreeElement).toHaveText(
+      new RegExp(`^(${name}${atom}|${name}instance of ${atom})$`),
+    )
     await expect(this.getFormFieldSpinner()).toHaveCount(0)
 
     return treeElement

apps/web-e2e/src/modules/css/css.spec.ts

@@ -25,6 +25,7 @@ test.beforeEach(async ({ builderPage: page }) => {
   await page.checkPageHeaderTitle(['Codelab App', 'Pages', 'provider'])
 
   await expect(page.getSpinner()).toBeHidden()
+  await expect(page.getFormFieldSpinner()).toHaveCount(0)
 })
 
 test('should be able to set styling through css string and GUI', async ({

apps/web-e2e/src/modules/google-fonts/google-fonts.data.ts

@@ -0,0 +1,44 @@
+import {
+  IAtomType,
+  type ICreateCypressElementData,
+  ITypeKind,
+} from '@codelab/shared/abstract/core'
+import { ROOT_ELEMENT_NAME } from '@codelab/shared/config'
+import { type APIRequestContext } from '@playwright/test'
+import { v4 } from 'uuid'
+
+import { seedAppData } from '../builder/builder.data'
+
+export const FONT_NAME = 'Google Fonts Montserrat'
+export const FONT_SIZE = 700
+
+export const googleFontsElement: ICreateCypressElementData = {
+  atom: 'Google Fonts',
+  name: 'Google Fonts Link',
+  parentElement: ROOT_ELEMENT_NAME,
+}
+
+export const typographyElement = {
+  atom: IAtomType.AntDesignTypographyText,
+  id: v4(),
+  name: 'Text Element',
+  propsData: {
+    children: {
+      kind: ITypeKind.RichTextType,
+      type: 'e7558508-3bb7-4f57-8f8c-6ac989911765',
+      value: 'Testing fonts',
+    },
+  },
+}
+
+export const seedTestData = async (request: APIRequestContext) => {
+  const app = await seedAppData(request)
+  const page = app.pages![0]!
+
+  await request.post('/api/v1/component/seed-system-components')
+  await request.post(`/api/v1/element/${page.rootElement.id}/create-elements`, {
+    data: [{ ...typographyElement, parentElement: page.rootElement }],
+  })
+
+  return app
+}

apps/web-e2e/src/modules/google-fonts/google-fonts.fixture.ts

@@ -0,0 +1,62 @@
+import type { Locator } from '@playwright/test'
+
+import { test as base, expect } from '@playwright/test'
+
+import { CssBuilderPage } from '../css/css.fixture'
+import { FONT_NAME, FONT_SIZE, typographyElement } from './google-fonts.data'
+
+/**
+ * Follow guide https://medium.com/@lucgagan/mastering-playwright-best-practices-for-web-automation-with-the-page-object-model-3541412b03d1
+ */
+export class GoogleFontsPage extends CssBuilderPage {
+  async addFontProps() {
+    const fontLazyOption = this.page.locator(
+      `.ant-select-item[title="${FONT_NAME}"]`,
+    )
+
+    await this.page.locator('button span[aria-label="plus-square"]').click()
+    await this.page.locator('div[name="fonts.0.type"]').click()
+    await this.page.locator('.ant-select-item-option-active').hover()
+    await this.scrollUntilElementIsVisible(fontLazyOption)
+    await this.page.locator(`.ant-select-item[title="${FONT_NAME}"]`).click()
+    await this.page.locator('div[name="value.weight"]').click()
+    await this.page.locator(`.ant-select-item[title="${FONT_SIZE}"]`).click()
+    await this.waitForProgressBar()
+  }
+
+  async applyFonts() {
+    await this.selectTreeElement(typographyElement)
+    await this.openCssTab()
+
+    await this.page.locator('div[aria-label="Font"]').click()
+    await this.page.locator('.ant-select-item[title="Montserrat"]').click()
+    await this.waitForProgressBar()
+  }
+
+  getOutputTextNode() {
+    return this.getBuilderRenderContainer().locator('.ant-typography')
+  }
+
+  async openPropsTab() {
+    const cssTab = this.page.locator('[data-node-key="Props"]')
+
+    await cssTab.click()
+
+    await expect(cssTab).toHaveClass('ant-tabs-tab ant-tabs-tab-active')
+    await expect(this.getSpinner()).toBeHidden()
+  }
+
+  async scrollUntilElementIsVisible(locator: Locator) {
+    while (!(await locator.isVisible())) {
+      await this.page.mouse.wheel(0, 100)
+    }
+  }
+}
+
+export const test = base.extend<{ builderPage: GoogleFontsPage }>({
+  builderPage: async ({ page }, use) => {
+    const builderPage = new GoogleFontsPage(page)
+
+    await use(builderPage)
+  },
+})

apps/web-e2e/src/modules/google-fonts/google-fonts.spec.ts

@@ -0,0 +1,62 @@
+import { type IApp } from '@codelab/shared/abstract/core'
+import { providerPageId } from '@codelab/shared/data/test'
+import { expect } from '@playwright/test'
+
+import {
+  FONT_SIZE,
+  googleFontsElement,
+  seedTestData,
+} from './google-fonts.data'
+import { test } from './google-fonts.fixture'
+
+let app: IApp
+
+test.describe.configure({ mode: 'serial' })
+
+test.beforeAll(async ({ request }, testInfo) => {
+  app = await seedTestData(request)
+})
+
+test.beforeEach(async ({ builderPage: page }) => {
+  await page.goto(app.id, providerPageId)
+  await page.checkPageHeaderTitle(['Codelab App', 'Pages', 'provider'])
+
+  await expect(page.getSpinner()).toBeHidden()
+  await expect(page.getFormFieldSpinner()).toHaveCount(0)
+})
+
+test('should create Google Fonts component and setup fonts on the _app page', async ({
+  builderPage: page,
+}) => {
+  const expectedLinkTag = page.page.locator('#render-root link')
+
+  await page.createElementTree([googleFontsElement])
+  await page.selectTreeElement(googleFontsElement)
+  await page.openPropsTab()
+  await page.addFontProps()
+
+  await expect(expectedLinkTag).toHaveAttribute(
+    'href',
+    `https://fonts.googleapis.com/css2?family=Montserrat:wght@${FONT_SIZE}&display=swap`,
+  )
+})
+
+test('should apply selected fonts to text', async ({ builderPage: page }) => {
+  await expect(page.getOutputTextNode()).toHaveText('Testing fonts')
+
+  const initialStyle = await page.getOutputTextNode().evaluate((element) => {
+    return window.getComputedStyle(element)
+  })
+
+  expect(initialStyle).not.toHaveProperty('fontFamily', 'Montserrat')
+  expect(initialStyle).toHaveProperty('fontWeight', '500')
+
+  await page.applyFonts()
+
+  const updatedStyle = await page
+    .getOutputTextNode()
+    .evaluate((element) => window.getComputedStyle(element))
+
+  expect(updatedStyle).toHaveProperty('fontFamily', 'Montserrat')
+  expect(updatedStyle).toHaveProperty('fontWeight', '700')
+})