Skip to content

Commit

Permalink
Added the checkbox component (#53)
Browse files Browse the repository at this point in the history
Adds the checkbox foundation component.

Also moved some helper files for the component testing to a separate file and moved a component test to the components folder.

<!---
List and link relevant issues here using the keyword "closes"
if this PR will close an issue, eg. closes #411
-->
Continues work on #31

<!--- Review the list and put an x in the boxes that apply. -->

- [x] I have added tests for my changes.
- [x] I have tested my changes.
- [x] I have updated the project documentation to reflect my changes.

<!---
If there is relevant follow-up work to this PR, please list any existing issues or provide brief descriptions of what you would like to do next.
-->
- Continue adding foundation components
  • Loading branch information
janechu committed May 20, 2022
1 parent 7821e47 commit 18657bf
Show file tree
Hide file tree
Showing 18 changed files with 543 additions and 89 deletions.
4 changes: 2 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,8 @@ storybook-static

# tmp directories
.tmp/
temp/
temp-component/
temp--*/
temp-component--*/

# GitHub Actions Local Testing
.github/workflows/testing/*.json
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "Add the checkbox component",
"packageName": "@microsoft/fast-cli",
"email": "7559015+janechu@users.noreply.github.com",
"dependentChangeType": "none"
}
133 changes: 46 additions & 87 deletions packages/fast-cli/src/cli.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,20 @@ import { expect, test } from "@playwright/test";
import { execSync } from "child_process";
import path from "path";
import fs from "fs-extra";
import { availableTemplates } from "./components/options.js";
import {
dirname,
expectedGeneratedComponentTemplateFiles,
getTempDir,
getTempComponentDir,
setup,
teardown,
fastCliDir,
} from "./test/helpers.js";

const dirname = path.resolve(process.cwd());
const tempDirRelativeLocation = "../temp";
const tempComponentDirRelativeLocation = "../temp-component"
const tempDir = path.resolve(dirname, tempDirRelativeLocation);
const tempComponentDir = path.resolve(dirname, tempComponentDirRelativeLocation);
const templateDir = path.resolve(dirname, "../cfp-template/template");
const expectedGeneratedComponentTemplateFiles = [
"README.md",
"define.ts",
"fixtures/base.html",
"test-component.definition.ts",
"test-component.pw.spec.ts",
"test-component.stories.ts",
"test-component.styles.ts",
"test-component.template.ts",
"test-component.ts"
];
const uuid: string = "cli";
const tempDir: string = getTempDir(uuid);
const tempComponentDir: string = getTempComponentDir(uuid);
const templateDir = path.resolve(dirname, "./cfp-template/template");

function setupBlankAsTemplate() {
fs.ensureDirSync(tempComponentDir);
Expand All @@ -29,7 +24,7 @@ function setupBlankAsTemplate() {
execSync(`cd ${tempComponentDir} && npm init -y`);

// Copy over the contents of the blank template
fs.copySync(path.resolve(dirname, "../fast-cli/dist/esm/components/blank"), tempComponentDir);
fs.copySync(path.resolve(fastCliDir, "./dist/esm/components/blank"), tempComponentDir);
const packageJsonString = fs.readFileSync(
path.resolve(tempComponentDir, "package.json"),
{ "encoding": "utf8" }
Expand All @@ -41,39 +36,6 @@ function setupBlankAsTemplate() {
);
}

function setup() {
fs.ensureDirSync(tempDir);

// Create a temp project
execSync(`cd ${tempDir} && npm init -y`);

// Install the FAST CLI
execSync(`cd ${tempDir} && npm install --save-dev ${dirname}`);

// Update the scripts for testable CLI commands
const packageJsonString = fs.readFileSync(path.resolve(tempDir, "package.json"), { "encoding": "utf8" });
const packageJson = JSON.parse(packageJsonString);
packageJson.scripts = {
"build": "webpack --config=./webpack.prod.cjs",
"fast:init": `fast init -t ${path.resolve(dirname, "../cfp-template")}`,
"fast:config": `fast config -p ./src/components`,
"fast:add-design-system": `fast add-design-system -p test -s open`,
"fast:add-component:template": `fast add-component -n test-component -t ${path.resolve(dirname, "../temp-component")}`,
...availableTemplates.reduce((prevValue, currValue: string) => {
return {
...prevValue,
[`fast:add-foundation-component:${currValue}`]: `fast add-foundation-component -n test-component -t ${currValue}`
}
}, {}),
};
fs.writeFileSync(path.resolve(tempDir, "package.json"), JSON.stringify(packageJson, null, 2));
}

function teardown() {
fs.removeSync(tempDir);
fs.removeSync(tempComponentDir);
}

/**
* TODO: update these tests when the npm CLI has been updated and added it to
* the github validation workflow.
Expand All @@ -87,11 +49,11 @@ function teardown() {
test.describe("CLI", () => {
test.describe("init", () => {
test.beforeAll(() => {
setup();
setup(tempDir, tempComponentDir);
execSync(`cd ${tempDir} && npm run fast:init`);
});
test.afterAll(() => {
teardown();
teardown(tempDir, tempComponentDir);
});
test("should create a package.json file with contents from the fast init", () => {
const packageJsonFile = JSON.parse(
Expand All @@ -108,8 +70,6 @@ test.describe("CLI", () => {
for (const [key, value] of Object.entries(configFilePackageJson)) {
if (key !== "name") {
expect(packageJsonFile[key].toString()).toEqual((value as any).toString());
} else {
expect(packageJsonFile[key].toString()).toEqual("temp");
}
}
});
Expand Down Expand Up @@ -150,11 +110,11 @@ test.describe("CLI", () => {
});
test.describe("config", () => {
test.beforeAll(() => {
setup();
setup(tempDir, tempComponentDir);
execSync(`cd ${tempDir} && npm run fast:config`);
});
test.afterAll(() => {
teardown();
teardown(tempDir, tempComponentDir);
});
test("should create a fast.config.json file", () => {
expect(() => {
Expand All @@ -177,10 +137,10 @@ test.describe("CLI", () => {
});
test.describe("add-design-system", () => {
test.beforeAll(() => {
setup();
setup(tempDir, tempComponentDir);
});
test.afterAll(() => {
teardown();
teardown(tempDir, tempComponentDir);
});
test("should throw if there is no fast.config.json file", () => {
expect(() => {
Expand Down Expand Up @@ -210,24 +170,23 @@ test.describe("CLI", () => {
});
test.describe("add-component", () => {
test.beforeAll(() => {
setup();
setup(tempDir, tempComponentDir);
execSync(`cd ${tempDir} && npm run fast:init`);
setup();
setup(tempDir, tempComponentDir);
setupBlankAsTemplate();
execSync(`cd ${tempDir} && npm run fast:add-component:template`);
});
test.afterAll(() => {
teardown();
teardown(tempDir, tempComponentDir);
});
test("should copy files from a provided template", () => {
let files: Array<string> = [];

function testGeneratedFiles(folderName: string) {
const tempDirContents = fs.readdirSync(path.resolve(tempDir, "src/components/test-component", folderName));
const tempDirContentsWithFileTypes = fs.readdirSync(path.resolve(tempDir, "src/components/test-component", folderName), {
const tempDirContents = fs.readdirSync(path.resolve(tempDir, "./src/components/test-component", folderName));
const tempDirContentsWithFileTypes = fs.readdirSync(path.resolve(tempDir, "./src/components/test-component", folderName), {
withFileTypes: true
});

for (let i = 0, contentLength = tempDirContents.length; i < contentLength; i++) {
if (tempDirContentsWithFileTypes[i].isDirectory()) {
testGeneratedFiles(tempDirContents[i]);
Expand Down Expand Up @@ -255,13 +214,13 @@ test.describe("CLI", () => {
test.describe("add-foundation-component", () => {
test.describe("blank", () => {
test.beforeAll(() => {
setup();
setup(tempDir, tempComponentDir);
execSync(`cd ${tempDir} && npm run fast:init`);
setup();
setup(tempDir, tempComponentDir);
execSync(`cd ${tempDir} && npm run fast:add-foundation-component:blank`);
});
test.afterAll(() => {
teardown();
teardown(tempDir, tempComponentDir);
});
test("should copy files from the template", () => {
let files: Array<string> = [];
Expand Down Expand Up @@ -298,13 +257,13 @@ test.describe("CLI", () => {
});
test.describe("badge", () => {
test.beforeAll(() => {
setup();
setup(tempDir, tempComponentDir);
execSync(`cd ${tempDir} && npm run fast:init`);
setup();
setup(tempDir, tempComponentDir);
execSync(`cd ${tempDir} && npm run fast:add-foundation-component:badge`);
});
test.afterAll(() => {
teardown();
teardown(tempDir, tempComponentDir);
});
test("should copy files from the template", () => {
let files: Array<string> = [];
Expand Down Expand Up @@ -341,13 +300,13 @@ test.describe("CLI", () => {
});
test.describe("disclosure", () => {
test.beforeAll(() => {
setup();
setup(tempDir, tempComponentDir);
execSync(`cd ${tempDir} && npm run fast:init`);
setup();
setup(tempDir, tempComponentDir);
execSync(`cd ${tempDir} && npm run fast:add-foundation-component:disclosure`);
});
test.afterAll(() => {
teardown();
teardown(tempDir, tempComponentDir);
});
test("should copy files from the template", () => {
let files: Array<string> = [];
Expand Down Expand Up @@ -384,13 +343,13 @@ test.describe("CLI", () => {
});
test.describe("card", () => {
test.beforeAll(() => {
setup();
setup(tempDir, tempComponentDir);
execSync(`cd ${tempDir} && npm run fast:init`);
setup();
setup(tempDir, tempComponentDir);
execSync(`cd ${tempDir} && npm run fast:add-foundation-component:card`);
});
test.afterAll(() => {
teardown();
teardown(tempDir, tempComponentDir);
});
test("should copy files from the template", () => {
let files: Array<string> = [];
Expand Down Expand Up @@ -427,13 +386,13 @@ test.describe("CLI", () => {
});
test.describe("dialog", () => {
test.beforeAll(() => {
setup();
setup(tempDir, tempComponentDir);
execSync(`cd ${tempDir} && npm run fast:init`);
setup();
setup(tempDir, tempComponentDir);
execSync(`cd ${tempDir} && npm run fast:add-foundation-component:dialog`);
});
test.afterAll(() => {
teardown();
teardown(tempDir, tempComponentDir);
});
test("should copy files from the template", () => {
let files: Array<string> = [];
Expand Down Expand Up @@ -470,13 +429,13 @@ test.describe("CLI", () => {
});
test.describe("number-field", () => {
test.beforeAll(() => {
setup();
setup(tempDir, tempComponentDir);
execSync(`cd ${tempDir} && npm run fast:init`);
setup();
setup(tempDir, tempComponentDir);
execSync(`cd ${tempDir} && npm run fast:add-foundation-component:number-field`);
});
test.afterAll(() => {
teardown();
teardown(tempDir, tempComponentDir);
});
test("should copy files from the template", () => {
let files: Array<string> = [];
Expand Down Expand Up @@ -513,13 +472,13 @@ test.describe("CLI", () => {
});
test.describe("search", () => {
test.beforeAll(() => {
setup();
setup(tempDir, tempComponentDir);
execSync(`cd ${tempDir} && npm run fast:init`);
setup();
setup(tempDir, tempComponentDir);
execSync(`cd ${tempDir} && npm run fast:add-foundation-component:search`);
});
test.afterAll(() => {
teardown();
teardown(tempDir, tempComponentDir);
});
test("should copy files from the template", () => {
let files: Array<string> = [];
Expand Down
3 changes: 3 additions & 0 deletions packages/fast-cli/src/components/checkbox/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Description

This template is used as a checkbox component template from which a user can modify without having to do the initial scaffolding.
59 changes: 59 additions & 0 deletions packages/fast-cli/src/components/checkbox/template.pw.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { expect, test } from "@playwright/test";
import { execSync } from "child_process";
import path from "path";
import fs from "fs-extra";
import {
expectedGeneratedComponentTemplateFiles,
setup,
teardown,
getTempDir,
getTempComponentDir,
} from "../../test/helpers.js";

const uuid: string = "checkbox";
const tempDir: string = getTempDir(uuid);
const tempComponentDir: string = getTempComponentDir(uuid);

test.describe(`CLI add-foundation-component ${uuid}`, () => {
test.beforeAll(() => {
setup(tempDir, tempComponentDir);
execSync(`cd ${tempDir} && npm run fast:init`);
setup(tempDir, tempComponentDir);
execSync(`cd ${tempDir} && npm run fast:add-foundation-component:${uuid}`);
});
test.afterAll(() => {
teardown(tempDir, tempComponentDir);
});
test("should copy files from the template", () => {
let files: Array<string> = [];

function testGeneratedFiles(folderName: string) {
const tempDirContents = fs.readdirSync(path.resolve(tempDir, "src/components/test-component", folderName));
const tempDirContentsWithFileTypes = fs.readdirSync(path.resolve(tempDir, "src/components/test-component", folderName), {
withFileTypes: true
});

for (let i = 0, contentLength = tempDirContents.length; i < contentLength; i++) {
if (tempDirContentsWithFileTypes[i].isDirectory()) {
testGeneratedFiles(tempDirContents[i]);
} else {
files.push(
folderName
? `${folderName}/${tempDirContents[i]}`
: tempDirContents[i]
);
}
}
}

testGeneratedFiles("");
expect(files).toEqual(expectedGeneratedComponentTemplateFiles);
});
test("should be able to run the build", () => {
expect(
() => {
execSync(`cd ${tempDir} && npm run build`);
}
).not.toThrow();
});
});
7 changes: 7 additions & 0 deletions packages/fast-cli/src/components/checkbox/template/README.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import type { ComponentTemplateConfig } from "../../../utilities/template";

export default (config: ComponentTemplateConfig): string => `
# ${config.className}
An implementation of a [checkbox](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/checkbox) as a form-connected web-component.
For more information on the building blocks used to create this component, please refer to https://www.fast.design/docs/components/checkbox`;

0 comments on commit 18657bf

Please sign in to comment.