Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitf6a8e56

Browse files
committed
Testing the as prop and multiple containers in a single css file and component
1 parent706ee6e commitf6a8e56

File tree

7 files changed

+162
-29
lines changed

7 files changed

+162
-29
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
1919

2020
- Removed unnecessary files from the packages
2121
-`react-container-query`
22-
-**[BREAKING]** ContainerQuery no longer returns an object for size, but width and height as
23-
the first parameter of the child function
24-
-**[BREAKING]** ContainerQuery now returns 1x1 dimensions before the ResizeObserver kicks in
22+
-**[BREAKING]** ContainerQuery no longer returns an object for size, but width
23+
and height as the first parameter of the child function
24+
-**[BREAKING]** ContainerQuery now returns 1x1 dimensions before the ResizeObserver
25+
kicks in
2526
-`container-query`
2627
-**[BREAKING]** Set the pixel precision to be 0, so that whole numbers are
2728
applied by default.

‎tests/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import "core-js/fn/map";
1414
import"babel-regenerator-runtime";
1515

1616
// "Registering" test suits
17-
import"./react/basic";
18-
import"./react/hoc";
19-
import"./react/manual";
17+
//import "./react/basic";
18+
//import "./react/hoc";
19+
//import "./react/manual";
2020
import"./react/non-oocss";

‎tests/react/basic/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
// - rw / rh unit applying / removing (With max precision of 4)
2121
// - All the above on a descendant
2222
// - Getting the size from the ContainerQuery component
23+
// - Saving r-unit values as custom css props
2324
describe("Basic",()=>{
2425
constrefs={};
2526
beforeAll(()=>{

‎tests/react/non-oocss/Container/Container.js‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,34 @@
11
importReactfrom"react";
22
import{ContainerQuery}from"../../../../packages/react-container-query/dist/bundle.esm";
3-
importstyles,{metaasrawMeta}from"./styles.module.css";
3+
importstyles,{meta}from"./styles.module.css";
44
importPropTypesfrom"prop-types";
55
import{remapMetaSelectors}from"../../../../packages/container-query-meta-builder/dist/bundle.esm";
66

7+
// re-exporting for the tests
8+
export{styles};
9+
710
// Since the container query postcss plugin runs before css-loader rewrites the
811
// classnames with css modules, we need to remap the classnames in the imported
9-
// meta.
10-
constmeta=remapMetaSelectors(rawMeta,styles);
11-
12-
// reexporting styles for the tests
13-
export{styles};
12+
// meta runtime.
13+
constmetaObj=JSON.parse(meta.slice(1,-1));
14+
constcontainerMeta=remapMetaSelectors(metaObj[".container"],styles);
15+
constlabelMeta=remapMetaSelectors(metaObj[".label"],styles);
1416

1517
constContainer=({ children, id})=>(
1618
<ContainerQuery
17-
meta={meta}
19+
meta={containerMeta}
1820
className={styles.container}
1921
data-testid={`root-${id}`}
2022
>
2123
<divclassName={styles.marker}data-testid={`marker-${id}`}/>
24+
<ContainerQuery
25+
meta={labelMeta}
26+
className={styles.label}
27+
as="span"
28+
data-testid={`label-${id}`}
29+
>
30+
Container id: "{id}"
31+
</ContainerQuery>
2232
{children ?(
2333
<divclassName={styles.child}data-testid={`child-${id}`}>
2434
{children}

‎tests/react/non-oocss/Container/styles.module.css‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
applied to them without being in a container.
66
*/
77
.container {
8+
@define-container;
89
position: absolute;
910
left:0;
1011
top:0;
@@ -37,6 +38,21 @@
3738
right:0;
3839
width:70rw;
3940
box-sizing: border-box;
40-
height:90rh;
41-
margin-top:10rh;
41+
height:75rh;
42+
margin-top:25rh;
43+
}
44+
45+
.label {
46+
@define-container;
47+
color:rgb(255,0,0);
48+
position: absolute;
49+
white-space: nowrap;
50+
right:0;
51+
width:70%;
52+
overflow: hidden;
53+
54+
/* This query is relative to ".label" itself, not ".Container" */
55+
@container (width> 100px) {
56+
color:rgb(0,128,0);
57+
}
4258
}

‎tests/react/non-oocss/index.js‎

Lines changed: 116 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ import { getByTestId } from "dom-testing-library";
1515
// as a child, should not affect the latter even if they're the same container types
1616
// - Tests whether the lib can work with CSS-modules built in to css-loader
1717
// - Tests r-units
18-
// todo add css-modules, and export the classes for reuse
18+
// - Tests the "as" ContainerQuery prop
19+
// - Tests multiple containers in a single css file and component
1920
describe("Non OOCSS",()=>{
2021
constrefs={};
2122
beforeAll(()=>{
@@ -34,12 +35,15 @@ describe("Non OOCSS", () => {
3435

3536
refs.root1=getByTestId(document.body,"root-1");
3637
refs.marker1=getByTestId(refs.root1,"marker-1");
38+
refs.label1=getByTestId(refs.root1,"label-1");
3739
refs.child1=getByTestId(refs.root1,"child-1");
3840
refs.root2=getByTestId(document.body,"root-2");
3941
refs.marker2=getByTestId(refs.root2,"marker-2");
42+
refs.label2=getByTestId(refs.root2,"label-2");
4043
refs.child2=getByTestId(refs.root2,"child-2");
4144
refs.root3=getByTestId(document.body,"root-3");
4245
refs.marker3=getByTestId(refs.root3,"marker-3");
46+
refs.label3=getByTestId(refs.root3,"label-3");
4347

4448
constwrapper=document.createElement("div");
4549
wrapper.style.width="100px";
@@ -57,6 +61,9 @@ describe("Non OOCSS", () => {
5761
refs.unrelatedChild=document.createElement("div");
5862
refs.unrelatedChild.className=styles.child;
5963
wrapper.appendChild(refs.unrelatedChild);
64+
refs.unrelatedLabel=document.createElement("div");
65+
refs.unrelatedLabel.className=styles.label;
66+
wrapper.appendChild(refs.unrelatedLabel);
6067

6168
document.body.appendChild(wrapper);
6269
});
@@ -80,6 +87,9 @@ describe("Non OOCSS", () => {
8087
width:"0px",
8188
height:"0px"
8289
});
90+
awaitwaitForElementToHaveStyle(refs.unrelatedLabel,{
91+
color:"rgb(255, 0, 0)"
92+
});
8393
};
8494

8595
it("should render container query styles with non-oocss classnames",async()=>{
@@ -100,10 +110,19 @@ describe("Non OOCSS", () => {
100110

101111
// Child wrappers should be adjusted with rh
102112
awaitwaitForElementToHaveStyle(refs.child1,{
103-
height:"90px"
113+
height:"75px"
104114
});
105115
awaitwaitForElementToHaveStyle(refs.child2,{
106-
height:"81px"
116+
height:"56px"
117+
});
118+
awaitwaitForElementToHaveStyle(refs.label1,{
119+
color:"rgb(255, 0, 0)"
120+
});
121+
awaitwaitForElementToHaveStyle(refs.label2,{
122+
color:"rgb(255, 0, 0)"
123+
});
124+
awaitwaitForElementToHaveStyle(refs.label3,{
125+
color:"rgb(255, 0, 0)"
107126
});
108127

109128
awaitexpectUnrelatedElementsToBeUntouched();
@@ -129,10 +148,19 @@ describe("Non OOCSS", () => {
129148

130149
// Child wrapper heights should not change
131150
awaitwaitForElementToHaveStyle(refs.child1,{
132-
height:"90px"
151+
height:"75px"
133152
});
134153
awaitwaitForElementToHaveStyle(refs.child2,{
135-
height:"81px"
154+
height:"56px"
155+
});
156+
awaitwaitForElementToHaveStyle(refs.label1,{
157+
color:"rgb(255, 0, 0)"
158+
});
159+
awaitwaitForElementToHaveStyle(refs.label2,{
160+
color:"rgb(255, 0, 0)"
161+
});
162+
awaitwaitForElementToHaveStyle(refs.label3,{
163+
color:"rgb(255, 0, 0)"
136164
});
137165

138166
awaitexpectUnrelatedElementsToBeUntouched();
@@ -158,10 +186,19 @@ describe("Non OOCSS", () => {
158186

159187
// Child wrapper heights should not change
160188
awaitwaitForElementToHaveStyle(refs.child1,{
161-
height:"90px"
189+
height:"75px"
162190
});
163191
awaitwaitForElementToHaveStyle(refs.child2,{
164-
height:"81px"
192+
height:"56px"
193+
});
194+
awaitwaitForElementToHaveStyle(refs.label1,{
195+
color:"rgb(0, 128, 0)"
196+
});
197+
awaitwaitForElementToHaveStyle(refs.label2,{
198+
color:"rgb(255, 0, 0)"
199+
});
200+
awaitwaitForElementToHaveStyle(refs.label3,{
201+
color:"rgb(255, 0, 0)"
165202
});
166203

167204
awaitexpectUnrelatedElementsToBeUntouched();
@@ -187,10 +224,19 @@ describe("Non OOCSS", () => {
187224

188225
// Child wrapper heights should not change
189226
awaitwaitForElementToHaveStyle(refs.child1,{
190-
height:"90px"
227+
height:"75px"
191228
});
192229
awaitwaitForElementToHaveStyle(refs.child2,{
193-
height:"81px"
230+
height:"56px"
231+
});
232+
awaitwaitForElementToHaveStyle(refs.label1,{
233+
color:"rgb(0, 128, 0)"
234+
});
235+
awaitwaitForElementToHaveStyle(refs.label2,{
236+
color:"rgb(0, 128, 0)"
237+
});
238+
awaitwaitForElementToHaveStyle(refs.label3,{
239+
color:"rgb(255, 0, 0)"
194240
});
195241

196242
awaitexpectUnrelatedElementsToBeUntouched();
@@ -216,10 +262,57 @@ describe("Non OOCSS", () => {
216262

217263
// Child wrapper heights should not change
218264
awaitwaitForElementToHaveStyle(refs.child1,{
219-
height:"90px"
265+
height:"75px"
266+
});
267+
awaitwaitForElementToHaveStyle(refs.child2,{
268+
height:"56px"
269+
});
270+
awaitwaitForElementToHaveStyle(refs.label1,{
271+
color:"rgb(0, 128, 0)"
272+
});
273+
awaitwaitForElementToHaveStyle(refs.label2,{
274+
color:"rgb(0, 128, 0)"
275+
});
276+
awaitwaitForElementToHaveStyle(refs.label3,{
277+
color:"rgb(255, 0, 0)"
278+
});
279+
280+
awaitexpectUnrelatedElementsToBeUntouched();
281+
});
282+
283+
it("should change the last label to green",async()=>{
284+
changeRootSize({width:291});
285+
286+
awaitwaitForElementToHaveStyle(refs.marker1,{
287+
backgroundColor:"rgb(0, 0, 255)",
288+
width:"86px"
289+
});
290+
291+
awaitwaitForElementToHaveStyle(refs.marker2,{
292+
backgroundColor:"rgb(0, 0, 255)",
293+
width:"60px"
294+
});
295+
296+
awaitwaitForElementToHaveStyle(refs.marker3,{
297+
backgroundColor:"rgb(0, 0, 255)",
298+
width:"42px"
299+
});
300+
301+
// Child wrapper heights should not change
302+
awaitwaitForElementToHaveStyle(refs.child1,{
303+
height:"75px"
220304
});
221305
awaitwaitForElementToHaveStyle(refs.child2,{
222-
height:"81px"
306+
height:"56px"
307+
});
308+
awaitwaitForElementToHaveStyle(refs.label1,{
309+
color:"rgb(0, 128, 0)"
310+
});
311+
awaitwaitForElementToHaveStyle(refs.label2,{
312+
color:"rgb(0, 128, 0)"
313+
});
314+
awaitwaitForElementToHaveStyle(refs.label3,{
315+
color:"rgb(0, 128, 0)"
223316
});
224317

225318
awaitexpectUnrelatedElementsToBeUntouched();
@@ -245,10 +338,20 @@ describe("Non OOCSS", () => {
245338

246339
// Child wrappers should be adjusted with rh
247340
awaitwaitForElementToHaveStyle(refs.child1,{
248-
height:"180px"
341+
height:"150px"
249342
});
250343
awaitwaitForElementToHaveStyle(refs.child2,{
251-
height:"162px"
344+
height:"113px"
345+
});
346+
347+
awaitwaitForElementToHaveStyle(refs.label1,{
348+
color:"rgb(255, 0, 0)"
349+
});
350+
awaitwaitForElementToHaveStyle(refs.label2,{
351+
color:"rgb(255, 0, 0)"
352+
});
353+
awaitwaitForElementToHaveStyle(refs.label3,{
354+
color:"rgb(255, 0, 0)"
252355
});
253356

254357
awaitexpectUnrelatedElementsToBeUntouched();

‎tests/webpack.config.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,9 @@ module.exports = {
4646
require("postcss-nested")({bubble:["container"]}),
4747
require("postcss-media-minmax")(),
4848
require("autoprefixer")(),
49-
require("../packages/postcss-container-query/dist")()
49+
require("../packages/postcss-container-query/dist")({
50+
singleContainer:false
51+
})
5052
]
5153
}
5254
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp