Skip to content

Commit

Permalink
Test(web): Allow SASS Unit tests to run again
Browse files Browse the repository at this point in the history
  • Loading branch information
@crishpeen
crishpeen committed Oct 1, 2024
1 parent 429c9e1 commit f76b3e2
Show file tree
Hide file tree
Showing 6 changed files with 125 additions and 74 deletions.
147 changes: 104 additions & 43 deletions packages/web/src/scss/tools/__tests__/_dictionaries.test.scss
View file
Original file line number Diff line number Diff line change
@@ -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') {
Expand Down Expand Up @@ -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
);
}
}
}
Expand All @@ -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);
}
}
}
Expand Down Expand Up @@ -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;
}
}
}
Expand Down
40 changes: 14 additions & 26 deletions packages/web/src/scss/tools/__tests__/_themes.test.scss
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
@use 'true' as test;
@use '../themes';

$test-theme-light: (
$test-theme-light-default: (
action: (
button: (
active: #fff,
),
),
);

$test-theme-light-inverted: (
$test-theme-light-on-brand: (
action: (
button: (
active: #000,
Expand All @@ -18,49 +18,37 @@ $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,
),
);

@include test.describe('generate mixin') {
@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);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/web/src/scss/tools/__tests__/_tokens.test.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
}

Expand Down
4 changes: 2 additions & 2 deletions packages/web/src/scss/tools/__tests__/_typography.test.scss
View file
Original file line number Diff line number Diff line change
@@ -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') {
Expand All @@ -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;
Expand Down
6 changes: 4 additions & 2 deletions packages/web/src/scss/tools/_themes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
@use 'svg';
@use 'tokens' as tokens-tools;

@mixin generate($themes) {
@mixin generate($themes, $addBackgroundImageUrls: true) {
// 1.
$is-default-theme: true;

Expand All @@ -25,7 +25,9 @@
);
}

@include generate-background-image-urls($value);
@if $addBackgroundImageUrls {
@include generate-background-image-urls($value);
}
}

// 2.
Expand Down
0 packages/web/tests/scss.test-disabled.ts → packages/web/tests/scss.test.ts
View file
File renamed without changes.

0 comments on commit f76b3e2

Please sign in to comment.