Skip to content

Commit 0ce2e76

Browse files
thetaPCthetaPC
committed
test(theme): update tests
1 parent 383d24c commit 0ce2e76

File tree

1 file changed

+191
-5
lines changed

1 file changed

+191
-5
lines changed

‎core/src/utils/test/theme.spec.ts‎

Lines changed: 191 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,12 @@ describe('generateCSSVars', () => {
205205
dark: {
206206
enabled: 'system',
207207
},
208+
highContrast: {
209+
enabled: 'never',
210+
},
211+
highContrastDark: {
212+
enabled: 'never',
213+
}
208214
},
209215
config: {
210216
rippleEffect: true,
@@ -319,6 +325,12 @@ describe('generateGlobalThemeCSS', () => {
319325
dark: {
320326
enabled: 'never',
321327
},
328+
highContrast: {
329+
enabled: 'never',
330+
},
331+
highContrastDark: {
332+
enabled: 'never',
333+
}
322334
},
323335
borderWidth: {
324336
sm: '4px',
@@ -372,6 +384,12 @@ describe('generateGlobalThemeCSS', () => {
372384
dark: {
373385
enabled: 'never',
374386
},
387+
highContrast: {
388+
enabled: 'never',
389+
},
390+
highContrastDark: {
391+
enabled: 'never',
392+
}
375393
},
376394
borderWidth: {
377395
sm: '4px',
@@ -437,6 +455,12 @@ describe('generateGlobalThemeCSS', () => {
437455
dark: {
438456
enabled: 'never',
439457
},
458+
highContrast: {
459+
enabled: 'never',
460+
},
461+
highContrastDark: {
462+
enabled: 'never',
463+
}
440464
},
441465
borderWidth: {
442466
sm: '4px',
@@ -473,11 +497,11 @@ describe('generateGlobalThemeCSS', () => {
473497
expect(css).toContain('--ion-border-width-sm: 4px');
474498
expect(css).toContain('--ion-spacing-md: 12px');
475499

476-
// Should NOT include component variables
477-
expect(css).not.toContain('--ion-components-ion-chip-hue-subtle-bg');
478-
expect(css).not.toContain('--ion-components-ion-chip-shape-round-border-radius');
479-
expect(css).not.toContain('--ion-components-ion-button-color-primary-bg');
480-
expect(css).not.toContain('components');
500+
// Should include component variables
501+
expect(css).toContain('--ion-components-ion-chip-hue-subtle-bg');
502+
expect(css).toContain('--ion-components-ion-chip-shape-round-border-radius');
503+
expect(css).toContain('--ion-components-ion-button-color-primary-bg');
504+
expect(css).toContain('components');
481505

482506
// Should NOT include palette variables
483507
expect(css).not.toContain('--ion-color-palette-dark-enabled-never');
@@ -513,6 +537,12 @@ describe('generateGlobalThemeCSS', () => {
513537
},
514538
},
515539
},
540+
highContrast: {
541+
enabled: 'never',
542+
},
543+
highContrastDark: {
544+
enabled: 'never',
545+
},
516546
},
517547
borderWidth: {
518548
sm: '4px',
@@ -555,6 +585,162 @@ describe('generateGlobalThemeCSS', () => {
555585

556586
expect(css).toBe(expectedCSS);
557587
});
588+
589+
it('should generate global CSS for a given theme with high contrast palette enabled for system preference', () => {
590+
const theme = {
591+
name: 'test',
592+
palette: {
593+
light: {},
594+
dark: {
595+
enabled: 'never',
596+
},
597+
highContrast: {
598+
enabled: 'system',
599+
color: {
600+
primary: {
601+
bold: {
602+
base: '#0054e9',
603+
contrast: '#ffffff',
604+
shade: '#0041c4',
605+
tint: '#0065ff',
606+
},
607+
subtle: {
608+
base: '#0054e9',
609+
contrast: '#ffffff',
610+
shade: '#0041c4',
611+
tint: '#0065ff',
612+
},
613+
},
614+
red: {
615+
50: '#ffebee',
616+
100: '#ffcdd2',
617+
200: '#ef9a9a',
618+
},
619+
}
620+
},
621+
highContrastDark: {
622+
enabled: 'never',
623+
},
624+
},
625+
borderWidth: {
626+
sm: '4px',
627+
},
628+
spacing: {
629+
md: '12px',
630+
},
631+
dynamicFont: '-apple-system-body',
632+
};
633+
634+
const css = generateGlobalThemeCSS(theme).replace(/\s/g, '');
635+
636+
const expectedCSS = `
637+
:root {
638+
--ion-border-width-sm: 4px;
639+
--ion-spacing-md: 12px;
640+
--ion-dynamic-font: -apple-system-body;
641+
}
642+
643+
@media(prefers-contrast: more) {
644+
:root {
645+
--ion-color-primary-bold: #0054e9;
646+
--ion-color-primary-bold-rgb: 0, 84, 233;
647+
--ion-color-primary-bold-contrast: #ffffff;
648+
--ion-color-primary-bold-contrast-rgb: 255, 255, 255;
649+
--ion-color-primary-bold-shade: #0041c4;
650+
--ion-color-primary-bold-tint: #0065ff;
651+
--ion-color-primary-subtle: #0054e9;
652+
--ion-color-primary-subtle-rgb: 0, 84, 233;
653+
--ion-color-primary-subtle-contrast: #ffffff;
654+
--ion-color-primary-subtle-contrast-rgb: 255, 255, 255;
655+
--ion-color-primary-subtle-shade: #0041c4;
656+
--ion-color-primary-subtle-tint: #0065ff;
657+
--ion-color-red-50: #ffebee;
658+
--ion-color-red-100: #ffcdd2;
659+
--ion-color-red-200: #ef9a9a;
660+
}
661+
}
662+
`.replace(/\s/g, '');
663+
664+
expect(css).toBe(expectedCSS);
665+
});
666+
667+
it('should generate global CSS for a given theme with high contrast dark palette enabled for system preference', () => {
668+
const theme = {
669+
name: 'test',
670+
palette: {
671+
light: {},
672+
dark: {
673+
enabled: 'never',
674+
},
675+
highContrast: {
676+
enabled: 'never',
677+
},
678+
highContrastDark: {
679+
enabled: 'system',
680+
color: {
681+
primary: {
682+
bold: {
683+
base: '#0054e9',
684+
contrast: '#ffffff',
685+
shade: '#0041c4',
686+
tint: '#0065ff',
687+
},
688+
subtle: {
689+
base: '#0054e9',
690+
contrast: '#ffffff',
691+
shade: '#0041c4',
692+
tint: '#0065ff',
693+
},
694+
},
695+
red: {
696+
50: '#ffebee',
697+
100: '#ffcdd2',
698+
200: '#ef9a9a',
699+
},
700+
}
701+
},
702+
},
703+
borderWidth: {
704+
sm: '4px',
705+
},
706+
spacing: {
707+
md: '12px',
708+
},
709+
dynamicFont: '-apple-system-body',
710+
};
711+
712+
const css = generateGlobalThemeCSS(theme).replace(/\s/g, '');
713+
714+
const expectedCSS = `
715+
:root {
716+
--ion-border-width-sm: 4px;
717+
--ion-spacing-md: 12px;
718+
--ion-dynamic-font: -apple-system-body;
719+
}
720+
721+
@media(prefers-contrast: more) and (prefers-color-scheme: dark) {
722+
:root {
723+
--ion-color-primary-bold: #0054e9;
724+
--ion-color-primary-bold-rgb: 0, 84, 233;
725+
--ion-color-primary-bold-contrast: #ffffff;
726+
--ion-color-primary-bold-contrast-rgb: 255, 255, 255;
727+
--ion-color-primary-bold-shade: #0041c4;
728+
--ion-color-primary-bold-tint: #0065ff;
729+
--ion-color-primary-subtle: #0054e9;
730+
--ion-color-primary-subtle-rgb: 0, 84, 233;
731+
--ion-color-primary-subtle-contrast: #ffffff;
732+
--ion-color-primary-subtle-contrast-rgb: 255, 255, 255;
733+
--ion-color-primary-subtle-shade: #0041c4;
734+
--ion-color-primary-subtle-tint: #0065ff;
735+
--ion-color-red-50: #ffebee;
736+
--ion-color-red-100: #ffcdd2;
737+
--ion-color-red-200: #ef9a9a;
738+
}
739+
}
740+
`.replace(/\s/g, '');
741+
742+
expect(css).toBe(expectedCSS);
743+
});
558744
});
559745

560746
describe('generateComponentThemeCSS', () => {

0 commit comments

Comments
 (0)