From aaa17db9c8a72261aba6ba6883233b6a9c4c24d5 Mon Sep 17 00:00:00 2001 From: unix Date: Thu, 16 Apr 2020 10:11:57 +0800 Subject: [PATCH 1/3] test(card): add testcase --- .../__snapshots__/index.test.tsx.snap | 1988 +++++++++++++++++ components/card/__tests__/index.test.tsx | 48 + components/card/index.ts | 2 - 3 files changed, 2036 insertions(+), 2 deletions(-) create mode 100644 components/card/__tests__/__snapshots__/index.test.tsx.snap create mode 100644 components/card/__tests__/index.test.tsx diff --git a/components/card/__tests__/__snapshots__/index.test.tsx.snap b/components/card/__tests__/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000..38ef1d4 --- /dev/null +++ b/components/card/__tests__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,1988 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Card should render correctly when nested 1`] = ` +initialize { + "0": Object { + "attribs": Object { + "class": "card ", + }, + "children": Array [ + Object { + "attribs": Object { + "class": "card ", + }, + "children": Array [ + Object { + "attribs": Object { + "class": "card ", + }, + "children": Array [ + Object { + "data": "card", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: none; + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid #eaeaea; + } + + .card:hover { + box-shadow: none; + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": null, + "type": "text", + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: none; + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid #eaeaea; + } + + .card:hover { + box-shadow: none; + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": Object { + "data": "card", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "text", + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid transparent; + } + + .card:hover { + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid transparent; + } + + .card:hover { + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": Object { + "attribs": Object { + "class": "card ", + }, + "children": Array [ + Object { + "data": "card", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: none; + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid #eaeaea; + } + + .card:hover { + box-shadow: none; + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": null, + "type": "text", + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: none; + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid #eaeaea; + } + + .card:hover { + box-shadow: none; + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": Object { + "data": "card", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "text", + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: none; + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid #eaeaea; + } + + .card:hover { + box-shadow: none; + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: none; + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid #eaeaea; + } + + .card:hover { + box-shadow: none; + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": Object { + "attribs": Object { + "class": "card ", + }, + "children": Array [ + Object { + "attribs": Object { + "class": "card ", + }, + "children": Array [ + Object { + "data": "card", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: none; + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid #eaeaea; + } + + .card:hover { + box-shadow: none; + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": null, + "type": "text", + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: none; + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid #eaeaea; + } + + .card:hover { + box-shadow: none; + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": Object { + "data": "card", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "text", + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid transparent; + } + + .card:hover { + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid transparent; + } + + .card:hover { + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": Object { + "attribs": Object { + "class": "card ", + }, + "children": Array [ + Object { + "data": "card", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: none; + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid #eaeaea; + } + + .card:hover { + box-shadow: none; + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": null, + "type": "text", + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: none; + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid #eaeaea; + } + + .card:hover { + box-shadow: none; + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": Object { + "data": "card", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "text", + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": null, + "prev": null, + "root": Object { + "attribs": Object {}, + "children": Array [ + [Circular], + ], + "name": "root", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": null, + "prev": null, + "type": "root", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "_root": [Circular], + "length": 1, + "options": Object { + "decodeEntities": true, + "normalizeWhitespace": false, + "withDomLvl1": true, + "xml": false, + }, +} +`; + +exports[`Card should support shadow and hoverable 1`] = ` +initialize { + "0": Object { + "attribs": Object {}, + "children": Array [ + Object { + "attribs": Object { + "class": "card ", + }, + "children": Array [ + Object { + "data": "card", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: none; + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid #eaeaea; + } + + .card:hover { + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": null, + "type": "text", + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: none; + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid #eaeaea; + } + + .card:hover { + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": Object { + "data": "card", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "text", + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object { + "class": "card ", + }, + "children": Array [ + Object { + "data": "card", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid transparent; + } + + .card:hover { + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": null, + "type": "text", + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid transparent; + } + + .card:hover { + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": Object { + "data": "card", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "text", + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object { + "class": "card ", + }, + "children": Array [ + Object { + "data": "card", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid transparent; + } + + .card:hover { + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": null, + "type": "text", + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid transparent; + } + + .card:hover { + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": Object { + "data": "card", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "text", + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "parent": [Circular], + "prev": [Circular], + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + Object { + "attribs": Object { + "class": "card ", + }, + "children": Array [ + Object { + "data": "card", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid transparent; + } + + .card:hover { + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": null, + "type": "text", + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid transparent; + } + + .card:hover { + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": Object { + "data": "card", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "text", + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object { + "class": "card ", + }, + "children": Array [ + Object { + "data": "card", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid transparent; + } + + .card:hover { + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": null, + "type": "text", + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid transparent; + } + + .card:hover { + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": Object { + "data": "card", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "text", + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "parent": [Circular], + "prev": Object { + "attribs": Object { + "class": "card ", + }, + "children": Array [ + Object { + "data": "card", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: none; + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid #eaeaea; + } + + .card:hover { + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": null, + "type": "text", + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: none; + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid #eaeaea; + } + + .card:hover { + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": Object { + "data": "card", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "text", + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + Object { + "attribs": Object { + "class": "card ", + }, + "children": Array [ + Object { + "data": "card", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid transparent; + } + + .card:hover { + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": null, + "type": "text", + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid transparent; + } + + .card:hover { + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": Object { + "data": "card", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "text", + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": Object { + "attribs": Object { + "class": "card ", + }, + "children": Array [ + Object { + "data": "card", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid transparent; + } + + .card:hover { + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": null, + "type": "text", + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid transparent; + } + + .card:hover { + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": Object { + "data": "card", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "text", + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": Object { + "attribs": Object { + "class": "card ", + }, + "children": Array [ + Object { + "data": "card", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: none; + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid #eaeaea; + } + + .card:hover { + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": null, + "type": "text", + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + width: 100%; + transition: all .2s ease; + padding: 16pt 16pt; + border-radius: 5px; + box-shadow: none; + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid #eaeaea; + } + + .card:hover { + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": Object { + "data": "card", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "text", + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": null, + "prev": null, + "root": Object { + "attribs": Object {}, + "children": Array [ + [Circular], + ], + "name": "root", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": null, + "prev": null, + "type": "root", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "type": "tag", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "_root": [Circular], + "length": 1, + "options": Object { + "decodeEntities": true, + "normalizeWhitespace": false, + "withDomLvl1": true, + "xml": false, + }, +} +`; diff --git a/components/card/__tests__/index.test.tsx b/components/card/__tests__/index.test.tsx new file mode 100644 index 0000000..ad71e22 --- /dev/null +++ b/components/card/__tests__/index.test.tsx @@ -0,0 +1,48 @@ +import React from 'react' +import { mount, render } from 'enzyme' +import { Card } from '../../index' + +describe('Card', () => { + it('should render correctly', () => { + const wrapper = mount(card) + expect(() => wrapper.unmount()).not.toThrow() + }) + + it('should support shadow and hoverable', () => { + const wrapper = render( +
+ card + card + card +
+ ) + expect(wrapper).toMatchSnapshot() + }) + + it('should support card types', () => { + const wrapper = mount( +
+ card + card + card + card + card + card + card +
+ ) + expect(() => wrapper.unmount()).not.toThrow() + }) + + it('should render correctly when nested', () => { + const wrapper = render( + + + card + + + ) + expect(wrapper).toMatchSnapshot() + }) + +}) diff --git a/components/card/index.ts b/components/card/index.ts index 0853b30..28f6097 100644 --- a/components/card/index.ts +++ b/components/card/index.ts @@ -1,5 +1,3 @@ import Card from './card' -import { CardProps } from './card' -export type Props = CardProps export default Card From 20c8ab052d0710ce1c98747ec61c155624a3997b Mon Sep 17 00:00:00 2001 From: unix Date: Thu, 16 Apr 2020 10:25:22 +0800 Subject: [PATCH 2/3] ci(codecov): add config file for codecov --- .codecov.yml | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .codecov.yml diff --git a/.codecov.yml b/.codecov.yml new file mode 100644 index 0000000..e84c50f --- /dev/null +++ b/.codecov.yml @@ -0,0 +1,3 @@ +codecov: + require_ci_to_pass: yes + branch: master From d41e591b583f27be66f510435914c5ec5773bea3 Mon Sep 17 00:00:00 2001 From: unix Date: Thu, 16 Apr 2020 10:29:47 +0800 Subject: [PATCH 3/3] ci(codecov): leave comment on pull-request ignore any changes --- .codecov.yml | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/.codecov.yml b/.codecov.yml index e84c50f..98ba831 100644 --- a/.codecov.yml +++ b/.codecov.yml @@ -1,3 +1,8 @@ codecov: require_ci_to_pass: yes - branch: master + comment: + layout: "reach, diff, flags, files" + behavior: default + require_changes: false + branches: + - "master"