File tree Expand file tree Collapse file tree 2 files changed +30
-16
lines changed
examples/basic/src/routes/style-server Expand file tree Collapse file tree 2 files changed +30
-16
lines changed Original file line number Diff line number Diff line change @@ -855,31 +855,42 @@ function defineTest(f: Fixture) {
855
855
'rgb(255, 165, 0)' ,
856
856
)
857
857
858
- // remove css import
859
858
const editor = f . createEditor ( 'src/routes/style-server/server.tsx' )
860
- editor . edit ( ( s ) =>
861
- s . replaceAll ( `import './server.css'` , `/* import './server.css' */` ) ,
862
- )
859
+
860
+ // removing and adding new css works via hmr
861
+ {
862
+ await using _ = await expectNoReload ( page )
863
+
864
+ // remove css import
865
+ editor . edit ( ( s ) =>
866
+ s . replaceAll ( `import './server.css'` , `/* import './server.css' */` ) ,
867
+ )
868
+ await expect ( page . locator ( '.test-style-server' ) ) . toHaveCSS (
869
+ 'color' ,
870
+ 'rgb(0, 0, 0)' ,
871
+ )
872
+
873
+ // add new css
874
+ editor . edit ( ( s ) =>
875
+ s . replaceAll ( `/* import './server.css' */` , `import './server2.css'` ) ,
876
+ )
877
+ await expect ( page . locator ( '.test-style-server' ) ) . toHaveCSS (
878
+ 'color' ,
879
+ 'rgb(0, 255, 165)' ,
880
+ )
881
+ }
882
+
883
+ // TODO: React doesn't re-inert same css link. so manual reload is required.
884
+ editor . reset ( )
863
885
await page . waitForTimeout ( 100 )
864
886
await expect ( async ( ) => {
865
- // TODO: shouldn't require reload
866
887
await page . reload ( )
867
888
await expect ( page . locator ( '.test-style-server' ) ) . toHaveCSS (
868
889
'color' ,
869
- 'rgb(0, 0 , 0)' ,
890
+ 'rgb(255, 165 , 0)' ,
870
891
{ timeout : 10 } ,
871
892
)
872
893
} ) . toPass ( )
873
-
874
- // adding css works without reload
875
- await waitForHydration ( page )
876
- await using _ = await expectNoReload ( page )
877
-
878
- editor . reset ( )
879
- await expect ( page . locator ( '.test-style-server' ) ) . toHaveCSS (
880
- 'color' ,
881
- 'rgb(255, 165, 0)' ,
882
- )
883
894
} )
884
895
885
896
testNoJs ( 'adding/removing css server @nojs' , async ( { page } ) => {
Original file line number Diff line number Diff line change
1
+ .test-style-server {
2
+ color : rgb (0 , 255 , 165 );
3
+ }
You can’t perform that action at this time.
0 commit comments