Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: unit test for starter building block (#30185)

Browse Source 
## Description
Unit test for starter building block

`  <StarterBuildingBlocks />`
    ✓ renders the component correctly
    ✓ handles container hover correctly
    ✓ shows loading screen while importing
    ✓ handles starter block hover correctly


#### PR fixes following issue(s)
Fixes #30022 

#### Type of change
> Please delete options that are not relevant.
- New feature (non-breaking change which adds functionality)
## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [ ] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress
>
>
#### Test Plan
> Add Testsmith test cases links that relate to this PR
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## Checklist:
#### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Enhanced hover behavior and loading screen display during import for
the `StarterBuildingBlocks` component.
- Improved interaction with `TemplateLayoutFrame` and
`TemplateLayoutContainer` components through additional properties.

- **Tests**
- Updated `StarterBuildingBlocks` component tests to cover new
functionalities.
- Removed a test case for the fork modal in the `BuildingBlock`
component.

- **Refactor**
- Introduced a mock store structure for better unit testing
capabilities.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Jacques Ikot 2024-01-10 11:00:39 +01:00 committed by GitHub
parent b9752ef5db
commit 86bb65ae73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 463 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
app/client/src/layoutSystems/common/dropTarget/starterBuildingBlocks/StarterBuildingBlocks.test.tsx Normal file
View File

@ -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("<StarterBuildingBlocks />", () => {
let store: any;
beforeEach(() => {
store = mockStore(unitTestBaseMockStore);
});
const BaseComponentRender = () => (
<Provider store={store}>
<ThemeProvider theme={lightTheme}>
<StarterBuildingBlocks />
</ThemeProvider>
</Provider>
);
it("renders the component correctly", () => {
render(<BaseComponentRender />);
expect(
screen.getByText(createMessage(STARTER_TEMPLATE_PAGE_LAYOUTS.header)),
).toBeInTheDocument();
});
it("handles container hover correctly", async () => {
render(<BaseComponentRender />);
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(
<Provider store={store}>
<ThemeProvider theme={lightTheme}>
<StarterBuildingBlocks />
</ThemeProvider>
</Provider>,
);
expect(
screen.getByText(
createMessage(STARTER_TEMPLATE_PAGE_LAYOUTS.importLoadingText),
),
).toBeInTheDocument();
});
it("handles starter block hover correctly", async () => {
render(<BaseComponentRender />);
// 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",
},
);
});
});
});

6
app/client/src/layoutSystems/common/dropTarget/starterBuildingBlocks/index.tsx
View File

@ -119,8 +119,12 @@ function StarterBuildingBlocks() {
}
return (
<TemplateLayoutFrame screenshot={templateSreenshot}>
<TemplateLayoutFrame
data-testid="t--canvas-building-block-frame"
screenshot={templateSreenshot}
>
<TemplateLayoutContainer
data-testid="t--canvas-building-block-container"
onMouseEnter={() => setLayoutActive(true)}
onMouseLeave={() => setLayoutActive(false)}
>

336
app/client/src/layoutSystems/common/dropTarget/unitTestUtils.ts Normal file
View File

@ -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,
},
},
};