performance: added memory tests in packages (#4228)

* test: added memory tests in packages * test: updated memory tests in packages * chore: asbtracted the memory profiler as a testing helper * chore: added memory tests for components * chore: update grid and menu to use testing helper * chore: added mem test for card, button and button group --------- Co-authored-by: Rajdeep Chandra <rajdeepchandra@Rajdeeps-MacBook-Pro-2.local>
adobe · Apr 2, 2024 · 50b2c22 · 50b2c22
1 parent 3bd3a00
commit 50b2c22
Show file tree

Hide file tree

Showing 14 changed files with 264 additions and 106 deletions.
diff --git a/packages/accordion/test/accordion-memory.test.ts b/packages/accordion/test/accordion-memory.test.ts
@@ -0,0 +1,18 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { fixture } from '@open-wc/testing';
+import { Default } from '../stories/accordion.stories.js';
+import { Accordion } from '@spectrum-web-components/accordion';
+import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+
+testForMemoryLeaks(async () => await fixture<Accordion>(Default()));
diff --git a/packages/action-bar/test/action-bar-memory.test.ts b/packages/action-bar/test/action-bar-memory.test.ts
@@ -0,0 +1,18 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { fixture } from '@open-wc/testing';
+import { Default } from '../stories/action-bar.stories.js';
+import { ActionBar } from '@spectrum-web-components/action-bar';
+import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+
+testForMemoryLeaks(async () => await fixture<ActionBar>(Default()));
diff --git a/packages/action-group/test/action-group-memory.test.ts b/packages/action-group/test/action-group-memory.test.ts
@@ -0,0 +1,18 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { fixture } from '@open-wc/testing';
+import { Default } from '../stories/action-group.stories.js';
+import { ActionGroup } from '@spectrum-web-components/action-group';
+import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+
+testForMemoryLeaks(async () => await fixture<ActionGroup>(Default({})));
diff --git a/packages/action-menu/test/action-menu-memory.test.ts b/packages/action-menu/test/action-menu-memory.test.ts
@@ -0,0 +1,18 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { fixture } from '@open-wc/testing';
+import { Default } from '../stories/action-menu.stories.js';
+import { ActionMenu } from '@spectrum-web-components/action-menu';
+import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+
+testForMemoryLeaks(async () => await fixture<ActionMenu>(Default({})));
diff --git a/packages/alert-dialog/test/alert-dialog-memory.test.ts b/packages/alert-dialog/test/alert-dialog-memory.test.ts
@@ -0,0 +1,18 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { fixture } from '@open-wc/testing';
+import { confirmation } from '../stories/alert-dialog.stories.js';
+import { AlertDialog } from '@spectrum-web-components/alert-dialog';
+import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+
+testForMemoryLeaks(async () => await fixture<AlertDialog>(confirmation()));
diff --git a/packages/asset/test/asset-memory.test.ts b/packages/asset/test/asset-memory.test.ts
@@ -0,0 +1,18 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { fixture } from '@open-wc/testing';
+import { Default } from '../stories/asset.stories.js';
+import { Asset } from '@spectrum-web-components/asset';
+import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+
+testForMemoryLeaks(async () => await fixture<Asset>(Default()));
diff --git a/packages/avatar/test/avatar-memory.test.ts b/packages/avatar/test/avatar-memory.test.ts
@@ -0,0 +1,18 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { fixture } from '@open-wc/testing';
+import { linked } from '../stories/avatar.stories.js';
+import { Avatar } from '@spectrum-web-components/avatar';
+import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+
+testForMemoryLeaks(async () => await fixture<Avatar>(linked()));
diff --git a/packages/badge/test/badge-memory.test.ts b/packages/badge/test/badge-memory.test.ts
@@ -0,0 +1,18 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { fixture } from '@open-wc/testing';
+import { Default } from '../stories/badge.stories.js';
+import { Badge } from '@spectrum-web-components/badge';
+import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+
+testForMemoryLeaks(async () => await fixture<Badge>(Default()));
diff --git a/packages/button-group/test/button-group-memory.test.ts b/packages/button-group/test/button-group-memory.test.ts
@@ -0,0 +1,18 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { fixture } from '@open-wc/testing';
+import { buttons } from '../stories/button-group.stories.js';
+import { ButtonGroup } from '@spectrum-web-components/button-group';
+import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+
+testForMemoryLeaks(async () => await fixture<ButtonGroup>(buttons({})));
diff --git a/packages/button/test/button-memory.test.ts b/packages/button/test/button-memory.test.ts
@@ -0,0 +1,18 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { fixture } from '@open-wc/testing';
+import { Default } from '../stories/button-accent-fill.stories.js';
+import { Button } from '@spectrum-web-components/button';
+import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+
+testForMemoryLeaks(async () => await fixture<Button>(Default({})));
diff --git a/packages/card/test/card-memory.test.ts b/packages/card/test/card-memory.test.ts
@@ -0,0 +1,18 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { fixture } from '@open-wc/testing';
+import { Default } from '../stories/card.stories.js';
+import { Card } from '@spectrum-web-components/card';
+import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+
+testForMemoryLeaks(async () => await fixture<Card>(Default({})));
diff --git a/packages/menu/test/menu-memory.test.ts b/packages/menu/test/menu-memory.test.ts
@@ -10,55 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { expect, fixture, nextFrame } from '@open-wc/testing';
-import { html, render } from '@spectrum-web-components/base';
+import { fixture } from '@open-wc/testing';
 import { singleSelect } from '../stories/menu.stories.js';
-import { usedHeapMB } from '../../../test/testing-helpers.js';
+import { Menu } from '@spectrum-web-components/menu';
+import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
 
-describe('Menu memory usage', () => {
-    it('releases references on disconnect', async function () {
-        if (!window.gc || !('measureUserAgentSpecificMemory' in performance))
-            this.skip();
-
-        this.timeout(10000);
-
-        const iterations = 50;
-        let active = false;
-
-        const el = await fixture<HTMLElement>(
-            html`
-                <div></div>
-            `
-        );
-
-        async function toggle(
-            forced: boolean | undefined = undefined
-        ): Promise<void> {
-            active = forced != null ? forced : !active;
-            render(active ? singleSelect() : html``, el);
-            await nextFrame();
-            await nextFrame();
-        }
-
-        // "shake things out" to get a good first reading
-        for (let i = 0; i < 5; i++) {
-            await toggle();
-        }
-        await toggle(false);
-        const beforeMB = await usedHeapMB();
-
-        for (let i = 0; i < iterations; i++) {
-            await toggle();
-        }
-        await toggle(false);
-        const afterMB = await usedHeapMB();
-
-        expect(
-            afterMB.total - beforeMB.total,
-            `Total | before: ${beforeMB.total}, after: ${afterMB.total}
-DOM | before: ${beforeMB.dom}, after: ${afterMB.dom}
-JS | before: ${beforeMB.js}, after: ${afterMB.js}
-Shared | before: ${beforeMB.shared}, after: ${afterMB.shared}`
-        ).to.be.lte(0);
-    });
-});
+testForMemoryLeaks(async () => await fixture<Menu>(singleSelect()));
diff --git a/test/testing-helpers.ts b/test/testing-helpers.ts
@@ -16,7 +16,7 @@ import {
     nextFrame,
     fixture as owcFixture,
 } from '@open-wc/testing';
-import { html } from '@spectrum-web-components/base';
+import { html, render } from '@spectrum-web-components/base';
 import { SinonStub, spy, stub } from 'sinon';
 import type { HookFunction } from 'mocha';
 import '@spectrum-web-components/theme/sp-theme.js';
@@ -53,6 +53,63 @@ export async function testForLitDevWarnings(
     });
 }
 
+export async function testForMemoryLeaks(
+    element: () => Promise<HTMLElement>
+): Promise<void> {
+    describe('Memory usage', () => {
+        it('releases references on disconnect', async function () {
+            if (
+                !window.gc ||
+                !('measureUserAgentSpecificMemory' in performance)
+            )
+                this.skip();
+
+            this.timeout(10000);
+
+            const iterations = 50;
+            let active = false;
+
+            // Call fixture with 'htmlString' as the additional argument
+            const el = await fixture<HTMLElement>(
+                html`
+                    <div></div>
+                `
+            );
+
+            async function toggle(
+                forced: boolean | undefined = undefined
+            ): Promise<void> {
+                active = forced != null ? forced : !active;
+                render(active ? element : html``, el);
+                await nextFrame();
+                await nextFrame();
+            }
+
+            // "shake things out" to get a good first reading
+            for (let i = 0; i < 5; i++) {
+                await toggle();
+            }
+            await toggle(false);
+            const beforeMB = await usedHeapMB();
+
+            for (let i = 0; i < iterations; i++) {
+                await toggle();
+            }
+            await toggle(false);
+            const afterMB = await usedHeapMB();
+
+            expect(
+                afterMB.dom - beforeMB.dom,
+                `DOM | before: ${beforeMB.dom}, after: ${afterMB.dom}`
+            ).to.be.lte(0);
+            expect(
+                afterMB.js - beforeMB.js,
+                `JS | before: ${beforeMB.js}, after: ${afterMB.js}`
+            ).to.be.lte(0);
+        });
+    });
+}
+
 export function waitForPredicate(
     predicateFn: () => boolean | undefined,
     timeout: number = 250