fix(Collapse): Internal elements need to apply the radius configuration of external elements, close #3277

Author: 泊淞

.gitignore

@@ -87,3 +87,6 @@ gemini-report/
 *.log
 .DS_Store
 src/core-temp
+
+# tests snapshots diff
+components/**/__tests__/snapshots/__diff__/**

components/collapse/__docs__/adaptor/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Collapse } from '@alifd/next';
 import { Types, parseData, NodeType } from '@alifd/adaptor-helper';
+import type { INode } from '@alifd/adaptor-helper/types/parse-data';
 
 interface AdaptorProps {
     state: string;
@@ -34,7 +35,7 @@ export default {
         },
     }),
     adaptor: ({ state, width, data, style = {}, ...others }: AdaptorProps) => {
-        const list = parseData(data).filter(node => NodeType.node === node.type);
+        const list = (parseData(data) as INode[]).filter(node => NodeType.node === node.type);
         const expandedKeys = [] as string[];
         const children = list.map(({ state, value, children }, index) => {
             if (state === 'active') {

components/collapse/__tests__/index-spec.tsx

@@ -1,9 +1,12 @@
 import React, { type ReactElement } from 'react';
+import { CompareSnapshot } from '../../util/__tests__/common/snapshot';
 import Collapse from '../index';
 import '../style';
 
 const Panel = Collapse.Panel;
 
+const collapseCompareSnapshot = new CompareSnapshot({ componentName: 'collapse' });
+
 describe('Collapse', () => {
     describe('render', () => {
         it('[normal] Should render null', () => {
@@ -60,6 +63,16 @@ describe('Collapse', () => {
             cy.get('.next-collapse').should('have.length', 1);
             cy.get('.next-collapse-panel').should('have.length', 2);
         });
+
+        it('should render with proper border-radius and overflow hidden', () => {
+            cy.mount(
+                <Collapse style={{ borderRadius: '50px' }}>
+                    <Panel title="Pannel Title">Pannel Content</Panel>
+                    <Panel title="Pannel Title">Pannel Content</Panel>
+                </Collapse>
+            );
+            collapseCompareSnapshot.compare(cy.get('.next-collapse'));
+        });
     });
 
     describe('defaultExpandedKeys', () => {

components/collapse/__tests__/snapshots/__base__/index-spec.tsx/Collapse -- render -- should render with proper border-radius and overflow hidden.snap.png

@@ -10,6 +10,7 @@
 
     border: $collapse-border-width solid $collapse-border-color;
     border-radius: $collapse-border-corner;
+    overflow: hidden;
     &:focus,
     & *:focus {
         outline: 0;

components/collapse/main.scss

@@ -0,0 +1,27 @@
+import type { Options } from 'cypress-image-snapshot';
+
+export class CompareSnapshot {
+    customSnapshotsDir: string;
+    customDiffDir: string;
+    constructor(options: { componentName: string }) {
+        const { componentName } = options;
+        this.customSnapshotsDir = `/components/${componentName}/__tests__/snapshots/__base__`;
+        this.customDiffDir = `/components/${componentName}/__tests__/snapshots/__diff__`;
+    }
+    compare(
+        subject: Cypress.Chainable<JQuery<HTMLElement>>,
+        nameOrOptions?: string | Options,
+        options?: Options
+    ) {
+        const commandOptions = typeof nameOrOptions === 'string' ? options : nameOrOptions;
+        const targetOptions = Object.assign(
+            {
+                customSnapshotsDir: this.customSnapshotsDir,
+                customDiffDir: this.customDiffDir,
+            },
+            commandOptions
+        );
+        const target = subject ? subject : cy;
+        return target.matchImageSnapshot(targetOptions);
+    }
+}

components/util/__tests__/common/snapshot.ts

@@ -1,15 +1,17 @@
 import { defineConfig } from 'cypress';
+import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
 
 export default defineConfig({
     component: {
-        setupNodeEvents(on) {
+        setupNodeEvents(on, config) {
             on('task', {
-                'log': (message: string) => {
+                log: (message: string) => {
                     // eslint-disable-next-line no-console
                     console.log(message);
                     return null;
                 },
-            })
+            });
+            addMatchImageSnapshotPlugin(on, config);
         },
         devServer: {
             framework: 'react',

cypress.config.ts

@@ -1,5 +1,6 @@
 import { cloneElement, type ReactElement } from 'react';
 import { mount, type MountReturn } from 'cypress/react';
+import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
 import './commands';
 
 function rerender<Props extends object>(tag: string, nextProps: Props) {
@@ -14,7 +15,7 @@ function triggerInputChange(subject: JQuery<HTMLElement>, value: string) {
         window.HTMLInputElement.prototype,
         'value'
     )?.set;
-    nativeInputValueSetter?.call(element, value)
+    nativeInputValueSetter?.call(element, value);
     element.dispatchEvent(new Event('input', { bubbles: true }));
 }
 
@@ -29,6 +30,7 @@ declare global {
     }
 }
 
+addMatchImageSnapshotCommand();
 Cypress.Commands.add('mount', mount);
 Cypress.Commands.add('rerender', rerender);
-Cypress.Commands.add('triggerInputChange', { prevSubject: 'element' }, triggerInputChange)
+Cypress.Commands.add('triggerInputChange', { prevSubject: 'element' }, triggerInputChange);