fix(Collapse): Internal elements need to apply the radius configurati…

…on of external elements, close alibaba-fusion#3277 fix(Collapse): Internal elements need to apply the radius configuration of external elements, close alibaba-fusion#3277
zyliang96 · Dec 5, 2024 · cb6c9ce · cb6c9ce
1 parent 09bf93a
commit cb6c9ce
Show file tree

Hide file tree

Showing 9 changed files with 871 additions and 8 deletions.
diff --git a/.gitignore b/.gitignore
@@ -87,3 +87,6 @@ gemini-report/
 *.log
 .DS_Store
 src/core-temp
+
+# tests snapshots diff
+components/**/__tests__/snapshots/__diff__/**
diff --git a/components/collapse/__tests__/index-spec.tsx b/components/collapse/__tests__/index-spec.tsx
@@ -1,7 +1,6 @@
 import React, { type ReactElement } from 'react';
 import Collapse from '../index';
 import '../style';
-
 const Panel = Collapse.Panel;
 
 describe('Collapse', () => {
@@ -60,6 +59,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>
+            );
+            cy.compareSnapshot('collapse');
+        });
     });
 
     describe('defaultExpandedKeys', () => {

diff --git a/... render -- should render with proper border-radius and overflow hidden.snap.png b/... render -- should render with proper border-radius and overflow hidden.snap.png
diff --git a/components/collapse/main.scss b/components/collapse/main.scss
@@ -10,6 +10,7 @@
 
     border: $collapse-border-width solid $collapse-border-color;
     border-radius: $collapse-border-corner;
+    overflow: hidden;
     &:focus,
     & *:focus {
         outline: 0;

diff --git a/cypress.config.ts b/cypress.config.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',

diff --git a/cypress/support/component.ts b/cypress/support/component.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,21 +15,49 @@ 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 }));
 }
 
+function compareSnapshot(
+    subject: Cypress.PrevSubjectMap<void>[Cypress.PrevSubject],
+    componentName: string,
+    commandOptions?: object
+) {
+    const customSnapshotsDir = `/components/${componentName}/__tests__/snapshots/__base__`;
+    const customDiffDir = `/components/${componentName}/__tests__/snapshots/__diff__`;
+    const targetOptions = Object.assign(
+        {
+            customSnapshotsDir,
+            customDiffDir,
+        },
+        commandOptions
+    );
+    const target = subject ? cy.wrap(subject) : cy;
+    return target.matchImageSnapshot(targetOptions);
+}
+
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace Cypress {
         interface Chainable {
             mount: typeof mount;
             rerender: typeof rerender;
             triggerInputChange: (value: string) => void;
+            matchImageSnapshot: (name?: string | object, options?: object) => void;
+            compareSnapshot: (componentName: string, commandOptions?: object) => void;
         }
     }
 }
 
 Cypress.Commands.add('mount', mount);
 Cypress.Commands.add('rerender', rerender);
-Cypress.Commands.add('triggerInputChange', { prevSubject: 'element' }, triggerInputChange)
+Cypress.Commands.add('triggerInputChange', { prevSubject: 'element' }, triggerInputChange);
+addMatchImageSnapshotCommand();
+Cypress.Commands.add(
+    'compareSnapshot',
+    {
+        prevSubject: ['optional', 'element', 'window', 'document'],
+    },
+    compareSnapshot
+);
diff --git a/global.d.ts b/global.d.ts
@@ -31,3 +31,16 @@ declare module 'react-lifecycles-compat' {
 
     export function polyfill<C extends ComponentType>(Component: C): C;
 }
+
+declare module 'cypress-image-snapshot/plugin' {
+    export function addMatchImageSnapshotPlugin(
+        on: Cypress.PluginEvents,
+        config: Cypress.PluginConfigOptions
+    ): void;
+}
+declare module 'cypress-image-snapshot/command' {
+    export function addMatchImageSnapshotCommand(
+        maybeName?: string | object,
+        maybeOptions?: object
+    ): void;
+}