Skip to content

Commit 5159bbd

Browse files
PeterlitsZoPeterlitsZo
committed
test(components): Add test for Switch with label or labelPosition.
1 parent 205bda7 commit 5159bbd

File tree

2 files changed

+351
-0
lines changed

2 files changed

+351
-0
lines changed

‎packages/components/test/__snapshots__/index.js.snap

+321
Original file line numberDiff line numberDiff line change
@@ -1741,6 +1741,327 @@ input:checked~.emotion-2>div {
17411741
</label>
17421742
`;
17431743

1744+
exports[`Switch renders width labelPosition end 1`] = `
1745+
.emotion-0 {
1746+
box-sizing: border-box;
1747+
margin: 0;
1748+
min-width: 0;
1749+
width: 100%;
1750+
display: -webkit-box;
1751+
display: -webkit-flex;
1752+
display: -ms-flexbox;
1753+
display: flex;
1754+
cursor: pointer;
1755+
gap: 8px;
1756+
}
1757+
1758+
.emotion-1 {
1759+
box-sizing: border-box;
1760+
margin: 0;
1761+
min-width: 0;
1762+
position: absolute;
1763+
opacity: 0;
1764+
z-index: -1;
1765+
width: 1px;
1766+
height: 1px;
1767+
overflow: hidden;
1768+
}
1769+
1770+
.emotion-2 {
1771+
box-sizing: border-box;
1772+
margin: 0;
1773+
min-width: 0;
1774+
position: relative;
1775+
-webkit-flex-shrink: 0;
1776+
-ms-flex-negative: 0;
1777+
flex-shrink: 0;
1778+
background-color: gray;
1779+
border-radius: 18px;
1780+
height: 22px;
1781+
width: 40px;
1782+
padding: 2px;
1783+
}
1784+
1785+
input:disabled~.emotion-2 {
1786+
opacity: 0.5;
1787+
cursor: not-allowed;
1788+
}
1789+
1790+
.emotion-2>div {
1791+
display: -webkit-box;
1792+
display: -webkit-flex;
1793+
display: -ms-flexbox;
1794+
display: flex;
1795+
-webkit-align-items: center;
1796+
-webkit-box-align: center;
1797+
-ms-flex-align: center;
1798+
align-items: center;
1799+
border-radius: 50%;
1800+
height: 18px;
1801+
width: 18px;
1802+
background-color: white;
1803+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
1804+
position: relative;
1805+
-webkit-transform: translateX(0%);
1806+
-moz-transform: translateX(0%);
1807+
-ms-transform: translateX(0%);
1808+
transform: translateX(0%);
1809+
-webkit-transition: -webkit-transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
1810+
transition: transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
1811+
}
1812+
1813+
input:checked~.emotion-2 {
1814+
background-color: primary;
1815+
}
1816+
1817+
input:checked~.emotion-2>div {
1818+
-webkit-transform: translateX(100%);
1819+
-moz-transform: translateX(100%);
1820+
-ms-transform: translateX(100%);
1821+
transform: translateX(100%);
1822+
}
1823+
1824+
.emotion-3 {
1825+
box-sizing: border-box;
1826+
margin: 0;
1827+
min-width: 0;
1828+
}
1829+
1830+
<label
1831+
className="emotion-0"
1832+
>
1833+
<input
1834+
aria-label="Are you OK? Hello!"
1835+
className="emotion-1"
1836+
type="checkbox"
1837+
/>
1838+
<div
1839+
className="emotion-2"
1840+
>
1841+
<div
1842+
className="emotion-3"
1843+
/>
1844+
</div>
1845+
<span>
1846+
Are you OK? Hello!
1847+
</span>
1848+
</label>
1849+
`;
1850+
1851+
exports[`Switch renders width labelPosition start 1`] = `
1852+
.emotion-0 {
1853+
box-sizing: border-box;
1854+
margin: 0;
1855+
min-width: 0;
1856+
width: 100%;
1857+
display: -webkit-box;
1858+
display: -webkit-flex;
1859+
display: -ms-flexbox;
1860+
display: flex;
1861+
cursor: pointer;
1862+
gap: 8px;
1863+
}
1864+
1865+
.emotion-1 {
1866+
box-sizing: border-box;
1867+
margin: 0;
1868+
min-width: 0;
1869+
position: absolute;
1870+
opacity: 0;
1871+
z-index: -1;
1872+
width: 1px;
1873+
height: 1px;
1874+
overflow: hidden;
1875+
}
1876+
1877+
.emotion-2 {
1878+
box-sizing: border-box;
1879+
margin: 0;
1880+
min-width: 0;
1881+
position: relative;
1882+
-webkit-flex-shrink: 0;
1883+
-ms-flex-negative: 0;
1884+
flex-shrink: 0;
1885+
background-color: gray;
1886+
border-radius: 18px;
1887+
height: 22px;
1888+
width: 40px;
1889+
padding: 2px;
1890+
}
1891+
1892+
input:disabled~.emotion-2 {
1893+
opacity: 0.5;
1894+
cursor: not-allowed;
1895+
}
1896+
1897+
.emotion-2>div {
1898+
display: -webkit-box;
1899+
display: -webkit-flex;
1900+
display: -ms-flexbox;
1901+
display: flex;
1902+
-webkit-align-items: center;
1903+
-webkit-box-align: center;
1904+
-ms-flex-align: center;
1905+
align-items: center;
1906+
border-radius: 50%;
1907+
height: 18px;
1908+
width: 18px;
1909+
background-color: white;
1910+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
1911+
position: relative;
1912+
-webkit-transform: translateX(0%);
1913+
-moz-transform: translateX(0%);
1914+
-ms-transform: translateX(0%);
1915+
transform: translateX(0%);
1916+
-webkit-transition: -webkit-transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
1917+
transition: transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
1918+
}
1919+
1920+
input:checked~.emotion-2 {
1921+
background-color: primary;
1922+
}
1923+
1924+
input:checked~.emotion-2>div {
1925+
-webkit-transform: translateX(100%);
1926+
-moz-transform: translateX(100%);
1927+
-ms-transform: translateX(100%);
1928+
transform: translateX(100%);
1929+
}
1930+
1931+
.emotion-3 {
1932+
box-sizing: border-box;
1933+
margin: 0;
1934+
min-width: 0;
1935+
}
1936+
1937+
<label
1938+
className="emotion-0"
1939+
>
1940+
<span>
1941+
Thanks you! Thank you very much
1942+
</span>
1943+
<input
1944+
aria-label="Thanks you! Thank you very much"
1945+
className="emotion-1"
1946+
type="checkbox"
1947+
/>
1948+
<div
1949+
className="emotion-2"
1950+
>
1951+
<div
1952+
className="emotion-3"
1953+
/>
1954+
</div>
1955+
</label>
1956+
`;
1957+
1958+
exports[`Switch renders with label 1`] = `
1959+
.emotion-0 {
1960+
box-sizing: border-box;
1961+
margin: 0;
1962+
min-width: 0;
1963+
width: 100%;
1964+
display: -webkit-box;
1965+
display: -webkit-flex;
1966+
display: -ms-flexbox;
1967+
display: flex;
1968+
cursor: pointer;
1969+
gap: 8px;
1970+
}
1971+
1972+
.emotion-1 {
1973+
box-sizing: border-box;
1974+
margin: 0;
1975+
min-width: 0;
1976+
position: absolute;
1977+
opacity: 0;
1978+
z-index: -1;
1979+
width: 1px;
1980+
height: 1px;
1981+
overflow: hidden;
1982+
}
1983+
1984+
.emotion-2 {
1985+
box-sizing: border-box;
1986+
margin: 0;
1987+
min-width: 0;
1988+
position: relative;
1989+
-webkit-flex-shrink: 0;
1990+
-ms-flex-negative: 0;
1991+
flex-shrink: 0;
1992+
background-color: gray;
1993+
border-radius: 18px;
1994+
height: 22px;
1995+
width: 40px;
1996+
padding: 2px;
1997+
}
1998+
1999+
input:disabled~.emotion-2 {
2000+
opacity: 0.5;
2001+
cursor: not-allowed;
2002+
}
2003+
2004+
.emotion-2>div {
2005+
display: -webkit-box;
2006+
display: -webkit-flex;
2007+
display: -ms-flexbox;
2008+
display: flex;
2009+
-webkit-align-items: center;
2010+
-webkit-box-align: center;
2011+
-ms-flex-align: center;
2012+
align-items: center;
2013+
border-radius: 50%;
2014+
height: 18px;
2015+
width: 18px;
2016+
background-color: white;
2017+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
2018+
position: relative;
2019+
-webkit-transform: translateX(0%);
2020+
-moz-transform: translateX(0%);
2021+
-ms-transform: translateX(0%);
2022+
transform: translateX(0%);
2023+
-webkit-transition: -webkit-transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
2024+
transition: transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
2025+
}
2026+
2027+
input:checked~.emotion-2 {
2028+
background-color: primary;
2029+
}
2030+
2031+
input:checked~.emotion-2>div {
2032+
-webkit-transform: translateX(100%);
2033+
-moz-transform: translateX(100%);
2034+
-ms-transform: translateX(100%);
2035+
transform: translateX(100%);
2036+
}
2037+
2038+
.emotion-3 {
2039+
box-sizing: border-box;
2040+
margin: 0;
2041+
min-width: 0;
2042+
}
2043+
2044+
<label
2045+
className="emotion-0"
2046+
>
2047+
<input
2048+
aria-label="Hello"
2049+
className="emotion-1"
2050+
type="checkbox"
2051+
/>
2052+
<div
2053+
className="emotion-2"
2054+
>
2055+
<div
2056+
className="emotion-3"
2057+
/>
2058+
</div>
2059+
<span>
2060+
Hello
2061+
</span>
2062+
</label>
2063+
`;
2064+
17442065
exports[`Text renders 1`] = `
17452066
.emotion-0 {
17462067
box-sizing: border-box;

‎packages/components/test/index.js

+30
Original file line numberDiff line numberDiff line change
@@ -705,4 +705,34 @@ describe('Switch', () => {
705705
)
706706
expect(json).toMatchSnapshot()
707707
})
708+
709+
test('renders with label', () => {
710+
const json = renderJSON(
711+
<ThemeProvider theme={theme}>
712+
<Switch label="Hello" />
713+
</ThemeProvider>
714+
)
715+
expect(json).toMatchSnapshot()
716+
})
717+
718+
test('renders width labelPosition end', () => {
719+
const json = renderJSON(
720+
<ThemeProvider theme={theme}>
721+
<Switch label="Are you OK? Hello!" labelPosition="end" />
722+
</ThemeProvider>
723+
)
724+
expect(json).toMatchSnapshot()
725+
})
726+
727+
test('renders width labelPosition start', () => {
728+
const json = renderJSON(
729+
<ThemeProvider theme={theme}>
730+
<Switch
731+
label="Thanks you! Thank you very much"
732+
labelPosition="start"
733+
/>
734+
</ThemeProvider>
735+
)
736+
expect(json).toMatchSnapshot()
737+
})
708738
})

0 commit comments

Comments
 (0)