diff --git a/app/client/src/layoutSystems/common/dropTarget/starterBuildingBlocks/StarterBuildingBlocks.test.tsx b/app/client/src/layoutSystems/common/dropTarget/starterBuildingBlocks/StarterBuildingBlocks.test.tsx new file mode 100644 index 0000000000..d6ef1a911f --- /dev/null +++ b/app/client/src/layoutSystems/common/dropTarget/starterBuildingBlocks/StarterBuildingBlocks.test.tsx @@ -0,0 +1,122 @@ +import React from "react"; +import "@testing-library/jest-dom"; +import { render, screen, fireEvent, waitFor } from "@testing-library/react"; +import "jest-styled-components"; +import configureStore from "redux-mock-store"; +import { Provider } from "react-redux"; +import StarterBuildingBlocks from "./index"; +import { + STARTER_TEMPLATE_PAGE_LAYOUTS, + createMessage, +} from "@appsmith/constants/messages"; +import { ThemeProvider } from "styled-components"; +import { lightTheme } from "selectors/themeSelectors"; +import { STARTER_BUILDING_BLOCKS } from "constants/TemplatesConstants"; +import { Colors } from "constants/Colors"; +import { unitTestBaseMockStore } from "../unitTestUtils"; + +jest.mock("actions/templateActions", () => ({ + importStarterBuildingBlockIntoApplication: jest.fn(), + showTemplatesModal: jest.fn(), +})); +jest.mock("utils/AnalyticsUtil", () => ({ + logEvent: jest.fn(), +})); + +const mockStore = configureStore([]); + +describe("", () => { + let store: any; + + beforeEach(() => { + store = mockStore(unitTestBaseMockStore); + }); + + const BaseComponentRender = () => ( + + + + + + ); + + it("renders the component correctly", () => { + render(); + expect( + screen.getByText(createMessage(STARTER_TEMPLATE_PAGE_LAYOUTS.header)), + ).toBeInTheDocument(); + }); + + it("handles container hover correctly", async () => { + render(); + const container = screen.getByTestId("t--canvas-building-block-container"); + expect(container).toHaveStyleRule("background-color", Colors.WHITE, { + modifier: ":hover", + }); + expect(container).toHaveStyleRule( + "box-shadow", + "0px 1px 20px 0px rgba(76,86,100,0.11)", + { + modifier: ":hover", + }, + ); + }); + + it("shows loading screen while importing", () => { + store = mockStore({ + ...unitTestBaseMockStore, + ui: { + workspaces: { + currentWorkspace: + unitTestBaseMockStore.ui.workspaces.currentWorkspace, + }, + applications: { + isFetchingApplications: false, + }, + templates: { + isImportingStarterBuildingBlockToApp: true, + filters: { + functions: ["All"], + }, + allFilters: {}, + templateSearchQuery: "", + templates: [], + }, + }, + }); + render( + + + + + , + ); + expect( + screen.getByText( + createMessage(STARTER_TEMPLATE_PAGE_LAYOUTS.importLoadingText), + ), + ).toBeInTheDocument(); + }); + + it("handles starter block hover correctly", async () => { + render(); + // Simulate mouse enter on the TemplateLayoutFrame + fireEvent.mouseEnter( + screen.getByText( + STARTER_BUILDING_BLOCKS.STARTER_BUILDING_BLOCKS_TEMPLATES[0].title, + ), + ); + await waitFor(() => { + const templateLayoutFrame = screen.getByTestId( + "t--canvas-building-block-frame", + ); + expect(templateLayoutFrame).toHaveStyleRule( + "background", + `url(${STARTER_BUILDING_BLOCKS.STARTER_BUILDING_BLOCKS_TEMPLATES[0].screenshot}) no-repeat`, + { + modifier: "::before", + }, + ); + }); + }); +}); diff --git a/app/client/src/layoutSystems/common/dropTarget/starterBuildingBlocks/index.tsx b/app/client/src/layoutSystems/common/dropTarget/starterBuildingBlocks/index.tsx index f740445acb..f6ad5c2483 100644 --- a/app/client/src/layoutSystems/common/dropTarget/starterBuildingBlocks/index.tsx +++ b/app/client/src/layoutSystems/common/dropTarget/starterBuildingBlocks/index.tsx @@ -119,8 +119,12 @@ function StarterBuildingBlocks() { } return ( - + setLayoutActive(true)} onMouseLeave={() => setLayoutActive(false)} > diff --git a/app/client/src/layoutSystems/common/dropTarget/unitTestUtils.ts b/app/client/src/layoutSystems/common/dropTarget/unitTestUtils.ts new file mode 100644 index 0000000000..4772354c97 --- /dev/null +++ b/app/client/src/layoutSystems/common/dropTarget/unitTestUtils.ts @@ -0,0 +1,336 @@ +export const unitTestBaseMockStore = { + entities: { + pageList: { + pages: [ + { + pageName: "Page1", + pageId: "659d2e15d0cbfb0c5e0a742b", + isDefault: true, + isHidden: false, + slug: "page1", + userPermissions: [ + "read:pages", + "manage:pages", + "create:pageActions", + "delete:pages", + ], + }, + ], + isGeneratingTemplatePage: false, + applicationId: "659d2e15d0cbfb0c5e0a7428", + currentPageId: "659d2e15d0cbfb0c5e0a742b", + defaultPageId: "659d2e15d0cbfb0c5e0a742b", + loading: {}, + }, + app: { + user: { + email: "jacques@adasdsad.com", + username: "jacques@adasdsad.com", + useCase: "personal project", + enableTelemetry: true, + roles: [ + "Upgrade to business edition to access roles and groups for conditional business logic", + ], + groups: [ + "Upgrade to business edition to access roles and groups for conditional business logic", + ], + emptyInstance: false, + accountNonExpired: true, + accountNonLocked: true, + credentialsNonExpired: true, + isAnonymous: false, + isEnabled: true, + isSuperUser: false, + isConfigurable: true, + adminSettingsVisible: false, + isIntercomConsentGiven: false, + }, + URL: { + fullPath: + "https://dev.appsmith.com/app/my-first-application/page1-659d2e15d0cbfb0c5e0a742b/edit", + host: "dev.appsmith.com", + hostname: "dev.appsmith.com", + queryParams: {}, + protocol: "https:", + pathname: + "/app/my-first-application/page1-659d2e15d0cbfb0c5e0a742b/edit", + port: "", + hash: "", + }, + store: {}, + geolocation: { + canBeRequested: true, + currentPosition: {}, + }, + mode: "EDIT", + }, + }, + ui: { + workspaces: { + currentWorkspace: { + id: "659d2e14d0cbfb0c5e0a7424", + userPermissions: [ + "publish:workspaceApplications", + "delete:workspace", + "manage:workspaceApplications", + "delete:workspaceDatasources", + "export:workspaceApplications", + "read:workspaceDatasources", + "read:workspaceApplications", + "inviteUsers:workspace", + "read:workspaces", + "manage:workspaceDatasources", + "create:datasources", + "delete:workspaceApplications", + "create:applications", + "manage:workspaces", + ], + name: "jacques's apps", + email: "jacques@adasdsad.com", + plugins: [ + { + userPermissions: [], + pluginId: "653236215e9a6424e4c04b5c", + status: "FREE", + new: true, + }, + { + userPermissions: [], + pluginId: "653236215e9a6424e4c04b5b", + status: "FREE", + new: true, + }, + { + userPermissions: [], + pluginId: "653236225e9a6424e4c04b75", + status: "FREE", + new: true, + }, + { + userPermissions: [], + pluginId: "653236215e9a6424e4c04b5a", + status: "FREE", + new: true, + }, + { + userPermissions: [], + pluginId: "6572a3933efa034a885f73bf", + status: "FREE", + new: true, + }, + { + userPermissions: [], + pluginId: "653236215e9a6424e4c04b59", + status: "FREE", + new: true, + }, + { + userPermissions: [], + pluginId: "653236215e9a6424e4c04b64", + status: "FREE", + new: true, + }, + { + userPermissions: [], + pluginId: "653236215e9a6424e4c04b63", + status: "FREE", + new: true, + }, + { + userPermissions: [], + pluginId: "653236215e9a6424e4c04b62", + status: "FREE", + new: true, + }, + { + userPermissions: [], + pluginId: "653236225e9a6424e4c04b74", + status: "FREE", + new: true, + }, + { + userPermissions: [], + pluginId: "653236215e9a6424e4c04b58", + status: "FREE", + new: true, + }, + { + userPermissions: [], + pluginId: "653236205e9a6424e4c04b51", + status: "FREE", + new: true, + }, + { + userPermissions: [], + pluginId: "6597efc7d0cbfb0c5e0a73cc", + status: "FREE", + new: true, + }, + { + userPermissions: [], + pluginId: "654a489144e16d2e57f05d60", + status: "FREE", + new: true, + }, + { + userPermissions: [], + pluginId: "653236215e9a6424e4c04b61", + status: "FREE", + new: true, + }, + { + userPermissions: [], + pluginId: "6597efc7d0cbfb0c5e0a73ce", + status: "FREE", + new: true, + }, + { + userPermissions: [], + pluginId: "653236215e9a6424e4c04b55", + status: "FREE", + new: true, + }, + { + userPermissions: [], + pluginId: "653236205e9a6424e4c04b52", + status: "FREE", + new: true, + }, + { + userPermissions: [], + pluginId: "653236465e9a6424e4c04b77", + status: "FREE", + new: true, + }, + { + userPermissions: [], + pluginId: "6597efc7d0cbfb0c5e0a73cd", + status: "FREE", + new: true, + }, + { + userPermissions: [], + pluginId: "653236205e9a6424e4c04b53", + status: "FREE", + new: true, + }, + { + userPermissions: [], + pluginId: "653236465e9a6424e4c04b78", + status: "FREE", + new: true, + }, + { + userPermissions: [], + pluginId: "653236215e9a6424e4c04b5f", + status: "FREE", + new: true, + }, + { + userPermissions: [], + pluginId: "653236465e9a6424e4c04b79", + status: "FREE", + new: true, + }, + { + userPermissions: [], + pluginId: "653236215e9a6424e4c04b5e", + status: "FREE", + new: true, + }, + { + userPermissions: [], + pluginId: "653236215e9a6424e4c04b5d", + status: "FREE", + new: true, + }, + ], + slug: "jacques-s-apps", + isAutoGeneratedWorkspace: true, + tenantId: "653236225e9a6424e4c04b65", + logoUrl: "/api/v1/assets/null", + new: false, + }, + }, + applications: { + currentApplication: { + applicationDetail: { + navigationSetting: { + showNavbar: true, + showSignIn: true, + orientation: "top", + navStyle: "stacked", + position: "static", + itemStyle: "text", + colorStyle: "light", + logoAssetId: "", + logoConfiguration: "logoAndApplicationTitle", + }, + themeSetting: { + fontFamily: "System Default", + accentColor: "#553DE9", + colorMode: "LIGHT", + borderRadius: "6px", + density: 1, + sizing: 1, + }, + }, + id: "659d2e15d0cbfb0c5e0a7428", + modifiedBy: "jacques@adasdsad.com", + userPermissions: [ + "manage:applications", + "canComment:applications", + "export:applications", + "manageProtectedBranches:applications", + "read:applications", + "manageDefaultBranches:applications", + "create:pages", + "publish:applications", + "connectToGit:applications", + "manageAutoCommit:applications", + "delete:applications", + "makePublic:applications", + ], + name: "My first application", + workspaceId: "659d2e14d0cbfb0c5e0a7424", + isPublic: false, + appIsExample: false, + unreadCommentThreads: 0, + color: "#FBF4ED", + slug: "my-first-application", + unpublishedCustomJSLibs: [], + publishedCustomJSLibs: [], + evaluationVersion: 2, + applicationVersion: 2, + collapseInvisibleWidgets: true, + isAutoUpdate: false, + new: false, + modifiedAt: "2024-01-09T11:29:25.076Z", + pages: [ + { + id: "659d2e15d0cbfb0c5e0a742b", + name: "Page1", + slug: "page1", + isDefault: true, + userPermissions: [ + "read:pages", + "manage:pages", + "create:pageActions", + "delete:pages", + ], + }, + ], + }, + isFetchingApplications: false, + }, + templates: { + filters: { + functions: ["All"], + }, + allFilters: {}, + templateSearchQuery: "", + templates: [], + isImportingStarterBuildingBlockToApp: false, + }, + }, +};