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