Skip to content

Commit

Permalink
Add sass-embedded as alternative to all sass tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@joostmeijles
joostmeijles committed Apr 18, 2024
1 parent 8d08562 commit 652602d
Show file tree
Hide file tree
Showing 37 changed files with 873 additions and 531 deletions.
80 changes: 46 additions & 34 deletions test/e2e/app-dir/scss/3rd-party-module/3rd-party-module.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,42 +3,54 @@
import { nextTestSetup } from 'e2e-utils'
import { colorToRgb } from 'next-test-utils'

describe('3rd Party CSS Module Support', () => {
const { next } = nextTestSetup({
files: __dirname,
dependencies: {
sass: '1.54.0',
describe.each([
{ dependencies: { sass: '1.54.0' }, nextConfig: undefined },
{
dependencies: { 'sass-embedded': '1.75.0' },
nextConfig: {
sassOptions: {
implementation: 'sass-embedded',
},
},
})
},
])(
'3rd Party CSS Module Support ($package)',
({ dependencies, nextConfig }) => {
const { next } = nextTestSetup({
files: __dirname,
dependencies,
nextConfig,
})

it('should render the module', async () => {
const browser = await next.browser('/')
// Bar
expect(
await browser
.elementByCss('#verify-div .bar')
.getComputedCss('background-color')
).toBe(colorToRgb('blue'))
it('should render the module', async () => {
const browser = await next.browser('/')
// Bar
expect(
await browser
.elementByCss('#verify-div .bar')
.getComputedCss('background-color')
).toBe(colorToRgb('blue'))

// Baz
expect(
await browser
.elementByCss('#verify-div .baz')
.getComputedCss('background-color')
).toBe(colorToRgb('blue'))
// Baz
expect(
await browser
.elementByCss('#verify-div .baz')
.getComputedCss('background-color')
).toBe(colorToRgb('blue'))

// Lol
expect(
await browser
.elementByCss('#verify-div .lol')
.getComputedCss('background-color')
).toBe(colorToRgb('red'))
// Lol
expect(
await browser
.elementByCss('#verify-div .lol')
.getComputedCss('background-color')
).toBe(colorToRgb('red'))

// Lel
expect(
await browser
.elementByCss('#verify-div .lel')
.getComputedCss('background-color')
).toBe(colorToRgb('green'))
})
})
// Lel
expect(
await browser
.elementByCss('#verify-div .lel')
.getComputedCss('background-color')
).toBe(colorToRgb('green'))
})
}
)
38 changes: 25 additions & 13 deletions test/e2e/app-dir/scss/basic-module-additional-data/basic-module-additional-data.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,30 @@
import { nextTestSetup } from 'e2e-utils'
import { colorToRgb } from 'next-test-utils'

describe('Basic Module Additional Data Support', () => {
const { next } = nextTestSetup({
files: __dirname,
dependencies: {
sass: '1.54.0',
describe.each([
{ dependencies: { sass: '1.54.0' }, nextConfig: undefined },
{
dependencies: { 'sass-embedded': '1.75.0' },
nextConfig: {
sassOptions: {
implementation: 'sass-embedded',
},
},
})
},
])(
'Basic Module Additional Data Support ($package)',
({ dependencies, nextConfig }) => {
const { next } = nextTestSetup({
files: __dirname,
dependencies,
nextConfig,
})

it('should render the module', async () => {
const browser = await next.browser('/')
expect(
await browser.elementByCss('#verify-red').getComputedCss('color')
).toBe(colorToRgb('red'))
})
})
it('should render the module', async () => {
const browser = await next.browser('/')
expect(
await browser.elementByCss('#verify-red').getComputedCss('color')
).toBe(colorToRgb('red'))
})
}
)
20 changes: 0 additions & 20 deletions ...sic-module-implementation-embedded-sass/basic-module-implementation-sass-embedded.test.ts
View file

This file was deleted.

5 changes: 0 additions & 5 deletions test/e2e/app-dir/scss/basic-module-implementation-embedded-sass/next.config.js
View file

This file was deleted.

9 changes: 0 additions & 9 deletions test/e2e/app-dir/scss/basic-module-implementation-embedded-sass/pages/index.js
View file

This file was deleted.

4 changes: 0 additions & 4 deletions test/e2e/app-dir/scss/basic-module-implementation-embedded-sass/pages/index.module.scss
View file

This file was deleted.

38 changes: 25 additions & 13 deletions test/e2e/app-dir/scss/basic-module-include-paths/basic-module-include-paths.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,30 @@
import { nextTestSetup } from 'e2e-utils'
import { colorToRgb } from 'next-test-utils'

describe('Basic Module Include Paths Support', () => {
const { next } = nextTestSetup({
files: __dirname,
dependencies: {
sass: '1.54.0',
describe.each([
{ dependencies: { sass: '1.54.0' }, nextConfig: undefined },
{
dependencies: { 'sass-embedded': '1.75.0' },
nextConfig: {
sassOptions: {
implementation: 'sass-embedded',
},
},
})
},
])(
'Basic Module Include Paths Support ($package)',
({ dependencies, nextConfig }) => {
const { next } = nextTestSetup({
files: __dirname,
dependencies,
nextConfig,
})

it('should render the module', async () => {
const browser = await next.browser('/')
expect(
await browser.elementByCss('#verify-red').getComputedCss('color')
).toBe(colorToRgb('red'))
})
})
it('should render the module', async () => {
const browser = await next.browser('/')
expect(
await browser.elementByCss('#verify-red').getComputedCss('color')
).toBe(colorToRgb('red'))
})
}
)
38 changes: 25 additions & 13 deletions test/e2e/app-dir/scss/basic-module-prepend-data/basic-module-prepend-data.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,30 @@
import { nextTestSetup } from 'e2e-utils'
import { colorToRgb } from 'next-test-utils'

describe('Basic Module Prepend Data Support', () => {
const { next } = nextTestSetup({
files: __dirname,
dependencies: {
sass: '1.54.0',
describe.each([
{ dependencies: { sass: '1.54.0' }, nextConfig: undefined },
{
dependencies: { 'sass-embedded': '1.75.0' },
nextConfig: {
sassOptions: {
implementation: 'sass-embedded',
},
},
})
},
])(
'Basic Module Prepend Data Support ($package)',
({ dependencies, nextConfig }) => {
const { next } = nextTestSetup({
files: __dirname,
dependencies,
nextConfig,
})

it('should render the module', async () => {
const browser = await next.browser('/')
expect(
await browser.elementByCss('#verify-red').getComputedCss('color')
).toBe(colorToRgb('red'))
})
})
it('should render the module', async () => {
const browser = await next.browser('/')
expect(
await browser.elementByCss('#verify-red').getComputedCss('color')
).toBe(colorToRgb('red'))
})
}
)
17 changes: 13 additions & 4 deletions test/e2e/app-dir/scss/basic-module/basic-module.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,21 @@
import { nextTestSetup } from 'e2e-utils'
import { colorToRgb } from 'next-test-utils'

describe('Basic SCSS Module Support', () => {
describe.each([
{ dependencies: { sass: '1.54.0' }, nextConfig: undefined },
{
dependencies: { 'sass-embedded': '1.75.0' },
nextConfig: {
sassOptions: {
implementation: 'sass-embedded',
},
},
},
])('Basic SCSS Module Support ($package)', ({ dependencies, nextConfig }) => {
const { next } = nextTestSetup({
files: __dirname,
dependencies: {
sass: '1.54.0',
},
dependencies,
nextConfig,
})

it('should render the module', async () => {
Expand Down
38 changes: 25 additions & 13 deletions test/e2e/app-dir/scss/catch-all-module/catch-all-module.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,30 @@
import { nextTestSetup } from 'e2e-utils'
import { colorToRgb } from 'next-test-utils'

describe('Catch-all Route CSS Module Usage', () => {
const { next } = nextTestSetup({
files: __dirname,
dependencies: {
sass: '1.54.0',
describe.each([
{ dependencies: { sass: '1.54.0' }, nextConfig: undefined },
{
dependencies: { 'sass-embedded': '1.75.0' },
nextConfig: {
sassOptions: {
implementation: 'sass-embedded',
},
},
})
},
])(
'Catch-all Route CSS Module Usage ($package)',
({ dependencies, nextConfig }) => {
const { next } = nextTestSetup({
files: __dirname,
dependencies,
nextConfig,
})

it('should render the module', async () => {
const browser = await next.browser('/post')
expect(
await browser.elementByCss('#my-div').getComputedCss('background-color')
).toBe(colorToRgb('red'))
})
})
it('should render the module', async () => {
const browser = await next.browser('/post')
expect(
await browser.elementByCss('#my-div').getComputedCss('background-color')
).toBe(colorToRgb('red'))
})
}
)
17 changes: 13 additions & 4 deletions test/e2e/app-dir/scss/compilation-and-prefixing/compilation-and-prefixing.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,21 @@ import { nextTestSetup } from 'e2e-utils'
import { readdir, readFile } from 'fs-extra'
import { join } from 'path'

describe('SCSS Support', () => {
describe.each([
{ dependencies: { sass: '1.54.0' }, nextConfig: undefined },
{
dependencies: { 'sass-embedded': '1.75.0' },
nextConfig: {
sassOptions: {
implementation: 'sass-embedded',
},
},
},
])('SCSS Support ($package)', ({ dependencies, nextConfig }) => {
const { next, isNextDev } = nextTestSetup({
files: __dirname,
dependencies: {
sass: '1.54.0',
},
dependencies,
nextConfig,
})

// TODO: Figure out this test for dev and Turbopack
Expand Down
Loading

0 comments on commit 652602d

Please sign in to comment.