fix install types and test ids

AdguardTeam · Jan 24, 2025 · 9d5042b · 9d5042b
1 parent 681cdb0
commit 9d5042b
Show file tree

Hide file tree

Showing 11 changed files with 97 additions and 86 deletions.
diff --git a/client/src/helpers/helpers.tsx b/client/src/helpers/helpers.tsx
@@ -28,7 +28,7 @@ import {
     THEMES,
 } from './constants';
 import { LOCAL_STORAGE_KEYS, LocalStorageHelper } from './localStorageHelper';
-import { DhcpInterface } from '../initialState';
+import { DhcpInterface, InstallInterface } from '../initialState';
 
 /**
  * @param time {string} The time to format
@@ -217,9 +217,9 @@ export const getInterfaceIp = (option: any) => {
     return interfaceIP;
 };
 
-export const getIpList = (interfaces: DhcpInterface[]) =>
+export const getIpList = (interfaces: InstallInterface[]) =>
     Object.values(interfaces)
-        .reduce((acc: string[], curr: DhcpInterface) => acc.concat(curr.ip_addresses), [] as string[])
+        .reduce((acc: string[], curr: InstallInterface) => acc.concat(curr.ip_addresses), [] as string[])
         .sort();
 
 /**

diff --git a/client/src/initialState.ts b/client/src/initialState.ts
@@ -9,6 +9,14 @@ import {
 import { DEFAULT_BLOCKING_IPV4, DEFAULT_BLOCKING_IPV6 } from './reducers/dnsConfig';
 import { Filter } from './helpers/helpers';
 
+export type InstallInterface = {
+    flags: string;
+    hardware_address: string;
+    ip_addresses: string[];
+    mtu: number;
+    name: string;
+};
+
 export type InstallData = {
     step: number;
     processingDefault: boolean;
@@ -31,13 +39,7 @@ export type InstallData = {
         ip: string;
         error: string;
     };
-    interfaces: {
-        flags: string;
-        hardware_address: string;
-        ip_addresses: string[];
-        mtu: number;
-        name: string;
-    }[];
+    interfaces: InstallInterface[];
     dnsVersion: string;
 };
 

diff --git a/client/src/install/Setup/AddressList.tsx b/client/src/install/Setup/AddressList.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { getIpList, getDnsAddress, getWebAddress } from '../../helpers/helpers';
 import { ALL_INTERFACES_IP } from '../../helpers/constants';
-import { DhcpInterface } from '../../initialState';
+import { InstallInterface } from '../../initialState';
 
 interface renderItemProps {
     ip: string;
@@ -28,7 +28,7 @@ const renderItem = ({ ip, port, isDns }: renderItemProps) => {
 };
 
 interface AddressListProps {
-    interfaces: DhcpInterface[];
+    interfaces: InstallInterface[];
     address: string;
     port: number;
     isDns?: boolean;

diff --git a/client/src/install/Setup/Auth.tsx b/client/src/install/Setup/Auth.tsx
@@ -60,6 +60,7 @@ export const Auth = ({ onAuthSubmit }: Props) => {
                             <Input
                                 {...field}
                                 type="text"
+                                data-testid="install_username"
                                 label={t('install_auth_username')}
                                 placeholder={t('install_auth_username_enter')}
                                 error={fieldState.error?.message}
@@ -83,6 +84,7 @@ export const Auth = ({ onAuthSubmit }: Props) => {
                             <Input
                                 {...field}
                                 type="password"
+                                data-testid="install_password"
                                 label={t('install_auth_password')}
                                 placeholder={t('install_auth_password_enter')}
                                 error={fieldState.error?.message}
@@ -106,6 +108,7 @@ export const Auth = ({ onAuthSubmit }: Props) => {
                             <Input
                                 {...field}
                                 type="password"
+                                data-testid="install_confirm_password"
                                 label={t('install_auth_confirm')}
                                 placeholder={t('install_auth_confirm')}
                                 error={fieldState.error?.message}

diff --git a/client/src/install/Setup/Controls.tsx b/client/src/install/Setup/Controls.tsx
@@ -32,6 +32,7 @@ class Controls extends Component<ControlsProps> {
             case 3:
                 return (
                     <button
+                        data-testid="install_back"
                         type="button"
                         className="btn btn-secondary btn-lg setup__button"
                         onClick={this.props.prevStep}>
@@ -44,31 +45,24 @@ class Controls extends Component<ControlsProps> {
     }
 
     renderNextButton(step: any) {
-        const {
-            nextStep,
-
-            invalid,
-
-            pristine,
-
-            install,
-
-            ip,
-
-            port,
-        } = this.props;
+        const { nextStep, invalid, pristine, install, ip, port } = this.props;
 
         switch (step) {
             case 1:
                 return (
-                    <button type="button" className="btn btn-success btn-lg setup__button" onClick={nextStep}>
+                    <button
+                        data-testid="install_get_started"
+                        type="button"
+                        className="btn btn-success btn-lg setup__button"
+                        onClick={nextStep}>
                         <Trans>get_started</Trans>
                     </button>
                 );
             case 2:
             case 3:
                 return (
                     <button
+                        data-testid="install_next"
                         type="submit"
                         className="btn btn-success btn-lg setup__button"
                         disabled={invalid || pristine || install.processingSubmit}>
@@ -77,13 +71,18 @@ class Controls extends Component<ControlsProps> {
                 );
             case 4:
                 return (
-                    <button type="button" className="btn btn-success btn-lg setup__button" onClick={nextStep}>
+                    <button
+                        data-testid="install_next"
+                        type="button"
+                        className="btn btn-success btn-lg setup__button"
+                        onClick={nextStep}>
                         <Trans>next</Trans>
                     </button>
                 );
             case 5:
                 return (
                     <button
+                        data-testid="install_open_dashboard"
                         type="button"
                         className="btn btn-success btn-lg setup__button"
                         onClick={() => this.props.openDashboard(ip, port)}>

diff --git a/client/src/install/Setup/Devices.tsx b/client/src/install/Setup/Devices.tsx
@@ -1,22 +1,21 @@
 import React from 'react';
 
-import { Trans, withTranslation } from 'react-i18next';
-import flow from 'lodash/flow';
+import { Trans } from 'react-i18next';
 
 import Guide from '../../components/ui/Guide';
 
 import Controls from './Controls';
 
 import AddressList from './AddressList';
-import { DhcpInterface } from '../../initialState';
+import { InstallInterface } from '../../initialState';
+import { DnsConfig } from './Settings';
 
-interface DevicesProps {
-    interfaces: DhcpInterface[];
-    dnsIp: string;
-    dnsPort: number;
-}
+type Props = {
+    interfaces: InstallInterface[];
+    dnsConfig: DnsConfig;
+};
 
-const Devices = ({ interfaces, dnsIp, dnsPort }: DevicesProps) => (
+export const Devices = ({ interfaces, dnsConfig }: Props) => (
     <div className="setup__step">
         <div className="setup__group">
             <div className="setup__subtitle">
@@ -31,7 +30,7 @@ const Devices = ({ interfaces, dnsIp, dnsPort }: DevicesProps) => (
                 </div>
 
                 <div className="mt-1">
-                    <AddressList interfaces={interfaces} address={dnsIp} port={dnsPort} isDns />
+                    <AddressList interfaces={interfaces} address={dnsConfig.ip} port={dnsConfig.port} isDns />
                 </div>
             </div>
 
@@ -41,5 +40,3 @@ const Devices = ({ interfaces, dnsIp, dnsPort }: DevicesProps) => (
         <Controls />
     </div>
 );
-
-export default flow([withTranslation()])(Devices);
diff --git a/client/src/install/Setup/Progress.tsx b/client/src/install/Setup/Progress.tsx
@@ -1,21 +1,19 @@
 import React from 'react';
-import { Trans, withTranslation } from 'react-i18next';
+import { Trans } from 'react-i18next';
 
 import { INSTALL_TOTAL_STEPS } from '../../helpers/constants';
 
-const getProgressPercent = (step: any) => (step / INSTALL_TOTAL_STEPS) * 100;
+const getProgressPercent = (step: number) => (step / INSTALL_TOTAL_STEPS) * 100;
 
 type Props = {
     step: number;
 };
 
-const Progress = (props: Props) => (
+export const Progress = ({ step }: Props) => (
     <div className="setup__progress">
-        <Trans>install_step</Trans> {props.step}/{INSTALL_TOTAL_STEPS}
+        <Trans>install_step</Trans> {step}/{INSTALL_TOTAL_STEPS}
         <div className="setup__progress-wrap">
-            <div className="setup__progress-inner" style={{ width: `${getProgressPercent(props.step)}%` }} />
+            <div className="setup__progress-inner" style={{ width: `${getProgressPercent(step)}%` }} />
         </div>
     </div>
 );
-
-export default withTranslation()(Progress);
diff --git a/client/src/install/Setup/Settings.tsx b/client/src/install/Setup/Settings.tsx
@@ -19,7 +19,7 @@ import {
 } from '../../helpers/constants';
 
 import { validateRequiredValue } from '../../helpers/validators';
-import { DhcpInterface } from '../../initialState';
+import { InstallInterface } from '../../initialState';
 import { Input } from '../../components/ui/Controls/Input';
 import { Select } from '../../components/ui/Controls/Select';
 import { toNumber } from '../../helpers/form';
@@ -31,12 +31,27 @@ const validateInstallPort = (value: number) => {
     return undefined;
 };
 
+export type WebConfig = {
+    ip: string;
+    port: number;
+};
+
+export type DnsConfig = {
+    ip: string;
+    port: number;
+};
+
+export type SettingsFormValues = {
+    web: WebConfig;
+    dns: DnsConfig;
+};
+
 type StaticIpType = {
     ip: string;
     static: string;
 };
 
-type ConfigType = {
+export type ConfigType = {
     web: {
         ip: string;
         port?: number;
@@ -53,17 +68,17 @@ type ConfigType = {
 };
 
 type Props = {
-    handleSubmit: (data: any) => void;
-    handleChange?: (...args: unknown[]) => unknown;
-    handleFix: (web: any, dns: any, set_static_ip: boolean) => void;
-    validateForm: (data: any) => void;
+    handleSubmit: (data: SettingsFormValues) => void;
+    handleChange?: (data: SettingsFormValues) => unknown;
+    handleFix: (web: WebConfig, dns: DnsConfig, set_static_ip: boolean) => void;
+    validateForm: (data: SettingsFormValues) => void;
     config: ConfigType;
-    interfaces: DhcpInterface[];
+    interfaces: InstallInterface[];
     initialValues?: object;
 };
 
-const renderInterfaces = (interfaces: DhcpInterface[]) =>
-    Object.values(interfaces).map((option: DhcpInterface) => {
+const renderInterfaces = (interfaces: InstallInterface[]) =>
+    Object.values(interfaces).map((option: InstallInterface) => {
         const { name, ip_addresses, flags } = option;
 
         if (option && ip_addresses?.length > 0) {
@@ -99,7 +114,7 @@ export const Settings = ({ handleSubmit, handleFix, validateForm, config, interf
         watch,
         handleSubmit: reactHookFormSubmit,
         formState: { isValid },
-    } = useForm({
+    } = useForm<SettingsFormValues>({
         defaultValues,
         mode: 'onBlur',
     });
@@ -235,7 +250,7 @@ export const Settings = ({ handleSubmit, handleFix, validateForm, config, interf
                                 name="web.ip"
                                 control={control}
                                 render={({ field }) => (
-                                    <Select {...field}>
+                                    <Select {...field} data-testid="install_web_ip">
                                         <option value={ALL_INTERFACES_IP}>
                                             {t('install_settings_all_interfaces')}
                                         </option>
@@ -264,6 +279,7 @@ export const Settings = ({ handleSubmit, handleFix, validateForm, config, interf
                                     <Input
                                         {...field}
                                         type="number"
+                                        data-testid="install_web_port"
                                         placeholder={STANDARD_WEB_PORT.toString()}
                                         error={fieldState.error?.message}
                                         onChange={(e) => {
@@ -283,6 +299,7 @@ export const Settings = ({ handleSubmit, handleFix, validateForm, config, interf
                                 {isWebFixAvailable && (
                                     <button
                                         type="button"
+                                        data-testid="install_web_fix"
                                         className="btn btn-secondary btn-sm ml-2"
                                         onClick={() => handleAutofix('web')}>
                                         <Trans>fix</Trans>
@@ -323,7 +340,7 @@ export const Settings = ({ handleSubmit, handleFix, validateForm, config, interf
                                 name="dns.ip"
                                 control={control}
                                 render={({ field }) => (
-                                    <Select {...field}>
+                                    <Select {...field} data-testid="install_dns_ip">
                                         <option value={ALL_INTERFACES_IP}>
                                             {t('install_settings_all_interfaces')}
                                         </option>
@@ -353,6 +370,7 @@ export const Settings = ({ handleSubmit, handleFix, validateForm, config, interf
                                     <Input
                                         {...field}
                                         type="number"
+                                        data-testid="install_dns_port"
                                         error={fieldState.error?.message}
                                         placeholder={STANDARD_WEB_PORT.toString()}
                                         onChange={(e) => {
@@ -373,6 +391,7 @@ export const Settings = ({ handleSubmit, handleFix, validateForm, config, interf
                                     {isDnsFixAvailable && (
                                         <button
                                             type="button"
+                                            data-testid="install_dns_fix"
                                             className="btn btn-secondary btn-sm ml-2"
                                             onClick={() => handleAutofix('dns')}>
                                             <Trans>fix</Trans>

diff --git a/client/src/install/Setup/Submit.tsx b/client/src/install/Setup/Submit.tsx
@@ -1,20 +1,16 @@
 import React from 'react';
 
-import { Trans, withTranslation } from 'react-i18next';
-import flow from 'lodash/flow';
+import { Trans } from 'react-i18next';
 
 import Controls from './Controls';
+import { WebConfig } from './Settings';
 
-interface SubmitProps {
-    webIp: string;
-    webPort: number;
-    handleSubmit: (...args: unknown[]) => string;
-    pristine: boolean;
-    submitting: boolean;
-    openDashboard: (...args: unknown[]) => unknown;
-}
+type Props = {
+    webConfig: WebConfig;
+    openDashboard: (ip: string, port: number) => void;
+};
 
-const Submit = (props: SubmitProps) => (
+export const Submit = ({ openDashboard, webConfig }: Props) => (
     <div className="setup__step">
         <div className="setup__group">
             <h1 className="setup__title">
@@ -26,8 +22,6 @@ const Submit = (props: SubmitProps) => (
             </p>
         </div>
 
-        <Controls openDashboard={props.openDashboard} ip={props.webIp} port={props.webPort} />
+        <Controls openDashboard={openDashboard} ip={webConfig.ip} port={webConfig.port} />
     </div>
 );
-
-export default flow([withTranslation()])(Submit);