Merge branch 'develop' into fix/ct-search-spec-overflow

npm/design-system/.mocharc.json

@@ -0,0 +1,8 @@
+{
+ "watch-ignore": [
+ "./test/_test-output",
+ "node_modules"
+ ],
+ "require": "ts-node/register",
+ "exit": true
+}

npm/design-system/cypress.json

@@ -14,6 +14,5 @@
  "componentFolder": "src",
  "experimentalComponentTesting": true,
  "experimentalFetchPolyfill": true,
- "fixturesFolder": false,
- "supportFile": false
+ "fixturesFolder": false
 }

npm/design-system/cypress/support/index.js

@@ -0,0 +1,2 @@
+import 'regenerator-runtime/runtime'
+import 'cypress-real-events/support'

npm/design-system/package.json

@@ -21,6 +21,8 @@
  "@fortawesome/free-brands-svg-icons": "5.15.2",
  "@fortawesome/free-solid-svg-icons": "5.15.2",
  "@fortawesome/react-fontawesome": "0.1.14",
+ "@iconify/icons-vscode-icons": "1.1.1",
+ "@iconify/react": "2.0.0-rc.8",
  "classnames": "2.2.6",
  "debug": "4.3.2"
  },
@@ -41,6 +43,8 @@
  "babel-loader": "8.0.6",
  "css-loader": "2.1.1",
  "cypress": "0.0.0-development",
+ "cypress-real-events": "1.1.0",
+ "mocha": "^7.0.1",
  "react": "16.8.6",
  "react-dom": "16.8.6",
  "rollup": "^2.38.5",

npm/design-system/src/components/FileExplorer/FileExplorer.module.scss

@@ -0,0 +1,48 @@
+@use '../../index.scss' as *;
+
+.nav {
+ user-select: none;
+ white-space: nowrap;
+}
+
+.ul {
+ margin-block-start: 0;
+ margin-block-end: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ padding-inline-start: 0;
+ &:before {
+ display: none;
+ }
+}
+
+.li.li {
+ padding-left: 20px;
+}
+
+
+.ul, .li {
+ position: relative;
+ list-style: none;
+ font-size: $text-s;
+ line-height: 1.6;
+}
+
+.a {
+ position: relative;
+ color: unset;
+ text-decoration: none;
+ display: inline-block;
+ width: 100%;
+ &:hover {
+ cursor: pointer;
+ }
+}
+
+.ul .ul {
+ margin-inline-start: $text-xs;
+}
+
+.isSelected, .isSelected:hover {
+ text-decoration: underline;
+}

npm/design-system/src/components/FileExplorer/FileExplorer.spec.tsx

@@ -0,0 +1,130 @@
+import { mount } from '@cypress/react'
+import React from 'react'
+import { FileExplorer, FileComponentProps, FolderComponentProps } from './FileExplorer'
+import { FileNode, makeFileHierarchy, TreeNode } from './helpers/makeFileHierarchy'
+
+import styles from './FileExplorer.module.scss'
+
+const specs: Cypress.Cypress['spec'][] = [
+ {
+ relative: 'foo/bar/foo.spec.js',
+ absolute: 'Users/code/foo/bar/foo.spec.js',
+ name: 'foo/bar/foo.spec.js',
+ },
+ {
+ relative: 'bar/foo.spec.tsx',
+ absolute: 'bar/foo.spec.tsx',
+ name: 'bar/foo.spec.tsx',
+ },
+ {
+ relative: 'merp/map.spec.ts',
+ absolute: 'merp/map.spec.ts',
+ name: 'merp/map.spec.ts',
+ },
+]
+
+interface FileExplorerTestProps {
+ clickFileStub: typeof cy.stub
+ clickFolderStub: typeof cy.stub
+}
+
+function createFileExplorer (testProps: FileExplorerTestProps): React.FC {
+ return () => {
+ const [selectedFile, setSelectedFile] = React.useState<string>()
+
+ const onFileClick = (file: FileNode) => {
+ setSelectedFile(file.absolute)
+ }
+
+ const files = makeFileHierarchy(specs.map((spec) => spec.relative))
+
+ const FileComponent: React.FC<FileComponentProps> = (props) => {
+ return (
+ <div onClick={() => {
+ testProps.clickFileStub(props.item)
+ props.onClick(props.item)
+ }}>
+ {props.item.name}
+ </div>
+ )
+ }
+
+ const FolderComponent: React.FC<FolderComponentProps> = (props) => {
+ return (
+ <div onClick={() => {
+ testProps.clickFolderStub()
+ props.onClick()
+ }}>
+ {props.item.name}
+ </div>
+ )
+ }
+
+ return (
+ <FileExplorer
+ files={files}
+ cssModule={styles}
+ selectedFile={selectedFile}
+ fileComponent={FileComponent}
+ folderComponent={FolderComponent}
+ onFileClick={onFileClick}
+ />
+ )
+ }
+}
+
+describe('FileExplorer', () => {
+ it('basic usage', () => {
+ const files: TreeNode[] = [
+ {
+ type: 'folder',
+ name: 'foo',
+ absolute: 'foo',
+ files: [
+ {
+ type: 'file',
+ name: 'bar.js',
+ absolute: 'foo/bar.js',
+ },
+ ],
+ },
+ ]
+
+ const FileComponent: React.FC<FileComponentProps> = (props) => <div>{props.item.name}</div>
+ const FolderComponent: React.FC<FolderComponentProps> = (props) => <div>{props.item.name}</div>
+
+ mount(
+ <FileExplorer
+ files={files}
+ selectedFile={undefined}
+ fileComponent={FileComponent}
+ folderComponent={FolderComponent}
+ onFileClick={() => {}}
+ />,
+ )
+ })
+
+ it('clicks file and folders', () => {
+ const clickFolderStub = cy.stub()
+ const clickFileStub = cy.stub()
+
+ const Wrapper = createFileExplorer({
+ clickFolderStub,
+ clickFileStub,
+ })
+
+ mount(<Wrapper />)
+
+ cy.get('div').contains('bar').click().then(() => {
+ expect(clickFolderStub).to.have.been.calledWith()
+ })
+
+ cy.get('div').contains('map.spec.ts').click().then(() => {
+ expect(clickFileStub).to.have.been.calledWith({
+ type: 'file',
+ absolute: 'merp/map.spec.ts',
+ name: 'map.spec.ts',
+ })
+ })
+ })
+})