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>

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()));

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()));

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({})));

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({})));

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()));

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()));

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()));

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()));

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({})));

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({})));

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({})));

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()));

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