From 1030675522b37fc065d5f123b7d31b0b06cdad44 Mon Sep 17 00:00:00 2001 From: Ido Rosenthal Date: Wed, 20 Sep 2023 14:10:36 +0300 Subject: [PATCH] test: modify tests to new default --- .../test/features/st-custom-selector.spec.ts | 9 +- packages/core/test/features/st-global.spec.ts | 59 +++---- .../test/stylable-transformer/general.spec.ts | 148 +++++++++--------- .../test/stylable-transformer/nesting.spec.ts | 64 ++++---- .../features/ls-css-pseudo-class.spec.ts | 5 +- .../lib/completions/custom-selectors.spec.ts | 35 ++++- 6 files changed, 172 insertions(+), 148 deletions(-) diff --git a/packages/core/test/features/st-custom-selector.spec.ts b/packages/core/test/features/st-custom-selector.spec.ts index 73a2fb9a0e..1e12032aae 100644 --- a/packages/core/test/features/st-custom-selector.spec.ts +++ b/packages/core/test/features/st-custom-selector.spec.ts @@ -1,5 +1,5 @@ import chaiSubset from 'chai-subset'; -import { STCustomSelector, CSSType } from '@stylable/core/dist/features'; +import { STCustomSelector, CSSType, CSSPseudoClass } from '@stylable/core/dist/features'; import { testStylableCore, shouldReportNoDiagnostics, @@ -11,6 +11,7 @@ chai.use(chaiSubset); const customSelectorDiagnostics = diagnosticBankReportToStrings(STCustomSelector.diagnostics); const cssTypeDiagnostics = diagnosticBankReportToStrings(CSSType.diagnostics); +const pseudoClassDiagnostics = diagnosticBankReportToStrings(CSSPseudoClass.diagnostics); describe('features/st-custom-selector', () => { // ToDo: migrate to @st-part @@ -59,8 +60,6 @@ describe('features/st-custom-selector', () => { shouldReportNoDiagnostics(meta); }); it('should handle unknown custom selector', () => { - // ToDo: remove diagnostic once experimentalSelectorInference is the default - // it will fallback to pseudo-class transform and then to unknown pseudo-class testStylableCore(` /* @analyze-error(in custom) word(:--unknown) ${customSelectorDiagnostics.UNKNOWN_CUSTOM_SELECTOR( ':--unknown' @@ -68,8 +67,8 @@ describe('features/st-custom-selector', () => { @custom-selector :--x .before:--unknown.after; /* - @transform-error(in selector) word(:--unknown) ${customSelectorDiagnostics.UNKNOWN_CUSTOM_SELECTOR( - ':--unknown' + @transform-error(in selector) word(--unknown) ${pseudoClassDiagnostics.UNKNOWN_STATE_USAGE( + '--unknown' )} @rule .entry__before:--unknown.entry__after {} */ diff --git a/packages/core/test/features/st-global.spec.ts b/packages/core/test/features/st-global.spec.ts index 3ce9688d68..b1bef94681 100644 --- a/packages/core/test/features/st-global.spec.ts +++ b/packages/core/test/features/st-global.spec.ts @@ -89,47 +89,48 @@ describe(`features/st-global`, () => { const expectedGlobalRules = collectAst(meta.sourceAst, ['global']); expect(actualGlobalRules).to.eql(expectedGlobalRules['global']); }); - it('should continue inferred selector after :global()', () => { - // ToDo: remove once experimentalSelectorInference is the default + it('should set wildcard inferred selector to context after :global()', () => { testStylableCore({ - 'comp.st.css': `.part {} `, + 'comp.st.css': ` .part {} `, 'entry.st.css': ` - @st-import Comp from './comp.st.css'; - .class { -st-states: state; } - /* @rule(state) .entry__class.g.entry--state */ - .class:global(.g):state {} + @st-import Comp from './comp.st.css'; + .class { -st-states: state('.class-state'); } - /* @rule(pseudo-element) .comp__root.g .comp__part */ - Comp:global(.g)::part {} + /* @rule(root state) .entry__class.g:state */ + .class:global(.g):state {} - /* @rule(unknown pseudo-element) .comp__root.g::class */ - Comp:global(.g)::class {} - `, + /* @rule(unknown comp pseudo-element) .comp__root.g::part */ + Comp:global(.g)::part {} + + /* @rule(unknown pseudo-element) .comp__root.g::class */ + Comp:global(.g)::class {} + + /* @rule(universal pseudo-element) .comp__root.g ::class */ + Comp:global(.g) ::class {} + `, }); }); - describe('experimentalSelectorInference', () => { - it('should set wildcard inferred selector to context after :global()', () => { + describe('experimentalSelectorInference=false', () => { + it('should continue inferred selector after :global()', () => { testStylableCore( { - 'comp.st.css': ` .part {} `, + 'comp.st.css': `.part {} `, 'entry.st.css': ` - @st-import Comp from './comp.st.css'; - .class { -st-states: state('.class-state'); } + @st-import Comp from './comp.st.css'; + .class { -st-states: state; } + /* @rule(state) .entry__class.g.entry--state */ + .class:global(.g):state {} - /* @rule(root state) .entry__class.g:state */ - .class:global(.g):state {} - - /* @rule(unknown comp pseudo-element) .comp__root.g::part */ - Comp:global(.g)::part {} + /* @rule(pseudo-element) .comp__root.g .comp__part */ + Comp:global(.g)::part {} - /* @rule(unknown pseudo-element) .comp__root.g::class */ - Comp:global(.g)::class {} - - /* @rule(universal pseudo-element) .comp__root.g ::class */ - Comp:global(.g) ::class {} - `, + /* @rule(unknown pseudo-element) .comp__root.g::class */ + Comp:global(.g)::class {} + `, }, - { stylableConfig: { experimentalSelectorInference: true } } + { + stylableConfig: { experimentalSelectorInference: false }, + } ); }); }); diff --git a/packages/core/test/stylable-transformer/general.spec.ts b/packages/core/test/stylable-transformer/general.spec.ts index 1c79bace1d..17de418969 100644 --- a/packages/core/test/stylable-transformer/general.spec.ts +++ b/packages/core/test/stylable-transformer/general.spec.ts @@ -52,99 +52,97 @@ describe('Stylable postcss transform (General)', () => { expect(rule2.nodes[0].toString(), 'color1').to.equal('color: red'); expect(rule2.nodes[1].toString(), 'color1').to.equal('color: blue'); }); - it('should continue inferred selector after combinator', () => { - // ToDo: remove once experimentalSelectorInference is the default - testStylableCore({ - 'comp.st.css': `.part {} `, - 'entry.st.css': ` - @st-import Comp from './comp.st.css'; + it('should set default inferred selector context to universal selector', () => { + testStylableCore( + ` + .root { -st-states: state; } .class { -st-states: state; } - - /* @rule(state) .entry__class .entry--state */ - .class :state {} - - /* @rule(pseudo-element) .comp__root .comp__part */ - Comp ::part {} - - /* @rule(unknown pseudo-element) .comp__root ::class */ - Comp ::class {} - `, - }); - }); - it('should continue inferred selector after universal', () => { - // ToDo: remove once experimentalSelectorInference is the default - testStylableCore(` - .root { -st-states: state; } - .part {} - - /* @rule(state) *.entry--state */ - *:state {} - /* @rule(element) * .entry__part */ - *::part {} - `); + /* + @transform-error(unknown state) ${cssPseudoClassDiagnostics.UNKNOWN_STATE_USAGE( + 'state' + )} + @rule(unknown state) :state + */ + :state {} + + /* + @transform-error(unknown pseudo-element) ${transformerStringDiagnostics.UNKNOWN_PSEUDO_ELEMENT( + `class` + )} + @rule(unknown pseudo-element) ::class + */ + ::class {} + ` + ); }); - - describe('experimentalSelectorInference', () => { - it('should set default inferred selector context to universal selector', () => { - testStylableCore( - ` - .root { -st-states: state; } + it('should reset inferred selector after combinator', () => { + testStylableCore({ + 'comp.st.css': ` .part {} `, + 'entry.st.css': ` + @st-import Comp from './comp.st.css'; .class { -st-states: state; } - /* - @transform-error(unknown state) ${cssPseudoClassDiagnostics.UNKNOWN_STATE_USAGE( - 'state' - )} - @rule(unknown state) :state - */ - :state {} + /* @rule(unknown state) .entry__class :state */ + .class :state {} + + /* @rule(unknown pseudo-element) .comp__root ::part */ + Comp ::part {} - /* - @transform-error(unknown pseudo-element) ${transformerStringDiagnostics.UNKNOWN_PSEUDO_ELEMENT( - `class` - )} - @rule(unknown pseudo-element) ::class - */ - ::class {} + /* @rule(standalone pseudo-element) .comp__root ::class */ + Comp ::class {} `, - { stylableConfig: { experimentalSelectorInference: true } } - ); }); - it('should reset inferred selector after combinator', () => { + }); + it('should set inferred selector after universal (to universal)', () => { + testStylableCore( + ` + .root { -st-states: state; } + .part {} + + /* @rule(state) *:state */ + *:state {} + + /* @rule(element) *::part */ + *::part {} + ` + ); + }); + describe('experimentalSelectorInference', () => { + it('should continue inferred selector after combinator', () => { testStylableCore( { - 'comp.st.css': ` .part {} `, + 'comp.st.css': `.part {} `, 'entry.st.css': ` - @st-import Comp from './comp.st.css'; - .class { -st-states: state; } + @st-import Comp from './comp.st.css'; + .class { -st-states: state; } + + /* @rule(state) .entry__class .entry--state */ + .class :state {} - /* @rule(unknown state) .entry__class :state */ - .class :state {} - - /* @rule(unknown pseudo-element) .comp__root ::part */ - Comp ::part {} + /* @rule(pseudo-element) .comp__root .comp__part */ + Comp ::part {} - /* @rule(standalone pseudo-element) .comp__root ::class */ - Comp ::class {} - `, + /* @rule(unknown pseudo-element) .comp__root ::class */ + Comp ::class {} + `, }, - { stylableConfig: { experimentalSelectorInference: true } } + { stylableConfig: { experimentalSelectorInference: false } } ); }); - it('should set inferred selector after universal (to universal)', () => { + it('should continue inferred selector after universal', () => { testStylableCore( ` - .root { -st-states: state; } - .part {} - - /* @rule(state) *:state */ - *:state {} - - /* @rule(element) *::part */ - *::part {} - `, - { stylableConfig: { experimentalSelectorInference: true } } + .root { -st-states: state; } + .part {} + + /* @rule(state) *.entry--state */ + *:state {} + + /* @rule(element) * .entry__part */ + *::part {} + `, + { stylableConfig: { experimentalSelectorInference: false } } ); }); }); diff --git a/packages/core/test/stylable-transformer/nesting.spec.ts b/packages/core/test/stylable-transformer/nesting.spec.ts index cd81e26adb..323516cacf 100644 --- a/packages/core/test/stylable-transformer/nesting.spec.ts +++ b/packages/core/test/stylable-transformer/nesting.spec.ts @@ -89,40 +89,48 @@ describe('transformer/nesting', () => { */ &:onlyX {} } - `, - { stylableConfig: { experimentalSelectorInference: true } } + ` ); }); - it('should infer to universal selector without nesting selector', () => { - testStylableCore(` - .root { - -st-states: x; - } - .part { - -st-states: x; - } + describe('experimentalSelectorInference=false', () => { + it('should infer to universal selector without nesting selector', () => { + testStylableCore( + ` + .root { + -st-states: x; + } + .part { + -st-states: x; + } - .part { - /* - @transform-error(first) ${cssPseudoClassDiagnostics.UNKNOWN_STATE_USAGE('x')} - @rule(first) :x - */ - :x {} + .part { + /* + @transform-error(first) ${cssPseudoClassDiagnostics.UNKNOWN_STATE_USAGE( + 'x' + )} + @rule(first) :x + */ + :x {} + + /* + @transform-error(after combinator) ${cssPseudoClassDiagnostics.UNKNOWN_STATE_USAGE( + 'x' + )} + @rule(after combinator) .entry__root :x + */ + .root :x {} + } /* - @transform-error(after combinator) ${cssPseudoClassDiagnostics.UNKNOWN_STATE_USAGE( - 'x' - )} - @rule(after combinator) .entry__root :x + legacy behavior without "experimentalSelectorInference" + @rule(after combinator) .entry__root .entry--x */ .root :x {} - } - - /* - legacy behavior without "experimentalSelectorInference" - @rule(after combinator) .entry__root .entry--x - */ - .root :x {} - `); + `, + { + stylableConfig: { experimentalSelectorInference: false }, + } + ); + }); }); }); diff --git a/packages/language-service/test/lib-new/features/ls-css-pseudo-class.spec.ts b/packages/language-service/test/lib-new/features/ls-css-pseudo-class.spec.ts index 7215ba238f..0da4fa2675 100644 --- a/packages/language-service/test/lib-new/features/ls-css-pseudo-class.spec.ts +++ b/packages/language-service/test/lib-new/features/ls-css-pseudo-class.spec.ts @@ -538,7 +538,6 @@ describe('LS: css-pseudo-class', () => { } } - /* currently nesting in non-& reset to root - this behavior might change */ .part { :hover { &^nestUnderNonAmp^ @@ -561,8 +560,8 @@ describe('LS: css-pseudo-class', () => { assertCompletions('/entry.st.css', ({ filePath, carets }) => ({ message: 'nestUnderNonAmp', actualList: service.onCompletion(filePath, carets.nestUnderNonAmp), - expectedList: [{ label: ':root-state' }], - unexpectedList: [{ label: ':part-state' }], + expectedList: [], + unexpectedList: [{ label: ':part-state' }, { label: ':root-state' }], })); }); }); diff --git a/packages/language-service/test/lib/completions/custom-selectors.spec.ts b/packages/language-service/test/lib/completions/custom-selectors.spec.ts index 09e764301a..ef3f34484b 100644 --- a/packages/language-service/test/lib/completions/custom-selectors.spec.ts +++ b/packages/language-service/test/lib/completions/custom-selectors.spec.ts @@ -300,9 +300,8 @@ describe('Custom Selectors', () => { asserter.suggested(exp); asserter.notSuggested(notExp); }); - it( - 'should not have states when custom selector is grouped, with prefix ' + + 'should have states when custom selector is grouped with the same inferred selector, with prefix ' + prefix + ' ', () => { @@ -311,10 +310,20 @@ describe('Custom Selectors', () => { 'custom-selectors/imported-selector-grouped.st.css', prefix ); + const exp: Array> = []; const notExp: Array> = []; - notExp.push(createCompletion(str3, rng, './top-import.st.css')); - notExp.push(createCompletion(str4, rng, './top-import.st.css')); - asserter.notSuggested(notExp); + if (!prefix || str3.indexOf(prefix) === 0) { + exp.push(createCompletion(str3, rng, './top-import.st.css')); + } else { + notExp.push(createCompletion(str3, rng, './top-import.st.css')); + } + if (!prefix || str4.indexOf(prefix) === 0) { + exp.push(createCompletion(str4, rng, './top-import.st.css')); + } else { + notExp.push(createCompletion(str4, rng, './top-import.st.css')); + } + + asserter.suggested(exp); } ); }); @@ -366,7 +375,7 @@ describe('Custom Selectors', () => { ); it( - 'should not have pseudo-elements when custom selector is grouped, with prefix ' + + 'should have pseudo-elements when custom selector is grouped with the same inferred selector, with prefix ' + prefix + ' ', () => { @@ -375,9 +384,19 @@ describe('Custom Selectors', () => { 'custom-selectors/imported-selector-grouped.st.css', prefix ); + const exp: Array> = []; const notExp: Array> = []; - notExp.push(createCompletion(str5, rng, './top-import.st.css')); - notExp.push(createCompletion(str6, rng, './top-import.st.css')); + if (!prefix || str5.indexOf(prefix) === 0) { + exp.push(createCompletion(str5, rng, './top-import.st.css')); + } else { + notExp.push(createCompletion(str5, rng, './top-import.st.css')); + } + if (!prefix || str6.indexOf(prefix) === 0) { + exp.push(createCompletion(str6, rng, './top-import.st.css')); + } else { + notExp.push(createCompletion(str6, rng, './top-import.st.css')); + } + asserter.suggested(exp); asserter.notSuggested(notExp); } );