From f76b3e2757cf0dd76add5c34b38788dfb65048c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Thu, 26 Sep 2024 18:05:24 +0200 Subject: [PATCH] Test(web): Allow SASS Unit tests to run again --- .../tools/__tests__/_dictionaries.test.scss | 147 +++++++++++++----- .../scss/tools/__tests__/_themes.test.scss | 40 ++--- .../scss/tools/__tests__/_tokens.test.scss | 2 +- .../tools/__tests__/_typography.test.scss | 4 +- packages/web/src/scss/tools/_themes.scss | 6 +- .../{scss.test-disabled.ts => scss.test.ts} | 0 6 files changed, 125 insertions(+), 74 deletions(-) rename packages/web/tests/{scss.test-disabled.ts => scss.test.ts} (100%) diff --git a/packages/web/src/scss/tools/__tests__/_dictionaries.test.scss b/packages/web/src/scss/tools/__tests__/_dictionaries.test.scss index 0388a1b711..17dd0864b5 100644 --- a/packages/web/src/scss/tools/__tests__/_dictionaries.test.scss +++ b/packages/web/src/scss/tools/__tests__/_dictionaries.test.scss @@ -1,7 +1,6 @@ @use 'true' as test; @use '../../settings/dictionaries' as dictionaries-settings; @use '../dictionaries'; -@use '@tokens' as tokens; @include test.describe('generate-alignments mixin') { @include test.it('should generate correct alignment classes based on a dictionary') { @@ -51,19 +50,32 @@ @include dictionaries.generate-colors( $class-name: 'Test', $dictionary-values: ( - 'primary', + this-is-long-so-prettier-breaks-the-output-to-new-line: + dictionaries-settings.$action-button-colors, ), $config: ( - color: 'default', + color: 'content', ) ); } @include test.expect() { .Test--primary { - --test-color: #29616f; + --spirit-test-color: var( + --spirit-color-this-is-long-so-prettier-breaks-the-output-to-new-line-primary-content + ); + } + + .Test--secondary { + --spirit-test-color: var( + --spirit-color-this-is-long-so-prettier-breaks-the-output-to-new-line-secondary-content + ); + } - color: var(--test-color); + .Test--tertiary { + --spirit-test-color: var( + --spirit-color-this-is-long-so-prettier-breaks-the-output-to-new-line-tertiary-content + ); } } } @@ -75,87 +87,135 @@ @include dictionaries.generate-colors( $class-name: 'Test', $dictionary-values: ( - 'primary', + this-is-long-so-prettier-breaks-the-output-to-new-line: + dictionaries-settings.$action-button-colors, ), $config: ( - color: 'default', + color: 'content', ), - $child-selector: ' > .Test__box', $generate-data-attribute: true ); } @include test.expect() { - .Test--primary > .Test__box, - .Test[data-spirit-color='primary'] > .Test__box { - --test-color: #29616f; + .Test--primary, + .Test[data-spirit-color='primary'] { + --spirit-test-color: var( + --spirit-color-this-is-long-so-prettier-breaks-the-output-to-new-line-primary-content + ); + } - color: var(--test-color); + .Test--secondary, + .Test[data-spirit-color='secondary'] { + --spirit-test-color: var( + --spirit-color-this-is-long-so-prettier-breaks-the-output-to-new-line-secondary-content + ); + } + + .Test--tertiary, + .Test[data-spirit-color='tertiary'] { + --spirit-test-color: var( + --spirit-color-this-is-long-so-prettier-breaks-the-output-to-new-line-tertiary-content + ); } } } } } +@include test.describe('prepare-button-links mixin') { + @include test.it('should generate correct button link classes based on a dictionary') { + @include test.assert() { + @include test.output() { + @include dictionaries.prepare-button-links(dictionaries-settings.$action-link-colors); + } + + @include test.expect() { + // stylelint-disable selector-no-qualifying-type, order/properties-order -- We need to allow this to make sass-true work + button.link-primary, + button.link-secondary, + button.link-tertiary { + appearance: none; + display: inline-flex; + flex: none; + align-items: center; + justify-content: center; + padding: 0; + font: inherit; + border: none; + border-radius: 0; + background: none; + box-shadow: none; + cursor: pointer; + text-decoration-skip-ink: none; + text-underline-offset: 0.1875em; + user-select: text; + } + + @media (hover: hover) { + button.link-primary:hover, + button.link-secondary:hover, + button.link-tertiary:hover { + text-decoration: underline; + } + } + + button.link-primary:active, + button.link-secondary:active, + button.link-tertiary:active { + text-decoration: underline; + } + // stylelint-enable selector-no-qualifying-type, order/properties-order + } + } + } +} + @include test.describe('generate-link-colors mixin') { @include test.it('should generate correct link color classes based on a dictionary') { @include test.assert() { @include test.output() { @include dictionaries.generate-link-colors( - '.link', - dictionaries-settings.$action-link-colors, - tokens.$action-colors, - (default, hover, active, disabled) + $selector: '.link', + $dictionary-values: dictionaries-settings.$action-link-colors ); } @include test.expect() { .link-primary { - color: #29616f; + color: var(--spirit-color-action-link-primary-default); } .link-primary:hover { - color: #1b5260; + color: var(--spirit-color-action-link-primary-hover); } .link-primary:active { - color: #0b3a46; - } - - .link-primary.link-disabled { - color: #979797; + color: var(--spirit-color-action-link-primary-active); } .link-secondary { - color: #758185; + color: var(--spirit-color-action-link-secondary-default); } .link-secondary:hover { - color: #5b6568; + color: var(--spirit-color-action-link-secondary-hover); } .link-secondary:active { - color: #454b4e; - } - - .link-secondary.link-disabled { - color: #979797; - } - - .link-inverted { - color: #e9e9e9; + color: var(--spirit-color-action-link-secondary-active); } - .link-inverted:hover { - color: #dbdbdb; + .link-tertiary { + color: var(--spirit-color-action-link-tertiary-default); } - .link-inverted:active { - color: #d4d4d4; + .link-tertiary:hover { + color: var(--spirit-color-action-link-tertiary-hover); } - .link-inverted.link-disabled { - color: #c4c4c4; + .link-tertiary:active { + color: var(--spirit-color-action-link-tertiary-active); } } } @@ -277,9 +337,10 @@ @include test.expect() { .TestSize--large { - width: 100px; - height: 200px; - padding: 12px 16px; + --spirit-test-size-width: 100px; + --spirit-test-size-height: 200px; + --spirit-test-size-padding-y: 12px; + --spirit-test-size-padding-x: 16px; } } } diff --git a/packages/web/src/scss/tools/__tests__/_themes.test.scss b/packages/web/src/scss/tools/__tests__/_themes.test.scss index 484b7349ef..45a4ab151b 100644 --- a/packages/web/src/scss/tools/__tests__/_themes.test.scss +++ b/packages/web/src/scss/tools/__tests__/_themes.test.scss @@ -1,7 +1,7 @@ @use 'true' as test; @use '../themes'; -$test-theme-light: ( +$test-theme-light-default: ( action: ( button: ( active: #fff, @@ -9,7 +9,7 @@ $test-theme-light: ( ), ); -$test-theme-light-inverted: ( +$test-theme-light-on-brand: ( action: ( button: ( active: #000, @@ -18,11 +18,11 @@ $test-theme-light-inverted: ( ); $test-themes: ( - theme-light: ( - colors: $test-theme-light, + theme-light-default: ( + colors: $test-theme-light-default, ), - theme-light-inverted: ( - colors: $test-theme-light, + theme-light-on-brand: ( + colors: $test-theme-light-on-brand, ), ); @@ -30,37 +30,25 @@ $test-themes: ( @include test.it('should generate default and other themes') { @include test.assert() { @include test.output() { - :root { - @include themes.generate($test-themes); - } + @include themes.generate($test-themes, false); } @include test.expect() { :root, - .spirit-theme-light { + .spirit-theme-light-default { --spirit-color-action-button-active: #fff; } - .spirit-theme-light-inverted { - --spirit-color-action-button-active: #000; + :where(:root, .spirit-theme-light-default) { + color: var(--spirit-color-text-primary); } - } - } - } -} -@include test.describe('generate-css-variables mixin') { - @include test.it('should generate CSS variables based on the provided map') { - @include test.assert() { - @include test.output() { - :root { - @include themes.generate-css-variables($test-theme-light, 'test-'); + .spirit-theme-light-on-brand { + --spirit-color-action-button-active: #000; } - } - @include test.expect() { - :root { - --test-action-button-active: #fff; + :where(.spirit-theme-light-on-brand) { + color: var(--spirit-color-text-primary); } } } diff --git a/packages/web/src/scss/tools/__tests__/_tokens.test.scss b/packages/web/src/scss/tools/__tests__/_tokens.test.scss index 2458ec9199..54a9b8c17d 100644 --- a/packages/web/src/scss/tools/__tests__/_tokens.test.scss +++ b/packages/web/src/scss/tools/__tests__/_tokens.test.scss @@ -14,7 +14,7 @@ $test-theme: ( @include test.assert() { @include test.output() { :root { - @include tokens.generate-css-variables($test-theme, 'test-'); + @include tokens.generate-css-variables($test-theme, 'test'); } } diff --git a/packages/web/src/scss/tools/__tests__/_typography.test.scss b/packages/web/src/scss/tools/__tests__/_typography.test.scss index c45b87740a..f9f317eb53 100644 --- a/packages/web/src/scss/tools/__tests__/_typography.test.scss +++ b/packages/web/src/scss/tools/__tests__/_typography.test.scss @@ -1,7 +1,7 @@ @use 'sass:map'; @use 'true' as test; @use '../typography'; -@use '@tokens' as tokens; +@use '@global' as global-tokens; @include test.describe('generate mixin') { @include test.it('should generate typography styles for a given token and breakpoint') { @@ -27,7 +27,7 @@ } @include test.expect() { - @media (width >= #{map.get(tokens.$breakpoints, 'tablet')}) { + @media (width >= #{map.get(global-tokens.$breakpoints, 'tablet')}) { .typography-test { font-style: italic; font-weight: 700; diff --git a/packages/web/src/scss/tools/_themes.scss b/packages/web/src/scss/tools/_themes.scss index 7ae038cdd1..ae7fe913e9 100644 --- a/packages/web/src/scss/tools/_themes.scss +++ b/packages/web/src/scss/tools/_themes.scss @@ -8,7 +8,7 @@ @use 'svg'; @use 'tokens' as tokens-tools; -@mixin generate($themes) { +@mixin generate($themes, $addBackgroundImageUrls: true) { // 1. $is-default-theme: true; @@ -25,7 +25,9 @@ ); } - @include generate-background-image-urls($value); + @if $addBackgroundImageUrls { + @include generate-background-image-urls($value); + } } // 2. diff --git a/packages/web/tests/scss.test-disabled.ts b/packages/web/tests/scss.test.ts similarity index 100% rename from packages/web/tests/scss.test-disabled.ts rename to packages/web/tests/scss.test.ts