ReactNを露出してCypressから使うでスケール調整のテスト。8つのアサーションからなる1つのテストが0.44秒で終わってるので見てもよくわからないかもだけど、2つの付箋の位置をデフォルトのスケールと、縮小したものとで確認している。
✅DOMでのスムーズな拡大縮小平行移動 まずはid指定でエレメントを取得してスタイルを直接書き換えてテストしている test.js
cy.get("#center").then(x => {
x.css("transform", "scale(0.5)")
})
cy.contains("+").should((x) => {
expect(x[0].getBoundingClientRect().x).equal(215.5);
expect(x[0].getBoundingClientRect().y).equal(225.5);
})それでテストできるようにしてから生CSSでid指定で当てていたスタイルをstyled-componentsに変更、挙動が変わらないことを確認してからReactの関数コンポーネントで包んで、ReactNのフックを掛けた。 最終的にテストでのスケール変更はこんな感じになった。カスタムコマンドにしてもいいかも。 test.js
cy.window().its('movidea').then(movidea => {
setTimeout(() => {
movidea.setGlobal({ scale: 0.5 });
})
});拡大縮小は、すべての付箋が入ってるサイズ0のdivがあって、それのtransformでブラウザのネイティブコードに計算を任せる仕組み。 App.tsx
<div id="canvas">
<Center>
{fusens.map((fusen) => (
<Fusen value={fusen} />
))}
</Center>
</div>
Center.tsx
const CenterDiv = styled.div`
position: absolute;
top: 50%;
left: 50%;
width: 0px;
height: 0px;
overflow: visible;
`;
export const Center: React.FC<{}> = ({ children }) => {
const [g] = useGlobal();
const style = {
transform: `scale(${g.scale}) translate(${g.trans_x}px, ${g.trans_y}px)`,
};
return (
<CenterDiv style={style} id="center">
{children}
</CenterDiv>
);
};
学んだこと
- transform transform - CSS: Cascading Style Sheets | MDN
- viewport | Cypress Documentation
-
Control the size and orientation of the screen for your application.
-
- getBoundingClientRect Element.getBoundingClientRect() - Web APIs | MDN