ci: run unit and memory tests separately (#4422)

* ci: run unit and memory tests separately * chore: fixed swatch mem test * chore: fixed color slider memory test * chore: fixed color area memory test * chore: reverted swatch property definition * chore: updated hue to set via styleMap * chore: added stylemap to color slider * chore: updated swatch style * chore: reverted opacity checkboard style in color handle * chore: ignored color packages from ci memory test * chore: ignored color packages from ci memory test * test: checkout memory tooling with concurrency of 2 --------- Co-authored-by: Rajdeep Chandra <rajdeepchandra@rajdeeps-mbp-2.macromedia.com> Co-authored-by: Rajdeep Chandra <rajdeepchandra@Rajdeeps-MacBook-Pro-2.local>
adobe · May 10, 2024 · 841ac23 · 841ac23
1 parent db193e8
commit 841ac23
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 15 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -146,13 +146,24 @@ jobs:
         steps:
             - downstream
             - run:
-                  name: Run tests
-                  command: yarn test:ci --config web-test-runner.config.ci-chromium.js --group unit --coverage
+                  name: Run unit tests
+                  command: yarn test:ci --config web-test-runner.config.ci-chromium.js --group no-memory-ci --coverage
             - store_test_results:
                   path: /root/project/results/
             - store_artifacts:
                   path: coverage
 
+    test-chromium-memory:
+        executor: node
+
+        steps:
+            - downstream
+            - run:
+                  name: Run memory tests
+                  command: yarn test:ci --config web-test-runner.config.ci-chromium.js --group memory-ci
+            - store_test_results:
+                  path: /root/project/results/
+
     test-firefox:
         executor: node
         parallelism: 5
@@ -306,6 +317,7 @@ workflows:
     build:
         jobs:
             - test-chromium
+            - test-chromium-memory
             - test-firefox
             - test-webkit
             - lint

diff --git a/packages/color-area/src/ColorArea.ts b/packages/color-area/src/ColorArea.ts
@@ -17,7 +17,10 @@ import {
     SpectrumElement,
     TemplateResult,
 } from '@spectrum-web-components/base';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
+import {
+    ifDefined,
+    styleMap,
+} from '@spectrum-web-components/base/src/directives.js';
 import {
     property,
     query,
@@ -445,15 +448,15 @@ export class ColorArea extends SpectrumElement {
             }
         ).format(this.y);
 
+        const style = {
+            background: `linear-gradient(to top, black 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%),linear-gradient(to right, white 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);`,
+        };
+
         return html`
             <div
                 @pointerdown=${this.handleAreaPointerdown}
                 class="gradient"
-                style="background:
-                    linear-gradient(to top, black 0%, hsla(${this
-                    .hue}, 100%, 0.01%, 0) 100%),
-                    linear-gradient(to right, white 0%, hsla(${this
-                    .hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);"
+                style=${styleMap(style)}
             >
                 <slot name="gradient"></slot>
             </div>

diff --git a/packages/color-slider/src/ColorSlider.ts b/packages/color-slider/src/ColorSlider.ts
@@ -16,7 +16,11 @@ import {
     PropertyValues,
     TemplateResult,
 } from '@spectrum-web-components/base';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
+import {
+    ifDefined,
+    StyleInfo,
+    styleMap,
+} from '@spectrum-web-components/base/src/directives.js';
 import {
     property,
     query,
@@ -301,6 +305,13 @@ export class ColorSlider extends Focusable {
         }%`;
     }
 
+    private get getColorSliderStyle(): StyleInfo {
+        const orientation = this.vertical ? 'top' : 'right';
+        return {
+            background: `linear-gradient(to ${orientation}, var(--sp-color-slider-gradient, var(--sp-color-slider-gradient-fallback)))`,
+        };
+    }
+
     protected override render(): TemplateResult {
         return html`
             <div
@@ -311,9 +322,7 @@ export class ColorSlider extends Focusable {
                 <div
                     class="gradient"
                     role="presentation"
-                    style="background: linear-gradient(to ${this.vertical
-                        ? 'top'
-                        : 'right'}, var(--sp-color-slider-gradient, var(--sp-color-slider-gradient-fallback)));"
+                    style=${styleMap(this.getColorSliderStyle)}
                 >
                     <slot name="gradient"></slot>
                 </div>

diff --git a/packages/swatch/src/Swatch.ts b/packages/swatch/src/Swatch.ts
@@ -17,7 +17,10 @@ import {
     TemplateResult,
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
-import { when } from '@spectrum-web-components/base/src/directives.js';
+import {
+    ifDefined,
+    when,
+} from '@spectrum-web-components/base/src/directives.js';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
 import opacityCheckerboardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js';
@@ -201,7 +204,11 @@ export class Swatch extends SizedMixin(Focusable, {
         return html`
             <div
                 class="opacity-checkerboard fill"
-                style="--spectrum-picked-color: ${this.color}"
+                style=${ifDefined(
+                    this.color
+                        ? `--spectrum-picked-color: ${this.color}`
+                        : undefined
+                )}
             >
                 <slot name="image"></slot>
                 ${when(this.disabled, this.renderDisabled)}

diff --git a/web-test-runner.config.js b/web-test-runner.config.js
@@ -18,6 +18,7 @@ import { sendMousePlugin } from './test/plugins/send-mouse-plugin.js';
 import {
     chromium,
     chromiumWithMemoryTooling,
+    chromiumWithMemoryToolingCI,
     configuredVisualRegressionPlugin,
     firefox,
     packages,
@@ -144,9 +145,26 @@ export default {
             files: ['{packages,tools}/**/*-memory.test.js'],
             browsers: [chromiumWithMemoryTooling],
         },
+        {
+            name: 'memory-ci',
+            files: [
+                '{packages,tools}/**/*-memory.test.js',
+                '!packages/color-area/test/*-memory.test.js',
+                '!packages/color-wheel/test/*-memory.test.js',
+                '!packages/color-slider/test/*-memory.test.js',
+            ],
+            browsers: [chromiumWithMemoryToolingCI],
+        },
         {
             name: 'unit-ci',
         },
+        {
+            name: 'no-memory-ci',
+            files: [
+                '{packages,tools}/**/*.test.js',
+                '!{packages,tools}/**/*-memory.test.js',
+            ],
+        },
     ],
     group: 'unit',
     browsers: [firefox, chromiumWithMemoryTooling, webkit],

diff --git a/web-test-runner.utils.js b/web-test-runner.utils.js
@@ -17,7 +17,6 @@ import fg from 'fast-glob';
 
 export const chromium = playwrightLauncher({
     product: 'chromium',
-    concurrency: 1,
     createBrowserContext: ({ browser }) =>
         browser.newContext({
             ignoreHTTPSErrors: true,
@@ -47,6 +46,29 @@ export const chromiumWithMemoryTooling = playwrightLauncher({
     },
 });
 
+export const chromiumWithMemoryToolingCI = playwrightLauncher({
+    product: 'chromium',
+    concurrency: 2,
+    createBrowserContext: ({ browser }) =>
+        browser.newContext({
+            ignoreHTTPSErrors: true,
+            permissions: ['clipboard-read', 'clipboard-write'],
+        }),
+    launchOptions: {
+        headless: false,
+        args: [
+            '--js-flags=--expose-gc',
+            '--headless=new',
+            /**
+             * Cause `measureUserAgentSpecificMemory()` to GC immediately,
+             * instead of up to 20s later:
+             * https://web.dev/articles/monitor-total-page-memory-usage#local_testing
+             **/
+            '--enable-blink-features=ForceEagerMeasureMemory',
+        ],
+    },
+});
+
 export const chromiumWithFlags = playwrightLauncher({
     product: 'chromium',
     launchOptions: {