theme.scss.test.ts 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. /**
  2. * @license
  3. * Copyright 2020 Google Inc.
  4. *
  5. * Permission is hereby granted, free of charge, to any person obtaining a copy
  6. * of this software and associated documentation files (the "Software"), to deal
  7. * in the Software without restriction, including without limitation the rights
  8. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  9. * copies of the Software, and to permit persons to whom the Software is
  10. * furnished to do so, subject to the following conditions:
  11. *
  12. * The above copyright notice and this permission notice shall be included in
  13. * all copies or substantial portions of the Software.
  14. *
  15. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  16. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  17. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  18. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  19. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  20. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  21. * THE SOFTWARE.
  22. */
  23. import * as fs from 'fs';
  24. import * as path from 'path';
  25. describe('theme.test.scss', () => {
  26. it('should transform theme keys to custom property for theme.property()',
  27. () => {
  28. const filePath = path.join(__dirname, 'theme.test.css');
  29. const css = fs.readFileSync(filePath, 'utf8').trim();
  30. expect(css).toEqual(`.test {
  31. color: #6200ee;
  32. /* @alternate */
  33. color: var(--mdc-theme-primary, #6200ee);
  34. }`);
  35. });
  36. it('host-aware test produces expected output', () => {
  37. const filePath = path.join(__dirname, 'shadow-dom.test.css');
  38. const css = fs.readFileSync(filePath, 'utf8').trim();
  39. expect(css).toEqual(
  40. `:host([lowered]), :host(:not(.hidden)[outlined][lowered]), :host .my-class[lowered], gm-fab[lowered] {
  41. color: blue;
  42. }
  43. :host([lowered]:hover), :host(:not(.hidden)[outlined][lowered]:hover), :host .my-class[lowered]:hover, gm-fab[lowered]:hover {
  44. background-color: red;
  45. }
  46. :host(:focus), :host(:not(.hidden)[outlined]:focus), :host .my-class:focus, gm-fab:focus, :host, :host(:not(.hidden)[outlined]), :host .my-class, gm-fab {
  47. border-color: green;
  48. }
  49. /* Test replacement for deprecated shadow-dom.host-aware() */
  50. :host([lowered]), :host(:not(.hidden)[outlined][lowered]), :host .my-class[lowered], gm-fab[lowered] {
  51. color: blue;
  52. }
  53. :host([lowered]:hover), :host(:not(.hidden)[outlined][lowered]:hover), :host .my-class[lowered]:hover, gm-fab[lowered]:hover {
  54. background-color: red;
  55. }
  56. :host(:focus), :host(:not(.hidden)[outlined]:focus), :host .my-class:focus, gm-fab:focus, :host,
  57. :host(:not(.hidden)[outlined]),
  58. :host .my-class,
  59. gm-fab {
  60. border-color: green;
  61. }`);
  62. // Sass' organization of selectors with newlines can be iffy when using
  63. // the `selector` module and expanded mode, but all selectors are
  64. // correct.
  65. });
  66. it('should replace values provided to $replace for theme.property()', () => {
  67. const filePath = path.join(__dirname, 'replace.test.css');
  68. const css = fs.readFileSync(filePath, 'utf8').trim();
  69. expect(css).toEqual(`.simple {
  70. width: calc(100% - 20px);
  71. }
  72. .var {
  73. width: calc(16px + 8px);
  74. /* @alternate */
  75. width: calc(var(--m-foo, 16px) + var(--m-bar, 8px));
  76. height: calc(16px + 8px + 16px + 8px);
  77. /* @alternate */
  78. height: calc(var(--m-foo, 16px) + var(--m-bar, 8px) + var(--m-foo, 16px) + var(--m-bar, 8px));
  79. }
  80. .multiple {
  81. width: calc(8px + 8px + 8px);
  82. }
  83. .list {
  84. padding: 0 16px;
  85. }`);
  86. });
  87. it('should allow overriding theme color values using @use/with', () => {
  88. const filePath = path.join(__dirname, 'override.test.css');
  89. const css = fs.readFileSync(filePath, 'utf8').trim();
  90. expect(css).toContain('--mdc-theme-primary: teal');
  91. expect(css).toContain('--mdc-theme-secondary: crimson');
  92. });
  93. it('validate-keys Should throw error when unsupported key is provided',
  94. () => {
  95. const filePath = path.join(__dirname, 'theme-validate-keys.test.css');
  96. const css = fs.readFileSync(filePath, 'utf8').trim();
  97. expect(css).toContain('Unsupported keys found: foobar.');
  98. });
  99. it('validate-keys Should throw error when custom properties are provided',
  100. () => {
  101. const filePath = path.join(__dirname, 'theme-validate-keys.test.css');
  102. const css = fs.readFileSync(filePath, 'utf8').trim();
  103. expect(css).toContain(
  104. 'Custom properties are not supported for theme map keys: three');
  105. });
  106. });