test: fix e2e error after graphql refactor (#451)

apps/client-web/src/routes/accounts/sign-in.tsx

@@ -38,13 +38,13 @@ export const SignIn: React.FC = () => {
           ) : (
             <Button
               size="lg"
-              icon={preferredAuthMethod.logo}
-              id={`auth-btn-${preferredAuthMethod.name}`}
+              icon={preferredAuthMethod?.logo}
+              id={`auth-btn-${preferredAuthMethod?.name}`}
               style={{ marginTop: '2rem' }}
-              onClick={preferredAuthMethod.action}
+              onClick={preferredAuthMethod?.action}
               block
             >
-              {t('sessions.login_via', { provider: t(`provider.${preferredAuthMethod.name}`) })}
+              {t('sessions.login_via', { provider: t(`provider.${preferredAuthMethod?.name}`) })}
             </Button>
           )
         }

tools/e2e-testing/fixtures/extends/coverage.fixture.ts

@@ -1,15 +1,11 @@
 import * as fs from 'fs'
 import * as path from 'path'
-import * as crypto from 'crypto'
 import { BrowserContext } from '@playwright/test'
 import { FixtureReturnType } from '@/helpers/types/fixture.types'
+import { generateUUID } from '@/helpers/utils/uuid'
 
 const istanbulCLIOutput = path.join(process.cwd(), '.nyc_output')
 
-export function generateUUID(): string {
-  return crypto.randomBytes(16).toString('hex')
-}
-
 export function coverageFixture(): FixtureReturnType<BrowserContext> {
   return async ({ context }, use): Promise<void> => {
     await context.addInitScript(() =>

tools/e2e-testing/helpers/api/BlockApi.ts

@@ -1,5 +1,5 @@
-import { blockSyncBatchConverter } from '@/helpers/converter/blockSyncBatchConverter'
-import { Page } from '@playwright/test'
+import { blockCommitConverter } from '@/helpers/converter/blockCommitConverter'
+import { APIResponse, Page } from '@playwright/test'
 import { createBlockConverter } from '@/helpers/converter/createBlockConverter'
 import { PageBlock } from '@/helpers/types/data.types'
 import { GRAPHQL_GROUP } from './graphql'
@@ -27,10 +27,18 @@ export class BlockApi {
     }
   }
 
+  async getUsername(): Promise<string> {
+    return await this.page.evaluate(() => (window as any).location.pathname.split('/')[1])
+  }
+
   async pageReload(): Promise<void> {
     await this.page.reload({ waitUntil: 'networkidle' })
   }
 
+  async post(options: OptionsType): Promise<APIResponse> {
+    return await this.request.post(this.REQUEST_URL, options)
+  }
+
   options(gqlQuery: string, operationName: OperationName, variables: InputType): OptionsType {
     return {
       data: {
@@ -42,29 +50,25 @@ export class BlockApi {
     }
   }
 
-  async getBlocks(domain: string): Promise<PageType[]> {
-    const response = await this.request.post(
-      this.REQUEST_URL,
+  async getBlocks(username: string): Promise<PageType[]> {
+    const response = await this.post(
       this.options(GRAPHQL_GROUP.GET_PAGE_BLOCKS, 'GetPageBlocks', {
-        domain
+        domain: username
       })
     )
     return (await response.json()).data.pageBlocks
   }
 
   async removePage(variables: BlockSoftDeleteInput): Promise<void> {
-    await this.request.post(
-      this.REQUEST_URL,
-      this.options(GRAPHQL_GROUP.BLOCK_SOFT_DELETE, 'blockSoftDelete', variables)
-    )
+    await this.post(this.options(GRAPHQL_GROUP.BLOCK_SOFT_DELETE, 'blockSoftDelete', variables))
   }
 
   async removeAllPages(options?: { isHardDeleted?: boolean; isSorted?: boolean }): Promise<void> {
     const isHardDeleted = options?.isHardDeleted ?? true
     const isSorted = options?.isSorted ?? false
 
-    const domain = await this.page.evaluate(() => (window as any).location.pathname.split('/')[1])
-    const pages = (await this.getBlocks(domain)).sort(compareAttributeItem)
+    const username = await this.getUsername()
+    const pages = (await this.getBlocks(username)).sort(compareAttributeItem)
 
     isSorted
       ? await this.orderRemoveAllPage(pages, isHardDeleted)
@@ -90,8 +94,9 @@ export class BlockApi {
   }
 
   async createPage(page: PageBlock, parentId?: string): Promise<void> {
-    const id = await this.createPageApi(createBlockConverter(page, parentId))
-    await this.blockSyncBatch(page, id)
+    const username = await this.getUsername()
+    const id = await this.createPageApi(createBlockConverter(page, username, parentId))
+    await this.blockCommit(page, id)
     if (page.children) {
       for (const child of page.children) {
         await this.createPage(child, id)
@@ -106,36 +111,29 @@ export class BlockApi {
   }
 
   async createPageApi(variables: CreateBlockInput): Promise<string> {
-    const response = await this.request.post(
-      this.REQUEST_URL,
-      this.options(GRAPHQL_GROUP.CREATE_BLOCK, 'blockCreate', variables)
-    )
+    const response = await this.post(this.options(GRAPHQL_GROUP.CREATE_BLOCK, 'blockCreate', variables))
     return (await response.json()).data.blockCreate.id
   }
 
-  async blockSyncBatch(page: PageBlock, id: string): Promise<void> {
-    const variables = blockSyncBatchConverter(page, id)
-    await this.request.post(this.REQUEST_URL, this.options(GRAPHQL_GROUP.BLOCK_SYNC_BATCH, 'blockSyncBatch', variables))
+  async blockCommit(page: PageBlock, id: string): Promise<void> {
+    const variables = blockCommitConverter(page, id)
+    await this.post(this.options(GRAPHQL_GROUP.BLOCK_COMMIT, 'blockCommit', variables))
   }
 
-  async getTrashBlock(domain: string, search: string = ''): Promise<PageType[]> {
-    const response = await this.request.post(
-      this.REQUEST_URL,
+  async getTrashBlock(username: string, search: string = ''): Promise<PageType[]> {
+    const response = await this.post(
       this.options(GRAPHQL_GROUP.GET_TRASH_BLOCKS, 'GetTrashBlocks', {
-        domain,
+        domain: username,
         search
       })
     )
     return (await response.json()).data.trashBlocks
   }
 
   async removeAllTrashPages(): Promise<void> {
-    const domain = await this.page.evaluate(() => (window as any).location.pathname.split('/')[1])
-    const pages = (await this.getTrashBlock(domain)).map(page => page.id)
+    const username = await this.getUsername()
+    const pages = (await this.getTrashBlock(username)).map(page => page.id)
 
-    await this.request.post(
-      this.REQUEST_URL,
-      this.options(GRAPHQL_GROUP.BLOCK_HARD_DELETE, 'blockHardDelete', { input: { ids: pages } })
-    )
+    await this.post(this.options(GRAPHQL_GROUP.BLOCK_HARD_DELETE, 'blockHardDelete', { input: { ids: pages } }))
   }
 }

tools/e2e-testing/helpers/api/graphql.ts

@@ -1,9 +1,9 @@
 import { graphqlGroupType } from '@/helpers/types/graphql.types'
 
 export const GRAPHQL_GROUP: graphqlGroupType = {
-  BLOCK_SYNC_BATCH: `
-    mutation blockSyncBatch($input: BlockSyncBatchInput!) {
-      blockSyncBatch(input: $input) {
+  BLOCK_COMMIT: `
+    mutation blockCommit($input: BlockCommitInput!) {
+      blockCommit(input: $input) {
         errors
         __typename
       }
@@ -31,7 +31,9 @@ export const GRAPHQL_GROUP: graphqlGroupType = {
       pageBlocks(domain: $domain) {
         id
         parentId
-        text
+        documentInfo {
+          title
+        }
       }
     }
   `,

tools/e2e-testing/helpers/converter/blockCommitConverter.ts

@@ -0,0 +1,33 @@
+import { BlockCommitInput } from '@/helpers/types/graphql.types'
+import { PageBlock } from '@/helpers/types/data.types'
+import { generateUUID } from '@/helpers/utils/uuid'
+
+export function blockCommitConverter(page: PageBlock, id: string): BlockCommitInput {
+  return {
+    input: {
+      documentId: id,
+      blockId: id,
+      // hard code temporary until backend be fixed
+      operatorId: '54701a5a-f151-499f-8cc3-069950144ad3',
+      stateType: 'full',
+      state: page.state ?? '',
+      stateId: generateUUID(),
+      statesCount: 1,
+      meta: {
+        title: page.title,
+        icon: page.icon
+          ? {
+              __typename: 'BlockEmoji',
+              type: 'EMOJI',
+              name: page.icon.name,
+              emoji: page.icon.emoji
+            }
+          : undefined
+      },
+      content: {
+        type: 'doc',
+        content: []
+      }
+    }
+  }
+}

tools/e2e-testing/helpers/converter/createBlockConverter.ts

@@ -1,11 +1,12 @@
 import { CreateBlockInput } from '@/helpers/types/graphql.types'
 import { PageBlock } from '@/helpers/types/data.types'
 
-export function createBlockConverter(page: PageBlock, parentId?: string): CreateBlockInput {
+export function createBlockConverter(page: PageBlock, username: string, parentId?: string): CreateBlockInput {
   return {
     input: {
       parentId,
-      title: page.title
+      title: page.title,
+      username
     }
   }
 }

tools/e2e-testing/helpers/types/data.types.ts

@@ -1,7 +1,9 @@
 export interface PageBlock {
   id?: string
   title: string
-  // find in packages/uploader/src/Dashboard/data-by-group.json
+  // Find in packages/uploader/src/Dashboard/data-by-group.json
   icon?: { name: string; emoji: string }
   children?: PageBlock[]
+  // In dev environment, generated by window.debugDumpDocumentState()
+  state?: string
 }

tools/e2e-testing/helpers/types/graphql.types.ts

@@ -20,22 +20,41 @@ export interface Block {
 export interface PageType {
   id: string
   parentId: string
-  text: string
+  documentInfo: {
+    title: string
+  }
 }
 
-export interface BlockSyncBatchInput {
+export interface BlockCommitInput {
   input: {
-    blocks: Block[]
-    deletedIds: []
-    rootId: string
+    documentId: string
+    blockId: string
     operatorId: '54701a5a-f151-499f-8cc3-069950144ad3'
+    stateType: 'full'
+    state: string
+    stateId: string
+    statesCount: 1
+    meta: {
+      title: string
+      icon?: {
+        __typename: 'BlockEmoji'
+        type: 'EMOJI'
+        name: string
+        emoji: string
+      }
+    }
+    content: {
+      type: 'doc'
+      content: []
+    }
   }
 }
 
 export interface CreateBlockInput {
   input: {
     parentId?: string
     title: string
+    username: string
   }
 }
 
@@ -64,21 +83,21 @@ export interface GetTrashBlocksInput {
 export type OperationName =
   | 'GetPageBlocks'
   | 'GetTrashBlocks'
-  | 'blockSyncBatch'
+  | 'blockCommit'
   | 'blockCreate'
   | 'blockSoftDelete'
   | 'blockHardDelete'
 
 export type InputType =
   | GetPageBlocksInput
   | GetTrashBlocksInput
-  | BlockSyncBatchInput
+  | BlockCommitInput
   | CreateBlockInput
   | BlockSoftDeleteInput
   | BlockHardDeleteInput
 
 export interface graphqlGroupType {
-  BLOCK_SYNC_BATCH: string
+  BLOCK_COMMIT: string
   CREATE_BLOCK: string
   BLOCK_SOFT_DELETE: string
   GET_PAGE_BLOCKS: string

tools/e2e-testing/helpers/utils/sortByAttribute.ts

@@ -1,7 +1,7 @@
 import { PageType } from '../types/graphql.types'
 
 export function compareAttributeItem(item1: PageType, item2: PageType): number {
-  const text1 = item1.text.toLowerCase().trim()
-  const text2 = item2.text.toLowerCase().trim()
-  return text2.localeCompare(text1)
+  const title1 = item1.documentInfo.title.toLowerCase().trim()
+  const title2 = item2.documentInfo.title.toLowerCase().trim()
+  return title2.localeCompare(title1)
 }

tools/e2e-testing/helpers/utils/uuid.ts

@@ -0,0 +1,5 @@
+import * as crypto from 'crypto'
+
+export const generateUUID = (): string => {
+  return crypto.randomUUID()
+}

tools/e2e-testing/tests/common/common.data.ts

@@ -14,3 +14,7 @@ export const TWO_LAYER_PAGE_TREE: PageBlock[] = [
     ]
   }
 ]
+
+export const COMMON_STYLE = {
+  hoverBackground: 'rgba(64, 137, 216, 0.1)'
+}