Merge pull request #838 from ueokande/form-styled-components

Use styled-components instead of vanilla CSS/SCSS in option
ueokande · Sep 22, 2020 · d956b9e · d956b9e
2 parents 5d82441 + 7257406
commit d956b9e
Show file tree

Hide file tree

Showing 35 changed files with 830 additions and 1,252 deletions.
diff --git a/e2e/lib/FormOptionPage.ts b/e2e/lib/FormOptionPage.ts
@@ -1,5 +1,5 @@
 import { Lanthan } from "lanthan";
-import { WebDriver, By, until } from "selenium-webdriver";
+import { WebDriver, WebElement, By, error } from "selenium-webdriver";
 
 export default class FormOptionPage {
   private webdriver: WebDriver;
@@ -9,137 +9,138 @@ export default class FormOptionPage {
   }
 
   async setBlacklist(nth: number, url: string): Promise<void> {
-    const selector = ".form-blacklist-form-row > .column-url";
-    const inputs = await this.webdriver.findElements(By.css(selector));
-    if (inputs.length <= nth) {
+    const fieldset = await this.getFieldsetByLegend("Blacklist");
+    const rows = await fieldset.findElements(By.css("[role=listitem]"));
+    if (rows.length <= nth) {
       throw new RangeError("Index out of range to set a blacklist");
     }
-    await inputs[nth].sendKeys(url);
-    await this.webdriver.executeScript(
-      `document.querySelectorAll('${selector}')[${nth}].blur()`
-    );
+
+    const input = rows[nth].findElement(By.css("[aria-label=URL]"));
+    await input.sendKeys(url);
+    await this.blurActiveElement();
   }
 
   async setPartialBlacklist(
     nth: number,
     url: string,
     keys: string
   ): Promise<void> {
-    let selector = ".form-partial-blacklist-form-row > .column-url";
-    let inputs = await this.webdriver.findElements(By.css(selector));
-    if (inputs.length <= nth) {
+    const fieldset = await this.getFieldsetByLegend("Partial blacklist");
+    const rows = await fieldset.findElements(By.css("[role=listitem]"));
+    if (rows.length <= nth) {
       throw new RangeError("Index out of range to set a partial blacklist");
     }
-    await inputs[nth].sendKeys(url);
-    await this.webdriver.executeScript(
-      `document.querySelectorAll('${selector}')[${nth}].blur()`
-    );
 
-    selector = ".form-partial-blacklist-form-row > .column-keys";
-    inputs = await this.webdriver.findElements(By.css(selector));
-    if (inputs.length <= nth) {
-      throw new RangeError("Index out of range to set a partial blacklist");
-    }
-    await inputs[nth].sendKeys(keys);
-    await this.webdriver.executeScript(
-      `document.querySelectorAll('${selector}')[${nth}].blur()`
-    );
+    const urlInput = rows[nth].findElement(By.css("[aria-label=URL]"));
+    await urlInput.sendKeys(url);
+    await this.blurActiveElement();
+
+    const keysInput = rows[nth].findElement(By.css("[aria-label=Keys]"));
+    await keysInput.sendKeys(keys);
+    await this.blurActiveElement();
   }
 
   async setSearchEngine(nth: number, name: string, url: string) {
-    let selector = ".form-search-form-row > .column-name";
-    let inputs = await this.webdriver.findElements(By.css(selector));
-    if (inputs.length <= nth) {
+    const fieldset = await this.getFieldsetByLegend("Search Engines");
+    const rows = await fieldset.findElements(By.css("[role=listitem]"));
+    if (rows.length <= nth) {
       throw new RangeError("Index out of range to set a search engine");
     }
-    await inputs[nth].sendKeys(name);
-    await this.webdriver.executeScript(
-      `document.querySelectorAll('${selector}')[${nth}].blur()`
-    );
 
-    selector = ".form-search-form-row > .column-url";
-    inputs = await this.webdriver.findElements(By.css(selector));
-    if (inputs.length <= nth) {
-      throw new RangeError("Index out of range to set a search engine");
-    }
-    await inputs[nth].sendKeys(url);
-    await this.webdriver.executeScript(
-      `document.querySelectorAll('${selector}')[${nth}].blur()`
-    );
+    const nameInput = rows[nth].findElement(By.css("[aria-label=Name"));
+    await nameInput.sendKeys(name);
+    await this.blurActiveElement();
+
+    const urlInput = rows[nth].findElement(By.css("[aria-label=URL]"));
+    await urlInput.sendKeys(url);
+    await this.blurActiveElement();
   }
 
   async addBlacklist(): Promise<void> {
-    const rows = await this.webdriver.findElements(
-      By.css(`.form-blacklist-form-row`)
-    );
-    const button = await this.webdriver.findElement(
-      By.css(".form-blacklist-form .ui-add-button")
-    );
-    await button.click();
-    await this.webdriver.wait(
-      until.elementLocated(
-        By.css(`.form-blacklist-form-row:nth-child(${rows.length + 1})`)
-      )
-    );
+    const fieldset = await this.getFieldsetByLegend("Blacklist");
+    const rows = await fieldset.findElements(By.css("[role=listitem]"));
+    const addButton = await fieldset.findElement(By.css("[aria-label=Add]"));
+
+    await addButton.click();
+    await this.webdriver.wait(async () => {
+      const newRows = await fieldset.findElements(By.css("[role=listitem]"));
+      return newRows.length == rows.length + 1;
+    });
   }
 
   async addPartialBlacklist(): Promise<void> {
-    const rows = await this.webdriver.findElements(
-      By.css(`.form-partial-blacklist-form-row`)
-    );
-    const button = await this.webdriver.findElement(
-      By.css(".form-partial-blacklist-form .ui-add-button")
-    );
-    await button.click();
-    await this.webdriver.wait(
-      until.elementLocated(
-        By.css(`.form-partial-blacklist-form-row:nth-child(${rows.length + 2})`)
-      )
-    );
+    const fieldset = await this.getFieldsetByLegend("Partial blacklist");
+    const addButton = await fieldset.findElement(By.css("[aria-label=Add]"));
+    const rows = await fieldset.findElements(By.css("[role=listitem]"));
+
+    await addButton.click();
+    await this.webdriver.wait(async () => {
+      const newRows = await fieldset.findElements(By.css("[role=listitem]"));
+      return newRows.length == rows.length + 1;
+    });
   }
 
   async removeBlackList(nth: number): Promise<void> {
-    const buttons = await this.webdriver.findElements(
-      By.css(".form-blacklist-form-row .ui-delete-button")
+    const fieldset = await this.getFieldsetByLegend("Blacklist");
+    const deleteButtons = await fieldset.findElements(
+      By.css("[aria-label=Delete]")
     );
-    if (buttons.length <= nth) {
+    if (deleteButtons.length <= nth) {
       throw new RangeError("Index out of range to remove blacklist");
     }
-    await buttons[nth].click();
+    await deleteButtons[nth].click();
   }
 
   async removePartialBlackList(nth: number): Promise<void> {
-    const buttons = await this.webdriver.findElements(
-      By.css(".form-partial-blacklist-form-row .ui-delete-button")
-    );
-    if (buttons.length <= nth) {
-      throw new RangeError("Index out of range to remove partial blacklist");
+    const fieldset = await this.getFieldsetByLegend("Partial blacklist");
+    const deleteButtons = await fieldset.findElements(
+      By.css("[aria-label=Delete]")
+    );
+    if (deleteButtons.length <= nth) {
+      throw new RangeError(
+        `Index out of range ${deleteButtons.length} to remove partial blacklist ${nth}`
+      );
     }
-    await buttons[nth].click();
+    await deleteButtons[nth].click();
   }
 
   async addSearchEngine(): Promise<void> {
-    const rows = await this.webdriver.findElements(
-      By.css(`.form-search-form-row > .column-name`)
-    );
-    const button = await this.webdriver.findElement(
-      By.css(".form-search-form > .ui-add-button")
-    );
-    await button.click();
-    await this.webdriver.wait(
-      until.elementLocated(
-        By.css(`.form-search-form-row:nth-child(${rows.length + 1})`)
-      )
-    );
+    const fieldset = await this.getFieldsetByLegend("Search Engines");
+    const rows = await fieldset.findElements(By.css("[role=listitem]"));
+    const addButton = await fieldset.findElement(By.css("[aria-label=Add]"));
+
+    await addButton.click();
+    await this.webdriver.wait(async () => {
+      const newRows = await fieldset.findElements(By.css("[role=listitem]"));
+      return newRows.length == rows.length + 1;
+    });
   }
 
   async setDefaultSearchEngine(nth: number): Promise<void> {
-    const radios = await this.webdriver.findElements(
-      By.css(".form-search-form-row input[type=radio]")
+    const fieldset = await this.getFieldsetByLegend("Search Engines");
+    const radios = await fieldset.findElements(
+      By.css("[name=default][type=radio]")
     );
     if (radios.length <= nth) {
       throw new RangeError("Index out of range to set a default search engine");
     }
     await radios[nth].click();
   }
+
+  private async getFieldsetByLegend(legendText: string): Promise<WebElement> {
+    const fieldsets = await this.webdriver.findElements(By.tagName("fieldset"));
+    for (const fieldset of fieldsets) {
+      const legend = await fieldset.findElement(By.tagName("legend"));
+      if ((await legend.getText()) === legendText) {
+        return fieldset;
+      }
+    }
+    throw new error.NoSuchElementError(
+      `Unable to locate fieldset with legend: ` + legendText
+    );
+  }
+
+  private async blurActiveElement(): Promise<void> {
+    await this.webdriver.executeScript(`document.activeElement.blur()`);
+  }
 }
diff --git a/e2e/lib/JSONOptionPage.ts b/e2e/lib/JSONOptionPage.ts
@@ -20,9 +20,7 @@ export default class JSONOptionPage {
   }
 
   async getErrorMessage(): Promise<string> {
-    const error = await this.webdriver.findElement(
-      By.css(".settings-ui-input-error")
-    );
+    const error = await this.webdriver.findElement(By.css("p[role=alert]"));
     return error.getText();
   }
 }
diff --git a/package.json b/package.json
@@ -62,7 +62,6 @@
     "karma-webpack": "^4.0.2",
     "lanthan": "0.0.2",
     "mocha": "^8.1.1",
-    "node-sass": "^4.13.1",
     "prettier": "2.1.2",
     "prettier-eslint": "11.0.0",
     "react": "16.13.1",
@@ -73,7 +72,6 @@
     "redux-promise": "^0.6.0",
     "reflect-metadata": "^0.1.13",
     "request-promise-native": "^1.0.8",
-    "sass-loader": "^9.0.3",
     "sinon": "^9.0.3",
     "sinon-chrome": "^3.0.1",
     "style-loader": "^1.1.3",

diff --git a/src/console/components/Console.tsx b/src/console/components/Console.tsx
@@ -1,4 +1,3 @@
-import "./console.scss";
 import { connect } from "react-redux";
 import React from "react";
 import Input from "./console/Input";

diff --git a/src/console/components/console.scss → src/console/index.css b/src/console/components/console.scss → src/console/index.css
diff --git a/src/console/index.tsx b/src/console/index.tsx
@@ -5,6 +5,7 @@ import promise from "redux-promise";
 import * as consoleActions from "./actions/console";
 import { Provider } from "react-redux";
 import Console from "./components/Console";
+import "./index.css";
 import React from "react";
 import ReactDOM from "react-dom";
 

diff --git a/src/settings/components/form/BlacklistForm.scss b/src/settings/components/form/BlacklistForm.scss
diff --git a/src/settings/components/form/BlacklistForm.tsx b/src/settings/components/form/BlacklistForm.tsx
@@ -1,9 +1,29 @@
-import "./BlacklistForm.scss";
+import styled from "styled-components";
 import AddButton from "../ui/AddButton";
 import DeleteButton from "../ui/DeleteButton";
 import React from "react";
 import Blacklist, { BlacklistItem } from "../../../shared/settings/Blacklist";
 
+const Grid = styled.div``;
+
+const GridRow = styled.div`
+  display: flex;
+`;
+
+const GridCell = styled.div<{ grow?: number }>`
+  &:nth-child(1) {
+    flex-grow: 1;
+  }
+  &:nth-child(2) {
+    flex-shrink: 1;
+  }
+`;
+
+const Input = styled.input`
+  width: 100%;
+  box-sizing: border-box;
+`;
+
 interface Props {
   value: Blacklist;
   onChange: (value: Blacklist) => void;
@@ -19,37 +39,46 @@ class BlacklistForm extends React.Component<Props> {
 
   render() {
     return (
-      <div className="form-blacklist-form">
-        {this.props.value.items.map((item, index) => {
-          if (item.partial) {
-            return null;
-          }
-          return (
-            <div key={index} className="form-blacklist-form-row">
-              <input
-                data-index={index}
-                type="text"
-                name="url"
-                className="column-url"
-                value={item.pattern}
-                onChange={this.bindValue.bind(this)}
-                onBlur={this.props.onBlur}
-              />
-              <DeleteButton
-                data-index={index}
-                name="delete"
-                onClick={this.bindValue.bind(this)}
-                onBlur={this.props.onBlur}
-              />
-            </div>
-          );
-        })}
+      <>
+        <Grid role="list">
+          {this.props.value.items.map((item, index) => {
+            if (item.partial) {
+              return null;
+            }
+            return (
+              <GridRow role="listitem" key={index}>
+                <GridCell>
+                  <Input
+                    data-index={index}
+                    type="text"
+                    name="url"
+                    aria-label="URL"
+                    value={item.pattern}
+                    placeholder="example.com/mail/*"
+                    onChange={this.bindValue.bind(this)}
+                    onBlur={this.props.onBlur}
+                  />
+                </GridCell>
+                <GridCell>
+                  <DeleteButton
+                    data-index={index}
+                    name="delete"
+                    onClick={this.bindValue.bind(this)}
+                    onBlur={this.props.onBlur}
+                    aria-label="Delete"
+                  />
+                </GridCell>
+              </GridRow>
+            );
+          })}
+        </Grid>
         <AddButton
           name="add"
+          aria-label="Add"
           style={{ float: "right" }}
           onClick={this.bindValue.bind(this)}
         />
-      </div>
+      </>
     );
   }
 

diff --git a/src/settings/components/form/KeymapsForm.scss b/src/settings/components/form/KeymapsForm.scss