|
| 1 | +/** |
| 2 | + * Copyright IBM Corp. 2018, 2018 |
| 3 | + * |
| 4 | + * This source code is licensed under the Apache-2.0 license found in the |
| 5 | + * LICENSE file in the root directory of this source tree. |
| 6 | + * |
| 7 | + * @jest-environment node |
| 8 | + */ |
| 9 | + |
| 10 | +'use strict'; |
| 11 | + |
| 12 | +const { SassRenderer } = require('@carbon/test-utils/scss'); |
| 13 | + |
| 14 | +const { render } = SassRenderer.create(__dirname); |
| 15 | + |
| 16 | +describe('@carbon/styles/scss/compat', () => { |
| 17 | + it('should export white, g10, g90, and g100 themes', async () => { |
| 18 | + const { unwrap } = await render(` |
| 19 | + @use 'sass:map'; |
| 20 | + @use 'sass:meta'; |
| 21 | + @use '../scss/compat/themes'; |
| 22 | +
|
| 23 | + $_: get('variables', map.keys(meta.module-variables('themes'))); |
| 24 | + `); |
| 25 | + const themes = unwrap('variables').sort(); |
| 26 | + expect(themes).toEqual(['white', 'g10', 'g90', 'g100'].sort()); |
| 27 | + }); |
| 28 | + |
| 29 | + it('should export v10 tokens as Sass Variables', async () => { |
| 30 | + const { unwrap } = await render(` |
| 31 | + @use '../scss/config' with ( $prefix: 'cds' ); |
| 32 | + @use '../scss/compat/themes'; |
| 33 | + @use '../scss/compat/theme' with ( |
| 34 | + $theme: themes.$white, |
| 35 | + ); |
| 36 | +
|
| 37 | + $_: get('theme', themes.$white); |
| 38 | + $_: get('variable', theme.$interactive-01); |
| 39 | + `); |
| 40 | + const theme = unwrap('theme'); |
| 41 | + const variable = unwrap('variable'); |
| 42 | + |
| 43 | + expect(variable).toEqual( |
| 44 | + `var(--cds-interactive-01, ${theme['interactive-01']})` |
| 45 | + ); |
| 46 | + }); |
| 47 | + |
| 48 | + it('should export v11 tokens that match the fallback theme', async () => { |
| 49 | + const { unwrap } = await render(` |
| 50 | + @use '../scss/config' with ( $prefix: 'cds' ); |
| 51 | + @use '../scss/themes'; |
| 52 | + @use '../scss/compat/themes' as compat; |
| 53 | + @use '../scss/compat/theme' with ( |
| 54 | + $fallback: themes.$g100, |
| 55 | + $theme: compat.$g100, |
| 56 | + ); |
| 57 | +
|
| 58 | + $_: get('theme', themes.$g100); |
| 59 | + $_: get('variable', theme.$background); |
| 60 | + `); |
| 61 | + |
| 62 | + const theme = unwrap('theme'); |
| 63 | + const variable = unwrap('variable'); |
| 64 | + |
| 65 | + expect(variable).toEqual(`var(--cds-background, ${theme['background']})`); |
| 66 | + }); |
| 67 | +}); |
0 commit comments