Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test: more concise test helpers and unit tests #33

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
+1,868 −1,058
Open

test: more concise test helpers and unit tests #33

Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
a31c106
test: previous issues + resizable tests
RJWadley Feb 1, 2025
c54e15a
test: run build in github actions
RJWadley Feb 2, 2025
db77053
test: nesting tests for attribute selectors
RJWadley Feb 3, 2025
faf4c19
test: nesting tests for combinators
RJWadley Feb 3, 2025
7535643
test: add createNestingTest utility for less verbose tests
RJWadley Feb 4, 2025
83781c8
test: nesting tests for pseudo classes
RJWadley Feb 4, 2025
27782e1
test: nesting tests for pseudo elements
RJWadley Feb 4, 2025
7eb7a22
test: nesting tests for at-rules
RJWadley Feb 5, 2025
5f2af64
test: clean up test utilities
RJWadley Feb 5, 2025
5521e33
chore: update corepack, update pnpm
RJWadley Feb 6, 2025
c52827f
test: remove webkit & firefox
RJWadley Feb 6, 2025
7a4456f
chore: prompt installation if modules out of date
RJWadley Feb 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
test: nesting tests for attribute selectors
@RJWadley
RJWadley committed Feb 8, 2025

Verified

This commit was signed with the committer’s verified signature.
RJWadley Robbie Wadley
SSH Key Fingerprint: OHe2h4H2Gq/TEOSTku1W1rCDrUDm26rWm8M7lwCSweg
Verified
Learn about vigilant mode
commit db77053fdb397a9ed5e45584a3b685f2842ba4e2
917 changes: 917 additions & 0 deletions test/unit/deep-nesting/selector-attribute.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,917 @@
/**
* CSS Attribute Selectors
* @see https://www.w3schools.com/cssref/css_selectors.php#:~:text=CSS%20Attribute%20Selectors
*/

import { styled } from '../../../src/styled.js'
import { createUnitTest } from '../../createUnitTest.js'

createUnitTest({
name: 'deeply nesting attribute selectors',
test: styled('div', {
color: 'red',

'[lang]': {
color: 'green',

'[title]': {
color: 'blue',
},
},
})({
children: (
<>
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</>
),
}),
expect: (
<div className="a">
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</div>
),
css: (css) => css`
.a {
color: red;
[lang] {
color: green;
[title] {
color: blue;
}
}
}
`,
})

createUnitTest({
name: 'deeply nesting attribute value selectors',
test: styled('div', {
color: 'red',

'[lang="en"]': {
color: 'green',

'[title="example"]': {
color: 'blue',
},
},
})({
children: (
<>
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</>
),
}),
expect: (
<div className="a">
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</div>
),
css: (css) => css`
.a {
color: red;
[lang='en'] {
color: green;
[title='example'] {
color: blue;
}
}
}
`,
})

createUnitTest({
name: 'deeply nesting attribute contains word selectors',
test: styled('div', {
color: 'red',

'[lang~="en"]': {
color: 'green',

'[title~="example"]': {
color: 'blue',
},
},
})({
children: (
<>
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</>
),
}),
expect: (
<div className="a">
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</div>
),
css: (css) => css`
.a {
color: red;
[lang~='en'] {
color: green;
[title~='example'] {
color: blue;
}
}
}
`,
})

createUnitTest({
name: 'deeply nesting attribute starts with value selectors',
test: styled('div', {
color: 'red',

'[lang|="en"]': {
color: 'green',

'[title|="example"]': {
color: 'blue',
},
},
})({
children: (
<>
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</>
),
}),
expect: (
<div className="a">
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</div>
),
css: (css) => css`
.a {
color: red;
[lang|='en'] {
color: green;
[title|='example'] {
color: blue;
}
}
}
`,
})

createUnitTest({
name: 'deeply nesting attribute begins with value selectors',
test: styled('div', {
color: 'red',

'[lang^="en"]': {
color: 'green',

'[title^="example"]': {
color: 'blue',
},
},
})({
children: (
<>
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</>
),
}),
expect: (
<div className="a">
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</div>
),
css: (css) => css`
.a {
color: red;
[lang^='en'] {
color: green;
[title^='example'] {
color: blue;
}
}
}
`,
})

createUnitTest({
name: 'deeply nesting attribute ends with value selectors',
test: styled('div', {
color: 'red',

'[lang$="en"]': {
color: 'green',

'[title$="example"]': {
color: 'blue',
},
},
})({
children: (
<>
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</>
),
}),
expect: (
<div className="a">
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</div>
),
css: (css) => css`
.a {
color: red;
[lang$='en'] {
color: green;
[title$='example'] {
color: blue;
}
}
}
`,
})

createUnitTest({
name: 'deeply nesting attribute contains value selectors',
test: styled('div', {
color: 'red',

'[lang*="en"]': {
color: 'green',

'[title*="example"]': {
color: 'blue',
},
},
})({
children: (
<>
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</>
),
}),
expect: (
<div className="a">
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</div>
),
css: (css) => css`
.a {
color: red;
[lang*='en'] {
color: green;
[title*='example'] {
color: blue;
}
}
}
`,
})

createUnitTest({
name: 'deeply nesting attribute selectors with &',
fails: true,
test: styled('div', {
color: 'red',

'[lang]': {
color: 'green',

'& [title]': {
color: 'blue',
},
},
})({
children: (
<>
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</>
),
}),
expect: (
<div className="a">
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</div>
),
css: (css) => css`
.a {
color: red;
[lang] {
color: green;
& [title] {
color: blue;
}
}
}
`,
})

createUnitTest({
name: 'deeply nesting attribute value selectors with &',
fails: true,
test: styled('div', {
color: 'red',

'[lang="en"]': {
color: 'green',

'& [title="example"]': {
color: 'blue',
},
},
})({
children: (
<>
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</>
),
}),
expect: (
<div className="a">
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</div>
),
css: (css) => css`
.a {
color: red;
[lang='en'] {
color: green;
& [title='example'] {
color: blue;
}
}
}
`,
})

createUnitTest({
name: 'deeply nesting attribute contains word selectors with &',
fails: true,
test: styled('div', {
color: 'red',

'[lang~="en"]': {
color: 'green',

'& [title~="example"]': {
color: 'blue',
},
},
})({
children: (
<>
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</>
),
}),
expect: (
<div className="a">
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</div>
),
css: (css) => css`
.a {
color: red;
[lang~='en'] {
color: green;
& [title~='example'] {
color: blue;
}
}
}
`,
})

createUnitTest({
name: 'deeply nesting attribute starts with value selectors with &',
fails: true,
test: styled('div', {
color: 'red',

'[lang|="en"]': {
color: 'green',

'& [title|="example"]': {
color: 'blue',
},
},
})({
children: (
<>
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</>
),
}),
expect: (
<div className="a">
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</div>
),
css: (css) => css`
.a {
color: red;
[lang|='en'] {
color: green;
& [title|='example'] {
color: blue;
}
}
}
`,
})

createUnitTest({
name: 'deeply nesting attribute begins with value selectors with &',
fails: true,
test: styled('div', {
color: 'red',

'[lang^="en"]': {
color: 'green',

'& [title^="example"]': {
color: 'blue',
},
},
})({
children: (
<>
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</>
),
}),
expect: (
<div className="a">
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</div>
),
css: (css) => css`
.a {
color: red;
[lang^='en'] {
color: green;
& [title^='example'] {
color: blue;
}
}
}
`,
})

createUnitTest({
name: 'deeply nesting attribute ends with value selectors with &',
fails: true,
test: styled('div', {
color: 'red',

'[lang$="en"]': {
color: 'green',

'& [title$="example"]': {
color: 'blue',
},
},
})({
children: (
<>
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</>
),
}),
expect: (
<div className="a">
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</div>
),
css: (css) => css`
.a {
color: red;
[lang$='en'] {
color: green;
& [title$='example'] {
color: blue;
}
}
}
`,
})

createUnitTest({
name: 'deeply nesting attribute contains value selectors with &',
fails: true,
test: styled('div', {
color: 'red',

'[lang*="en"]': {
color: 'green',

'& [title*="example"]': {
color: 'blue',
},
},
})({
children: (
<>
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</>
),
}),
expect: (
<div className="a">
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</div>
),
css: (css) => css`
.a {
color: red;
[lang*='en'] {
color: green;
& [title*='example'] {
color: blue;
}
}
}
`,
})

createUnitTest({
name: 'deeply nesting attribute selectors with & (no space)',
test: styled('div', {
color: 'red',

'[lang]': {
color: 'green',

'&[title]': {
color: 'blue',
},
},
})({
children: (
<>
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</>
),
}),
expect: (
<div className="a">
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</div>
),
css: (css) => css`
.a {
color: red;
[lang] {
color: green;
&[title] {
color: blue;
}
}
}
`,
})

createUnitTest({
name: 'deeply nesting attribute value selectors with & (no space)',
test: styled('div', {
color: 'red',

'[lang="en"]': {
color: 'green',

'&[title="example"]': {
color: 'blue',
},
},
})({
children: (
<>
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</>
),
}),
expect: (
<div className="a">
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</div>
),
css: (css) => css`
.a {
color: red;
[lang='en'] {
color: green;
&[title='example'] {
color: blue;
}
}
}
`,
})

createUnitTest({
name: 'deeply nesting attribute contains word selectors with & (no space)',
test: styled('div', {
color: 'red',

'[lang~="en"]': {
color: 'green',

'&[title~="example"]': {
color: 'blue',
},
},
})({
children: (
<>
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</>
),
}),
expect: (
<div className="a">
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</div>
),
css: (css) => css`
.a {
color: red;
[lang~='en'] {
color: green;
&[title~='example'] {
color: blue;
}
}
}
`,
})

createUnitTest({
name: 'deeply nesting attribute starts with value selectors with & (no space)',
test: styled('div', {
color: 'red',

'[lang|="en"]': {
color: 'green',

'&[title|="example"]': {
color: 'blue',
},
},
})({
children: (
<>
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</>
),
}),
expect: (
<div className="a">
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</div>
),
css: (css) => css`
.a {
color: red;
[lang|='en'] {
color: green;
&[title|='example'] {
color: blue;
}
}
}
`,
})

createUnitTest({
name: 'deeply nesting attribute begins with value selectors with & (no space)',
test: styled('div', {
color: 'red',

'[lang^="en"]': {
color: 'green',

'&[title^="example"]': {
color: 'blue',
},
},
})({
children: (
<>
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</>
),
}),
expect: (
<div className="a">
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</div>
),
css: (css) => css`
.a {
color: red;
[lang^='en'] {
color: green;
&[title^='example'] {
color: blue;
}
}
}
`,
})

createUnitTest({
name: 'deeply nesting attribute ends with value selectors with & (no space)',
test: styled('div', {
color: 'red',

'[lang$="en"]': {
color: 'green',

'&[title$="example"]': {
color: 'blue',
},
},
})({
children: (
<>
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</>
),
}),
expect: (
<div className="a">
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</div>
),
css: (css) => css`
.a {
color: red;
[lang$='en'] {
color: green;
&[title$='example'] {
color: blue;
}
}
}
`,
})

createUnitTest({
name: 'deeply nesting attribute contains value selectors with & (no space)',
test: styled('div', {
color: 'red',

'[lang*="en"]': {
color: 'green',

'&[title*="example"]': {
color: 'blue',
},
},
})({
children: (
<>
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</>
),
}),
expect: (
<div className="a">
<div lang="en">
<div title="example" />
</div>
<div title="example" />
</div>
),
css: (css) => css`
.a {
color: red;
[lang*='en'] {
color: green;
&[title*='example'] {
color: blue;
}
}
}
`,
})
511 changes: 511 additions & 0 deletions test/unit/shallow-nesting/selector-attribute.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,511 @@
/**
* CSS Attribute Selectors
* @see https://www.w3schools.com/cssref/css_selectors.php#:~:text=CSS%20Attribute%20Selectors
*/

import { styled } from '../../../src/styled.js'
import { createUnitTest } from '../../createUnitTest.js'

createUnitTest({
name: 'attribute selector',
test: styled('div', {
color: 'red',

'[lang]': {
color: 'blue',
},
})({ children: <div lang="en" /> }),
expect: (
<div className="a">
<div lang="en" />
</div>
),
css: (css) => css`
.a {
color: red;
[lang] {
color: blue;
}
}
`,
})

createUnitTest({
name: 'attribute value selector',
test: styled('div', {
color: 'red',

'[lang="it"]': {
color: 'blue',
},
})({ children: <div lang="it" /> }),
expect: (
<div className="a">
<div lang="it" />
</div>
),
css: (css) => css`
.a {
color: red;
[lang='it'] {
color: blue;
}
}
`,
})

createUnitTest({
name: 'attribute contains word selector',
test: styled('div', {
color: 'red',

'[title~="flower"]': {
color: 'blue',
},
})({ children: <div title="beautiful flower" /> }),
expect: (
<div className="a">
<div title="beautiful flower" />
</div>
),
css: (css) => css`
.a {
color: red;
[title~='flower'] {
color: blue;
}
}
`,
})

createUnitTest({
name: 'attribute starts with value selector',
test: styled('div', {
color: 'red',

'[lang|="en"]': {
color: 'blue',
},
})({ children: <div lang="en-US" /> }),
expect: (
<div className="a">
<div lang="en-US" />
</div>
),
css: (css) => css`
.a {
color: red;
[lang|='en'] {
color: blue;
}
}
`,
})

createUnitTest({
name: 'attribute begins with value selector',
test: styled('div', {
color: 'red',

'[href^="https"]': {
color: 'blue',
},
})({ children: <a href="https://example.com" /> }),
expect: (
<div className="a">
<a href="https://example.com" />
</div>
),
css: (css) => css`
.a {
color: red;
[href^='https'] {
color: blue;
}
}
`,
})

createUnitTest({
name: 'attribute ends with value selector',
test: styled('div', {
color: 'red',

'[href$=".pdf"]': {
color: 'blue',
},
})({ children: <a href="document.pdf" /> }),
expect: (
<div className="a">
<a href="document.pdf" />
</div>
),
css: (css) => css`
.a {
color: red;
[href$='.pdf'] {
color: blue;
}
}
`,
})

createUnitTest({
name: 'attribute contains value selector',
test: styled('div', {
color: 'red',

'[href*="w3schools"]': {
color: 'blue',
},
})({ children: <a href="https://www.w3schools.com" /> }),
expect: (
<div className="a">
<a href="https://www.w3schools.com" />
</div>
),
css: (css) => css`
.a {
color: red;
[href*='w3schools'] {
color: blue;
}
}
`,
})

createUnitTest({
name: 'nesting attribute selector with &',
test: styled('div', {
color: 'red',

'& [lang]': {
color: 'blue',
},
})({ children: <div lang="en" /> }),
expect: (
<div className="a">
<div lang="en" />
</div>
),
css: (css) => css`
.a {
color: red;
& [lang] {
color: blue;
}
}
`,
})

createUnitTest({
name: 'nesting attribute value selector with &',
test: styled('div', {
color: 'red',

'& [lang="it"]': {
color: 'blue',
},
})({ children: <div lang="it" /> }),
expect: (
<div className="a">
<div lang="it" />
</div>
),
css: (css) => css`
.a {
color: red;
& [lang='it'] {
color: blue;
}
}
`,
})

createUnitTest({
name: 'nesting attribute contains word selector with &',
test: styled('div', {
color: 'red',

'& [title~="flower"]': {
color: 'blue',
},
})({ children: <div title="beautiful flower" /> }),
expect: (
<div className="a">
<div title="beautiful flower" />
</div>
),
css: (css) => css`
.a {
color: red;
& [title~='flower'] {
color: blue;
}
}
`,
})

createUnitTest({
name: 'nesting attribute starts with value selector with &',
test: styled('div', {
color: 'red',

'& [lang|="en"]': {
color: 'blue',
},
})({ children: <div lang="en-US" /> }),
expect: (
<div className="a">
<div lang="en-US" />
</div>
),
css: (css) => css`
.a {
color: red;
& [lang|='en'] {
color: blue;
}
}
`,
})

createUnitTest({
name: 'nesting attribute begins with value selector with &',
test: styled('div', {
color: 'red',

'& [href^="https"]': {
color: 'blue',
},
})({ children: <a href="https://example.com" /> }),
expect: (
<div className="a">
<a href="https://example.com" />
</div>
),
css: (css) => css`
.a {
color: red;
& [href^='https'] {
color: blue;
}
}
`,
})

createUnitTest({
name: 'nesting attribute ends with value selector with &',
test: styled('div', {
color: 'red',

'& [href$=".pdf"]': {
color: 'blue',
},
})({ children: <a href="document.pdf" /> }),
expect: (
<div className="a">
<a href="document.pdf" />
</div>
),
css: (css) => css`
.a {
color: red;
& [href$='.pdf'] {
color: blue;
}
}
`,
})

createUnitTest({
name: 'nesting attribute contains value selector with &',
test: styled('div', {
color: 'red',

'& [href*="w3schools"]': {
color: 'blue',
},
})({ children: <a href="https://www.w3schools.com" /> }),
expect: (
<div className="a">
<a href="https://www.w3schools.com" />
</div>
),
css: (css) => css`
.a {
color: red;
& [href*='w3schools'] {
color: blue;
}
}
`,
})

createUnitTest({
name: 'nesting attribute selector with & (no space)',
test: styled('div', {
color: 'red',

'&[lang]': {
color: 'blue',
},
})({ children: <div lang="en" /> }),
expect: (
<div className="a">
<div lang="en" />
</div>
),
css: (css) => css`
.a {
color: red;
&[lang] {
color: blue;
}
}
`,
})

createUnitTest({
name: 'nesting attribute value selector with & (no space)',
test: styled('div', {
color: 'red',

'&[lang="it"]': {
color: 'blue',
},
})({ children: <div lang="it" /> }),
expect: (
<div className="a">
<div lang="it" />
</div>
),
css: (css) => css`
.a {
color: red;
&[lang='it'] {
color: blue;
}
}
`,
})

createUnitTest({
name: 'nesting attribute contains word selector with & (no space)',
test: styled('div', {
color: 'red',

'&[title~="flower"]': {
color: 'blue',
},
})({ children: <div title="beautiful flower" /> }),
expect: (
<div className="a">
<div title="beautiful flower" />
</div>
),
css: (css) => css`
.a {
color: red;
&[title~='flower'] {
color: blue;
}
}
`,
})

createUnitTest({
name: 'nesting attribute starts with value selector with & (no space)',
test: styled('div', {
color: 'red',

'&[lang|="en"]': {
color: 'blue',
},
})({ children: <div lang="en-US" /> }),
expect: (
<div className="a">
<div lang="en-US" />
</div>
),
css: (css) => css`
.a {
color: red;
&[lang|='en'] {
color: blue;
}
}
`,
})

createUnitTest({
name: 'nesting attribute begins with value selector with & (no space)',
test: styled('div', {
color: 'red',

'&[href^="https"]': {
color: 'blue',
},
})({ children: <a href="https://example.com" /> }),
expect: (
<div className="a">
<a href="https://example.com" />
</div>
),
css: (css) => css`
.a {
color: red;
&[href^='https'] {
color: blue;
}
}
`,
})

createUnitTest({
name: 'nesting attribute ends with value selector with & (no space)',
test: styled('div', {
color: 'red',

'&[href$=".pdf"]': {
color: 'blue',
},
})({ children: <a href="document.pdf" /> }),
expect: (
<div className="a">
<a href="document.pdf" />
</div>
),
css: (css) => css`
.a {
color: red;
&[href$='.pdf'] {
color: blue;
}
}
`,
})

createUnitTest({
name: 'nesting attribute contains value selector with & (no space)',
test: styled('div', {
color: 'red',

'&[href*="w3schools"]': {
color: 'blue',
},
})({ children: <a href="https://www.w3schools.com" /> }),
expect: (
<div className="a">
<a href="https://www.w3schools.com" />
</div>
),
css: (css) => css`
.a {
color: red;
&[href*='w3schools'] {
color: blue;
}
}
`,
})